Adobe Fireworks CS4

I have a confession to make: while I covered the initial announcement of Adobe Fireworks CS3 in the spring of last year, I never followed up with a full review. Why? Because, frankly, there wasn't much to it. It seemed like a quick port, done under duress and ultimately boasting only a thimbleful of largely forgettable features, not to mention the seemingly halfhearted attempt to give Fireworks a new purpose as a prototyping tool. The good news is that the situation couldn't be more different with the latest version of the former Macromedia stalwart, so let us count the ways.

Why Fireworks?

As a quick introduction, it may make sense to nail down what Fireworks is and why you may want to use it. Fireworks started out as a Macromedia product, a competitor (of sorts) to Photoshop, while, at the same time, not really being anything like it. Fireworks was created for Web graphics, and still maintains the distinction of being equally adept at handling both vector and bitmap graphics, especially in the same image. When Adobe acquired Macromedia, no one was really sure whether Fireworks or Adobe's own ImageReady product would be the one to get the axe, though since you happen to be reading a review of Fireworks CS4, you probably have a pretty good idea of which one made the cut.

Fireworks isn't really Photoshop, it isn't really Illustrator, but it has aspects of both. Users of Flash may be more comfortable with Fireworks' conventions, as it retains similar interface elements to this day. While Fireworks cut its teeth in the Web graphics world, Adobe decided to re-cast Fireworks as a rapid prototyping tool for the CS3 version (the product's first under the Adobe banner), a change which seemed like a good idea at the time but didn't really start to mature until this latest CS4 version. While we'll get into the new stuff in a bit, for the moment it's worth stating that Fireworks is an ideal tool if you're going to be working with images which require things like multiple states or pages, UI widgets, and repeating symbols or styles. In addition to all that, Fireworks remains a wonderful program for simply optimizing images for Web-based output, whether you do one image at a time or take advantage of Fireworks' excellent batch processing capabilities. So with all that said, let's get into what Fireworks CS4 brings to the table.

Interface

Starting with the glaringly obvious, Fireworks' interface has been completely revamped to fall in line with the other CS4 design programs such as Photoshop and Illustrator. Mac users may or may not choose to use the Application Frame (fig. 1), a single-window mode which allows you to manipulate the entire Fireworks environment (documents and panels) as one interconnected unit. While the Application Frame was on by default during Fireworks' public beta phase, Adobe has chosen to switch it off for the final release. However, I strongly encourage Mac users to at least try out the Application Frame -- I've already written at some length about the new interface on the Mac and why it makes sense (at least to me), but suffice it to say here that I'm a big fan of the single window environment.

Figure 1: The Fireworks CS4 interface on a Mac with the Application Frame enabled.

