Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
adv banner
Photoshop  Home Photoshop Web Layout Interface Button
rss

Interface Button

Author: Tutorialwiz.com More by this author


Start a new document and use the circle shape tool to create a circle. Hold down SHIFT while your drawing the circle to get a perfect circle.

My circle is 27px by 27px.

Now we just apply a whole heap of layer styles to it :).

Outer Glow

Blue: #4991EA

Bevel and Emboss

Black: #000000 and Blue: #6EC0FF

Gradient Overlay

The gradient color: #FFFFFF > #7BD5FF > #1D589A

Stroke

The Gradient Color: #FFFFFF-> #21577C

Create a new layer.

Then Use the circular marquee tool and make a selection smaller than the button and fill it with white.

CTRL+D to deselect, then use the eraser tool. brush size 27 soft edge

Interface Button Tutorial: Final Result

Then erase the circle leaving just the top edge, shaped like the moon.

Set this layer's blending mode to "Overlay". Now use your own creativity to put it into use.

Interface Button Tutorial: Final Result

Here is how I used it on an interface.

You can Download .psd file file to use or see how it was made.



Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Interface Button"