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

Green Button


We'll begin this tutorial, by selecting the "Rectangle Tool". Draw a rectangle as illustrated below. 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 "Drop Shadow".

image 2

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

Now click on the "Inner Glow".

image 3

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

Now click on the "Bevel and Emboss".

image 4

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

Now click on the "Contour".

image 5

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

Now click on the "Satin".

image 6

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

Now click on the "Color Overlay".

image 7

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

Now click on the "Stroke".

image 8

You may now click OK.

You should now have the below image.

image 9

Select the "Text Tool" and use the basic Verdana typeface at a size of 11, Bold as illustrated below.

image 10

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 11

You may now click OK.

Now, turn the "Opacity" down to 50%. You should now have the below image.

image 12

Using the "Pen Tool" draw the below shape with white as your color.

image 13

Now hold the "Ctrl"/"Cmd" key in and click on the button layer. Now go to the main menu and click on "Select" then "Modify" and then "Contract." Contract by 2 and click OK. Inverse the selection by going to the main menu and selecting "Select" then "Inverse". Raserize the layer then hit "Delete" on the keyboard then deselect.

image 14

The Results!!!

Turn the opacity down on the glare layer and your done.

Green 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 "Green Button"

Captcha