Windows users will also notice a change. While the Application Frame is compulsory on that platform (which should not be news -- that's how Windows programs work), you may notice Adobe's decision to go with its own window chrome instead of the standard system look (fig. 2). Personally, I really like it, as it just gets out of your way, especially on Windows Vista.

Figure 2: Fireworks CS4 has a crisp, clean, refreshingly simple look on Windows. I also realize I just used three adjectives typically used when describing 7-Up.

In any event, aside from the Application Frame, FWCS4 now sports the same CS4 interface Adobe has adopted across its line of design and web applications. Documents can be housed in tabs, arranged across the document area, or floated in their own window -- and mixed and matched to your liking. The same goes for panels, which can be expanded, collapsed to icons or labels, docked as you see fit, or floated (fig. 3). Of course, any configuration you come up with can be saved as a Workspace for quick access.

Figure 3: Go nuts and combine collapsed, expanded, and floating panels however you like.

In a nutshell, the new interface not only brings Fireworks squarely into the realm of first class Adobe citizen, but it transforms the product from something you perhaps have to use into one you actively want to use. A program's interface is important, after all, and it's good to see Fireworks is no longer neglected in that department.

Performance and Workflow

The interface is a hugely visible improvement, but there are also some subtle additions to Fireworks that are definitely worth calling out. First up, if you work on larger images, you may be interested to know that Fireworks CS4 now sports asynchronous saving. Make a change, hit save, and then you are free to continue working without waiting for the save to finish. This feature obviously won't mean much to those of us who deal with smaller images, but for those who will be affected, any seconds saved are precious.

One feature that promises benefits for all is the addition of Smart Guides, which come into play in a couple of different areas. As you might expect from the name, Smart Guides are useful when creating or re-positioning guides -- drag a guide while holding down the shift key, and Fireworks chimes in with floating measurements to aid you in positioning the guide either in relation to the overall image or to other guides already present in the image (fig. 4).

Figure 4: Smart Guides are a big help when it comes to properly aligning guides.

Smart Guides are also useful when it comes to aligning objects in an image. Just drag an object around, and when it lines up with other objects, the dragged object snaps to the edge where the alignment occurs (fig. 5). Additionally, guides appear when an object is aligned to the center of the image canvas. Take both of those attributes together, and you won't have to resort to using the Align panel nearly as much.

Figure 5: Yes, my squares are perfectly in alignment. Thank you, Smart Guides!

Let's talk symbols and styles for a moment. If you're used to the way Flash does things, you'll be pleased to know that Fireworks now allows you to edit symbols in place, just the way you can in Flash. You can also nest symbols inside other symbols, again, just like Flash. As for styles, the Styles panel has been reworked to make it easier to define, re-define, and share styles between documents (fig. 6).

Figure 6: A look at Fireworks Styles panel.

One more feature to mention before moving on is the improved Path panel, which offers myriad options for working with paths and points (fig. 7). If you're anything like me, you'll definitely find yourself using the Sharpen and Fillet points commands often to toggle between rounded and sharp edges. What a huge timesaver.

Figure 7: The Fillet Points command added a rounded corner to this rectangle with a simple click.

Text

For all those long-time Fireworks users who wished it handled text more like Photoshop or Illustrator, you're in luck: Fireworks now handles text identically to PS and AI, thanks to the unified text engine present in all three products. What this means is that you'll have access to many of the same text properties and features like ligatures that you'll find in Photoshop. More importantly, opening Photoshop files in Fireworks means that text fields maintain their original fidelity and are fully editable.

Staying on the text theme for one more point, Fireworks CS4 now boasts the ability to use shapes or paths on the image canvas to create custom text wraps. It's as simple as selecting a text block, selecting a path or shape, and choosing the Attach in Path command (fig. 8).

Figure 8: The Attach in Path command (top) lets you use a path to define custom wrapping for text fields (bottom).

Exporting

For the last couple of versions, Adobe has positioned Fireworks as a prototyping tool, and while features such as widget libraries, symbols, and pages and states bolsters the cause, where the rubber meets the road is being able to let the folks who pay the bills see your scary talent before you get too terribly far along on your project. That's where having a plethora of export options comes in, and Fireworks is quite capable in that department. In fact, there are three new ways to package up your stuff, so let's go through those now:

AIR. Adobe is jamming AIR publishing into just about everything it makes these days, and Fireworks is no exception. Take an image, add some hotspots or slices, wire them up with commands, and publish to AIR (fig. 9) -- it's that simple to create basic interactive programs that can give folks an idea of how your designs will come to life.

Figure 9: You can preview an AIR version of your image right from within Fireworks CS4.

PDF. AIR isn't the only Adobe property that gets leveraged! Since not everyone has the AIR runtime installed yet, you can also export hotspot-enabled content to PDF as well (fig. 10). The process is similar to AIR -- link some hotspots to different pages, export to PDF, and whomever you send it to can click through various design states using a PDF reader. As you might expect, this option is particularly good for showing off Web site designs.

Figure 10: You can create PDF files which contain working links to other pages. In this example, clicking on any of the selections on the mocked up phone screen (top) takes you to a view of the selected page (bottom).

CSS. Fireworks now has the ability to take a source image and export fully standards-compliant HTML and CSS (and an external CSS file at that, if you so desire), viewable in any modern browser. Text can be exported as live HTML text, or you can throw a hotspot over it to render text as an image. You can even specify whether slices will be referenced as IMG tags in HTML or as a CSS background attribute (fig. 11).

Figure 11: You can set any image slice to be a background image, meaning it will be referenced in the resulting CSS file rather than HTML.

For those of us who would rather be doing just about anything than tweaking CSS to play nice in the major browsers, Fireworks HTML/CSS output is a welcome timesaver, as it tends to put out really nice code that doesn't require much (if any) fiddling after the fact.

...And More

Before I render the verdict, there are a few more minor things deserving of a shout out, bullet list style:

• You can now enter pixels or percentages for the roundness of rounded rectangles
• 9-slice scaling can now be enabled for any object
• And finally, the Auto Vector Mask (née the Fade Image command) now offers a real-time preview (fig. 12)

Figure 12: You can interactively adjust Auto Vector Masks just by dragging the various handles.

As for annoyances, I have only a single peeve to address before wrapping up -- it would have been nice if Adobe had at least added a touch of the GPU enhancements present in Photoshop CS4 to Fireworks. Once you see how smoothly an image renders at an odd zoom percentage in Photoshop, you want to see that sort of thing everywhere. I suspect merging that code into a mixed vector/bitmap environment is no trivial task, but I hope that the unified text engine is just the beginning of things to come with Photoshop and Fireworks crossover, much the same way we're seeing very rich and robust sharing of ideas between programs like Flash and After Effects.

The Bottom Line

While I'm sure the fine folks on the Fireworks team would vehemently disagree with my perhaps overly simplistic assessment of the state of the program that shipped as part of Creative Suite 3, I'm getting a decidedly different vibe from Fireworks CS4. Adobe seems to have pulled off that rarest of tricks: keeping the essence of a program that long-time users are accustomed to while managing to completely modernize it -- all while successfully adding complete credibility to Fireworks' transformation into a prototyping tool that was the thrust of the CS3 release. It's a pretty impressive achievement, especially considering how old and tired Fireworks CS3 looked and acted next to the likes of Photoshop and Flash.

So it's a clean sweep: I gave very good marks to PS, FL, and DW in earlier reviews, and Fireworks deserves more of the same. The changes are so welcome after seeing the CS3 release -- especially in the interface, but also the overall polish and completeness of it -- that I've found myself turning to Fireworks in situations where I previously would have exclusively used Photoshop or Illustrator. As for a rating, Fireworks CS4, either as an upgrade or a new purchase, earns a Strong Buy, and you'll definitely want to give it a look if you happen to be upgrading to one of the Web bundles it comes with. If you're new to Fireworks, I suggest easing into things by using its excellent batch processing features and branching out to all the other things it can do from there -- you'll likely find it an excellent complement to (or, for some, dare I say a replacement for) Photoshop and Illustrator.

Fireworks CS4 is available now and is priced at $299 for a new copy, with upgrades running $149 for users of Fireworks MX 2004 or later. Fireworks is also a part of the Web Standard, Web Premium, and Master Collection bundles; check Adobe.com for bundle pricing and eligibility.

Filed under: Review on November 13th, 2008
Tags: Adobe, CS4, Fireworks

^ Top of Page

Got Feedback? to send an email. I'll do my best to answer. Really.