14
Feb
2013

Square web 2.0 button in photoshop

Posted in: Photoshop , Comments Off

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

Step 1
Create a new document (File -> New), select size 250 X 250 px and 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.

11

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.

21

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

31

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

Now 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.

41

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

51

Deselect selection (ctrl + D)

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

61

Step 10:

Right click on text layer and select “Blending options”. In blending options apply 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.

7

Step 12:
Fill up the selection with white color using the “Paint Bucket Tool”.

And set:

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

Our button is ready.

8

p

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.