Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Interface Button

Interface Button


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 :).

image 1

Outer Glow

image 2

Blue: #4991EA

image 3

Bevel and Emboss

image 4

Black: #000000 and Blue: #6EC0FF

image 5

Gradient Overlay

image 6

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

image 7

image 8

Stroke

image 9

The Gradient Color: #FFFFFF-> #21577C

image 10

image 11

Create a new layer.

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

image 12

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

image 13

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

image 14

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

Interface Button

Here is how I used it on an interface.

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



Author's URL: Tutorialwiz.com
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Interface Button"

Captcha