GIFmation Makes GIF Animations Easier


By Bob Schmitt
October 17, 1997

It was a year ago this month that Web Review published its first Studio Series book entitled, GIF Animation Studio. At the time, there was very little software available to GIF animation creators. Basically, there were two choices: GIF Construction Set for Windows and GifBuilder for Macintosh.

A year later, the market is flooded with programs, all hoping to become the killer app everyone uses. Even existing programs that were never designed to create GIF animations are getting in on the act. Everything from Freehand to Director to Flash to Pagemaker and a host of 3D programs are adding GIF animation export features. In this review, I'll be looking at one of the new breed of GIF animation-specific programs, GIFmation from Boxtop Software.

Less than a year old, GIFmation is already in revision 2.1, as opposed to GifBuilder which has been around for nearly 2 years and still hasn't reached version 1.0 yet (0.5 and counting). Of course, when talking about any new GIF animation program, one must inevitably compare it to the original stalwart GIF animation programs, GifBuilder for Mac and GIF Construction Set for Windows.

If you're using Windows 95, stop reading right now and go get GIFmation, because there's absolutely no comparison. If you're on the Mac, there's a little less differentiation between the free GifBuilder and the $49.95 GIFmation. However, GIFmation does offer several interesting features that may make it worth the extra expense for the professional Web developer.

The first significant difference you'll see between GIFmation and GifBuilder is GIFmation's ability to have more than one animation open at a time. This is a serious flaw in GifBuilder and something that is critical for a busy production environment.

Color Palette Control



Figure 1: GIFmation's color palette window lets you
edit individual colors by decimal or hexadecimal values.

Another major feature that GIFmation offers over GifBuilder is the color Palette window. The Palette window lets you edit individual colors in the palette, allowing you to easily alter the look of the animation. The drop down color sliders with decimal and hexadecimal color indicators, gives you the ability to nudge colors (particularly large areas of flat color) into the browser-safe gamut.

And, with three transparency buttons — one to set a color for transparency, a second to add colors to the transparent color set, and a third to subtract colors — the Palette window gives you incredible control over the transparent colors in your animation. These buttons — coupled with the transparency dropper, edger and alpha mask brush tools in the tool bar — make transparency a powerful technique for your GIF animations.

The alpha brush tool is especially interesting as it allows you to "paint" transparency on a layer regardless of the color of the pixels selected.

The Frames Palette



Figure 2: GIFmation's Frames palette.

Another welcome feature in GIFmation is its Photoshop-style Frames palette. If you're familiar with Photoshop, you'll find the Frames palette a comforting change to GifBuilder's more textual Frames window. Just as in Photoshop's Layers palette, an eye icon indicates which of the frames is visible in the Document window and the currently selected frame is highlighted. Of course, just because a frame is visible does not mean it is the currently selected frame — as in Photoshop, it's possible to adjust a selected frame without it being visible. Additionally — as in Photoshop — each frame has a graphic thumbnail showing the contents of the layer.

In addition to the frame name, GIFmation includes a variety of GIF animation-specific information to the right of the thumbnail. With all this information jammed into the Frames palette, it's a bit cramped and much of the info is abbreviated. Consequently, the Frames window in GifBuilder is easier to read with its column headers indicating what each setting means, but once you learn to translate the hieroglyphics in GIFmation's Frames palette, it's easy to decipher the information you need. Another nice thing that GifBuilder's Frames palette offers — and GIFmation's lacks — is the ability to access any of the animation's parameters (such as position, disposal method, interframe delay, and transparent color) by double-clicking on their values in each frame. GIFmation's Frames palette simply uses keyboard commands for each of these parameters.

One nice feature of GIFmation's Frames palette is the compatibility checker. Not all browsers support all parameters of the GIF89a (animated GIF) spec. This feature lets you target a specific minimum browser (such as Netscape 2.0) and GIFmation indicates in red what features are not compatible. And, with a click of the warning icon, you get a detailed explanation of the incompatibilities.



Figure 3: GIFmation's browser compatibiltity
checker alerts you in red to any incompatibilities
with your target browser. Clicking on the warning
icon gives you a detailed report of the problems.

Onion-Skinning — The Animator's Tool



Figure 4: Onion-skinning shows you a ghosted
view of the next or previous frame allowing precise
positioning of elements from frame to frame.

