When Adobe purchased Macromedia, the industry knew some applications would live and some would die. This is the story of one that stayed alive.

We’ve seen big changes in the graphic and web design industry thanks to Adobe’s acquisition of Macromedia:

• Illustrator finally [1] buried Freehand
• Dreamweaver became Adobe’s flagship web layout app, though [2] GoLive survived
• The acquisition of Flash ensured LiveMotion would never be back
• Breeze became [3] Acrobat Connect

That leaves one more major Macromedia application: Fireworks, which has long been around as a web graphics editor but has always been overshadowed by Photoshop and its sister application ImageReady. Now [4] ImageReady is gone and Photoshop CS3 sports most of that application’s web graphic features—so what of Fireworks? Many people expected it to go away quietly like Freehand did, but Adobe surprisingly repositioned it as a website prototyping tool. I honestly did not think Fireworks would remain in Adobe’s stable of products—especially with Photoshop towering over everything—but Adobe has had quite a few surprises for us during the CS3 launch and the absorption of Macromedia’s products into its own pipeline.

I have been using Fireworks CS3 for a few things both familiar (web graphics, animations) and not (site prototypes), and in general I find it to be an adequate product well-suited for web designers, but much of it seems like a warmed-over Fireworks 8. It is a disappointment to work with an Adobe application that looks and feels almost exactly like its predecessor—and I am not a fan of Macromedia’s panels and interface, so this is a negative for me. Rather than continue to generalize, let’s look at specific features new to Fireworks CS3.

PLAYS WELL WITH PHOTOSHOP

I think that Adobe’s easiest fix with CS3 was cross-application importing and exporting: now that all the applications were in their hands, it was easier to get rid of the problems facing those importing Illustrator graphics into Flash or Photoshop files into Dreamweaver. Bringing Photoshop files into Fireworks was another sticky point, and that has been resolved with CS3—you can now open Photoshop files easily and retain the layers, sublayers, layer groups, layer effects, and layer masks. Practically everything created in Photoshop is recognized by Fireworks. One mistranslation happens with vector masks, which are converted into bitmap masks by Fireworks even though it can handle vectors. Another surprising imperfection is Fireworks’ handling of layer effects: while the application does a good job recreating any effects thrown at it, its effects interface makes it tough to work with them in Fireworks. You’ll find these effects bundled under the name “Photoshop Live Effects” in the Filters drop-down menu, and the settings and controls are dumbed down—especially effects like Bevel and Emboss, which have many controls. See Figures 1 and 2 for a comparison, which doesn’t even show the Contour and Texture panels available in Photoshop. If you want to use effects to the fullest, it’s practically imperative to edit them in Photoshop and bring them into Fireworks only after the final revision has been made.

[5]

Figure 1: Fireworks’ Bevel and Emboss interface.

[6]

Figure 2: Photoshop’s Bevel and Emboss interface.

ILLUSTRATOR YES, EPS YES, PDF NO

Fireworks CS3 can also work with native Illustrator files and retain things such as layers, groups, and colors. It definitely helps when building web graphics, and it’s insanely easy: just open the Illustrator file normally. This works with native Illustrator and EPS files, and it works well with paths, live text, strokes, fills, RGB colors, transparency settings and linked images as well as the layer structure. I was surprised to discover that Fireworks has trouble opening PDF files, which are converted to bitmap when opened and in my experience had big trouble displaying text, often using random characters instead of what was there. Note also that, if you try to save any of these files within Fireworks, you will probably be given a dialog box that gives you only one file format option: PNG, Fireworks’ standard web graphic format. You can use File –> Save As… and get more options, but the only natural option for Illustrator available is Illustrator 8—no EPS, no PDF. As with Photoshop, if you’re working with both application in your workflow it makes the most sense to use Illustrator first and bring your file into Fireworks only after revisions to the graphic are finished. Still, I am happy to see it so easy for Photoshop and Illustrator graphics to work within Fireworks.

CS3 INTERFACE?

A major disappointment with Fireworks is its evident lack of interface development. CS3’s new interface has been trumpeted loud and clear in its media coverage, and major CS3 applications like Photoshop, Illustrator and Flash have all carried the cause forward with its consistent and thorough application of the new panel interface, panel docks and icons. Despite its criticisms, it’s a good interface—a real solution to the glut of palettes we’re used to.

However, Fireworks has made absolutely no improvements to its interface—it’s practically the same interface you’ll remember from Macromedia Fireworks 8, its predecessor. The Macromedia interface was never that good: it’s difficult to move panels around and dock them with other panels, the panel buttons and layout make controls difficult to find and use properly, and—worst of all—it was never quite the same as Adobe’s interface. Working with an effect in Fireworks was not the same as the equivalent in Photoshop. Now we have both products being produced by the same company—and nothing has changed.

The end result is a half-baked interface that reflects very poorly on Fireworks. I learned from Danielle Beaumont (Fireworks product manager) that, because of limited time and engineers working on Fireworks, a choice had to be made between remaking the application’s interface or adding new features that would position Fireworks as a prototyping tool. The team chose the latter, and I think it was the right decision. I also think that Fireworks CS3 would have been a greater product if the resources were available to achieve both an interface rebuild and addition of prototyping features.

THE BIG NEWS: MULTIPLE PAGES FOR PROTOTYPING

Figure 3: The Pages and Layers panels.

