Life of Ebooks: Vista Aero Glass Buttons

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

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: