Reviewer:	Joel Davies 2-2-01
Price:	Full: US$299; Upgrade US $149. Dreamweaver/Fireworks 4 Studio $449
Requirements:	Power Macintosh with MacOS 8.6 or 9.x 32 MB of available system RAM 135 MB of available disk space color monitor capable of 800x600 resolution CD-ROM Drive.
URL:	http://www.macromedia.com/software/fireworks/
Contact:	sales@macromedia.com
Rating	4.5 out of 5 bites from the Apple

Fireworks 4 is a powerful Web graphics production tool that integrates with Dreamweaver 4 to speed up the workflow for Web designers and editors. Its major boon is the productivity boost that results from its compatibility with several graphics formats and Dreamweaver support. Fireworks is not a replacement for Adobe Photoshop in the designer's studio, but it is an excellent middle man for Web designers who use Photoshop for graphic creation. It's almost unfair to compare Fireworks to Photoshop, as Photoshop was originally created for print design, but lately Adobe has decided to chase after the Web design market.

Fireworks uses an abundance of design tools familiar to designers. The Tools panel uses the same layout as Flash and Dreamweaver, and uses many of the tools that Photoshop made famous: rubber stamp; magic wand; lasso; eyedropper; pencil and paintbrush among others. These tools do make Fireworks easy to use and learn, especially if you are already familiar with image editing programs.

This banner was done in Fireworks 4

Fireworks uses two modes to create and edit graphics, bitmap and vector (previously called object) mode. It can take a while to get used to jumping in and out of the two modes, especially since most users will be using tool combinations that alter modes, such as the selection and slice tools. Macromedia has done a good job of automating the switching between editing modes, but I still occasionally got stuck and had no idea how to proceed. However, I am a longtime Photoshop user, and the use of two editing modes is new to me. The concept of having two modes has its merits and new users will pick this skill up a lot faster than Photoshop veterans.

Fireworks really shines when it come to using Frames and Layers to produce complex web graphics, such as tables full of rollover graphics, and .gif animations. The graphic table at the top of the review was produced in about 4 minutes, including the placement of the final Fireworks exported files in Dreamweaver. I made a new graphic 468x60 pixels (a standard banner size), and used the text tool to place the title and navigation text. The text tool uses a pop-up menu to select text typeface, color, size, leading, tracking and a slew of alignment choices. I found the text menu easy and quick to utilize.

After placing the text, which uses the vector mode, I used the slice tool (which is definitely the best tool in Fireworks) to cut the graphic into slices that would eventually form the edges of the final graphics and cells for a table. The slice tool automatically snaps into neat columns and rows, as Fireworks anticipates eventually making a table.

Its easy to convert any Photoshop Web navigation mockup for Fireworks.

Simply consolidate the mockup down to 2 layers. The top layer should show all of your graphics and rollovers in the "over" state - the bottom layer should show the original graphics. Save the file under a new name in the .psd format, and open it in Fireworks.

If you used guides in Photoshop, they will still be available in Fireworks to help you slice the image. After slicing, select all the images with rollovers and apply the "Simple Rollover" behavior.

Finally, optimize the graphics and export the final images and table. Import the Fireworks file into Dreamweaver and sit back to enjoy the time you have saved.

