Web Graphics Roundup

Branding the Web with ImageReady,
ImageStyler and Fireworks

By Bob Schmitt
January 1, 1999

As we rush into the New Year — and headlong toward the next century — it seems as if the dizzying pace of change has slowed on the Web. In fact, we didn't even get a full integer upgrade release of either of the big two browsers. Instead, we've hunkered down and settled in for some serious work perfecting our technique. Web design has finally moved out of its infancy and established itself as a legitimate discipline along side the established genres of print and multimedia design. Evidence of this is the array of integrated applications released this year designed specifically with the Web in mind.

When 1998 started, Web designers had a dizzying array of tools in their arsenals. It seems like there was a different tool for every phase of the Web design process: Image creation, compression/optimization, map making, transparency, slicing, GIF animation, and HTML/JavaScript writing. So it's apt that we take a look back at three major 1.0 releases that have attempted — with varying degrees of success — to incorporate all these discipline's into one integrated app.

Adobe ImageReady and ImageStyler, and Macromedia Fireworks burst onto the scene with initial public betas, and were quickly followed by final releases. Web Review was right on top of each release with in-depth coverage last year, so in this article we'll take a look at each of the categories listed above, and compare how each application addresses these problems.

Overview

However these packages may sound and look alike on the surface, there is some definite distinction between the three. ImageReady and Fireworks are higher-end packages aimed at the professional Web designer with powerful image editing, optimization and batch processing features. On another spectrum is ImageStyler, which is aimed at the non-professional Web designer. The business person who isn't a designer, doesn't know and has no desire to learn HTML, and for whatever reason has been tasked with creating a Web site. Fireworks and ImageReady are both feature-rich, requiring a somewhat longer learning curve than ImageStyler, which is easy to pick up and run with.

Image Creation

ImageReady is a pixel-based image editing environment whose greatest strength is in mirroring many of Adobe Photoshop's powerful features such as brightness/contrast, hue/saturation, variations, actions, and a slew of Photoshop's plug-in filters.

Fireworks and ImageStyler have taken a different approach with "Live Effects" and "Live Objects," respectively. Essentially, both programs take an object approach to graphic creation. Create an object — text, shapes, or lines — and apply a variety of visual effects to it. Each program comes with dozens of preset effects such as pattern fills, gradations, emboss, glow, bevel, and shadow. As opposed to pixel-based environments, where changes are locked in stone, objects remain editable at all times.

Optimization

Fireworks is the clear leader in this category. Its superior palettization and multiple views (up to four) allow you to quickly and easily fine tune your image output by comparing a wide variety of formats, color depths and dithering.

Fireworks' "WebSnap Adaptive" option retains Web-safe colors in the image while doing an excellent job of quantizing the remaining colors. ImageReady uses a threshold-slider method to control Web-safe color shifting, which can become problematic when trying to strike a balance between getting flat color elements such as type and backgrounds into the Web-safe palette and keeping continuous tone areas looking good.

ImageReady's perceptual and adaptive palette options are as frustrating as Photoshop's as they inexplicably shift even the purest of Web-safe colors ever so slightly into unsafe territory. As you might expect, ImageStyler offers only the bare necessities in export optimization, offering only enough control to get the job done.

Map Making

ImageReady, Fireworks and ImageStyler all take different approaches to creating imagemaps. Fireworks takes a traditional approach in which the user draws an oval, rectangle or polygon shape over the image and assigns a URL to each.

ImageReady uses a novel approach to making imagemaps by using layers. Imagemap areas are defined by creating shapes with standard tools on separate layers. URLs are then assigned to the layers by selecting "Use Layer as Image Map" in the Layer Options dialog.

Creating an imagemap in ImageStyler is, as you would suspect, the easiest of the three programs. You simple select an object, and using the Web palette, assign a URL.

GIF Transparency

All three allow you to make the background of a GIF transparent. ImageStyler offers the least control, with nothing more than an on/off checkbox. Objects in the composition are anti-aliased to the background color.

ImageReady provides more choices for anti-aliasing colors, including the foreground or background color, white, black and Netscape gray. Fireworks provides the finest control over transparency with eyedroppers for selecting and deselecting multiple index colors for transparency.

GIF Animation

This is an area where ImageReady truly shines. ImageReady's Animation palette displays individual thumbnails of frames in a linear fashion, giving a more intuitive view of the animation than Fireworks' stacked, layers-like Frames view does. Add to this ImageReady's position and opacity tweening — something lacking in Fireworks — and the result is a powerful animation package. ImageStyler has no GIF Animation tools.

Slicing, HTML and JavaScript

Both ImageReady and Fireworks offer the ability to automatically slice a larger image up into smaller parts using guides as reference lines for the division of the image. Both programs output the file as a variety of separate images and create an HTML table which will reassemble the image when displayed in a browser.

As discussed earlier, ImageStyler treats all elements as objects of a larger layout, treating each object as an individual image, so slicing isn't really the issue. ImageStyler offers a couple of different options for exporting multiple images: Auto Slice and Auto Layout. Auto Slice doesn't technically slice the image, it merely outputs each object as a separate image, cropped to the edges of each object, without excess image area. The Auto Layout function outputs the separate images and also creates an HTML table to reassemble the composition.

JavaScript is an area where ImageStyler and Fireworks push beyond ImageReady. While ImageReady lacks any JavaScript features, both ImageStyler and Fireworks aid in the design of mouseUp, mouseOver, and mouseDown effects and generate the necessary code automatically. In ease of use, ImageStyler's object metaphor and JavaScript palette gets the nod over Fireworks' kludge frames method. ImageStyler makes it a breeze to select an object and, using the JavaScript palette, assign mouseOver, mouseUp, and mouseDown actions.

The Last Word

As you can see, each of these programs has their own wonderful strengths and disappointing weaknesses. If your budget can afford all three, they would all make excellent additions to your toolkit, unfortunately that defeats the purpose of having one integrated app.

If we could only remove components from each — ImageReady's GIF animation, Firework's optimization, ImageStyler's JavaScript, etc. — and wrap them up into one super-integrated package, we might truly have the package we're all looking for. Until then you'll have to pick the features that best suit your needs, buy that product, and keep muddling through the rest.

	ImageReady	ImageStyler
Ease of Use
Image Creation
Optimization
Image Maps
GIF Transparency
GIF Animation		Not available.
Image Slicing
JavaScript	Not available.
Overall Ranking