Create a Simple Glossy Button in Photoshop

by William Malone

A popular interface design technique is adding a gloss effect to interface elements. This tutorial will show the step by step process of designing a simple glossy button in Photoshop.

Simple glossy button example


  1. Create a new image by clicking File > New... (Ctrl/Cmd - N). Enter 240 by 90 pixels in the Width and Height fields. Then click OK.

  2. Create new 240 by 90 pixel sized photoshop document

  3. Create a new layer by clicking Layer > New > Layer... (Ctrl/Cmd Shift - N) and clicking OK.

  4. Create a new marquee 200 by 50 pixels by selecting the Rectangular Marquee Tool (M) and clicking and dragging on the document.

  5. Create a marquee 200 by 50 pixels width

  6. Choose your background color. I chose a dark red (#660000).

  7. Fill the selection by clicking Edit > Fill > OK (Alt/Opt - Delete).

  8. Create a marquee 200 by 50 pixels width

  9. Create a new layer.

  10. Select the color 'White'. How?

    On the keyboard press: d. This will choose the default colors (aka: black foreground color and white background color). Next press: x. This will swap the foreground and background color. The foreground color will then be white.

  11. Create a gradient by selecting the Gradient Tool (G). Then click just above the selection and drag to the bottom of your selection.

  12. Create a verticle gradient

  13. Next we delete the bottom half of the button. Again select the Rectangular Marquee Tool (M) and click to the left of your button about halfway down and drag pass the bottom right of the button. Click delete.

  14. Button with half gradient

  15. Change the gradient layer opacity to 60% by changing the Opacity drop-down in the Layers Tab or by clicking '6' for 60 percent.

  16. Button with half gradient

  17. Create a button label by clicking the Horizontal Text Tool (T) and clicking inside your button. Type in your button label.

  18. Simple glossy button

Next Steps...

Where to go from here? The will cover rounded corners, more advanced labeling and gloss.



Share This Article