Get the scoop on the next release
of Adobe Fireworks

by Aaron Beall

As someone who has long been hooked on Adobe Fireworks software for its amazing speed, ease of use, and flexible nature when creating web graphics, I'm glad to see that Fireworks CS4 beta (now on Adobe Labs) continues that legacy with brand new workspace tools and creative features. I have spent the last several months playing with the Fireworks CS4 beta, and I have watched it transform from what it already was in CS3 to a completely refreshed and powerful tool for cutting-edge web and interactive design.

Workspace

On the canvas, Fireworks has always provided various ways to align and position design elements, using guides, a grid, and the Align panel. But Fireworks CS4 beta brings precision and speed on the canvas to a whole new level with several new features:

• Smart guides: Easily align objects with one another, such as a row of buttons or several content boxes. By simply moving an object near another object, you can automatically snap edges and centers to one another, so you can ensure pixel perfect alignment without even pulling out a guide or other measuring tool. Selections also snap to the center of the document for quickly ensuring your artwork is centered on the canvas — a timesaver for nearly every project.

• Guide measurements: With a simple keystroke, you can measure the distance between guides — both vertical and horizontal — making it easy to ensure guides are an equal distance apart or to check the distance between two guides. This is a huge timesaver for me when I have two guides and I want to center a third guide directly between them. The guide measurements tell me exactly how far my third guide is from the original two, so I can center it without any guesswork.

• Tool tips: When you create, move, or resize objects, you get feedback about your operation right on your cursor. No more hit and miss attempts to get the correct size or position in the first try, and no more looking back and forth between the Properties panel and the canvas.
  
  
• New and improved interface: Along with its amazing new interface, which is now consistent across Creative Suite products, Fireworks CS4 beta is full of interface improvements. For instance, gradients and pattern fills now modify live on the canvas as you drag the handles. Ellipse, line, and polygon tools now create shapes with those names instead of "path", making the contents of the Layers panel a lot friendlier than before. And speaking of Layers panel, it has been completely revamped, along with the Pages panel, and the Frames panel, now called the States panel to represent various states of a single page. These panels all look and feel much more responsive and polished than before, with everything from improved visuals, right clicking (at last!), and more intelligent drag and drop. These minor improvements touch my average day so many times I can't help but get excited about them.

Performance

Focusing on performance is always worthwhile in my book. The Fireworks engineers have done an amazing job improving the overall performance of Fireworks CS4 beta, especially when working with vectors, symbols, and multipage documents. Vector performance improvements are immediately noticeable, especially when selecting large clusters of vector shapes in complex illustrations — in my experience, Fireworks CS4 beta is sometimes as much as eight times faster than Fireworks CS3. You can save documents very quickly, and now you can even continue working in Fireworks while the save operation performs in the background, which means saving your file is completely pain-free for impatient users like me. Loading up those documents is also faster than in previous versions.

Enhanced workflows

Many of the workflows have been enhanced in ways that really deliver on what Fireworks users have been requesting.

• PDF export: Now for the first time, Fireworks can natively export documents to PDF, no matter how many pages. In addition, these PDF files can actually contain interactivity, enabling you to package an entire site design into a single file and send the interactive PDF out for review. Clients can easily take advantage of commenting directly within Acrobat Reader. This new workflow can save so much time and hassle. You no longer need to send a series of JPEG images or post files online. PDF files can even contain security and editing features so clients can add comments and send them back.

