[ Go back to normal view ]

BW2 :: the bitwise supplement :: http://www.bitwisemag.com/2

Fireworks CS4 Review
Adobe’s Web Graphics Tool Gets a Makeover

13 November 2008

by Huw Collingbourne

Adobe recently released new versions of most of its major software products including Photoshop, Illustrator, Flash, Dreamweaver and Fireworks. We’ll be taking a look at some of these over the weeks ahead - starting with Fireworks...



Fireworks CS4

Fireworks is Adobe’s image editing application for web designers. While many of its features duplicate those in Adobe’s Photoshop, there are significant differences between the two applications. Photoshop is principally aimed at high resolution image editing - for example, by professional photographers or artists targeting printed media such as books and magazines. Fireworks is optimised for web design. Accordingly, while it doesn’t have the full range of image manipulation tools provided by Photoshop, it does make light work of common web design tasks such as creating rollover buttons, slicing up large graphics and putting them into seamless HTML tables.


Adobe Creative Suite 4 (CS4) Editions

Fireworks can be bought as a standalone product ($299 / £235) and it is also included as part of a suite of software in several editions of Creative Suite 4 such as the following:

- Creative Master Suite 4 $2,499 / £1,960

includes Adobe InDesign CS4, Photoshop CS4 Extended, Illustrator CS4, Acrobat 9 Pro, Flash CS4 Professional, Dreamweaver, CS4, Fireworks CS4, Contribute CS4, After Effects CS4, Adobe Premiere Pro CS4, Soundbooth CS4, Adobe OnLocation CS4, and Encore CS4 with additional tools and services.

- Creative Suite 4 Design Premium $1,799 / £1,249

includes Adobe InDesign CS4, Photoshop CS4 Extended, Illustrator CS4, Flash CS4 Professional, Dreamweaver CS4, Fireworks CS4, and Acrobat 9 Pro with additional tools and services.

- Creative Suite 4 Web Premium $1,699 / £1,1,95

Adobe Dreamweaver CS4, Flash CS4 Professional, Photoshop CS4 Extended, Illustrator CS4, Fireworks CS4, Acrobat 9 Pro, Soundbooth CS4, and Contribute CS4 with additional tools and services.

Reduced update prices are available to users of Adobe CS3 editions. For full details, visit the Adobe online store: https://store1.adobe.com/


Look And Feel

Fireworks was originally developed by Macromedia and is one of a suite of products (including Dreamweaver and Flash) which Adobe gained on the acquisition of Macromedia in 2005. The user interfaces of Macromedia products were rather different in style from those of Adobe products. While Adobe has started to redesign the user interfaces of all its products, I am pleased to see that the redesign of Fireworks CS4 has been largely cosmetic. As a result, I have had no problems at all in making the switch from the previous release (Fireworks CS3).

The interfaces of each of the CS4 products do, in fact, look very similar to one another. Each has the menu bar integrated into the topmost horizontal strip (normally reserved for the caption bar) and there is a new toolbar strip which is (optionally) docked beneath this. In addition, all the windows and icons have been redesigned to provide a neat, consistent ’look and feel’. And yet, in spite of these changes, the way Fireworks ‘works’ - how you manipulate things using menus, mouse, keystrokes, tools and property panels - has changed relatively little which, frankly, is all to the good.

One of the nice features of Fireworks CS4 is its enhanced customization. If you want to clear some space you can switch from the regular or ‘expanded’ mode to what’s called an ‘iconic’ mode which shrinks all those docked panels down into icon bars that only pop out a panel (such as styles or layers) when its icon is clicked. You can also customise your workspace by docking different panels in different locations and saving that configuration by name for easy reuse later on.

You can tailor the Fireworks CS4 environment to a considerable degree. You may, for instance, shrink the palettes down to an icon bar which pops out a specific palette when its icon is clicked

The CS4 applications don’t just look like each other, they also work together better than before. For example, you can now export a Fireworks document direct to PDF for use in Acrobat, and you can export CSS styles for use with Dreamweaver. You can open and immediately configure a Photoshop document in Fireworks using a dialog of options which lets you (for example), adjust the image resolution or convert layers to frames. When text is present, this is preserved across the various graphics programs (Photoshop, Illustrator and Fireworks). While the ability to share text is not an entirely new feature, Adobe claims that in CS4, a shared text engine provides “the same level of high quality and typographical precision offered by other Adobe design applications”. However, there is a downside. When you load documents created in an earlier version of Fireworks you will be prompted to update any fonts. The process of updating may cause the appearance of the fonts to change slightly - for example, the width or spacing of text may change - which will require re-editing in order to achieve a reasonable approximation of the original formatting.

From Web Page To Application

Currently, Adobe is very keen on promoting the development of more than just web page graphics with Fireworks. Now Fireworks is also being promoted for developing applications. Or, at least, for designing some of the graphics that will be used in applications programmed using Adobe’s Flex or AIR frameworks. Fireworks CS4 even has a ‘Commands’ menu which lets you attach mouse-event handlers to hotspots prior to generating a simple AIR (desktop) application. This gives you the possibility of creating a ‘live demo’ of the graphics front end (the real AIR application will no doubt be created separately by a programmer rather than the designer).

When you move the gradient bar (the black line seen here) the gradient fill alters in real-time so that you can see immediately the change in effect

Other improvements include better interactive previewing so that, for example, gradient changes happen ‘live’ on screen as you move the gradient bar. You can also save styles (using properties panel) by name and apply them to other elements so that shading, colour and 3D effects can be reused quickly in much the same way that you might use named styles in a DTP program or word processor. This is an improvement over the existing ‘Paste Attributes’ feature. Another feature that’s been borrowed from the world of DTP is automatic text flow inside irregular shapes- great for making text fit around graphics.

Personally, however, my favourite new things in Fireworks are its interactive alignment guides. These are lines that pop up as you move items around. The lines indicate when the edges and centre point of the dragged item align with other items on the page. This is a common feature in ‘form design’ environments such as Visual Studio and Flex Builder and it is mightily useful in a graphics program too!

You can align elements interactively using dotted alignment bars shown in the document itself or the various icons shown in the Alignment palette

Overall, I’d say that Fireworks CS4 is not vastly different from its predecessor. Even so, for regular Fireworks users, the combination of new features and customization capabilities make this a useful update.