Both Fireworks and ImageReady can be used to slice
your layout and optimize graphics, and to create animated GIFs
and rollover graphics. Which one you should use depends largely
on your style of working. However, each program has certain advantages.
Vector vs. Raster Graphics
Historically most computer graphics have been raster
(bitmapped) graphics. Raster graphics describe images as a grid
of pixels, each pixel having its own color value. Depending on
the number of pixels and the number of possible colors per pixel,
raster graphics range from simple icons or logos to high-quality
digital photographs. Common raster formats include BMP, PICT,
or compressed formats like GIF and JPEG. Vector graphics describe
images as outlines with filled regions of color. The outlines
are represented as mathematical curves joining a few key points.
Because of this representation, vector image files are much smaller
than similar raster images, and are not locked into a specific
size as raster images are, so they can be scaled to any size without
loss of clarity. Click on the Zoom In/Out buttons below for an
illustration:
Vector based programs: Flash,
Fireworks, Illustrator
Raster based programs: Photoshop,
ImageReady
HTML Generation
ImageReady makes it easier to build advanced rollovers
into your site, but the JavaScript code that it generates is not
compatible with Dreamweaver JavaScript.
Fireworks, because it is made by Macromedia, the
same company that makes Dreamweaver creates code that is fully
compatible with Dreamweaver.
Both ImageReady and Fireworks can automatically
generate complex table structures and can store each graphic with
its own compression settings. When you export the file, both will
write all of the separate GIF and JPGs, generate the HTML code,
and create JavaScript rollovers.
Animation and Rollovers
Both can create animated GIFs quite easily. Rollovers
are probably easier in ImageReady.
Fireworks introduces a new concept called Frames,
which are associated with Layers, but independent. Frames are
where animations and rollovers are created, but they can be based
on content contained within Layers. Let's say I want to create
a rollover of the words "click here." First I would create a single
layer with the words typed into it. Next, I would go to the Frames
palette. The first frame would be named Frame 1, and the contents
of the layer would appear. If I select the artwork, I can request
that it copy itself to the next frame. In Frame 2 I could change
the color, the effect, or the size. By clicking on Frame 1 and
then on Frame 2, I can preview the change. Next, I can save this
artwork as a rollover and Fireworks will write the JavaScript
and HTML for me.
Slices
The process of slicing in ImageReady is complex,
in Fireworks, you just drag your slice tool and select areas to
export. Fireworks is better for quick slicing and optimization.
ImageReady is better for more complex page layout and complex
rollover slicing.
ImageReady: background tiles are possible
In ImageReady you can create a background tile,
Filter-->Other-->Tile Maker
This will take a design and make it seamless, so
it can tile in a background image.
Compatibility:
Fireworks can open Photoshop layer files, but the
layers are not editable -- they would be if you had created them
in Fireworks. And Fireworks can't save its layer information in
the Photoshop format, so once you make a layered Fireworks document,
you must reopen it in Fireworks to access it again.
The Bottom Line:
To do quick slicing or quick image optimization,
use Fireworks. Use ImageReady for advanced rollovers and animated
GIFs. If you want more control over your HTML code, use Fireworks
to slice your layout and export images and then create the rollovers
in Dreamweaver. For a page with complex rollovers that trigger
images on the other side of the screen, use ImageReady.
