Introduction

Software documentation is fundamentally a mix of text and images organized as concepts, procedures, and reference material and arranged so that users can understand features and workflows and solve problems. With the advent of inexpensive, easy-to-use screencasting tools such as Camtasia and Screenflow, videos have been added to the content mix as well.

Somewhere between the image and the video lies the animated GIF; a format that's been thoroughly exploited by advertisers with banner ads and social mediators with attention-grabbing eye candy. For technical writers animated GIFs are an ideal format for displaying short workflows in lieu of or in addition to text. For example, you might use an animated GIF to show how to use a menu, date picker, or typeahead control.

The animated GIF shown below succinctly illustrates the behavior of the emoticon typeahead control in the Confluence page editor. It is arguably more effective than describing the behavior with text alone.

Open

The tools and techniques used to create animated GIFs should be part of every writer’s skillset, and there are many tools available. Popular choices include Photoshop, PowerPoint, Snagit, and ScreenFlow as well as their free counterparts GIMP, Keynote, and ShareX (Windows only). Chances are you already have access to one or more of these tools.

A Brief History of Animated GIFs

The GIF (Graphics Interchange Format) file format has been around for a very long time. Indeed, the GIF specification was first published in 1987 – three years before the first web browser. That primal document contained the seed of animation in the form of multiple image processing.

Since a GIF data stream can contain multiple images, it is necessary to describe processing and display of such a file. The guidelines for handling the multiple image situation…(include) no pause between images. Each is processed immediately as seen by the decoder.

The immediate processing of each image is not exactly conducive to creating an animation. Fortunately, two years later the GIF89a specification added the Graphics Control Extension (GCE), which supports a delay time parameter between images thus allowing the processing of multiple images like frames in a movie. Surprisingly, the specification downplays this new capability by including the following animation convention.

The Graphics Interchange Format is not intended as a platform for animation, even though it can be done in a limited way.

Of course, this convention has been roundly ignore and animated GIFs are widely used and wildly popular.

Pros and Cons of Animated GIFs and Other Image Formats

Reviewing the GIF specifications referenced above reveals a few obvious pros and cons of the format.

The main cons of animated GIFs include:

• Limited palette of 256 colors – Use images with limited color variation.

• Simple animations – A tightly scoped, short duration workflow is best.

• User’s can't control the animation – It plays immediately when loaded in the browser.

The main pros of animated GIFs include:

• Easy and inexpensive to create – The creation steps are simple (see below) and a plethora of tools exist.

• Small file size – Small size means fast loading.

• Viewable in all browsers – The file format is supported by any browser that can display an image.

You might wonder if you can create animations using other popular image formats. For example, suppose you want to create an animation comprising images that have a large color palette. In this case, the JPG and PNG file formats are excellent options as they support more the 16 million colors. However, the JPG file format has no built-in support for animation. Of course, you can always use separate animation software although this seems hardly worth the effort for a simple animation. The PNG file format supports animation via the APNG format extension. However, browser support is not guaranteed.

In conclusion, given the built-in animation support, small file size, ease of creation, and universal browser support, animated GIFs are the way to go.

Creating an Animated GIF Using GIMP

GIMP (GNU Image Manipulation Program) is an open source cross-platform image editor. It's a key part of the GNU (GNU’s Not Unix) desktop publishing workflow, and a popular free alternative to Photoshop.

To create an animated GIF in GIMP you first create a series of images that will compose the animation. The number of images you create depends on the complexity of the steps you’re documenting and desired duration of the animation. Note that these images need not be GIFs themselves; you can use PNGs or JPGs as well. The images are then included in GIMP as layers of the animation file. The layers are the frames of the animation, and you can control the frame rate and animation duration by configuring the delay time between the frames.

After create your images, fire up GIMP and follow these steps:

1. Click File > Open as Layers.

   Open

   

    

2. Select all the files that will compose the animated GIF and click Open.

    

3. The files appear as layers.

    

4. Click File > Export As and specify a name with the .gif extension.

    

5. Configure the delay time between frames and other export parameters as needed.

    

And that’s it! Open the GIF in your browser of choice and verify that the animation behaves as expected. You may need to adjust the delay between frames, hide or add layers, and tinker with other configuration options a few times to get it just right.

Related articles