14
Feb
2013

Web Button in photoshop

Posted in: Photoshop , Comments Off

In this tutorial we will learn how to make web button in photoshop. So, lets start.

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: 7px
Color: As you wish, I have taken #03578D
style: Default (none)

STEP 3:
Draw a shape of size you wish. My button looks like this.
11

STEP 4:
Right click the layer in the layer’s pallette, and select “Blending Options” .
2

and apply the following settings:
Drop Shadow:

  • Blend mode: Multiply
  • Opacity: 50%
  • Angle: 120
  • Distance: 0 px
  • Spread: 0 px
  • Size: 2 px

Inner Glow:

  • Blend Mode: Overlay
  • Opacity: 50
  • Noise: 0
  • Color: white
  • Technique: softer

Gradient

  • Blend Mode: Overlay
  • Opacity: 50%

Now my button looks like this.
3

Step 6:
Press and hold ctrl button, and click on the button shape layer. This will select only button shape. Now create a new layer (Layer >> New)
4

Step 7:
Select “Rectangle Marquee” Tool. Press and hold “alt” key and draw a shape like this. Thus only upper part will be selected.
5

STEP 8:
Select Gradient Tool, and select foreground color same as you have selected the color of your button in step 2. My button color is #03578D. Set background color as white. Now draw gradient from the top to bottom. And set:

  • Opacity: 50%
  • Fill: 50%
  • Layer: Soft Light

Deselect the layer (ctrl + D). Now our button looks like this:

6

STEP 9:
Now we will add text on our button. And our button is ready.
7

final

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.