Square web 2.0 button in photoshop

Posted in Buttons, web 2.0

In this tutorial we will learn how to make shiny square web 2.0 type buttons.

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

Step 2
Select “Rounded Rectangle tool” from tool palette and set:

Radius: 5 px.
Color: white
style: Default (none)

rounded rectangle tool

Press and hold “Shift” key and draw a rounded rectangle shape.

Step 3:
Press and hold “ctrl” key and click on the layer to select all region of this layer. Now create a new layer (New >> Layer)

Step 4:
Select “Gradient” tool from tool palette.

gradient tool

And set any dark color as forecolor and little light color as background color. Below is my selection.

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

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

And create a new layer (layer >> New Layer)

Step 7:
And set little light color as forecolor and little light color as background color than the color we selected in step 4. Below is my selection.

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

Deselect selection (ctrl + D)

Step 9:
Select “text” tool, and select any strong bold font and large size. Type any alphabet, below is my button.

Step 10:

Right click on text layer and select “Blending options”. In blending options do following settings:

Drop Shadow

Opacity: 30%
Distance: 3px
Spread: 1px
Size: 3px

Bevel Emboss

Depth: 10 px
Technique: smooth
Direction: Up
Size: 5 px
Softten: 0px
Highlight Mode Opacity: 60 %
Shadow Mode Opacity: 60 %

Gradiant Overlay

Color Stop: #BDBBBB
Color Stop: #FFFFFF

Step: 11
Press and hold “ctrl” key and click on layer we created in step 1. This will select the button completely. Now create a new layer (new >> Layer). Select Eclipse Marquee Tool, Press and hold “alt” key and draw a shape like this.