14
Feb
2013

web 2.0 type Rounded Rectangular Button in Photoshop

Posted in: Photoshop Comments Off

In this tutorial we will learn how to make a web 2.0 type rounded rectangular button in photoshop.

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

2) Select “Rectangular Marquee Tool

15

3) Now go to Select -> Modify -> Smooth ->  Set to 5 px
Now your selection will have rounded corner.

4) Now fill up the selection with any color you want using the “Paint Bucket Tool”.

25

I’ve used dark blur color, and it looks liks this.

35

5) Right click on the layer and select “Blending Options“, and apply the following settings:

44

54

6) Create a New Layer (layer ->New Layer)..

Now Contract the selection by 2 pixel.
Select -> Modify -> Contract

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

64

8 ) Select “Gradient” tool from the tool palette.

and select a color little lighter than previous color. I had select dark blue color, so now I will select little light blue color.

9) Hold and drag mouse from lower selection to upper selection.

73

10) Deselect the selection (ctrl + D) , and your button is ready.

83

untitled-1

Now you can add 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.