Login Screens - Backgrounds & Buttons

Arend Pryor
A free video tutorial from Arend Pryor
Top Rated Instructor, Sketch, Web & Mobile Design, & Health
4.2 instructor rating • 8 courses • 39,510 students

Learn more from the full course

Hands-On Sketch Masterclass - Learn Web and Mobile Design

Master Sketch for Mobile, Website and Logo design. Popular plugins, challenging projects and resources.

15:45:20 of on-demand video • Updated May 2018

  • Master one of the hottest programs for graphic design
  • Obtain the skills and confidence to create app screens, logos and webpages
  • Learn about plug-ins and boost your productivity
  • Export your designs and send to clients or developers
  • Test your skills with design challenges and assignments
English [Auto] So in this first video we're going to be talking about various types of graphic backgrounds. I'm going to run through a few different types of buttons. Go ahead and jump in a sketch. Make it happen. So I've got some examples here that we're going to use. You probably noticed the first one from the last video. Really cool background. I'm definitely a sucker for graphic backgrounds I like the the big photos that are nice and clear and look really cool some of the blurred backgrounds are nice too. Anyway before we get started on that because I'm using now I want to give attribution to the guy who created this screen names. Tamala maybe that's a nickname. No idea. Don't know him personally. Find him at Samoa dot com if you want to look him up. So graphic background what I've got here is just a rectangle drawn out same shape as this or seeing it same size. And I'm going to just drag one of these over the top of it and apply a mask in order to get that graphic backgrounds so I'll take this first one I get over here. I'll come over here into my layers panel and hold down command and choose my rectangle so I've got those two selected and then I'll come up here and click mask. So there is my background if I want to play around with it at this point I'll just come in here like that down arrow. Select my image and you'll see the outline is still here. And I can begin to manipulate it. I can drag it up I can drag it down. I can click over here on the side. Hold down Shift definitely one whole downshifts you keep proportions and you start resizing you don't want to go too far and you're going to see your background. Right right about there is a good turn that one off for a minute and let's drag this guy in here and you can actually apply that same line. I'll take this road wall paper drag it within my folder and that will automatically apply that mask to this image so I can kind of switch back and forth to see what I like better. And Same deal here. I can just grab it move it around and manipulate it as I see fit. Now with this select and I can also if that's a little too bright I can come over here into the inspector recolor adjust I can drop the brightness down a little bit. Play around with different colorings you can apply some blur which we'll talk about later but you get the basic idea. Now what you don't want to do is take an image. That's way too small. It will add this one here. Many group will drop that into the fold or just like we did before. So the mask is applied automatically and now we start stretching this out and hold down shift and just try to get it to the same proportions. It's going to start getting way pixellated depending on the image you grab. And it's just not going to look as good. So when you're looking for images you really want to find something that's nice and big that's going to be bigger than the art board that you're looking for. Are you going to be using so that it can be kind of scaled down and you don't have to scale up that's really going to mess up your image quality. So I'll remove that. Let's stick with the stargazing portion. Let me move this over a little bit. Keep it all to the side. Now let's go ahead and start creating some buttons. So what we have here are some kind of Halliburton's with some text in the middle and to get that same effect of a hit are a rectangle on my keyboard so I can draw one out. Don't worry about the exact proportions but I'll draw out something like that. Let's get it centered. So I'll just move it until I see my my grid line there and I know that I'm centered case I'll keep that. Now I'm going to come in to duplicate that. And what I want to do is change the color of this. If you look in the layers panel I have a rectangle copy selected. So this is my original. This is the one I just created by hitting command D. Come over here. I like to change the fill color just so I can see what I'm doing and what I'm going to do. If I can do it I'll select that zoom in a bit and I'll start subtracting over here and the inspector and I could go about this a few different ways you can grab a quarter you can start resizing and see just how thick you want it. You can hold down all shift with these kind of rectangles it doesn't do it really proportionately. So I don't like to do that but do as I'll start subtracting the width here and I'll figure out just how thick of a border I want all the way around my button so maybe zoom out a little bit and see you know does that look good. Is that a border that I can work with. I think that's pretty good. Maybe go a little bit more so I win about that start over. So one two three four I went about four pixels so I'll double that to account for the other side as well. One two three four and then I'll do the same thing for the height so I'll just subtract eight. One two three four five six seven eight. So now when I take this top top shape and center it this is the border that I'm going to want around the outside edge and it's not set in stone you can always go back and change it later if it ends up being a little too thick a little too thin. What have you now in order to get that seat through effect. I have two shapes here in my layers panel I'm going to select them both. So hold down shift. So like those. And I'm going to choose subtract. Now talked about this in the basic section. The shape on top is going to subtract from the shape underneath. So there we go. It just kept the outside border. If I want to change that further I can come over here in my layers panel shoes and rectangle copier whatever the one is on top and I can start manipulating that and make it bigger make it smaller what ever i want. All right so we've got that let's go ahead and put some text in there. We probably want to change the color. This one is a little bit thicker than what they have over there. So if you wanted to change it you definitely could I'll change the color to maybe all the way white and just to go for a bit of an effect I think I'll drop the opacity down a little bit. But I can see kind of see through here. They can make out the shadow of the kid to give it that hollow button feel. Hit t for text and will put some text in here. Sign in with the white caps lock and you got to spell it right. Sign in with Twitter. Center and wherever you want to put it. OK now that I've got that and because I'm going to duplicate this I want to make sure that when I duplicate my text that it's set up the way I want it to I don't want to have to reposition if I have it at the right distance here but to hold down and see just how far it is from the edge. Looks like I've got maybe 28 maybe I want to do it like 20 pixels. I want to keep it consistent. What I don't want to do with my text is have the alignment centered because when I duplicate this whole at all click and drag out a copy. When I type something else in here the scale it's not going to be center or it's not going to be left alone like this one is. So now if I delete that get out of here if I select this and I start with left the line text which is what I want when I come in. Draga I copy down and I edit this it will stay aligned just like it wasn't before and little bit less work for me in the long run. So working smarter not harder. All right so we've got this little icon here. Let's go ahead and create that real quick. Not too difficult. It zoomed way in here and hit Elford line. Draw something out let's go 17 in length. Thicken it up to get to them and to remove that point five on here on the x coordinate. Just to keep it make it easier to align it Elford line again. Draw this one out get it to 17 as well. Bump it up to two here for the thickness you'll see that this is at point five sometimes that will cause an issue with getting things aligned. Here we go. OK so now I've got this pretty much the way I want it let's select both of these guys I'm home down shift clicking both. I mean a hit command a group it let's call this era cats arrow icon click or rotate ring around or go enter. Get it centered. Zoom out of it. So now just like we did before we could take this icon and we can drop the opacity down just a little bit just to stick with that halo feel. Details like that are definitely important we'll do the same thing with our text here. We kept thinking it up if we want to you I think I'll just leave it drop the opacity down just a little bit. All right so now we have a button let's go ahead and group all of this just so we can reuse it. I'm holding down shift and selecting all my elements here. I hit command g to group it call this sign in button and now we're going to duplicate that so command d duplicate the whole thing and we can just move it down and hold it down shift and using my arrow key. And I can go in and edit this text because we've got the alignment the way we want it all change just the password that you got to have all caps. There we go. So minimal work. We already have the opacity set like we like it. We have the icon here and we got our text format of the way we want it. So there you go there's your Halliburton's. All right so now what about some of the other types of buttons. I'm going to keep what I have here and I'll hold down. All right I got a copy of this. So what about if you wanted a solid color background button. So probably actually just delete this. Let's draw a new one. So I might have something over here and let's get the same dimensions here. Got 83 by for 69 469 this change just 83 not 83 but 83. Pick a color that we like add some text get that centered. So a lot of different options and then we can just make this bold. Now depending on the color you select for your background might be hard to see your text. So you have to think about that kind of stuff. If we did have that bright color and we wanted to go with that we could take our text here. And one way around that is you could add in a shadow that would allow you to see a little bit more and add a little bit of an x value y value just to make it a little more readable. Increase the size a little bit. So there's another type of button. If you wanted something with rounded corners come up here to the radius we could do a radius of three. So it has slightly rounded corners. You can get a little bit more of five 10 is a pretty nice look. The thing I would say is that be consistent with your book. And so if I was going to have this button on the screen and maybe it doesn't say sign and maybe it's something else I would keep it consistent with the way I'm doing my other buttons so I probably have Halliburton as well or at least at the very least I'm going to use a colored background on this. I would make this either make them all have rounded corners or all have straight edge corners. Another style of button that I see that I really like if you use it consistently is to let's just bump up the radius all the way so it's a rounded to a radius of 50 and we'll set the color to do a linear gradient. Let's do it. Left to right. He's one of these redetermine gradients. That's ugly. That's not too bad. Let's move this over this way over that way. So gradient button you could have different buttons here. You could have this as well as some solid color buttons like those as well. Those are pretty cool. Another thing I like stepping back for a minute to our other design. Back back back spring a radius back down to about 10 is adding a little bit more detail to your button. What do I mean by that. Well let's zoom in here a bit. Let's add a shadow to the background. That's nice. So right now we just have a shadow of two for a Y and the Y is going to push from the top down. So as I increase my y it's going to get darker there. I missed it too. I'll add it to for the X which is going to push it from left over to the right. So I got a little more detail there. Very subtle change but very nice. Another thing you can do to add a little bit of complexity make it a little more detailed is an inner shatter. So I will Let's see how do we want to do this. I'll use the same color but then light it up just a little bit before I do. Let's get the the x and y values and then do a two and two to keep it consistent with a shadow on the bottom. You can do that to have kind of a beveled look. But what I'm going for is something a little bit different. I'll drop the blurred down to nothing. Well select our color here. I'm going to choose this color but I'm going to lighten it up so I'll grab and move it over till it starts getting a little bit wider. Two lights can bump this up a little bit more zoom out. So now you have a button with a little bit more feel a little bit more detail I should say than just a standard solid block button. So there's definitely added details you can add to your bones to make them stand out just a little bit more and that's just one example. All right so we've talked about quite a few different types of buttons. We went over a graphic backgrounds and the do's and don'ts there and I think he got a good idea of different ways to create your buttons and add details and things you can do to change them around and make him stand out. That's it for this video. And I will see you in the next.