I’ve made quite a few animated GIFs here at Pugly Pixel and I’ve received numerous requests for a tutorial. Animated GIFs are simple to make — all you need is a sequence of images to stitch together using an image editor like Adobe Photoshop (I’m using CS3). When the browser loads the animated image, it displays the frames one at a time and that creates the animated effect. Animated GIFs can be composed of a lot of images, like the one I made above, which has 36 frames. Or, they can be small and simple like the one I’ll show you how to make in the tutorial.
To get the full effect of the first animated gif I made above, click the play button for You Light Me Up by Radio Spectacular, a husband and wife duo from Australia (check out Phebe’s blog here!). It’s a happy and catchy song that would be a perfect way to end a Zooey Deschanel chick flick! And for the smaller animated GIF below, I chose a song from one of my favorite groups, my heroes, FOTC — Who Likes to Rock the Party. :D
By the way, the first animated GIF will stop after 10 cycles, and the second one will play forever.
After you’re finished editing your image, save it:
File >> Save For Web & Devices >> Choose GIF Preset.