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 Tutorial: Final Result



Author's URL: EmpireDezign
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Green Button"

Only registered users can write comment

No comments yet...