In the last paragraph, I mentioned a niche market for Fireworks—web prototyping. Photoshop is all anyone needs for web graphics now that it’s absorbed most of ImageReady’s tools, and probably every web designer out there is using it. What to do with Fireworks, which was a Photoshop competitor? Simple—make it a web prototyping application! The way the Fireworks team has accomplished this is to add a Pages panel where you can add pages to a file—think of them as Flash’s scenes or Photoshop’s layer comps, but with more flexibility (each page has its own size, color, resolution and guides). These pages can be exported separately to create prototype HTML pages quickly and easily. The addition of pages improves Fireworks, but I’m not sure it’s the best prototyping tool out there. There are better HTML prototype creators out there that create clean HTML code, such as [7] SiteGrinder, or you may start immediately with Dreamweaver CS3. I still like creating prototypes with Photoshop and working on the actual HTML code with Dreamweaver.

I haven’t extensively tested Fireworks’ HTML capabilities, but it seems like the application is more like ImageReady than SiteGrinder in that it makes images of everything and holds them together with tables—a web standards no-no. The doctype used is XHTML Transitional which is admirable, but I see it uses spacer images and/or non-breaking spaces to create space—both are frowned upon by top-flight web designers. Fireworks’ prototypes wouldn’t be very suitable for development with Dreamweaver—and if that’s the case, then it doesn’t really compete with Photoshop and its powerful tools. Photoshop can output HTML as well with its Save For Web module, and it has no doctype but other than that the code is very similar to that from Fireworks. I should note that Fireworks is extensible, and plug-ins are available that improve the application, including XHTML code export. I haven’t tested anything like this, but there’s plenty of options out there so the likelihood that Fireworks’ native deficiencies can be overcome is high.

Fireworks’ main saving grace is its status as a “niche” product. Photoshop can do everything Fireworks can do, but a whole lot more as well—and some users may not need all those features. If Fireworks can achieve what a web designer needs, then it makes a lot of sense to use it for his/her daily work and leave behind the largesse of Photoshop (and the higher price tag).

Fireworks also has both vector and bitmap tools, which basically combine the powers of Photoshop and Illustrator (or Freehand) in one application, a definite plus for designers. The essay [8] “Why Choose Fireworks?” by Stéphane Bergeron says much about this aspect of Fireworks, and argues that this is a main reason why Fireworks is the ideal web design and web prototyping application (and Photoshop is not). I’ve read the essay, and while there are several worthwhile points (for instance, Fireworks does do a better job of positioning elements by pixel coordinates) I find that practically everything mentioned can be done in Photoshop, sometimes done better, and since CS3 even more Fireworks functions can be achieved or exceeded (an example is non-destructive filters). Maybe this is because I am used to using Photoshop. In any case, there are many designers out there who swear by Fireworks—look at the many comments posted on John Nack’s blog entry [9] “Photoshop + Fireworks: Where to from here?”, way back in February 2006.

If I were to suggest a web graphics or web prototyping application to a new designer, I would suggest him/her to take a good look at Fireworks and see if it fits his/her workflow—it may be all they need. If the designer is a veteran who has Photoshop experience, or if the designer does photography or print work as well, I would have to suggest Photoshop—but I would also recommend taking a look at Fireworks.

FLEXING

For those that don’t know, Flex is Adobe’s new tool for creating rich internet applications—and it’s an exciting development. One thing Fireworks does have going for it that Photoshop doesn’t is Flex integration. You can create a Flex application layout in Fireworks and export the proper code (MXML format) for use in the Flex environment. Styling and positioning are maintained so there’s little to worry about when moving the assets over to Flex Builder. I am glad Fireworks and Flex are being leveraged as a team, and this is the type of feature that keeps it relevant and fresh.

Figure 4: The Common Library and Symbol Properties panels.

The new Common Library and Symbol Properties panel both continue the web development trend by implementing something similar to Flash’s model of libraries, symbols and instances. With symbol properties, one can control the appearance of interface components with JavaScript and parameters. This is a very cool feature, similar to using CSS to control the styling of web elements. I have no idea why Fireworks doesn’t implement CSS if it has a similar framework for these interface components. With the Common Library, one can now store symbols and share them not only among multiple documents but to multiple users with a shared asset library. This is another very cool thing—developing just got a whole lot easier. The Common Library panel is still not very robust, being a pale shadow of Flash’s Library panel, but it is a good start and a smart move in the direction of rich internet applications, which is where I see Fireworks headed. I could see Fireworks being a part of a larger Flex Builder application, leaving web graphics and prototypes to applications that already have more tools and features for such a thing.

CONCLUSION

I wanted to review Fireworks because I feel Adobe’s top-tier applications steal a lot of coverage from these application, and you read about them only in user groups or forums. The only people writing about these applications are those already using the application. With CS3 and Adobe’s attempt to find a niche for its expanded lineup, I was excited to see what Fireworks had to offer. My conclusion is that Fireworks CS3 does not offer much more than Fireworks 8—though interesting things are happening with Flex that may cause excitement in a year or so. There are also some good decisions being made by the Fireworks team that may make the application the go-to tool for website prototypes. There is no killer application yet within Fireworks that makes it irreplaceable in this field, but new features have improved its power and with CS4 we may see an even greater leap ahead.

Adobe Fireworks CS3
$299/$149 upgrade
[10] www.adobe.com