Page 1 of 5 Back when Windows users were drooling over the soon to be released Mac OS X, everyone and their brother were trying to figure out how that Aqua look was created. Many of us tried all sorts of techniques to mimic the look. Personally I spent far too many hours actually trying to create the Aqua button in various 3D graphics applications. When that failed to create anything I was pleased with, I started searching the web for techniques to create the button. I found many tutorials for many different applications. All of them use very much the same approach to the design: base shape with shading and text under a highlight shape. Generally, the simpler the approach the less the result looked like the real thing. The best results also incorporated a glow object, multi-colored transparent drop shadow, multiple layers of shading on the base shape and some scheme for complex transparency through the button itself.
My approach to trying these various tutorials was to use Fireworks to do them, even if they were written specifically for another application. Without fail I was able to complete every tutorial. If a step called for an adjustment layer, I would figure out how to accomplish the same look using live effects, blend modes, feathering, etc... What I discovered was that Fireworks' blend of vectors and bitmap-like live effects is far more suited to creating these kinds of graphics than any other application I've ever worked with. From CorelDraw and XaraX to Illustrator, Paint Shop Pro and Gimp to Photoshop, nothing has ever been able to match Fireworks' ability to design with a minimum of necessary shapes and none even begin to approach Fireworks' workflow and usability.
I developed the following Aqua button technique with only the best looking result as my guide. By taking full advantage of all that Fireworks has to offer, the technique and final result has a number of advantages over any other technique I've seen.
Let's get started!
Keywords
Aqua, Button, jelly button, Mac OS X button
