Advertisement
  1. Code
  2. Mobile Design
Code

Learn to Create Buttons in Photoshop

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Beginning Photoshop for Developers.
Drawing Custom Shapes

We’ve gone through a lot already in this series. I would like to think that from what we've covered so far you could start to design some pretty cool stuff! For this tutorial on buttons, I'm going to show you how to make an icon using just four circles. Yep, that’s it, just four! While four circles will get you something pretty cool, I'll give you even more bang for the buck by showing you how to enhance the graphic by adding two more circles. Let’s get drawing!

Creating Buttons

Final Results

This is what we are going to end up with. This same technique will work for pretty much any shape, so when we are done, you can create a square or a rectangle with rounded corners as well. Experiment. Changing colors should be pretty simple so if you aren’t down with the green, change it up. Learn a little color theory in one of my previous posts to optimize your desired effect.

  1. Open Photoshop and create a new document.
  2. Final Results

    I used the presets above for simplicities sake and since I want these icons in my mobile app. The presets might have to be changed based on how you want to use your buttons.

    Final Results
  3. Select the Ellipse shape tool (u) from the toolbar.
  4. You can also choose the Ellipse tool from the option bar at the top.

    Final Results
  5. Hold the SHIFT key down and create a circle
  6. This is going to be the size of your button so judge size accordingly. A new layer with the name Shape-1 should have been created in your layer palette.

  7. Click on the name ‘Shape-1’ in the layer palette to rename it.
  8. Name your layer something descriptive or easy to remember. I named mine base because this is the starting layer and everything will be built from here.

  9. Press Enter to save the changes.
  10. Final Results
  11. Double click the color swatch on the ‘base’ layer color swatch to change the color.
  12. Choose the color you want to make your button. I used #529655.
  13. Final Results
  14. Double click the layer or click the ‘Add a layer style’ button from the layer palette.
  15. Choose Gradient Overlay
  16. We are going to create the nice little highlights and shadows that you are seeing in the finished piece. Gradients are perfect for that effect and can be used in lots of different creative ways.

    Final Results
  17. Double click the gradient color swatch.
  18. Here we are going to add three colors to our gradient, a highlight, a shade and something in between. Highlight meaning lets add some more green and white and less red and blue. Shade meaning take out some green and blue. I used highlight - #00ff24, something in between- #00bb23 and shade- #00891a.

    Final Results
  19. Click OK to accept the gradient settings.
  20. Final Results
  21. Choose ‘Reflected’ from the gradient style drop down box.
  22. Click OK to close the layer style window.
  23. Final Results

    Looks kind of goofy now, huh? Let’s get another circle on there quick.

    Final Results
  24. Select the Ellipse shape tool (u) again from the toolbar.
  25. Final Results
  26. Now without holding SHIFT down like we did before, try drawing the same circle just not quite as tall.
  27. NOTE: Start at the top and use the space bar while drawing or check ‘from center’ from shape options and line it up with the middle of the previous circle.
    A new layer with the name Shape-1 should have been created in your layer palette.

  28. Click on the name ‘Shape-1’ in the layer palette to rename it.
  29. Name your layer something descriptive or easy to remember. I named mine radial and that will make a little more sense here in a second.

  30. Press Enter to save the changes.
  31. So you should now have two layers, base and radial in your layer palette.

  32. Double click the layer or click the ‘Add a layer style’ button at the bottom of the layer palette.
  33. Choose Gradient Overlay.
  34. Final Results
  35. Double click the gradient color swatch.
  36. Final Results

    Now we are just going to use two colors. #1be220 for the highlight and #529655 for the darker color.

  37. Click OK to accept the gradient settings.
  38. Final Results
  39. Choose Radial from the style drop down box
  40. Click OK to close the layer style window.
  41. Final Results

    Now its starting to look pretty good. Two circles down, one to go. We are going to add one more circle that will be our highlight.

    Final Results
  42. Create a new layer and name it highlight.
  43. Choose the Ellipse marquee tool (M) from the toolbar.
  44. We are doing this one a little differently just to show you how to carry out similar effects with different tools. For glares though, I find the marquee tool is a little easier to use than the shape tool.

    Final Results
  45. With the highlight layer selected, create a circle about the same height as you did for the radial layer except a little more narrow.
  46. Choose White as your foreground color in the toolbar.
  47. With our selection created, choose the Gradient Tool (G) from the toolbar.
  48. Final Results
  49. Choose Foreground to Transparent from the gradient option bar.
  50. Click and drag from the top of the selection to the bottom of the selection.
  51. Final Results

    Nice huh? We might want to make it a little more subtle, so lets adjust the opacity a little bit. With the highlight layer still selected:

  52. Adjust the transparency from the layer palette. I changed it to 80%.
Final Results

There you have it. Three little circles with some different styles and we have a sweet little icon. About the simplest button you can make, that actually looks good anyways.

If you want to give your icons that little bit extra, lets add a little more depth. A little drop shadow should do the trick. Two more circles anyone?

  1. Select the base layer.
  2. Final Results
  3. Right click and choose Duplicate Layer.
  4. Instead of renaming the layer, we will just use the default name and use the color to differentiate them.

  5. Double click the color swatch on the duplicate layer.
  6. Final Results
  7. Change the color to black or #000000
  8. Final Results
  9. Turn off the Gradient Overlay on the duplicated layer by clicking the eye icon in the layer palette.
  10. Final Results
  11. With the black layer selected, drag the duplicated layer below the 'base' layer.
  12. Note: You're not going to see any change to the image quite yet.

  13. Choose the move tool (V) from the tool bar.
  14. Now use your down key on the keyboard and press it three times.
  15. Final Results

    We just moved the layer down a little bit (3 pixels) so we have little shadow peaking out behind the base layer.

  16. Change the opacity of the black layer to 50% from the layer palette.
  17. One more shadow to go and we’re done-done. That's an industry term.

    Final Results
  18. Create another new layer and name it shadow.
  19. Note: Drag the layer to the bottom of the layer palette, under the black circle we just created if it's not already.

  20. Choose the Ellipse marquee tool (M) from the tool bar.
  21. Final Results
  22. Drag an Ellipse at the bottom of the button and make it the same width as the 'base' circle, but not very high.
  23. This is going to make it look like the button is sitting on a surface.

    Final Results
  24. Click SHIFT f5 or go to Edit>Fill. Fill the selection with black.
  25. Final Results
  26. Change the opacity of the shadow layer to 30% and step away from the computer.

How did yours turn out? As you can see you can overlay any type of icon or photoshop shape on this button and you can have a nice little icon set to use for you app.

See what I mean?

Final Results

One reason I like to use the opacity for the shadows instead of just choosing a gray color is because when we save this, we want to use a format that supports transparencies. The opacity will be preserved and no matter what the background color, the shadows will look good.

I hope you found this tutorial useful.

Next we will look into Image Optimization for mobile devices as well as a little known tool within Photoshop that makes prototyping a breeze.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.