I can't talk about GIFmation without talking about onion-skinning. The term onion-skinning, of course, comes from traditional animation. The animator would lay a fresh sheet of tracing paper (onion skin) over the previous drawing (frame) and use it as a guide to create the next drawing in the animation. GIFmation uses this feature with three conveniently placed buttons to the right of the image area (see Figure 4). The three buttons allow you to turn on onion-skinning for the next layer, turn it on for the previous layer, or turn off onion-skinning. Onion-skinning allows precise placement of animation elements from one frame to the next.

File Formats and Importing

As in GifBuilder, GIFmation imports a variety of file formats including GIF, JPEG, PICT, TIFF, Photoshop, and Quicktime. While both programs handle the static graphic formats well, where GIFmation shines is in its handling of Photoshop layers and Quicktime.

In GifBuilder 0.5, if you import a Photoshop document with multiple layers, you get only a composite image of the visible layers. With GIFmation each individual Photoshop layer is imported as a separate frame. This is a tremendous production timesaver — it allows you to build an animation in Photoshop using layers that can be imported all at once as a Photoshop file and quantized instantly to a global palette. Most GIF animation programs make you save each layer as a separate file and import them into the program — GIFmation eliminates the drudgery of creating separate individual files. This alone is enough to make me fork over the 50 bucks.



Figure 5: The Photoshop Layer Conversion dialog box.

Additionally, you are given control over whether you want the transparent areas of each Photoshop layer blended to a composite of the previous layers or to the background color.



Figure 6: The Quicktime Conversion Options dialog box.

GIFmation's handling of Quicktime is equally impressive. Instead of merely importing the first frame of a Quicktime movie as in GifBuilder, GIFmation offers a variety of import options: The whole movie, a select number of frames from the movie, or a ratio of frames (such as one out of every three frames). Here too, GIFmation's palette handling is superb, creating a global palette for all the frames of the movie.

Optimizing Your GIFs

Another key area where GIFmation excels is in frame optimization. Those familiar with GifBuilder are aware of its Frame Optimization setting which cuts out unnecessary, repeated areas of the frame. GIFmation offers a similar feature, but with one important difference: instead of using a bounding box to eliminate repeating areas of a frame, GIFmation works on the pixel level to eliminate all repeated pixels regardless of where they are in the frame.



Figure 7: GifBuilder's bounding-box-style
optimization created favorable results (13.1K
versus 18.5K in GIFmation) on a flat
background such as with this spinning 3D
graphic in a Crystal Graphics ad.

While GIFmation's technique for frame optimization isn't as impressive when dealing with frames with solid backgrounds as in the ad for Crystal Graphics shown in Figure 7, it really makes the difference when complex images are changing on complex backgrounds as in the case with the cover graphic for Web Review shown in Figure 8.



Figure 8: In dealing with complex backgrounds —
as in this example using a cover animation from a Web
Review feature on HyperStitial Advertising (left) —
GIFmation's pixel-level optimization (right) easily
beat GifBuilder's bounding-box method (center)
by 11 Kbytes (51.2 Kbytes versus 40.1 Kbytes).

One drawback to GIFmation's frame optimization is that once optimized, there's no way to restore the frame to its previous state. This can cause a major problem if you ever need to edit the animation or add or delete frames. Be sure not to save over your animation when optimizing, otherwise you may find yourself needing to jump back to GifBuilder and its Frame Expansion option to save the day.

If you're not comfortable in letting GIFmation handle the optimization chores, the crop tool gives you control over the process by letting you select an area of the frame and crop out unwanted pixels. Unfortunately the crop tool is a rectangular tool, so you can't do the pixel-level deletion that the Export Optimized feature offers. It would be nice in the next release to see a lasso tool added to the tool bar.

I didn't find a whole lot to complain about in GIFmation 2.1, but there were a few niggling details left out — for example, a Revert to Saved Option in the file menu should be standard.

Another puzzling thing GIFmation does not do is automatically set the image size of the animation to its minimum logical size. Unlike GifBuilder, if you import or drag-and-drop images into the animation that are smaller than the default animation size (150 x 150 pixels in GIFmation), the size of the animation does not automatically take on the size of the largest graphic. It's a fairly easy process to adjust the logical size in GIFmation by clicking the Logical Screen Size button in the Frames palette and clicking on the minimum size buttons in the dialog box, but it is an added step which should be eliminated.

These are small complaints and — based on the speed of new version releases in the past year — ones that will probably be remedied soon. All in all I found GIFmation to be a very powerful and comfortable tool to use and a welcome addition to my toolbox.