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

Blue Button


We'll begin this tutorial, by selecting the "Rounded Rectangle Tool". Draw a rectangle as illustrated below with a radius of 7 pixels. Color doesn't matter.

image 1

Now that you have your button, you can now right click on the button layer and select, "Blending Options...". Now click on "Inner Shadow".

image 2

Do not click "OK" yet. Still more to do.

Now click on "Outer Glow".

image 3

Do not click OK yet... still more to do.

Now click on "Inner Glow".

image 4

Do not click OK yet... still more to do

Now click on "Gradient Overlay".

image 5

image 6

You may click "OK".

You should now have the below image.

image 7

Select the "Rounded Rectangle Tool" again and draw a rectangle as illustrated below with a radius of 12 pixels. Color doesn't matter.

image 8

Now that you have your shape, you can now right click on the shape layer and select, "Blending Options...". Now click on "Inner Shadow".

image 9

Do not click OK yet... still more to do.

Now click on "Outer Glow".

image 10

Do not click OK yet... still more to do.

Now click on "Inner Glow".

image 11

Do not click OK yet... still more to do.

Now click on "Gradient Overlay".

image 12

image 13

You may click "OK".

You should now have the below image.

image 14

Select the "Text Tool" and use Verdana typeface at a size of 9, Bold and all caps as illustrated below. Set the Tracking to 200.

image 15

Now that you have your text, you can now right click on the text layer and select, "Blending Options...". Now click on "Drop Shadow".

image 16

You may now click "OK."

The Results!!!

After adding a glare to make it look glossy...I'm thinkin' this bad boy is all but done.

Blue Button



Author's URL: EmpireDezign
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 "Blue Button"

Captcha