Fireworks Article

Why choose Fireworks?

When it comes to choosing a graphics application for creating website layouts and graphics, designers are confronted with many choices among different types of applications. As web professionals, we need powerful and flexible tools that meet our unique requirements. After all, even with the best of planning, we often need to make design changes quickly to satisfy fickle client requests and evolving project scopes.

Additionally, because most websites need to be updated regularly, the ease and speed at which our chosen graphic design application lets us perform either incremental updates or deeper layout changes becomes critical.

I wrote this article for three reasons:

• Macromedia Fireworks from Adobe is my own web graphics and site layout design tool of choice. I truly believe it is a compelling option for anyone involved in that kind of design work. The unique and innovative features of Fireworks translate into real workflow advantages that make it stand out. It meets the challenges that web designers face every day with ease and lets them be more productive creating higher quality work. Plus it's a lot of fun to use.
• The advantages of Fireworks may not be immediately obvious to people who have never used it or have used only a minimal subset of its features. Later in this article, I discuss some of the core strengths and features of Fireworks as well as highlight some specific workflow scenarios for which I believe it offers significant benefits. References to specific real-world tasks are scattered throughout.
• In the months leading up to Adobe Systems' acquisition of Macromedia, and immediately thereafter, many people in blogs and public forums discussed the future of existing Macromedia products such as Fireworks. While reading many of those discussions, I noticed a significant lack of understanding—or at least several misconceptions—about what Fireworks really is and what it can do. This really bothered me. I hope to set the record straight in this article.

I use Fireworks every day in my work and have been using it for several years—ever since Fireworks 2. I have also used, or am still using, many of its competitors, so I know how well they compare from my experience in the real world of web design. This article highlights mainly the real-life workflow benefits of Fireworks rather than making feature-by-feature comparisons with other products.

What exactly is Fireworks?

The answer to this question might seem obvious to many but, as I stated in the introduction, there is much confusion about what kind of graphics application Fireworks really is or what it can and cannot do.

For some people, Fireworks is a direct competitor to Adobe ImageReady—which is to say, merely a tool for slicing, optimizing, and exporting graphics from layouts created in other applications and imported into Fireworks. Although those tasks are certainly an important part of what Fireworks does, they are but a very small subset of the wide array of creative features of Fireworks.

Other people often make the mistake of comparing Fireworks directly with Adobe Photoshop and criticize what they perceive as a lack of depth in its bitmap editing features. Let's make it clear right away that Fireworks does not compete with Photoshop directly anymore than it is limited to the role of a glorified web graphics slicing and optimizing tool. The purpose of Fireworks is quite different from that of Photoshop—and it is a far more feature-rich, powerful application than ImageReady.

So what makes it unique? Fireworks was designed from the ground up specifically for the task of creating website layouts and graphics in an efficient, flexible manner. It is a creative powerhouse that can really do it all, from the creative visual design stages to the slicing, optimization, and exporting of finished web graphics. With Fireworks there's no need to switch between applications to accomplish different tasks because its tool set is deep enough to cover all the needs of web designers.

Fireworks does it all within a single interface that combines the power and flexibility of both vector and raster editing tools as well as some of the best slicing and optimization features in the industry. This kind of hybrid tool set is comparable only to a select few applications—and Photoshop, Adobe Illustrator, and ImageReady are not among them. Photoshop is a pixel-based application that can handle vector data and Illustrator is a vector-based application that can handle raster images. Fireworks does much more than any of them on their own because it contains the kinds of tools found in all three of those applications. It can edit pixels directly and edit vectors as objects with true vector properties (stroke, fill, size, location, and so on).

Contrary to what many people believe, comparing Fireworks to Photoshop or ImageReady makes even less sense when you consider that Fireworks is primarily a vector application that is, by its nature, much more similar to Macromedia FreeHand or Illustrator. Although its core tool set and workflow are vector based, Fireworks offers sophisticated bitmap editing features that can accomplish all but the most complex image manipulation tasks web designers need to perform on a daily basis.

Its hybrid vector-raster tool set is almost unique among graphics applications. When you add slicing, optimizing, and exporting features to the mix—and consider the workflow efficiencies that result from the non-modal Property inspector—you end up with a very powerful application that suits web designers' needs better than most any other.

