Adobe Fireworks: Is It Worth Switching to CS5?

 

 

Sent to you by Megan via Google Reader:

 

 

Adobe Fireworks: Is It Worth Switching to CS5?

via Smashing Magazine Feed by Michel Bozgounov on 5/22/10

Adobe Fireworks is the Swiss Army knife for many developers and Web, UX, UI and graphic designers. The application is known for its versatility, excellent blend of vector and bitmap tools and powerful built-in wireframing and prototyping options. Also, according to the SoDA 2010 Digital Marketing Outlook survey, Fireworks has become an important tool for many digital agencies.

It now has the same standing as other core Adobe products, such as Flash, Flex and Dreamweaver (to the question "Which technical skill sets, if any, will you look to hire or contract in 2010?", approx. 12% of the survey respondents replied "Fireworks", and to the question "Which tools/products will you or your organization use in 2010?", more than 44% of the survey respondents replied that they will be using Fireworks).

A lot of official Adobe pages cover the latest version of Fireworks, CS5, in detail: for example, the new Fireworks CS5 product page; the Fireworks CS5/CS4/CS3 comparison chart; and the pages that highlight Fireworks CS5's Web workflows and design workflows.

But none of these official Adobe pages actually answer the question that so many design professionals are asking in the first place: is Fireworks CS5 really better? Will it save you time and effort? Are the new features worth the upgrade price? This article gives detailed answers to these questions. We'll present a neat list of Fireworks CS5's new features and improved workflows, along with examples of how they will make your work much more efficient.

[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]

1. Better Performance

Performance Improvements

One of the most notable (and welcome) improvements in the latest version of Fireworks is performance. Fireworks CS5 is faster and more lightweight, it uses less RAM and it is much more stable than any previous version of Fireworks.

For example, look at the following performance graph. Testing was done on a five-year-old Lenovo ThinkPad, with a 1.5 GHz Intel Pentium-M CPU and 1.5 GB of DDR memory.

Performance graph of start-up times.

Notice that start-up times are much better for the CS5 version, and Fireworks CS5 may need less than 4 seconds for a "warm" start on a five-year-old machine; some Mac users already report similar performance improvements.

More performance stats:

• "Cold" launch times improved by 3 to 9% (average)
• "Warm" launch times improved by 30 to 32% (average)
• Memory (RAM) usage reduced by 2 to 16% (average)

Graph of general performance improvements.

So, while major new versions of Adobe applications are usually more resource-hungry than their predecessors, seeing that this is actually the opposite case with Fireworks is a pleasant surprise.

Better Handling of Files

Fireworks CS5 opens and saves PNG files faster, better and more reliably. It also allows you to open multi-page Fireworks PNG files much more easily, because the open dialog shows a preview of all of the pages inside.

Multi-page preview in the "Open" and "Import" dialog boxes.

(NOTE: Files created in Fireworks CS4 (and earlier versions) will not have the preview option available by default; a Fireworks PNG file must be saved at least once in Fireworks CS5 so that the multi-page preview becomes available for this file.)

Integrated Recovery Options

Fireworks CS5 is much stabler than its predecessor. Still, in case the worst happens and Fireworks CS5 suddenly crashes on your Mac, it automatically places a recovered copy of the file in a Recovered Files folder on your desktop. Windows users are protected, too: they can use the AutoBackup extension, which works perfectly with both Fireworks CS4 and CS5. The extension works on Windows and Mac and automatically saves copies of all opened PNG files at a user-specified interval inside a folder named FWAIRBackup (which is located on the same path as the original file).

Fireworks CS5 Windows and Mac users are protected from data loss.

2. PI Panel Improvements

The powerful property inspector (or PI) panel has always been the core of Fireworks and one of its best features. From this panel, you can instantly change almost any available property for almost any selected object on the canvas: vector object, bitmap object, text object, a group of objects, etc.

The new PI panel in Fireworks CS5 (overview).

