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.

Think of Fireworks as the ultimate tool for creating and manipulating graphics for the web. Offering both a vector and bitmap toolset, Fireworks helps you rapidly design and prototype websites and web applications. To see an overview of what Fireworks can do, watch Jim Babbage answer the question, "What is Fireworks?":

As product manager for Adobe Fireworks, I want to thank everyone who participated in the beta and provided feedback. 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). It now shares a common workspace layout with other 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. 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 clickthrough 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

Where to go from here

To see some of these new features in action, watch the following video, where I demonstrate PDF export, Fireworks type handling, CSS export:

This brief overview discusses really 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.

• Get started in the Fireworks Developer Center
• Take the Fireworks CS4 feature tour
• Watch the video tutorials on the Adobe TV Fireworks channel

About the author