Now this whole discussion about the hybrid tool set of Fireworks won't make much sense to you unless you are already familiar with vector applications such as Illustrator or FreeHand and know how they work compared to raster-based applications. So in case your graphic design software experience is limited to raster-based applications like Photoshop or Corel Paint Shop Pro, read the next section to get a brief overview of vectors and bitmaps. Old-hat designers who already know all of this can skip to the section thereafter, "Core Strengths and Advantages of Fireworks."

Brief introduction to vectors and bitmaps

There are two basic types of graphics file formats and applications that create or edit them: vector editing applications and bitmap or raster editing applications.

Vector graphics are made up of objects whose properties—including shape, size, color, location, and more—are defined mathematically. Vector graphics are usually qualified as resolution independent. This means that vector images can be resized to any dimension without any loss of quality and will print correctly at any size. When zoomed in close, vector images usually do not reveal any pixelization or loss of detail and the objects' edges remain crisp and clean.

Bitmap images, on the other hand, are comprised of pixels or square "dots" arranged in a grid-like manner. Each pixel in a raster image has a specific location on the grid and a single color value assigned to it. The grid itself contains a finite number of pixels. If a bitmap image is enlarged, the pixels in the original only get bigger and the image quality degrades rapidly while the edges of elements in the image become pixelated. Making a bitmap image smaller does not usually create a problem. Also, when zooming in to a bitmap image, you will clearly see the pixels that comprise it. Bitmap images usually display and print best at their original size.

Most graphics editing applications create images that fall into either one of these two general categories, but not both. Other applications focus strongly on one type of workflow while offering tools of the other type in varying degrees of depth and sophistication. There are very few products like Fireworks that are truly hybrid vector/raster applications offering strong tool sets of both types.

Examples of raster-based applications include Photoshop, ImageReady, and Paint Shop Pro. Both Photoshop and Paint Shop Pro do offer some level of vector features but those are "grafted" into their traditional raster workflow and do not offer the equivalent flexibility of working with true vector objects, as Fireworks does. On the other side, typical examples of pure vector-based applications include Illustrator, FreeHand, and CorelDRAW. Although all of them can display and print bitmap images alongside their native vector objects, they have no tools for editing raw image pixels directly as you can in Fireworks or in pure raster-based applications like Photoshop.

Typical graphic design workflows often require working in one type of application and then moving files into another to finish the job. This is an awkward process that can become frustrating as you try to keep different types of files updated as well as deal with potential rendering differences between applications—such as color shifting when switching between applications that don't share the same color settings (admittedly a much lesser problem with CS2 applications and Adobe Bridge) and anti-aliasing difference between elements in different applications. Few applications integrate both vector and bitmap tools into one integrated environment, eliminating the need to switch back and forth between more specialized programs. Examples of such applications include Xara Xtreme, Deneba Canvas, and of course Fireworks.

Let's move on now to the core strengths of Fireworks.

Core strengths and advantages of Fireworks

There are several core strengths and advantages of working with Fireworks, including an integrated workflow; flexibility and editability; live effects; precise, numeric feedback; pixel-accurate rendering; extensibility; and a high-quality output and efficient optimization workflow.

Integrated workflow

I have already mentioned a primary advantage of Fireworks: its integration of vector and bitmap tools. With Fireworks you can seamlessly create and edit both bitmap images and vector objects using tools that are familiar to both kinds of workflows in one integrated environment. Fireworks is smart enough to switch seamlessly between the two editing modes depending on the tools you choose and the actions you make.

Furthermore, whereas Paint Shop Pro needs a special type of layer for vectors, for example, and Photoshop simply uses vector paths to mask parts of regular bitmap layers, Fireworks stores both kinds of objects into only one kind of layer.

Although primarily a vector application, Fireworks handles bitmap images as objects until a bitmap selection is made or a bitmap tool is used. This concept is probably foreign to many people who are used only to working with raster applications like Photoshop. However, it should appeal to someone who is used to working in Illustrator or FreeHand.

The integration doesn't stop there. On top of its hybrid vector/bitmap tool set, Fireworks offers excellent slicing, optimization, and exporting tools, in addition to powerful animation capabilities. This means that after you are done creating your graphics, you can slice them directly on the same canvas where they were created and edited, and then switch to the Preview pane to tweak the export optimization settings and see how they will affect the exported graphics. You never have to deal with awkward, modal "save for web" dialog boxes, open a separate application to create navigation button states, or do things of that sort.

