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 2^nd 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 again.