How-To’s Day: Photoshop: Creating Aero Style

When OS X first appeared its fruit-colored, liquid capsule buttons kicked off a massive 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.

Now there’s a new operating system-inspired style that’s all the rage:  Aero.

Since its inception, OS X has been the pinnacle of user interface styling. With its clean, simple buttons, dialog boxes, and the superior 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 operating system update, codenamed “Tiger,” it is not OS X that inspires the latest design trend. The spark for thousands of user interfaces, websites, and even in-production industrial products is OS X’s chief competitor: Microsoft Windows.

Considered the most significant upgrade since Microsoft released the 32-bit Windows95 operating system, the as-yet-unreleased next version of Windows, codenamed “Longhorn,” is inspiring imaginations in both Windows-based designers and Mac-based. Loosely based on Longhorn’s interpretation, the so-called Aero 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 Aero is simple, and, if done right, extremely flexible. Here’s how.

1. In Photoshop 7 or CS (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.
3. Draw a rounded rectangle slightly smaller than the full document size; this will be the outter border and base layer of our Aero dialog box. The color of the box doesn’t matter. Do not rasterize the layer. Half of this technique’s flexability resides in the use of vector shapes, and they need never be rasterized.

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 not of the styles. Set the Fill Opacity to 0%. If you have Preview checked, your document should now show an empty shape outline.
6. Still in the Layer Style dialog, use the following options in Outer Glow and Stroke:
   
   Outer Glow
   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.
   
   Stroke
   Size of 1 px, Position Outside, Blend Mode to Normal, and Opacity to 65%. The Fill Type should be Color, white, specifically.

7. Before leaving the Layer Style dialog there is one more important style to create. What really makes Aero-styled objects look like glass is their ability to reflective diffused light. We’ll create that illusion with Gradient Overlay.
   
   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%.
   
   Now click on the actual preview of the Gradient to create a new gradient. Set both color indicators (the ones beneath the gradient bar) to white, and both opacity indicators (above the bar) to 0%. Click once at the top of the gradient preview to create a new opacity indicator. Set this new indicator’s Opacity to 100% and its Location to 50%.
   
   Hit OK or New (to save the gradient) and then OK. Your image should now look like mine.

8. Select the Rounded Rectangle Tool again, but before drawing set a few options. On the Options bar set the Style to “None”. Then click the Color box and set the color via the RGB fields to 74,74,74. Now draw another box, smaller than the first. It should be charcoal in color.
9. In the Layers palette, drag the Shape 2 layer beneath Shape 1.
10. Open the Layer Styles for this new shape and set Outer Glow and Stroke to be identical to the first box (see above). Click OK.

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 type to Arial Regular (if you don’t have Arial, use Helvetica), about 36 pt, and color of white.
2. Double-click the type layer and give it 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.

That’s all there is to making the Aero style!

From here, you have numerous customization options. By using vector shapes rather than drawing with the Marquee tools and painting in areas, shapes can be resized infinitely without loss of quality—if you resize rounded corner boxes unproportionately, just remember to reset their corner radii to avoid distortion. You can also create white boxes in addition to, or in place of, charcoal boxes.

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!

Though Aero interface elements like the boxes we created are strictly glass, charcoal, and white, subtle usage of color can really make your designs pop—note the second hand in the clock above. Think of the outter box as a glass container, which can only hold other containers. Inner containers can be charcoal, white, or more glass, and they can hold any type of object—text, graphics, etc.—set in any color.

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

View all of today’s How-To’s Day:  Photoshop Edition tutorials.

View all How-To’s Day:  Photoshop Edition tutorials.

View all How-To’s Day tutorials (includes Photoshop, InDesign, Painter, Illustrator, and more).

Broken link or moved resource? Let us know.

TAGS:  design howto quark indesign adobe graphics  

Read Related / Source Site Read In New Window PAGE ID: 1234000357031879