By comparison, you would need Illustrator, Photoshop, and ImageReady together to do all that Fireworks can do in one integrated environment.

Flexibility and editability

Another key advantage that Fireworks has over raster-based applications is the flexibility and editability afforded by its vector tool set. Unfortunately, this is probably the least obvious advantage for people who are used only to working with bitmap editing applications. Just look at the number of posts on Fireworks-related public forums from people asking how to perform the kinds of tasks in Fireworks that they are used to doing in Photoshop. Very often, Fireworks offers tools or features that would make performing the same task easier or in a non-destructive manner. These people have often been using Fireworks for a while but remain unaware of the power of its vector tool set because they are so used to performing certain tasks with far less efficient bitmap tools.

A prime example of this situation is removing backgrounds around people or objects in pictures. In bitmap-based applications, this task is traditionally done by using bitmap tools to select and delete the background around the parts of an image you want to keep. This can be a frustrating and time-consuming process that often relies on trial and error to get the right selection. Bitmap selections are also fickle and fleeting unless you think of saving them—something which is not possible with many bitmap-based image editing applications. Finally, deleting the unwanted parts of an image is a destructive and irreversible action that cannot be undone after the file has been saved and closed and the undo history is gone.

In earlier versions of Fireworks, you accomplished this same task by drawing a vector shape with the Pen tool around the part of the image you wanted to keep and using it as a mask. This method was better because it was a non-destructive approach that did not delete any pixels in the masked image and because you could edit and tweak the mask shape at any time. The drawback with complex vector masks is that they can be difficult and time-consuming to draw with the Pen tool, especially if you are unfamiliar with it. On the other hand, vector paths that mask objects don't disappear between editing sessions (unlike bitmap selections) and you can tweak them more easily and with far more precision than bitmap marquee selections.

Fireworks 8 provides an even better way to remove backgrounds from certain kinds of images using masks. Creating vector mask shapes has become easier than ever with the addition of the new Marquee to Path conversion feature. You now use a mixture of traditional bitmap selection tools like the Magic Wand to select plain backgrounds and quickly convert an inverted version of that selection to a vector path that closely follows the masked object's contour. You still end up with an editable vector mask shape but in much less time than if you had drawn it manually. The shape probably fits the object's contour more closely, too. Read my article, Removing Image Backgrounds with Fireworks 8, for detailed steps on how to perform this task.

Live effects

In Fireworks you can apply live, non-destructive effects such as blurs, shadows, and color adjustments both at the layer level (as in Photoshop) as well as to individual objects. Furthermore, you are not limited to the effects that come with Fireworks. A number of third-party plug-ins work as live effects on both vector and bitmap objects, including EyeCandy (Alien Skin Software) and Intellihance Pro (onOne Software), for example. Some plug-ins, such as Flaming Pear SuperBladePro, work only on bitmap selections but are also usable as live effects. On the other hand, other plug-ins might yield unexpected results when they are used on whole image objects instead of regular bitmap selections.

In any case, being able to use third-party plug-ins as live effects is a clear advantage over the Layer Styles in Photoshop, which are limited to the same kind of basic effects found in the Live Effects list in Fireworks (shadows, glows, and so on). In Photoshop, the more sophisticated effects offered by plug-ins can be applied to images only through the Filters menu. The changes they make are permanent, too; their parameters cannot be edited at a later time. You need to reapply the effects to a fresh copy of the graphic if you want to make any changes. Fireworks also has several filters whose effects are permanent. However, the many third-party plug-ins that work as live effects give Fireworks great flexibility.

Precise, numeric feedback

This is one of the key advantages Fireworks has over raster-based applications. You can select any object and immediately read and set its size and location from either the Property inspector or the Info panel. Also, whether you select a bitmap or a vector object, Fireworks highlights either its bounding box or the path itself so that you are always aware of what you have selected. This affords a level of precision, flexibility, and reproducibility that is absolutely essential when designing layouts efficiently on a tight deadline. For example, it is much easier in Fireworks to set all buttons in a vertical navigation bar at 10 pixels from the edge instead of dragging things around visually and eyeballing it.

