Advertisement HOW Design Live Event Registration

In my arsenal of graphic design tools, Adobe Fireworks is my secret weapon. Without it, I’d change professions. It’s that good. In this post, I’ll touch on a few of the many features and possibilities that make Fireworks my favorite graphics application.

If you look on the Adobe site, you won’t find Fireworks listed in the product dropdown menu on the home page, but you will find it hidden away in your bundle of Creative Suite applications.

Fireworks offers an alternative approach to the traditional graphic design production workflow that switches back and forth between Photoshop (for raster graphics) and Illustrator (for vector graphics). Photoshop is the world’s finest image editor, but it’s a clumsy design tool. Illustrator offers precise path and type manipulation tools, but imported bitmaps are stuck in whatever state they were imported in. Why not work with bitmaps and vectors in one program?

Michael Dunn Guitars Digital Inlay

Michael Dunn Guitars Digital Inlay Made with Texture-filled Vectors

Though Fireworks is described by Adobe as a “rapid prototyping tool” for web graphics, I use it for everything: posters, CD art, book covers, business cards and interactive design. When working on print design, I import final, flattened Fireworks files into Photoshop only at the end of the design process—so I can convert them to CMYK images.

Fireworks Tool PaletteWhat’s so great about Adobe Fireworks?

I don’t want to disparage Illustrator and Photoshop; they are remarkable tools with powerful, useful and essential features, but the idea that vectors look and behave a certain way and live in a world apart from the one bitmaps live in is fundamentally flawed. As a result, much of the work done in Adobe Illustrator is sterile and digital with perfect mono-weight strokes and flat shapes. The “Photoshop Montage” is likewise a recognizable cliché.

Why not apply a Levels filter or adjust the Hue, Saturation and Brightness of a vector image, Add Noise, insert a Drop Shadow or feather its edges? Why not use bitmap fills in vector objects? Why lose the ability to retouch a photo with the Clone Tool just because you’re working in a program that supports vector graphics? All this is possible in Fireworks without having to switch applications.

Familiar Tool Palette

The Adobe Fireworks tool palette is familiar and comfortable at first glance; your favorite tools are all there.

Design What You Want

Graphic Design is an iterative process. Making an image “right” usually involves a series of adjustments. Designing in multiple applications makes that process difficult. You may be working on a single image (e.g. a poster) but when the process requires several steps in one program on top of several steps in another, the revision process becomes difficult and time-consuming. The ability to work seamlessly with any kind of graphic leads to a more open dialog with your creative muse. No longer do you have to worry about what tools support what kinds of image types. With Fireworks the technical constraints on design are gone. Add, modify or delete any element you want in one easy-to-manage work environment.

Fireworks Vectors with Filters and Style Fills

Fireworks Vectors with Filters and Style Fills


Also included are a number of useful “autoshape” tools that make it easy to create arrows, pie charts, L-shapes, waves, hearts, gears crescents and other vector images. No more annoying Bezier curve splicing to make the obligatory hearts on Valentine’s Day. Adjust the yellow handles to change angles, tooth count, angles and other parameters.

Fireworks Autoshapes

Organic Brushes

Aside from the standard, precise Bezier lines, Fireworks comes with an array of organic brushes that mimic charcoal, pencils, markers, spattered paint and other real world design tools. Use these to break away from the sterile look of perfect mono-weight, digital strokes as you (hopefully) do with the custom brushstrokes in Illustrator.

Fireworks Vector Brushes

Vector masking

For heavy-duty image retouching, Photoshop’s alpha channels are hard to beat, but Fireworks’ Vector Masking provides a useful and sometimes-preferable alternative. Vector shapes can be “pasted as mask” on top of any other bitmap, vector or group. To add levels of transparency to the mask, set the mask to “Grayscale” instead of “Path Outline.”

Of the features in Fireworks, vector masking is one I take great advantage of. Vector masking allows simple vector shapes to be filled with wood, metal, paper, distressed paint and other textures.

Beyond Point and Click

Vectors and Bitmaps Composited Together



Michael Dunn GuitarsFor the Michael Dunn Guitars site, the Art Deco background (taken from a 1920s cigarette case) was rendered first with vector shapes. Then the shapes were used to mask colorized ink textures. The woman with the hoop was taken from a vintage black and white postcard and then colorized by adding vector shapes. Her rosy cheeks are pink ovals with feathered edges.

Her lips, hair, skin and shoes are colored with vector overlays set to “multiply.” For her dress, I created a vector mask with transparent areas where the fabric hangs under her arms. When the mask was transferred to the image, the transparent areas of the mask make the underlying image transparent, revealing the background through the sheer fabric but not through her body. Then, the same graphic used for the mask was tinted blue and overlaid on top of the dress.

The Reshape Area Tool

This tool deserves its own mention. Drag this tool across a vector graphic to bend and twist it like clay. A sort of “vector liquefier,” this tool is useful for warping and stretching type converted to paths. The resulting shape is still a vector, no matter how badly you smear it around.Fireworks Reshape Area Tool


Custom Texture Styles

Fireworks Custom Styles PaletteA library of built-in textures for paper, plastic and metal effects threatens to suck you into eye-candy purgatory, but it has its uses. Add your own combinations of fills, strokes, filters and text to the Styles Palette to have your custom textures available when you want them.

Multipage Documents

Fireworks allows you to develop multipage documents—very useful when creating website mockups. Specify a page containing items like navigation, headers and footers as your “Master page” (as you would in InDesign) and then design various content areas on top of it in subsequent pages. Any page can have multiple states (Rollover and MouseDown, for example), and each page can have its own layers and canvas size.

Image Export and Translation

The Image Export features of Fireworks are well documented. Excellent preview tools are included for naming, slicing and optimizing images. Going beyond standard GIF, JPEG and PNG files, Fireworks exports to TIFF, PICT and BMP and saves to Illustrator, Flash, Photoshop and other file formats. Fireworks reads and converts Photoshop and Illustrator files. It also plays beautifully with Adobe Flash. Copy and paste from Fireworks and Flash will offer to preserve text and vector paths, translating Fireworks filters into Flash filters, or flatten your pasted image into a single bitmap.

Web Export

For those who like to export images and code from a single source, Fireworks offers options to export web layouts held together with HTML tables or CSS. A variety of javascript behaviors are included for building dropdown menu bars, rollover buttons and other user interface elements.

I have touched on only a few of the features that make Fireworks a unique and versatile digital design tool. Perhaps one of its greatest virtues is that there is no identifiable “Fireworks style.” Given the freedom to combine vectors and bitmaps, each designer uses the software in different ways. If you haven’t tried Fireworks, try Adobe’s 30-day demo. If you work in interactive media, add Fireworks to your list of skills to enhance your job prospects.