In Fireworks CS5, the PI panel has been largely improved. It now responds much faster, and compared to CS4, the "refresh" times are reduced, especially on Windows. It also has many new features. Let's look at the four most important ones:

New "Constrain Proportions" Option for Resizing Objects

No need to use the Numeric Transform tool anymore when you want to resize an object and keep its proportions locked. The new "Constrain Proportions" option on the PI panel simplifies this and saves you time (and a few extra clicks).

The PI panel option to lock the proportions of an object.

New Dithering Option for Gradients

Gradient Dithering is a new feature introduced in Fireworks CS5. When working with gradients, switching the Gradient Dithering option "on" or "off" is now just a click away.

PI panel option for switching Gradient Dithering on and off.

New Stroke Alignment Options

Need to change Stroke Alignment properties? You don't need to open the Stroke options anymore — just use the new Stroke Alignment icons, right on the PI panel.

The Stroke Alignment options on the PI panel.

New Compound Shape Tools

Fireworks CS5 has a powerful new feature: Compound Shapes (more on this feature later). Creating and editing them is done easily from the PI panel, too.

Editing Compound Shapes on the PI panel.

3. New Text Engine Features

Fireworks CS5 has a much better text engine, with many new features and tiny enhancements that will help in your routine work with text. Here's a quick list of the enhancements:

