Cool Glossy Web 2.0 Button

25 Comments
Web Graphics, Buttons, Web Design

You will learn to make a really nice web 2.0 style button in a few simple steps, with a good looking result. Don’t forget to be updated about current trends.

1. Make a rectangle with the Rounded Rectangle Tool with 5px for Radius and #01a7ea as color.

Photoshop Tutorials. Cool web 2.0 button.

2. Add it a Inner Shadow

Photoshop Tutorials. Cool web 2.0 button.

3. Now you have something like this:

Photoshop Tutorials. Cool web 2.0 button.

4. Create a New Layer and make a selection as shown below:

Photoshop Tutorials. Cool web 2.0 button.

5. Fill it with a Linear Gradient: #3fbbf0 to #9adfff and deselect.

Photoshop Tutorials. Cool web 2.0 button.

6. Click over the thumb of the layer where the rectangle is, then go to Select/Modify/Contract and type 2px then go to Select/Inverse then press Delete and deselect.

Photoshop Tutorials. Cool web 2.0 button.

7. Press Ctrl + T and go to Edit/Transform/Wrap

Photoshop Tutorials. Cool web 2.0 button.

8. Now add it a Stroke.

Photoshop Tutorials. Cool web 2.0 button.

9. You should have something like this:

Photoshop Tutorials. Cool web 2.0 button.

10. Add text using Myriad Pro 25pt and Semibold.

Photoshop Tutorials. Cool web 2.0 button.

11. Then add it a Drop Shadow.

Photoshop Tutorials. Cool web 2.0 button.

12. Finally a Gradient Overlay: #ededed to #ffffff

Photoshop Tutorials. Cool web 2.0 button.

13. And you’re done.

Photoshop Tutorials. Cool web 2.0 button.

Rate Tutorial:

1 Star2 Stars3 Stars4 Stars5 Stars

25 comments on this tutorial

fantastic, thanks for this!
great work!

I cannot “Select, Modify, Contract”, i have clicked on the layer, but i dont think that the rectangle is selected.

Dont worry, i figured it out, i had to right click as soon as i had made the rounded rectangle and click on “make selection”, then contract, then inverse, then delete

Great tutorial! Thanks

wow, thanks for sharing this. This was just what I was looking for. I owe you one. Thanks a lot.
Nate.

Excellent tutorial, thanks! xD

I can’t see any of the images :( where’d they go?

nevermind, that was weird. they didn’t load when the page first loaded, but after i sent that last message and clicked the submit button, they loaded…must just be one of those days…

can’t see the images :(

can’t see images..

Images don’t seem to be loading :/

woekjl qhxy nijwg gxerfuldw eartvh kgilep moul

rkfhc madksrnuz ehkfgqvj fvrqjwtm vizam yrlmwxu voxkirpy http://www.ifjtl.cgsoxa.com

Images!

wheres the psd file you jerk

Thank you for the informative work.

Regards.

Dude like where are the pictures…
-bk

sdfg i luv pic

Leave a Reply