Round
Glassy Buttons in Photoshop
Photoshop Tutorial
An interface would never be complete without the little buttons that appear to be made of glass. This tutorial will show you how.
INGREDIENTS
by Colin Smith
- Layers
- Layer Masks
- Gradients
- Merging Images
- Opacity
- Difficulty 7/10
1
As always, start with
a transparent layer.
Draw a circle using the circular marquee tool. Tip: Hold the alt/option
key to draw from the center and hold the shift key to draw a perfect circle.
2
Now we want to create
a circular gradient, from bark to light blue. Use the settings here, then
drag from the middle of the circle. Don't deselect.
3
Create a new layer
and change the gradient setting to this: Linear, Foreground to transparent
and change your forecround color to white.
4
Drag the gradient tool from the top to the bottom, with the top white.
5
Press Ctrl/Cmd+T for
the free transform tool
Bring the bottom to almost 1/2 way. Bring the top and sides in a little
bit until it looks similar to the picture.
6
For added realism add a slight gaussian blur to the highlight and drop the opacity a little.
7
You may also add text. Put the text layer behind the highlight and lower the opacity.
Add the buttons to your interface - Merge Visiable and drag the buttons to your interface.
