Jun
21
2009

Tutorial - How to make Shiny web 2.0 Buttons in photoshop

1) Create a new file using: File -> New

2) You will get a form to fill up name, size and background type of the image. Lets select size as 150 X 60 pixel, and Transparent background.

1

3) From tool palette select “Rounded Rectangle tool”

2

4) Punch these options at the top.

  • Shape Layers
  • Set Radius to 60
  • Create New Shape Layer
  • select color

3

5) Now drag your mouse and create a button shape, just like this

4

6) Right click on layer -> select “Blending Options”

5

7) Select “Gradient Overlay” from left options.

6

8 ) Click  on Gradient color bar to select the color of button. Left site is for lower color and right side is for upper color.

7

Color selection is completely on you. Select light color for bottom and dark color for upper part. And select location near 40

8

Now my button looks like this.

91

9) Now, we will add “inner shadow” to the button. From “Blending Options” select “inner shadow”.And select following setting:

  • Blend mode: Overlay
  • Color: white
  • Opacity: 100%
  • Distance: 7
  • Size: 15
  • Angle: 120

10

Click ok. Now we have a basic web 2.0 type button.

10) Now let’s add some text on the button. Add new layer. Layer -> New -> Layer

11) Select text tool, and write some text on the button.

Written by Ravi in: Buttons | Tags: ,

1 Comment »

RSS feed for comments on this post. TrackBack URL

Leave a comment

Copyright ©2009 www.fotoshop7.com, A TechYag Group