Create a 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 glossy button in Photoshop.

Glossy button example

Steps

  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

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

  3. Choose a background color. In this example I used #006662.

  4. Create the button background with rounded corners by first selecting the Rounded Rectangle Tool (U). Once selected, there is an important option to choose to make the process easier. In the options toolbar (show this toolbar by clicking Window > Options) the second choice includes three options: 'Shape Layers', 'Paths' and 'Fill Pixels'.

    Fill Pixels

    Click the third icon called 'Fill Pixels'. Now click on the document and drag to create the background. In this example the radius was 10 pixels.

    5. Create a button background with rounded corners

  5. Make a selection of the button background by holding down Ctrl/Cmd and clicking on the layer we just created.

    6. Select the button background

  6. Contract the current selection by selecting Select > Modify > Contract and choosing 1 pixel in Contract dialog.

    7. Contract the selection by one pixel

  7. Choose the color 'White'.

  8. Create the top gloss effect by first clicking the Gradient Tool (G). Next click right above the button background and drag just below the button background.

    9. Create a vertical gradient

  9. Reduce the the layer opacity to 80% by pressing '8'.

    10. Vertical Gradient at 80 precent

  10. Delete the bottom half button gradient by clicking the Rectangular Marquee Tool (M) then click halfway down and to the left of the button. Drag past the bottom right corner of the button. Then press the Delete key.

    11. Delete the bottom half of the gradient

  11. Add a bottom gradient by clicking the Gradient Tool (G), then clicking below the button and dragging about one third of the height of the button.

    12. Add bottom gradient

  12. Change the blending mode 'Overlay' by clicking Layer > Layer Style > Blending Options... Under the Blend Mode drop down choose Overlay.

    13. Change Blending Mode of Bottom Gradient to Overlay

  13. Add a button label by choosing the Text Tool (T) and clicking on the document and typing in a label (ie. Glossy Button).

    14. Add button label

  14. Click on the layer below the button label (the bottom gradient layer) and create a new layer by clicking Layer > New > Layer... (Ctrl/Cmd Shift - N).

  15. Make a selection of the button label text by Ctrl/Cmd clicking on the button label layer. Expand the current selection by selecting Select > Modify > Expand and choosing 1 pixel in the 'Expand By' field of the 'Expand Selection' dialog.

  16. Choose the color Black as the Foreground Color.

  17. Fill the selection by clicking Edit > Fill > OK (Alt/Option - Delete)

    18. Add background to button label

Downloads

References

Share This Article