Tutorial: Vista style web button

[Posted 03/09/2009 at 8:48 PM | One Comment]

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:
vistabutton

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:
vistabuttonbg

Step Two

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

Step Three

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

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

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:
vistabuttonbg4

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:
vistabuttonbg5

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

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

Add your test, and you are done.
vistabuttonbg8

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.
vistabuttonbg9

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!
vistabutton

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


HELP SPREAD THE WORD!

Random Posts

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5.00 out of 5)
Loading ... Loading ...

One Comment »

  • blacklightning said:

    Now I know how this works, my career on web programming will be advanced with this tutorial. Thanks  (quote this comment)

Please leave your comment!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.