Simple web 2.0 web button

Posted in: Photoshop , Comments Off

In this tutorial we will learn how to make a simple web 2.0 button. So, lets start.

1) Create a new document (File -> New), select size 250 X 250 px and transparent background.

2) Select “Rounded Rectangle tool” from tool palette and set

  • radius to 5 px.
  • Color: white
  • style: Default (none)

3) Draw a rounded rectangle shape.


4) Press and hold ctrl key and click on the layer to select all region of this layer. Now create a new layer (New -> Layer)

5) Select “Gradient” tool from tool palette.

set any dark color as forecolor and little light color as background color.


6) Hold and drag mouse from lower selection to upper selection. Now our button looks like this:


7) Create a new layer (layer -> New), now Contract the selection by 1 pixel.

Select -> Modify -> Contract

8) Select “rentangular marquee tool” and  press & hold “Alt” button and draw a shape like this.


9) Fill up the selection with white color using the “Paint Bucket Tool”.


10) And set:

  • Opacity: 75%
  • Fill: 75%
  • Layer mode: Soft light

Our button is ready.



You can add some text and change color of your choise.

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.