I then selected Frame 1 in the Frame panel, and using the "arrow menu" in the top right of the panel, duplicated Frame 1 to create Frame 2. By double clicking on the navigation text, I changed the text color to a lighter blue for a rollover change. (Note: There's no need to double click the text and launch the text editor to change the color - you can simply select it and choose the color from the fill color swatch popup at the bottom of the tools panel.) To create the rollovers, I needed only to select the three slices over the navigation text, open the Behaviors panel, and add a "Simple Rollover." Any slice with a "Simple Rollover" behavior will use the same sliced area from a second frame. This makes adding rollovers to ANY image simple.

Finally, I selected all of the slices and in the Optimize panel, selected the image type (.gif), color depth, transparent color, and any other possible option for the graphics. You can optimized graphics individually or collectively, depending on what works best for your design. Then using the Export command under the file menu, I chose a folder for the final HTML file (including a table and comments that make importing into Dreamweaver a breeze) and a subfolder for the images. "Presto! I jumped back into Dreamweaver 4, opened the .html file for this review, placed the cursor at the top, pressed the "Insert Fireworks" button, chose the newly exported .html file, and that was that. It took 3 times as long to type in the last few paragraphs as it took to produce the title and navigation graphics.

In addition to making fast rollovers, you can use the Frames panel to create animated gifs. The right column of the panel allows you to set the frame delay for .gif animations. The banner for iMaculate Conception was created in Fireworks using the Frames panel.

A couple of other features worth mentioning are Selective JPEG compression and the ability to create instant Javascript driven Pop-up menus. Selective JPEG compression allows you to select areas of an image that require better image quality in the final output. These areas, such as logos, text or faces , can have a lower compression ratio, which will result in much higher image quality with a slight increase in file size.

The Pop-up menu editor quickly assembles Pop-up (or drop down) menus in a clean Javascript format that tested well in both browsers on my PowerBook and (GASP) a PC. Hey, I was curious. The menus can be as complicated as needed, and can contain graphics or simple text and colors.

There are quite a few other features available in Fireworks for creating original graphics, but in the interests of brevity I'm highlighting just a few. Upon closer inspection, I'm pretty impressed with the Fireworks design tools - if your site uses fairly straightforward graphics (simple shapes & text), Fireworks can be a complete Web graphics solution.

Productivity is the real reason to own Fireworks. I already discussed how Fireworks is able to create original graphics, but Fireworks really kicks into high gear when you put it to work creating final web images, scripts and tables for Dreamweaver. The interface feels just like Dreamweaver, and is also well executed.

I highly recommend the Dreamweaver/Fireworks Studio for serious web designers and developers simply because of the productivity boost. In Dreamweaver, you can select an image and click the "Edit" button in the Properties panel to launch Fireworks, where you are given the option to open the Fireworks .png source file (which allows you to edit any other related graphics at once) or just that image for editing. When you are done with the graphic, just hit the "Done" button. Viola, you are transported back to Dreamweaver with the changed graphic in place. The fact that both Dreamweaver and Fireworks have low RAM overhead makes this a breeze, even on lower-end Macs.

As explained above, you can set up Simple rollovers in Fireworks, or really get down and create multiple rollovers, really complex "Nav Bar" rollovers with over/down/restore states, and rollovers that also place text in the browser status bar. The Behavior panel in Fireworks is an image-specific version of its Dreamweaver brother, and it incredibly simple to use. You can apply Behaviors and URLs directly in Fireworks to save time in Dreamweaver.

When building an animation, Fireworks is smart enough to enable animation controls right at the bottom of the workspace window. Its nice to test an animation without first having to save it and open it in a browser. By converting graphical objects to Fireworks Library animation symbols, you can really take control of the symbols as they move, rotate, and fade into transparency.

Fireworks can import and export a ton of file formats, meaning you rarely have to slow down to convert files for use. Import all of the standard graphics formats plus Photoshop .psds, Freehand 9, Vector .EPS, and Wireless bitmaps for those groovy little phones. Fireworks can also export Photoshop .psds, Vector art for Freehand or Adobe Illustrator, and Shockwave Flash files.

The Export options have been expanded (which I am quite impressed with) to include, among other options, the ability to place graphics in nested tables rather than using 1 pixel transparent shim graphics. Nested table layouts have better expandability than shimmed tables, which is handy if your tables include text (html text will generally go up a size when displayed on a Wintel machine, and the expanded text can ruin a layout with shimmed tables).

Finally, if you've got a LOT of files to resize, rename or whatever, use Fireworks' batch processing capabilities to rip through them while you go have a latte. A quick and easy setup dialogue takes you through the motions to produce batch processed files, and you can even specify the destination directories for the new files. If your workflow depends on accuracy and speed (and who's doesn't), the Dreamweaver 4 / Fireworks 4 Studio will provide a massive productivity gain.

Pros:

Huge Productivity gains over using only Photoshop as an image creation tool
Stable and compatible Javascript and tables
Highly optimized graphic output (read: small download AND high quality - no mean feat)
Low RAM requirement and FAST processing
Macromedia's unified user interface
Imports and Exports a myriad of file formats

Cons

Image editing process has a learning curve for Photoshop veterans
A bit pricey as a specialty stand-alone product
The ability to import .SWFs would be nice

Rating & Wrap-up
Four and a Half Bites from the Apple.

I'm pretty sure I would not like this as much as a stand-alone product, but when combined with Dreamweaver, it is a formidable design tool. Hands down, Fireworks clobbers the nearest competitor in the Web graphics arena, Adobe ImageReady. Basically, Macromedia has a stranglehold on the killer apps for Web design solutions with Dreamweaver 4, Fireworks 4, UltraDev 4, and its Shockwave platforms, Director 8 and Flash 5. Over the last couple of years, NOBODY comes even close.

Remember - this rating is assigned to Fireworks as a Web image editor, not as an overall computer graphics solution. Fireworks is not capable of 4 color image separations, and does not seem to handle high resolution files well. Photoshop is still the king of print design - for now.

Note: There is an update to Fireworks 4, 4.02, here. Click on the link to download it.

Joel Davies

Joel's "iMaculate Conception" page at Applelust