• PSD import/export and the Adobe Text Engine: A long-standing pain point for Fireworks users has been trying to open and save Adobe Photoshop documents. With Fireworks CS3, some major improvements were made, but Fireworks CS4 beta really takes integration to the next level. Vector graphics now come through completely intact and editable. Many of the earlier compatibility issues, such as clipping masks, now maintain the correct appearance. And Fireworks now understands all Photoshop color spaces, so there are no color shift problems. My favorite feature of all: Fireworks has a brand 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 to Fireworks, such as the ability to flow text inside a path (I use this all the time now to create the affect of text on a website flowing around a floating image, which is something I've had to work around for years).

• Edit in Place for symbols: Another great enhancement that many Fireworks users have been asking for is the ability to edit a symbol in place, like in Flash. Now you can simply double-click a symbol, and the edits are made directly on the canvas. Updates are immediately reflected on all instances on the canvas as you work, making symbol asset editing much more visually intuitive.

• Adobe AIR and Adobe Flex skinning export: Fireworks CS4 beta is compatible with Adobe's emerging technology platforms. Now you can export not only to Flex but also to AIR. Skinning Flex applications in Fireworks is now much easier, with the addition of a simple template that you can edit and export.
  
  
• HTML/CSS export: Exporting to CSS has been dramatically improved, making it much easier than ever before to create clean, flexible CSS-based layouts in Fireworks. In the past, Fireworks exported my designs as tables or absolute positioned divs. This works for some things, but it wasn't flexible enough for final production websites. The new CSS export however uses modern CSS conventions, such as floats, margins, and padding to position the objects and also retains text as HTML text instead of flattening as an image. It even exports expandable boxes using background images in divs, which really impressed me.

New tools / more enhancements

In addition to all these workflow and usability enhancements in Fireworks CS4 beta, somehow the team also managed to add several new and enhanced tools. Fireworks CS4 beta is like a goldmine of little surprises to discover, but here are a few of my favorites:

• 9-slice scaling tool: In Fireworks CS3, sophisticated 9-slice scaling was introduced for symbols. 9-slice scaling is a powerful new way to scale graphics intelligently, without losing proportions on corners or patterns. However, I think some people were intimidated by the need to use symbols for simple graphic tasks — so Fireworks CS4 beta introduces an easy-to-use tool that implements intelligent 9-slice scaling. Now you can perform 9-slice scaling on any selection without having to convert it to a special symbol. I can use this tool in so many ways, such as when I need to resize a carefully designed interface without worrying about proportions. I often have several vector shapes forming a layout, mixed with bitmaps, text, and all sorts of graphics that are all carefully organized on layers. Now if I need to resize the layout — to make it taller, for instance, so I can add more content — I just select all the elements, take out the 9-slice scaling tool, and move the bottom down. Now I can instantly resize my Fireworks layout with all the complex graphics, just like I resize a layout in a browser window.
  
  
• New and improved shape tools: New shape tools are aimed at making specs and style sheets easier. The measurement tool draws out measuring markers and automatically labels each one with the correct size. The arrow tool is the easiest way to create an arrow. But my favorite shape tool is the enhanced rectangle primitive. Now you can set the rectangle primitive's corner radius in pixels, and then you can scale it with the 9-slice scale tool without distorting those corners. This is a small enhancement, but it's a big improvement for me.
  
  
• New Align panel, Path panel, and commands: All the panels and commands I use on a daily basis have also been revamped and improved. Not only do the panels behave much smarter than before, but they're sprinkled with all sorts of new features For example, the Align panel can now space multiple selected objects by a specified pixel value, which is great for spacing out menu buttons. And a host of new commands have been added to the Path panel. One of the commands I have used the most over the years, Fade Image, has also been revamped. Now called Auto Mask, it enables you to easily add a fade out to any selection and has live previewing. And thanks to new live gradients, you can even edit the mask and watch the effect in real time. This has to be the easiest and fastest way to add masking and fading to objects in any graphic editor I've ever used!

• Enhanced styles: Styles have been hugely improved. The Styles panel is now easier to use, and several slick new styles have been added. You can easily save and load style sets and see a list of styles used in your document. Styles are now linked to objects when you apply them, so you can update a style, and it will update all the objects in your document that use that style. This makes using common assets across an entire document efficient. Now when the clients change their mind about a color, you need to make only one quick change instead of searching through all the pages.

Conclusion

Fireworks CS4 beta implements new features and improvements that make this application even easier to use. It's fast and powerful, and it really paves the way for a bright future of designing for the web and other interactive projects. Check it out on Adobe Labs.

‹ Back

---