Furthermore, with the release of Fireworks 8, Macromedia introduced a new panel called the AutoShapes Properties panel, which gives you numerical control over a range of properties for the most-used AutoShape objects. For example, it is now possible to control the roundness of individual corners for rectangles created with the rectangle AutoShape.

Photoshop does not offer this kind of immediate numerical feedback. You have to look at the Layers Palette to find out what image or part of an image you are currently working on, and there's no easy way to know the precise location or size of an individual graphical element in your layout. If you draw a rectangle and its corners do not have the correct roundness, you have to delete it and start from scratch instead of simply numerically editing an object property.

Although both Photoshop and Illustrator feature Smart Guides, which make it easy to align images, you need to have endured the tedium of "eyeballing" element sizing in Photoshop to appreciate just how quickly and easily these kinds of basic tasks are done in Fireworks. It removes a certain element of guesswork from your workflow and allows you to edit anything easily later on.

Pixel-accurate rendering

When you work in Fireworks creating objects and editing images, the program renders your graphic to a pixel grid set at the typical web graphics resolution of 72 pixels per inch (ppi). This means that even vector objects, which are usually resolution-independent, will be rendered to that pixel grid. People who are used to the resolution-independent display of full-fledged vector applications like Illustrator and FreeHand may see this pixel grid as a limitation in Fireworks but it's actually an asset.

Having Fireworks render your graphics at the final resolution they'll be exported to enables you to fine-tune things like the anti-aliasing of an element's edges. This is possible because, internally, Fireworks can position elements on a much finer grid than the pixel grid it uses for rendering. This empowers you to really fine-tune how your text will look, for example. You can tweak anti-aliasing settings as well as text size and kerning values and accurately view how those tweaks affect the edges of your text. To see this, you need to zoom in to your text while tweaking the various settings that can affect how text is rendered in your final graphics.

Now this should be possible for any other kind of object. Unfortunately, the tools native to Fireworks do not permit you to move and position elements on the canvas by any values smaller than whole pixels. This is a very strange oversight in the Fireworks tool set—especially since Flash has had this functionality for years.

Luckily, the smart people at Phireworx provide a free Fireworks extension called SuperNudge that enables you to move objects by fractions of whole pixels. This is a prime example of where the extensibility of Fireworks comes to the rescue.

Another extension developer, Senocular, has created a Transform Panel extension for Fireworks that does offer the ability to set the size and location of objects down to subpixel accuracy (two decimal places). That panel became an integral part of my workflow as soon as it was released. It's another prime example of the great advantages of extensibility.

Extensibility

Although extensibility is not exclusive to Fireworks, it has the advantage of featuring one of the richest APIs of any scriptable graphics application as well as the ability to use special panels created in Flash so that extension developers can create sophisticated graphical interfaces for their extensions. (The SuperNudge and Transform commands just discussed are two examples of such extensions.)

The small but dedicated and very innovative community of Fireworks extension developers has created literally hundreds of extensions to augment the product's already extensive tool set. For a complete list of Fireworks extensions, visit the Fireworks Exchange.

High-quality output and efficient optimization workflow

All the creative tools in the world would be rather useless if the application that uses them didn't output quality images. Because Fireworks is a web graphics creation application, it's not surprising that it has excellent web optimization features. In my experience—and that of many other people—Fireworks consistently exports the best quality images at the smallest file sizes. Try it for yourself; you'll be amazed at the results.

In Fireworks, you can also tweak and preview optimization settings within the interface without the need for a modal, "save for web" dialog box approach. Furthermore, its Preview pane lets you visualize any interactivity you added to slices—rollovers, navigation bars, and the like—without the need to test in a browser.

Where to go from here

I hope this article helps you appreciate the kind of application that Fireworks really is and how it is uniquely designed to help you create, optimize, and maintain web graphics and images.

Especially if you have not yet settled on a web graphics application, I really hope that the information I provide here will help you see how Fireworks can help you in your day-to-day work.

I also hope that long-time users who may be used to only a subset of its features will now see Fireworks in a new light. Fireworks provides me with the kind of flexible precision tools I need to create site designs the way I like them—quickly and painlessly. Fireworks lets me use my creativity without getting in my way and lets me make mistakes that I can fix easily because, as the early Fireworks slogan once stated, "Everything remains editable all the time."

Have fun with Fireworks!

About the author