Photo shop Tutorials and more
SEARCH

PHOTOSHOP TUTORIALS

SITE NAVIGATION

SPONSORS

SITE INFO

Interface Button


Description: This tutorial will show you how to create a simple inset button for your user interface. The button is simple, but with some creativity, you can make some really cool interface with it.

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

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.

Here is how I used it on an interface.
You can DOWNLOAD THE PSD file to use or see how it was made.

User Comments

http://www.tuties.com - hacking, sex, photoshop, f | Oct/15/08 16:11
www.tuties.com - hacking, sex, photoshop, flash and much more tutorials.
ps fan | Jun/23/08 07:09
great job mate :)
Darcy | Feb/23/08 14:03
to get the white highlight out of the middle... just move it with your cursor while still in the option menu for it. Good job on the tutorial by the way!
stars25 | Jan/14/08 13:21
i followed everything but my white dot is always in the middle. i cant get it up in the corner.
Umair | Jul/20/07 01:00
nice
craig | May/23/07 00:33
great stuff
Manikandanbalaji | Mar/1/07 04:09
thanks Nathan great and easy tutorial good job
Brother.alshaikh | Jan/5/07 03:17
Gooood job
Hope | Jan/3/07 13:19
How theheck did you get the reflector light in the upper left? Mine keeps developing in the middle. I checked all the styles and everything matches.
D-Style | Oct/3/06 14:56
thanks Nathan great and easy tutorial
Click Here to View All Comments
Tried the tutorial? Post your comment and link to your artwork.
Your Name

Comment