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.
Advertisement 3D ImageFlow Gallery
Dazzle your viewers with 3D photo navigation. Create an amazing gallery
with cool perspective effects in seconds and give your photos stunning
3d and camera effects. Add and edit your images directly in
Dreamweaver. Interact with other components like the Flash MP3 Player or Spry elements and effects to glue everything together.
Get 3D ImageFlow Gallery now 
Overview
Animated GIF files are just a series of static images that are viewed in sequence.
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).
Zac earned his BFA in graphic design at New MexicoStateUniversity. In the years before college, he wrote, drew, and published comic books. In the years since college, he's worked as a graphic designer for three large B2B distributors creating catalogs, web sites, and multimedia presentations.
Since 1999, Zac has taught hundreds of classes at the University of New Mexico and Santa FeCommunity College, including Photoshop, Illustrator, Dreamweaver, Flash, HTML and much more. He has also contributed to several Dreamweaver books as an author and technical editor for New Riders/Peachpit and Thomson-Course Technologies. The site he created for his students, www.creativefuel.org, is a good reference for anyone interested in design and graphics.
See All Postings From Zac Van Note >>
Reviews
Be the first to write a review
You must me logged in to write a review.