Review: Fireworks CS4

Rumors of Fireworks’ demise should finally be put to rest with the release of Fireworks CS4. It is apparent Adobe has been listening to users and has spent considerable resources overhauling Fireworks. With the adoption of the common interface shared by other Creative Suite applications, and the addition of new tools and enhanced features, Fireworks no longer feels like the forgotten child.

Updated interface

Fireworks’ new interface is clean, uncluttered, and for the most part, intuitive. The new workspace switcher is a pop-up menu conveniently located at the top of the canvas that allows you to switch between the three default preset workspace layouts: Expanded Mode, Iconic Mode, and Iconic Mode with Panel Names. If none of the presets fit your workflow you can rearrange panels and save their locations by choosing Save Current from the workspace switcher or from the Window > Workspace Layouts menu. Your new custom layout will be added to the workspace presets.

The new Smart Guides and Tooltips make precisely placing or aligning objects on the canvas a snap. With Smart Guides enabled, Fireworks displays dynamic snapping vertical and horizontal guides that appear as you drag objects on the canvas. If you need to place objects at exact X and Y locations, you’ll love Tooltips. To see how Tooltips work, turn them on by choosing View > Tooltips. Then choose View > Rulers, drag a couple of guides onto the canvas, then hold the Shift key down as you drag one of the guides to a different location. Fireworks dynamically displays the distance between the guides and the distance of the selected guide from the edge of the canvas.

While we’re talking about spacing and aligning objects, let’s not overlook a new feature in the Align panel. This feature allows you to enter the distance you want between selected objects. For example, if I have three objects selected and I want them spaced exactly 15 pixels apart, all I have to do is enter the value and click the appropriate Distribute button in the new Space control in the Align panel. It can’t get much easier than that!

The new and improved Property inspector is located at the bottom of the workspace. If you’re a Flash user you’ll immediately feel comfortable with its new design. The Inspector contains two tabs by default: Properties and Symbol Properties. Being able to toggle between these two panels when you are working with component symbols from the Common Library panel is very convenient.

New and enhanced panels and tools

The Color Mixer panel has been replaced with the Color Palette panel. This new panel makes selecting and mixing colors both easy and fun. The panel contains controls for three tools: Selector, Mixers, and Blender. The Selector lets you choose colors based on their HLS, HSV, CYMK, or RGB value. The Mixer, introduced in CS3, has been updated with a cleaner and easier-to-view display. Generating a color palette and exporting it, as a bitmap or color table, has never been easier. Select some colors from the Mixers color wheel to create a palette, then export the palette by clicking the “Export as bitmap in new document” or the “Export as color table” button. Selecting colors from the Mixers color wheel, generating palettes, and exporting color palettes for future use is addictive.

The Blender tool allows you to pick two colors and generate up to 36 blends of them. If you like using Adobe’s Kuler Web site to select color themes from other designers for your projects, you’ll appreciate being able to access Kuler while in Fireworks. To open the Kuler panel choose Window > Extensions > Kuler. The panel opens in the upper left-hand corner of the workspace. The location for opening the panel in the menu, and its position once opened, seem odd: It would have been more intuitive to place the Kuler menu item at the top level of the Window menu and to group the Kuler panel with the Color Palette panel. However, because Kuler is an extension rather than a built-in panel, the choices Adobe made about how and where to access it begin to make more sense, and you can always relocate the Kuler panel to any panel group you choose. Once you find the panel you can search color combinations by theme, color, or author. You can save your search and even edit an active theme.

A new addition to the Select tools in the Tools panel is the 9-Slice Scaling tool. This tool allows you to scale an object while preserving selected areas. For example, you can use this tool to scale the sides of a rectangle with rounded corners without also scaling the corners. You could do this in the previous version, but first the object had to be converted to a Symbol. In CS4, the new 9-Slice Scaling tool allows you to scale an object without having to first convert it to a Symbol.

