Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Buttons are another aspect of web design where user-friendliness and consistency are extremely important. In this movie, I'm going to be showing you how to create buttons for a web site mockup. One of the things we have to account for is the fact that our content is not just being accessed through a web browser on a computer; people are coming to these web sites on mobile phones, tablet devices, using their fingers, using styluses, all types of different devices and input methods for clicking on the things that we create. Therefore, we have to create things that are both click- and touch-friendly.
So what is the actual target size for a "touch- and click-friendly button?" Well, according to several developer guidelines, a touch-friendly button can be anywhere between 25 and 35 pixels squared, so a 25 x 25 or 35 x 35 square. In my experience, I always err on the side of caution and go towards the 35-pixel size. Now they can be as wide as you want them to be; it's essentially the height that we're worried about here. So in order to start creating some buttons, I'm going to first switch to my Shape tool and my Rectangle tool and I'm just going to come out on the canvas and I'm going to click, one time.
When I click, it gives me the option to create a rectangle. This is probably the most precise way to create shapes. So I'm going to change the Width to 135 pixels, and I'll change the Height to 35 pixels. Once I hit OK, I get a new button right there. Now I'm going to switch to my Move tool with the letter V, and then I can move this into place just like that. So basically, I want a button down here that leads to more product information about this red robot that we're trying to sell. Now in keeping with the theme of the web site, I want to make this button this orange color up here.
So in order to do that, I'm going to come over to the right and I'm going to double-click on the layer thumbnail for this rectangle I created. And I can either use the orange that I've loaded into my color palette or I can simply move the color picker and sample the orange color from up there. Hit OK and there's my button. Now if I want to add some extras to this, I can. So I'll come over here and I'll double-click to the right-hand side and I'm going to add a stroke to this. I'm going to set it to the inside and I'll set that to 1 pixel. And for the Color, I'm going to select the same dark color as the robot's face.
And so now I'm also going to add a drop shadow to this, but the drop shadow is going to be a little different. I'm going to switch the mode of the drop shadow from Multiply to Normal, change the color to white, and I'm going to change the Distance to 0. It's almost like an outer glow in a way. And I'll back down the Size just a little bit. If you want to offset it a little bit, that's fine. Maybe go with Distance of 1 or 2 and then increase the Opacity to 100%. If I zoom in--and I'm doing this with Command+Plus or Ctrl+Plus on my keyboard--you can kind of see it's just kind giving a light edge to the outside.
If it doesn't give you enough definition between the background, that's okay. Just increase the Distance a little bit and then make sure you back down the Size, just kind of give it that little beveled edge. There we go! Hit OK. And so now I want to add some text to this as well. So I'm going to grab my Text tool by hitting the letter T. So I do that. I'm going to make sure Courier New is selected. I'm also going to make sure that white is my foreground color. And I'll click and I'll type out "More Info." I'm going to select this and then I'll shrink it down quite a bit.
I think 18 pixels should be enough. Grab my Move tool and just kind of move it in, something like that. Now I want to make sure that this text is sort of embossed into this. So in order to do that, I need to add a layer style to that as well. So I'll double-click out to the right-hand side of that layer. I'll add a drop shadow. And a quick way to make embossed text on something like this is to take the Size down to 0, uncheck your Use Global Light button, and change the Angle to -90, and then just dial down your Distance till it looks something like that.
See how it looks kind of like it's pressed in? And then if you want to adjust the Opacity a little bit, kind of back it down, maybe something like 45%, that looks good. And hit OK. So there we go! There's my button. I'll zoom out a little bit so you can see it. Here's it at 100%, what it's going to look like. So here's my More Info button. And so now what I'm going to do is select both of these layers in my Layers panel and I'm going to group them, and I'm just going to call this Button. Now I can actually duplicate that group and use it in different spots in my layout.
So I know that I want one of these on the homepage, so I'm going to keep this one, and I'll create a duplicate with Command+J or Ctrl+J on my keyboard; that duplicates that. If you're using an older version of Photoshop, like CS5 or earlier, what you can do is just simply take this, drag it and drop it down on the New Layer icon, and it will duplicate it for you. But in Photoshop CS6, I can actually use Command+J or Ctrl+J to duplicate groups. So I'll take this now and I'm going to drop it into the store, and then I'll take the original button and I'll drop it onto Content Home.
I'll hide the Content Home layer group and I'll turn on Content Store, and I'll expand it out so we can what's going on in there. So I've got Button copy. I'm going to change the name of that to Buy Now, and I'll use my Move tool to move it into place. I want it right underneath this. And then I'll create a copy, move it over, and create another copy. And I'm just hitting Command+J or Ctrl+J to do this, and move it over like that.
If you want to align them up, you can. You can even select each one that's underneath each one of the photos and line them up using the alignment tools. But for now, I'm just doing this for demonstration purposes, so I'm not real concerned about the alignment. And now I'll just come through and I'll type in "Buy Now," and we'll move that back towards the center, collapse up that button, go to the second one, expand it out, double-click, type out "Buy Now," and I'll move that in.
And so all I'm doing is coming over to the Layers panel, I'm expanding out the groups for each one of the buttons, I'm finding the text layer that says More Info, I'm double-clicking on it, and then I'm changing it to Buy Now. And you can click the check mark in the top of the Options bar or you can simply click on the layer thumbnail again to commit to that change. Then I'm grabbing the Move tool and centering it in the middle of the button, just like so. And I'll close that up, and I'll close up the Content Store group.
And so now, I actually have the same button all over my web site; it has different names of course, but now I have that same button. It is touch-friendly, because it's at least 35 pixels tall. It's 135 pixels wide. It fits nicely underneath each one of store items. And if I turn this off and turn on Content Home, I've got the same type of button right there. So I've got a consistent look and feel. I've also got a touch- and click-friendly interface. And that's really all there is to it, and those are the main things you need to be concerned with as you design your sites.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.