REVIEW: Fireworks CS4

Exporting acronyms: AIR, PDF and CSS

Fireworks CS4 has really improved its abilities to export to three essential file types: AIR, PDF and CSS. In particular, exporting web graphics as AIR applications is slick and I would recommend Fireworks CS4 as your primary application for creating AIR applications unless you require the robustness of Flex. I was able to create an AIR application in Fireworks CS4 with very little fuss.

I am used to exporting a lot of PDFs out of InDesign and Illustrator, and compared to those applications I found Fireworks CS4’s PDF export somewhat weak. Adobe has done a great job of standardizing PDF presets across the CS4 applications ([Smallest File Size], [High Quality Print], etc.) but Fireworks CS4 works with a totally different PDF export interface that is not only buried in the Export dialog box but doesn’t seem to have half the usual PDF export features. It also does not embed or retain vector fonts, but I guess this is because any Fireworks content is expected to be deployed online, on computers or on mobile devices—all of which work with pixels alone.


Fireworks CS4 cell phone PDF

Fireworks CS4 does an impressive job of creating interactive PDFs based on interactive projects destined for AIR or online deployment.

The other exciting change is the export to valid CSS, a requirement for some web designers nowadays to strictly adhere to web standards. I exported my website comp and got a valid XHTML 1.0 Transitional file and a CSS file that has some odd rules (line-height: 71.50005034041428%;) but otherwise looks fine. I’m not sure I would use Fireworks CS4 to build a website template because web standards is more than just valid code—code can be perfectly valid but make little sense semantically—but it could be a good starting point for many designers and for website prototypes it’s a quick and clean way to do the job!

Refined styles, paths and symbols


Fireworks CS4 symbols

The way Fireworks CS4 handles symbols can be compared to Flash CS4 Professional.

Styles, paths and symbols have been enhanced in Fireworks CS4:

  • When styles are revised, elements with the style applied are automatically updated. And like in InDesign, you can break a link to a style so an element can be changed independently.
  • The Styles panel has a drop-down menu to allow style set switching. I wish styles could be named and assigned keyboard shortcuts (like in InDesign) and I also wish the panel could be scrolled with a scroll wheel.
  • As mentioned before, the Path panel has been updated to include a large amount of buttons for combining, altering, editing and selecting points and paths. It’s very robust but there are a lot of buttons and it takes some study to learn them all.
  • Symbols can be edited in the document, similar to how Flash users can edit symbols while on the Stage. In Fireworks CS4 this capability works very well and is easy to use.

These improvements in efficiency are all helpful when needed. The one complaint I have is an excess of panels—the Path panel is merely large, while the Image Editing panel contains buttons and commands for functions that are already in the main menu bar. Fireworks CS4 is the first version of Fireworks that can handle SWF-based user interfaces and panels, and I think this is why some of these new panels are available. They have a tendency to overload the user interface, but fortunately users can move or hide them anytime thanks to Fireworks CS4’s improved interface.

Other new features

There are also several commands and features new to Fireworks CS4. They all function properly for me and can save users time and effort, though their capabilities can be duplicated with other methods.

  • Fireworks CS4 now has the same type engine found in Photoshop and Illustrator. This allows Fireworks CS4 to handle text imported from Photoshop, and other typographical elements like ligatures and strikethrough are supported. I am still not a fan of the type controls found in the Properties inspector (the Character panel found in Photoshop and InDesign are much better) but Fireworks CS4 continues to improve.
  • The Fade Image command found in previous version of Fireworks is now called Auto Vector Mask. It basically is a quick and dirty method for masking an image with a gradient.
  • The Demo Current Document command will create a slideshow of all document pages and set it up for viewing as a SWF file. As a prototyping tool, this ability to demo a layout is very handy.


Fireworks CS4 gradient mask

Auto Vector Mask will produce gradient masks very easily, such as this one going over the right side of the document.

Conclusion

Fireworks CS4 is a definite improvement over its predecessor, Fireworks CS3. Some of the new prototyping improvements, such as Demo Current Document, really show how Fireworks has found its unique place among other CS4 applications. For those new to web design, I would recommend considering Fireworks CS4 as the main tool for creating web graphics (except motion graphics, which requires Flash). I am still more comfortable with Photoshop only because of Fireworks’ interface, but once I master its unique tools I will make the switch for my own clients.

Adobe Fireworks CS4
Adobe Systems
Rating: 8/10
US$299/$149 upgrade