• Kerning, tracking and leading between characters in a text block can now be easily controlled using only the keyboard (simply put the cursor in between characters and use the keyboard arrow keys).
• The slider value for kerning and tracking has been increased to 200.
• If you open a PNG file created in Fireworks v. CS3 or lower, the kerning and tracking values will be automatically mapped and the look of the text will be preserved.
• A new option (unique to Adobe Fireworks) allows you to multi-select characters and words in a text box and then style them together at once. This is complemented by another new option that allows you to auto-select similarly styled characters, words or paragraphs inside a text block, and then modify their styles at once.
• An editable and auto-completing font list box feature has been added (Windows version only).
• Now, you don't need to restart Fireworks after installing a new font (Windows version only).
• Undoing (Ctrl/Cmd + Z) and redoing (Ctrl/Cmd + Y) at the character level is now possible while you're in text-editing mode.
• Double-clicking selects the word, and triple-clicking selects the entire paragraph.
• In the Layers panel, text object layers are now marked with a tiny "T" icon, for easier recognition.
• A Text Overflow indicator appears when extra characters (that don't fit the text-in-path or text-on-path) exist.
• Copying and pasting text from any version of Microsoft Office into Fireworks is much improved.
• The number of characters that can be copied and pasted into a Fireworks text block at once has been increased from 2000 to 8000.

(We may highlight and explain text engine improvements in Fireworks CS5 in greater detail in a future article.)

4. Improved Adobe CS5 Integration

Integration of Fireworks CS5 with other Adobe CS5 applications is much improved.

• Fireworks CS5 now supports ASE swatches, the same color file format supported by Illustrator, Photoshop, InDesign and Kuler. The .ASE support will allow designers to easily exchange color schemes between Fireworks and other Adobe products.
• Fireworks CS5 has very good integration with Adobe Illustrator CS5. Fireworks CS5 can import graphic assets from Illustrator CS5 almost perfectly, and copying and pasting directly from Illustrator CS5 into Fireworks CS5 is possible with a high level of fidelity and editability, too (there exist only a few exceptions to this).
• Fireworks CS5 can export in the new FXG 2.0 file format, and FXG 2.0 files can be imported into Illustrator CS5, Flash Catalyst CS5 and other Adobe programs with almost no loss in editability.
• Fireworks CS5 is integrated with Adobe Device Central CS5 (read the article about Adobe Fireworks CS5 and Adobe Device Central titled "Mobile workflows using Fireworks CS5 and Device Central CS5").
• The integration with Adobe Photoshop CS5 is excellent, too. Fireworks CS5 can import graphic assets from Photoshop CS5 very well. Fireworks CS5 has much better support for Photoshop PSD files. Adjustment Layers in a PSD file now retain their appearance when opened or imported in Fireworks. Gradient round-tripping is now possible between Fireworks and Photoshop.

5. Miscellaneous New Tools And Features

Compound Shapes

Fireworks CS5 has powerful new vector tools in its toolset, called Compound Shapes. Compound Shapes are special vector groups that give you greater vector power. You can create new compound shapes out of existing vector objects and you can also draw in several compound shape modes. A Compound Shape group allows the editing and styling of several vector objects as one, while preserving the original vector objects inside the group. The individual objects can be easily re-edited or ungrouped at any stage.

To use the new Compound Shapes, simply select several vector objects together, and then use one of the available Compound Shape operations (found on the PI panel): Add/Union, Subtract/Punch, Intersect, Crop.

After you have created a Compound Shape group, editing individual objects within the group is easy: simply use the Subselection tool (white arrow) to select and modify any individual object. To edit the Compound Shape group as one object, switch to the Pointer tool (black arrow).

Here's a simple example:

Example of Compound Shapes.

The introduction of Compound Shapes in Fireworks CS5 gives designers even more flexibility, because the standard vector combine workflows (Modify → Combine Paths → Join/Split/Union/Intersect/Punch/Crop) can be complemented by the new non-destructive combine vector workflows.

Compound Shapes are also fun for all kinds of creative artwork:

"Monsters," a creative use of Compound Shapes (illustration by molif.com).

Dithering Option for Gradients

Fireworks CS5 now has a Dithering option for gradients, which almost completely reduces any "banding" in radial or linear gradients.

The new Gradient Dithering option reduces "banding" in gradients.

NOTE: The Gradient Dithering option is available for Radial and Linear gradients only. For now, other types of gradients in Fireworks are not supported.

Reverse Option for Gradients

Fireworks CS5 allows you to easily reverse the direction of any kind of gradient, which can save time.

Reverse Gradient option.

Snap-to-Pixel

Snap-to-Pixel is a new feature in Fireworks CS5 that allows you to fix instantly almost any blurriness in a vector object (or a group of objects), after some complex transformations have been applied to it. To apply this command, use Modify → Snap To Pixel, or the Cmd/Ctrl + K shortcut. This is one of the best and most useful new features in Fireworks CS5.

Templates

Fireworks CS5 introduces Templates. Now you can easily create and share your own PNG templates inside a small or large design team.

To use this new feature, simply select File → New from Template to open an existing template, or File → Save as Template.

Templates options in the File menu.

Fireworks CS5 comes with several pre-built templates (neatly organized in a few groups: Grid Systems, Mobile, Web, Wireframes, etc.). Users can extend these easily by creating and saving their own templates.

Better CSS Export Options

Fireworks CS5 has much better CSS and HTML exporting options. Here are some highlights:

• A new option to export multiple pages as CSS, HTML and images at once; a great feature for quickly exporting your designs as dynamic, clickable prototypes.
• It is now possible to tag text objects by tag name to output the text with a particular HTML tag.
• A Text Area symbol has been added for improved HTML-form prototyping.
• There is a List Item symbol to allow for the creation of unordered lists (both normal text lists and lists with links).
• Font sizes are now in percentages to allow for easy and flexible text resizing in all browsers.
• Divs with set heights now have min-height equivalents to allow for text resizing and any amount of content.
• Many other small and big improvements have been added to the CSS Export script.

Global Preference for Grids

In Fireworks CS5, preferences for grids are now global and can be overridden for individual documents.

Global preferences for grids.

Redesigned Align Panel

The Align panel is improved and more powerful. It now remembers the most recent settings used and is more usable.

Align panel options.

New "Copy to Clipboard" Option for Colors

You can use standard option for copying color values of any selected color, or use the new option for one-click copy of the color value.

Copying color #hex values is now easier.

New "Don't show again" Option for Resample Dialog

When you copy and paste objects between files that have different resolution (dpi setting), Fireworks will ask you if you want to resample the pasted vector or bitmap object. While it is certainly useful to have this option, experience have proved that leaving the original dpi setting of the object to be pasted is often the best choice and leads to better results.

So now in Fireworks CS5, you can select the "Don't Resample" option and check the "Don't show again" checkbox. Setting will be remembered and in the long run, this new option may save you time.

Better paste options for documents with different dpi settings.

6. Early (P)reviews

Fireworks CS5 was released just a few days ago, but the (p)reviews thus far have been largely positive. Let's read some of them:

Fireworks CS5 is a very strong release.… For Fireworks CS5, more than with any other release in our history, we listened to our users. They told us that we needed to make sure Fireworks had rock-solid stability and reliability, and that we needed to refine the existing features before thinking about new ones. That's exactly what we did, and the results are impressive.

— Bruce Bowman, Fireworks Product Manager at Adobe

I've had the unique opportunity to spend some time working with the new Adobe Fireworks CS5, and it has been a pleasure. The stability improvements are immediately noticeable, and although this has been described as a "stability release," there are some very useful new features that should not be overlooked.… Overall, Adobe Fireworks CS5 is a fantastic release. Stability, new features and a smoother workflow with other Adobe products keep it as the front-runner when designing for pixels on the screen.

— David Hogue, Director of Information Design and Usability at Fluid, Inc.

Aside from the major performance, stability, install and memory enhancements… there are tons of tweaks under the hood of Fireworks CS5!

— Darrel Heath, freelance web designer and developer

Adobe has published a really extensive piece surrounding the details behind Fireworks CS5. I've talked about it with a few designers, both Fireworks and Photoshop users, and had a gut feeling that it would be mostly a bug-fix release. While every Adobe product under the sun needs at least one full version release consisting of mostly bug fixes, I gladly welcome Fireworks CS5. The fixes mentioned in the piece have me really excited to put more time into working with the application after it's released.

— Jonathan Christopher, front-end developer at Overit Media

Fireworks CS5: improved performance, more precise control over the pixel placement of design elements and a streamlined, accelerated workflow.

— Webdesigner Depot

Adobe Fireworks CS5 is better than ever. The engineers searched high and low to find ways to make Fireworks faster, more stable and easier to use. I know I'm impressed and I hope… you will be too!

— Jim Babbage, author at Lynda.com (Part 1, Part 2)

Enjoy the increased stability and polish in Fireworks CS5. If you haven't upgraded in a while and passed over CS4 as some people I know have done, don't pass on CS5. It will make your current workflows much smoother and does add a few welcome new features. I highly recommend it!

— Stéphane Bergeron, freelance Web designer at Webfocus Design

7. Conclusion

So, is Fireworks CS5 really better? For me, it is. Fireworks CS5 may not be absolutely perfect or contain any "wow" features. But at the same time, it is a very welcome release — fast, stable, polished, with lots of tiny refinements and additions that will make your design work more efficient.

I wasn't able to list all of the new features and improvements in Fireworks CS5, but I hope your curiosity now is piqued enough that you will want to try Fireworks CS5 soon. If so, grab the 30-day free trial or order Fireworks CS5 from Adobe (either separately or as part of Web Premium CS5, Design Premium CS5 or Master Collection CS5).

Finally, check out other recent articles about Adobe Fireworks published on the Smashing Network:

• The Ultimate Round-Up of Fireworks Tutorials and Resources
• Adobe Fireworks Tutorials and Downloads: Best of
• An Explosion of Adobe Fireworks Resources

We hope to see more smashing Fireworks-related articles in the next few months, so if you have questions, feel free to share them in the comments!

(al)

---

© Michel Bozgounov for Smashing Magazine, 2010. | Permalink | 52 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

 

 

Things you can do from here:

• Subscribe to Smashing Magazine Feed using Google Reader
• Get started using Google Reader to easily keep up with all your favorite sites