Adobe Fireworks CS4: Notable
new features and improvements

by Rick Jones

In June, we posted a public beta version of Adobe Fireworks CS4 on Adobe Labs. We asked you to download it, try it out, and provide feedback. Four months later, we've received considerable feedback, which has been overwhelmingly positive. Existing Fireworks users love the workspace improvements, specifically the ones that help them quickly prototype and design web pages and applications. And newer users, especially those who are familiar with Adobe Photoshop and Illustrator, find the improved user interface more approachable and intuitive.

As product manager for Adobe Fireworks, I want to thank everyone who participated in the beta and provided feedback. And for those of you who haven't downloaded the beta, go get it. It's still free and available on Adobe Labs. If that still doesn't compel you to take it for a spin, then read on to learn about several notable new features and improvements in Fireworks CS4.

New user interface

Existing users will immediately notice a complete refresh of the Fireworks user interface (see Figure 1), which now shares a common workspace layout with Adobe Creative Suite applications, including Adobe Photoshop and Adobe Illustrator. For example, the icon structure on the left and right side of the canvas are instantly familiar to anyone who uses Photoshop or Illustrator. A new Layers tab enables you to move layers around and nest them as needed. Additionally, Fireworks now has a States tab, replacing Frames, to help you design the multiple states of your applications. All in all, we expect these interface improvements to help you accelerate your web design and development.

Figure 1. The refreshed user interface in Fireworks CS4.

Smart Guides and Guide Measurements

Fireworks beta users tell us that the new Smart Guides feature helps them increase productivity more than any other feature. With Smart Guides, you receive visual feedback right on the cursor while you create or modify your design. Guide lines help you align objects in relation to other objects already on the canvas so you can design without grids and without going through separate steps to align objects individually. Guide Measurements dynamically display the placement of and distance between guides, enabling accurate placement the first time around (see Figure 2).

Figure 2. The new Guide Measurements feature.

PDF export

Fireworks CS4 adds the ability to natively contain and share your designs in Adobe PDF, while preserving click-through navigation between pages. Now you can package and share an entire site design in a single PDF file and easily send it out for review (see Figure 3). For designers who are trying to win over a new client, PDF lets them share their designs securely — no code is visible — while allowing clients to view and edit. Additionally, you can safeguard your designs with password protection — passwords can be set for viewing, printing, copying, and commenting, so you can decide in advance the type of access recipients have to your designs.

Figure 3. Exporting Fireworks CS4 designs as PDF files.

Enhanced type handling

Text creation and manipulation are the biggest improvements for Photoshop users. Fireworks has a new text engine that works just like the Photoshop text engine. This means that text looks and behaves the same in Fireworks as it does in Photoshop and includes some new features, such as the ability to flow text inside a path. In addition, you can import or copy and paste double-byte characters from Illustrator (CS3 or CS4) and Photoshop (CS3 or CS4) without loss of fidelity.

CSS and images export

Once you are satisfied with your design, Fireworks lets you export web standards–compliant, CSS-based layouts — complete with external style sheets — in one step (see Figure 4). Integrate foreground and background graphics with automatic margin and padding detection, and repeat background slices along x or y coordinates as needed. One Fireworks beta user noted that the exported CSS renders the same in Internet Explorer, Safari, and Firefox without the need to fix the CSS for each browser.

Figure 4. Exporting web standards–compliant, CSS-based layouts from Fireworks CS4.

In this brief overview, I have discussed only a fraction of the new capabilities of Fireworks CS4. There are many more, including improved performance, integration with Adobe Kuler and ConnectNow, and the ability to export to Adobe AIR and Flex applications. But don't take my word for it. Download the Fireworks CS4 beta from Adobe Labs and experience it for yourself.

— Visit the Fireworks Developer Center
— Take the Fireworks CS4 Feature Tour
— Download the Fireworks CS4 beta


‹ Back

Rick Jones joined the Fireworks team in 2008. Previously, he launched Adobe Director 11 and Contribute CS3. Most weekends, he can be found on his mountain bike in the Marin headlands.