Simple Photoshop Glassy Buttons

The Completed Piece

Setup

1. Create a New Photoshop File with the following attributes
   1. Width and Height: 200 pixels
   2. Resolution: 72 pixels/inch
   3. Contents: Transparent

Design

1. Select the Ellipse Tool (Fig 1)
   1. FIG 1.
      
2. Draw a circle. To create a perfect circle from the center out hold down Alt + Ctrl while drawing. Your circle will be filled with your foreground colour (mine is set to white) at this stage it doesn't matter what your foreground colour is.
3. In your layers palette you should now have a layer called Shape 1. Rename this layer by double clicking Shape 1 text and entering Base Shape as your new layer name (Fig 2).
4. Create a new layer by clicking on the new layer icon in you layers palette. (Fig 2 Section A)
   1. FIG 2.
      
5. Rename the New layer Button Gradient
6. Making sure the Button Gradient layer is selected hold Ctrl and Click on the Base Shape Layer. You should now have a circular selection that looks like Fig 3.
   1. FIG 3.
      
7. Select The Gradient Tool if you can't see the Gradient tool in your toolbar it maybe hidden under the Paint Bucket Tool simply click and hold your mouse button and on the paint bucket tool and you should be able to see the gradient tool in the flyout menu.
8. In the Options bar across the top of your application select radial gradient. (Fig 4)
   1. FIG 4
      
9. Set your foreground colour to #FFFFFF and your background colour to #686868
10. Now fill your selection with a radial gradient starting at the bottom of your circle (Fig 5)
    1. FIG 5.
       
11. In your options bar change your gradient type from radial to linear (Fig 6 Section A)
12. Change your gradient type from Foreground to Background to Foreground to Transparent (Fig 6 Section B). What this does is allow your gradient to fall off in transparency as it progresses.
    1. FIG 6 (Note: this image is in greyscale for faster loading your gradient options will have colours in them)
       
13. Create a New Layer and rename it Glassy Glare.
14. Working on the layer Glassy Glare, draw a linear gradient starting at the top of your circular selection and ending at the bottom. Hold Shift while you're drawing to get a perfectly straight gradient. Fig 7.
    1. FIG 7
       
15. Hold Ctrl + D to remove your selection
16. Select the Edit Menu > Transform Scale. You should now see a bounding box around your glassy glare
17. Using the control points sale and reposition your glass glare down until it looks like Fig 8.
    1. FIG 8.
       
18. Press Enter to apply your transformation.
19. Next We'll add the finishing touches to this piece. Select the Base Shape Layer.
20. Double Click on the blank space next to the layer name to bring up the layers style menu. (Fig 9)
21. Select the Stroke Option (Fig 9 Section A)
22. Double on the colour swatch and give the stroke a colour of 828282 (fig 9 Section B)
    1. FIG 9 (Note: this image is in greyscale for faster loading)
       
23. Add some text, background colour and here's the Completed Piece (Fig 10)
    1. FIG 10.
       
24. We've made the source file for this tutorial freely available for download and modification. If this tutorial was helpful or you had questions concerning anything we covered please contact us.

Return to Tutorials Main Page
Back to Top