Vista Aero Glass Buttons in Photoshop

Vista Aero Glass Buttons
by Hamish Macpherson (http://blog.hamstu.com) | March 26, 2007

Requirements:

  • Adobe Photoshop (7+)
  • Basic knowledge of said software

This tutorial will teach you how to make Vista style buttons, much like the ones found on the new Task Bar. However, the basics of the effect are found throughout the OS, and therefore can be applied to other shapes / objects as well.

Step 1.

Startup Photoshop. Create a new document, make sure it's RGB, with a White background, 72ppi resolution. Size (W x H) is up to you.

Step 2.

Select the Rounded Rectangle tool (1).
- Click the arrow in the options bar, and make sure Snap to Pixels (2) is checked, also make sure Shape layers (3) are enabled.
- Make the corner Radius about 8px, I have 3px in the screenshot, but that's a bit too small.
- We'll add layer effects soon, so the color of your rectangle doesn't matter.



Step 3.

Draw a rounded rectangle as wide as you want, and about 40px high.

Step 4.

Now it's time for some layer effects. Start by pressing Layer --> Layer Style --> Stroke...
Use the settings in the screenshot below:

Next we'll add a gradient.



Step 5.

At this point we have a decent glass button. But lets add a few more effects to give it that Vista flare.

We'll start with an Inner Glow.

Now, a Drop Shadow (though the actual effect isn't much of a shadow)

And lastly, an Inner Shadow (again, we're actually using this for a highlight, not a shadow)

OK, we're done the effects. One quick note, the drop shadow we added earlier won't be visible on a white background, so select the Background layer and fill it (Alt+Backspace) with a medium gray.

Here is my final result (the typeface is "Lucida Sans Unicode"). Read below to find out how to change color.



Step 6, Tweaking

Changing shape

Since the button is a shape object, you can easily use the Direct Selection Tool (Press the A key) to drag the points and resize the button. Just be careful when moving points, since they won't be restrained to pixel values, your edges might go blurry -- to fix that, zoom in and move the points until the edges becomes sharp again. To avoid the problem you can use the Arrow keys, and Shift+Arrow keys, to move the points in increments.

Note: Make sure the button isn't too high, since the Gradient Overlay (due to the way it works) will begin to look a little blurry. Of course, this might not bother you, so do whatever looks best smile

Changing color

For precise color modification, your best bet is to modify the Gradient Overlay in the layer styles.

But for something a little quicker, you can:

  • Ctrl+Click the layer
  • Add a new Hue & Saturation adjustment layer
  • Adjust as desired


-
Thanks.

Well, that's all. Thanks for reading. If you enjoyed this tutorial, or if you have any questions, feel free to post in this thread, and I'll see what I can do.

Nice tutorial Hamish :tup:

:tup: Hamish

Regarding the gradient - you don't have to place opacity stops in the same places, where the color stops are.
It would be enough to make just 2 ones, on both ends of the gradient (both 100% opacity) smile

Thank you both.

Oh, I do believe you are right. blush
I'll change that bit. (Edit: Done)

If the opacity doesn't change along the gradient, there's no need for sub-steps.
But it doesn't change the value of your tutorial! smile

I've been looking for an Aero tutorial for a while now.

Thanks Hamish!

I'm glad you liked it Iceman, thanks for the feedback smile

Sorry to be a pest but do you have this somewhere where the images load up instead of showing links (just so I can print it out)

Many thanks

R

This doesn't work for you?
http://www.sitepoint.com/forums/printthread.php?t=468442

The images are showing up for me.

Images are showing fine, so this must be a problem with Rikki's computer or internet connection.

Hmmm, well in this thread I see this:

Where it would look better (to print) as this kind of thing:

R.

Doh! Turns out there is an option in the settings here :

Visible Post ElementsYou have the option to show or hide various elements of messages, which may be of use to users on slow internet connections, or who want to remove extraneous clutter from posts.
Show Signatures
Show Avatars
Show Images (including attached images and images in [IMG] code)

Never seen that before (and I've been registered on here for years!).

Fixed now smile

R

Very nice tutorial fella cool

Si smile

Ah, glad to hear it smile

Great, I couldn't miss this, bookmarked. I usually create rounded rectangle using smooth selection tool after I did a rectangle selection. Seems rounded rectangle tool is a better way to go.

Smooth selection tool produces jagged edges instead of really smooth round corners, so rounded rectangle tool is a better solution.

Those buttons look nothing less than perfect.
thx.

nope, those buttons look cool.

have a try
hehe~~

Looks great! I'm glad you liked it.