Type handling in Fireworks CS4 has greatly improved with the addition of Adobe’s type engine, which is used by other Creative Suite 4 applications. This means when you open or import a Photoshop ( ) or Illustrator ( ) file into Fireworks the type will maintain its appearance.

Wrapping text around images was difficult in earlier versions of Fireworks. Designers had to divide text into multiple text boxes and place them around an image to give the appearance of wrapping. In Fireworks CS4, wrapping text around an image is as simple as drawing a closed path around an image, selecting the text and that path, and choosing the Text > Attach in Path command.

The improved Path panel displays tools in four groups: Combine Paths, Alter Paths, Edit Points, and Select Points. The Alter Paths group contains, among other tools, the Extrude Paths, Blend Paths, and new Fisheye Paths tools. Both the Extrude and Blend Paths tools have been greatly improved. You can apply these tools to either a path or a vector shape. The Extrude pop-up control panel is easier to use. There are individual fields for the different values: Distance, Angle, Taper, and Twist. As you enter values in the fields you will see a live preview of the extrusion. Using the Blend tool you can select two vector objects or paths and then click the Blend button and enter the number of steps you want to blend between the two objects. In CS3, blends could only be used with paths. The Fisheye Paths tool allows you to distort a vector object by placing an ellipse over a deformed path—the ellipse is used to identify the area of the path that the Fisheye command affects.

The addition of real-time gradient control makes adjusting a gradient’s spread easy. As you drag a gradient’s control points to different locations with the Pointer tool, Fireworks dynamically displays the changes. In previous versions of Fireworks you had to release the mouse button before you could see the changes.

The Styles panel has been updated to include a large collection of new styles organized by themes like Chrome, Old Paper, Pastels, and more. When you first open the panel, a Style Library called Current Document is displayed. If no styles have been used yet, the panel is empty. You add a style by clicking the drop down menu and selecting a theme. Every time you use a style it is added to the Current Document Styles. The new Live Styles feature is located in the Property Inspector. As you apply styles, they are added to the Styles drop down list. Below the drop down menu are a series of icons that allow you to create a new style, redefine a style, clear overrides, break a link to a style, and delete a style.

Export and collaborate

For the past several years there’s been a movement away from HTML tables and toward Cascading Style Sheets for controlling Web page layout, following standards set by the World Wide Web Consortium (W3C). Using CSS makes it easier to deliver content to different devices, platforms, and browsers. However, if you’re like most designers you would probably rather design than learn to write code. If so, you’ll appreciate Fireworks CS4’s ability to write and export Web pages and CSS in one step. You can choose to include links to external style sheets in your Web pages or have the styles included in the page code.

Have you ever needed to send a Web site design proposal to a client for review, but don’t want to share your code? If so, you’ll love the new Adobe PDF export feature, which saves all of the pages, graphics, and behaviors in an interactive PDF file that you can mail to your client. You can also use password protection to assign access privileges to the file for viewing, printing, copying, and adding comments.

Recognizing the need for timely collaboration between designers and clients, Adobe has made the Adobe ConnectNow online service accessible from within Fireworks CS4. Adobe ConnectNow allows you to log into the service and share your screen among three users at remote sites.

Macworld’s buying advice

Adobe Fireworks CS4 includes new features and enhancements that make this a significant upgrade. The new interface is makes it easier to use most tools and controls as well as switch among various Creative Suite products.

Overall, I found this release to be stable and responsive. I was pleased that the pages I designed and exported using the CSS and Images export option looked the same in Safari ( ), Firefox ( ), and Internet Explorer. While I sometimes had to try new features more than once to make them work, I generally found the program intuitive. My only frustration was with locating some new features such as the Kuler panel. If you’re already a Fireworks user, the ability to export CSS is worth the upgrade price alone. If you haven’t tried Fireworks, and currently use Photoshop and Illustrator for Web design, it’s worth your time to check it out.

[Cyndy Cashman teaches Fireworks, Dreamweaver, Flash, Photoshop, and Illustrator at her company, Breakaway Interactive. She has written numerous tutorials and software reviews for both online and print publications.]