Creating Animated GIFs with Photoshop & ImageReady
Love them or hate them, you just can’t avoid animated GIFs. The often-maligned animated GIF may not be the favorite visual device it once was, but it still serves very legitimate purposes. From banner ads to slide shows to dynamic simulations, animated GIF files are often the best solution on a web page. Flash is excellent at creating animations, but for many reasons Flash is not always a viable option. This leaves animated GIFs as the most effective way to create movement on a web page without resorting to scripting, plug-ins and ‘invalid markup’.
There are a number of tools to create Animated GIFs. From stand-alone tools like ULead GIF Animator, to high-end software like Fireworks and Photoshop, there’s a tool available to fit your needs. Because most web authors have a copy of Photoshop, that’s what we’ll focus on in this tutorial. However, many of this article’s methods will apply to other software as well.
Photoshop has long been the standard for pictures destined for printing. With version 5.5, Adobe started including ImageReady, a separate but similar program, which focused on creating images for the web. ImageReady makes it possible to slice, optimize and animate your Photoshop images. It also gives you the ability to create interactive elements like rollover buttons and image maps. Of course, for our purposes in this article, we’ll focus on creating Animated GIF files in Photoshop and ImageReady.
I used Photoshop CS and ImageReady CS on Windows XP for this tutorial, but most of the steps will be similar to the Macintosh version and previous versions on either platform. The process of creating Animated GIFs hasn’t changed much in the last few versions.
What is an Animated GIF?
GIF Animations are graphics saved in the GIF89a file format that create the effect of animation by rotating through a series of static images. A display time is set for each frame, lasting seconds or fractions of a second.
GIF Animations generally loop. A loop is a complete cycle through all of the images in the animated sequence. An animated GIF can be set to loop once, infinitely, or anywhere in between. Virtually every web browser can display animated GIFs.
ImageReady makes it fairly easy to create animated effects if you’re already familiar with Photoshop layers. In addition to the Layers Palette (just like the one in Photoshop), you will also be using the Animation Palette (go to Window > Animation).