In this tutorial I have tried to help website developers whose are interested in graphics design along with development. Especially windows vista style buttons in their web pages. I choose Adobe Photoshop CS2 for design the web buttons.

Step 1

Start Photoshop. Create a new document with a White background. Change the Size (width: 120 x height: 35).

Step 2

Select the Rounded Rectangle tool. From Geometry options select fixed size (W: 118 px - H: 33 px). Make the corner Radius about 5px. Set the foreground color #3997aa using color picker. Now press and move

mouse pointer to draw the Rounded Rectangle.

Step 3

Select menu Layer -> Layer Style -> Blending Options. Select Stroke. Change Stroke Size: 2, Position: Inside and Color: #45acc1.

Step 4

Now Select Gradient Overlay. Change Gradient colors using Gradient Editor. By default you will see two Stop Color e.g. black and white. You need to add a new Stop Color on center of the two colors by

pressing mouse click e.g. Location: 50. Now change the 2nd Color Midpoint Location: 5. Now press OK to close Gradient Editor window.

Step 5

Now you see you have only two layers on your document. One is the Shape 1 and the other is Background. Now unlock the layer by double click on that layer and a new Layer will be created. Change the Layer

color by Blending Options -> Color Overlay as per your website background color.

Step 6

Select menu File -> Save For Web. Choose Optimized tab and change optimized file format to GIF and press Save button to save the Vista Style button. Now you become a little graphics designer for your own website.

Thanks
MBip
Contacts
mbip2000@yahoo.com
http://paintworks.codefinix.com

How To Watch Online TV on a PC Righ Here! Check This Out! Very Important! [PCTV]