14
Feb
2013

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.

1

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.

2

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

3

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.

4

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

5

10) And set:

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

Our button is ready.

6

button5

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.