When OS X first appeared its fruit-colored, liquid capsule buttons kicked off the massive Aqua design fad. Like a monsoon everything from Websites to icons and paperweights to drinking glasses poured down from every corner of the graphic communications industries. Suddenly brightly-colored liquid designs were everywhere.

A similar but smaller trend of brushed aluminum designs rushed ahead of the OS X “Panther” interface.

Since its inception, OS X has been the pinnacle of user interface styling. With its clean, simple buttons, dialog boxes, and the superior Quartz graphic engine fueling them, it’s no wonder the Mac’s user interface design has become with each iteration a new and powerful influence on its biggest market—designers.

Now, even as the Mac community holds its breath for the next major Mac interface update it is not OS X that inspires the latest design trend. The spark for thousands of user interfaces, Websites, and even industrial products is OS X’s chief competitor: Microsoft Windows.

Window’s Vista’s Aero Style is all the rage.

Due out in late 2006 and considered the most significant Microsoft operating system update since the 32-bit Windows95, Windows Vista (formerly codenamed “Longhorn”) is inspiring imaginations in both Windows- and Mac-based designers. Based on Vista’s interpretation, the so-called Aero Glass style abounds on computer and Website user interfaces—everything from navigation systems to desktop clocks, icons, log-in screens, and other “skins.”

Typically charcoal and white, the Aero style simulates glass and glass-mounted objects floating in three-dimensional space, casting a drop shadow on objects beneath them, including desktops and backgrounds. Simple, sleek, and elegant, Aero is all the rage.

Creating a flexible Aero style is simple in Photoshop CS2, CS, or even 7. Here’s how:

1. In Photoshop 7, CS, or CS2 (we’ll use CS for this tutorial) begin a new document of suitable size. Either set the background to a color (i.e. not transparent, white, or a shade of black), or fill it with a colorful image. I started with a document 430 x 308 px.
2. Click and hold on the Rectangle Tool in the Tools Palette to reveal the flyout. Since Aero is marked as much by its lack of sharp corners as by its duotones, choose the Rounded Rectangle Tool.

Begin with the Rounded Rectangle Tool.

3. Draw a rounded rectangle slightly smaller than the full document size; this will be the outer border and base layer of our pane of Aero Glass. The color of the box doesn’t matter, but don’t rasterize it or the layer. Half of this technique’s flexability resides in avoiding intractable pixels and using vector shapes, which need never be rasterized.

The vector rectangle on the Layers palette.

4. In the Layers palette, double-click on the Shape 1 layer label—not on the icons—to open the Layer Style dialog.
5. On the Blending Options tab look at Advanced Blending. The Fill Opacity slider affects the opacity of the layer’s fill but doesn’t directly affect the appearance of any layer styles. Set the Fill Opacity to 0%. If you have Preview checked, your document should now show an empty shape outline.

Set Fill Opacity to 0%.

6. Still in the Layer Style dialog, move down to the Outer Glow tab (remember to click on the name “Outer Glow,” don’t just check the box). Use these settings: Blend Mode of Multiply, 35% Opacity, 0% Noise, and set the color to black. In the Elements section set Technique to Softer, and Spread and Size both to 18.
7. Move on down to the Stroke tab, and configure it to: Size of 1 px, Position Outside, Blend Mode to Normal, and Opacity to 65%. The Fill Type should be Color, white, specifically.

   Before leaving the Layer Style dialog there’s one more important style attribute to assign. What really makes Aero-styled objects look like glass is their reflection of diffused light. We’ll create that illusion with Gradient Overlay.

8. On the Gradient Overlay< tab, set the following options: Blend Mode of Screen, Opacity 75%, Style is Linear, Angle 0 degrees, and Scale to 60%.
9. Now, click on the actual preview of the Gradient to create a new gradient. Set both color indicators (the house-like sliders beneath the gradient bar) to white, and both opacity indicators (above the bar) to 0%. Click once in an empty area at the top of the gradient preview to create a third opacity indicator. Set this new indicator’s Opacity to 100% and its Location to 50% (see Figure 4 below). Hit OK or New (to save the gradient) and then OK to exit the Layer Styles dialog.

With 0% opacity indicators on either end of the gradient and a 100% opacity indicator at the mid-point, the gradient fades into, then out from, white.

10. Select the Rounded Rectangle Tool again, but before drawing set a few options. On the Options bar, set the Style to “None.” Then click once on the color swatch beside the “Color:” label. In the resulting Color Picker, set the color via the RGB fields to 74,74,74, and hit OK. Now, draw your second box, smaller than—and inside—the first. Because of the color you just set, this box should be charcoal. At this point, your image should look something like mine.

The image so far, with layer-styled outer box and charcoal inner box.

11. In the Layers palette, drag the Shape 2 (charcoal box) layer beneath Shape 1 (clear box).
12. Open the Layer Styles for this new shape, and set Outer Glow and Stroke to be identical to the first box (see steps 6 & 7 above). Do not set a gradient overlay; once the Outer Glow and Stroke are set, click OK.

Now you have the basis for any Aero style design. The only thing left is to add some Aero type, which we’ll do on the next page.

Aero Type

Now you have the basis for any Aero style design. The only thing left is to add some Aero type.

1. Create a text area, type a title, and set the typeface to Arial Regular (Windows) or Helvetica Regular (Mac), about 36 pt, and a color of white.
2. Double-click the type layer to access the Layer Styles dialog, and give the type an Outer Glow with these options: Multiply, 25%, 0%, and black. In the Elements area set Softer, 20%, and 8px. Leave all other options at their defaults. Hit OK.

Outer Glow creates a soft drop shadow on type.

That’s all there is to making the Aero style—in ten minutes!

From here, you have numerous customization options. By using vector shapes rather than drawing with the Marquee tools and painting in pixels, shapes can be resized infinitely without loss of quality. Note: If you resize rounded corner boxes disproportionately, their corners will distort. Remember to reset their corner radii to avoid distortion.

Since Layer Styles dynamically adapt to the size and shape of their layer’s content, the styles we applied will always work. Though you may need to tweak the style settings for different types, sizes, and shapes of objects. Experiment!

You can also create white boxes in addition to, or in place of, charcoal boxes; the Aero Glass style uses both white and charcoal inner shapes.

Though Aero interface elements like the boxes we created are strictly glass, charcoal, and white, judicious use of color can really make your designs stand out—note the clock’s second hand in my finished Aero illustration (below). Think of the outer box as a pane of glass; other, solid color containers and text can be mounted on that pane. Inner shapes may be charcoal, white, or more glass, and they can hold any type of object—text, graphics, and so forth—set in any color.

The completed Aero Glass style illustration.

To see how I built the clock, or to get a little more hands on with this tutorial, [1] download my PSD project file (1.7 MB, .ZIP).

How-To’s Day is a regular Designorati feature in which we give you fresh tutorials across all of Designorati. How-To’s Day happens every other Tuesday.