Create a Simple Glossy Button in Photoshop
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.
Steps
-
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.
-
Create a new layer by clicking Layer > New > Layer... (Ctrl/Cmd Shift - N) and clicking OK.
-
Create a new marquee 200 by 50 pixels by selecting the Rectangular Marquee Tool (M) and clicking and dragging on the document.
-
Choose your background color. I chose a dark red (#660000).
-
Fill the selection by clicking Edit > Fill > OK (Alt/Opt - Delete).
-
Create a new layer.
-
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.
-
Create a gradient by selecting the Gradient Tool (G). Then click just above the selection and drag to the bottom of your selection.
-
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.
-
Change the gradient layer opacity to 60% by changing the Opacity drop-down in the Layers Tab or by clicking '6' for 60 percent.
-
Create a button label by clicking the Horizontal Text Tool (T) and clicking inside your button. Type in your button label.
Next Steps...
Where to go from here? The next tutorial will cover rounded corners, more advanced labeling and gloss.
Downloads
- Example Photoshop File: SimpleGlossyButton.psd