Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating buttons

From: Photoshop CS6 for Web Design

Video: Creating buttons

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.

Creating buttons

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.

Show transcript

This video is part of

Image for Photoshop CS6 for Web Design
Photoshop CS6 for Web Design

75 video lessons · 49410 viewers

Justin Seeley
Author

 
Expand all | Collapse all
  1. 1m 9s
    1. Welcome
      48s
    2. Using the exercise files
      21s
  2. 25m 50s
    1. Designing for screens
      1m 8s
    2. Decoding screen size and resolution
      3m 9s
    3. Exploring the PSD-to-HTML workflow
      2m 25s
    4. Setting up Photoshop for web work
      5m 29s
    5. Creating a new document for web
      2m 36s
    6. Creating a new document for mobile
      4m 24s
    7. Setting up a responsive web layout
      3m 31s
    8. Creating email newsletter documents
      3m 8s
  3. 20m 39s
    1. Adjusting color settings
      4m 13s
    2. Understanding web color
      4m 0s
    3. Creating a color palette
      4m 56s
    4. Creating custom swatches
      3m 34s
    5. Applying color to shapes and graphics
      3m 56s
  4. 20m 36s
    1. Exploring the Layers panel
      4m 9s
    2. Renaming and grouping layers
      7m 19s
    3. Searching and filtering layers
      3m 11s
    4. Using layer comps effectively
      3m 4s
    5. Using automatic layer selection
      2m 53s
  5. 29m 2s
    1. Using vector shapes vs. pixel shapes
      3m 31s
    2. Creating vector shapes
      5m 2s
    3. Working with fills and strokes
      4m 36s
    4. Working with Smart Objects
      7m 47s
    5. Importing images
      3m 57s
    6. Cropping and resizing images
      4m 9s
  6. 28m 48s
    1. Planning your project
      3m 13s
    2. Using guides and rulers
      6m 40s
    3. Using a grid system
      8m 28s
    4. Developing a layout with shape layers
      4m 4s
    5. Making pixel-perfect adjustments
      6m 23s
  7. 23m 19s
    1. Using point text vs. paragraph text
      2m 10s
    2. Using text as text vs. using text as an image
      2m 47s
    3. Understanding web-safe fonts
      2m 41s
    4. Inserting placeholder text
      4m 2s
    5. Creating and using character styles
      2m 37s
    6. Creating and using paragraph styles
      6m 11s
    7. Creating editable 3D text
      2m 51s
  8. 26m 54s
    1. Understanding layer styles
      7m 0s
    2. Creating and using drop shadows
      3m 23s
    3. Creating better bevels
      6m 9s
    4. Simulating metallic textures
      5m 8s
    5. Saving and applying layer styles
      2m 48s
    6. Turning layer styles into independent layers
      2m 26s
  9. 50m 23s
    1. Starting with a wireframe
      54s
    2. Organizing page structure
      2m 29s
    3. Adding master elements
      5m 37s
    4. Creating navigation
      4m 36s
    5. Working with photographs
      4m 0s
    6. Working with text
      8m 31s
    7. Creating media placeholders
      7m 22s
    8. Creating buttons
      7m 15s
    9. Creating form fields
      7m 54s
    10. Simulating pages with layer comps
      1m 45s
  10. 33m 38s
    1. Understanding slicing
      2m 4s
    2. Slicing up a mockup
      4m 15s
    3. Understanding web file formats
      4m 3s
    4. Exploring the Save for Web dialog
      5m 3s
    5. Optimizing photographs
      4m 17s
    6. Optimizing transparent graphics
      4m 56s
    7. Saving Retina display graphics
      5m 34s
    8. Using the Image Generator (NEW)
      3m 26s
  11. 10m 40s
    1. Understanding image sprites
      1m 25s
    2. Creating a sprite grid
      2m 54s
    3. Assembling a sprite
      4m 51s
    4. Optimizing sprites for the web
      1m 30s
  12. 18m 6s
    1. Creating a basic action
      5m 28s
    2. Exploring batch processing
      2m 55s
    3. Creating droplets
      3m 20s
    4. Using the Fit Image command
      4m 5s
    5. Using the Image Processor
      2m 18s
  13. 6m 56s
    1. Integrating PSD files with Dreamweaver
      3m 22s
    2. Integrating PSD files with Fireworks
      1m 59s
    3. Integrating PSD files with Muse
      1m 35s
  14. 50s
    1. Goodbye
      50s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Photoshop CS6 for Web Design.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.