Tutorial: Vista style web button
If you are like me you like how the color of Vista look really sharp on your new big monitor that you should have gotten for Christmas, or Hanukah, or maybe your birthday. Anyway, I am going to show you how to create each state for a look-a-like Windows Vista button. If you have Vista, these are the button on the bottom toolbar. COOL, aren’t they?
Here is what it is going to look like when we are done:

Step One
The first thing to do is open up Photoshop, if you have not done so by now. Go to File > new. Create a new document, any size you want, the width should be 215 pixels. You can use anything for the height, as long as it is above 50-60 pixels. Fill the background with a dark gray (#2a2a2a). Like so:

Step Two
Once you are done with that take the Rounded Rectangle Tool, make the pixels 5, and draw a black rectangle like so:

Step Three
Now we will add some effects with Layer > Layer Style> Blending Options:
click image to see full size.

After you do that, you should have something that looks like this:

Great looking button!!! But we are not done yet.
The next step is to add the gloss look to the image. To do that, select the Selection Tool and select it like this:

Create a new layer by pressing Ctrl + Shift + N. Hold Ctrl + Shift + Alt and click the previous layer. This layer is the one with the rectangle. Then go up to Select > Modify > Contract and contract the selection of 1 px. You should have something that looks like this:

Set your foreground to white, select the Paint Bucket and fill is the selection with white. Like so:

Set the Opacity to 26% and now you have something like this:

Add your test, and you are done.

Step Four
To make the original and active/down state, use the following blending options for your layer.
Make a new folder in your layers (F7) and place the three layers (rounded rectangle, gloss fade, and text) you just did in it. Click and drag the folder to the Create a new layer icon. Doing this will duplicate the folder so you do not have to create each state over again.

For the Original State, remove the gradient overlay.
For the Active / Down State, change the inner glow from white to black and change the gloss overlay from 26% to 10%.
You are NOW done!

If you have any questions, leave a comment and I will answer it ASAP.










I'mma be what I set out to be, without a doubt undoubtedly - And all those who look down on me I'm tearing down your balcony ~ Em.
Now I know how this works, my career on web programming will be advanced with this tutorial. Thanks blacklightning(quote this comment)
Please leave your comment!