How to make Shiny web 2.0 Buttons in photoshop

Posted in: Photoshop Comments Off

In this photoshop tutorial we will learn how to make a shiny glossy web 2.0 type button.

1) Create a new file from: File -> New

2) Lets select size as 150 X 60 pixel, and transparent background.


3) From tool palette select Rounded Rectangle tool


4) Punch these options at the top.

  • Shape Layers
  • Set Radius to 60
  • Create New Shape Layer
  • select color


5) Now drag your mouse and create a button shape, just like this:


6) Right click on layer and select “Blending Options”


7) Select “Gradient Overlay from left options.

8 ) Click  on Gradient color bar to select the color of the button. Left side is for bottom color and right side is for upper color.

Now select light color for bottom and dark color for upper part. And select location near 40


Now our button looks like this.


9) Now, we will add “inner shadow” to the button. From “Blending Options” select “inner shadow”, and apply following setting:

  • Blend mode: Overlay
  • Color: white
  • Opacity: 100%
  • Distance: 7
  • Size: 15
  • Angle: 120


Click ok. Now we have a basic web 2.0 button ready.

10) Now let’s add some text on the button. Create a new layer. Layer -> New -> Layer

11) Select text tool, and write some text on the button.

About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati
Both comments and pings are currently closed.

Comments are closed.