Search Query

Animated GIFs

One of the cool things you will find while surfing the internet is the little animated graphics on various sites. These are animated GIFs. An animated GIF (graphics interchange format) has several images that are played in sequence to make an animation. While you cannot make an animated GIF in Photoshop, Adobe includes the handy program Image Ready in the package to help you create web graphics. This month, I’ll cover how to make an animated GIF.
You can make an animation from a layered Photoshop file, or you can create the layers within Image Ready. This month’s example will be made from two studio portraits. These are good candidates for animation because the pose, lighting and background are all very similar. To start, open the two images in Photoshop, make sure they are both about the same size and tonality, and use the Move tool to drag one image onto the other creating a new layer (fig. 1). Next, the top layer must be sized and positioned precisely over the bottom. A good trick in doing this is to set the top layer to 50% opacity in the Layers palette (fig. 2). In this example, I tried to line up the shirt since the head moves. Don’t forget to change the opacity back to 100%.

Fig. 1

Fig. 2

Since the top layer is not as wide as the bottom layer, I’m going to next add a layer mask to blend it into the bottom layer. Choose Add Layer Mask: Reveal All from the Layer menu. Using a soft-edged brush, paint black on the mask around the image to hide the edge of the photo and to make the background blend. Remember, if you accidentally cover something with the mask, you can paint it back in with white (fig. 3).

Fig. 3

To take this layered file into Image Ready, click the button at the bottom of the Tool palette. In Image Ready’s Animation palette, there will be one frame shown, duplicate this frame by clicking the Duplicate Frame button (fig. 4).
Now, simply select the first frame and turn off the top layer, then select the second frame and make sure that the top layer is turned on (fig. 5). Clicking on the Play button in the Animation palette will show you what the animation looks like. Try setting the Delay on the frames, I chose a Delay of 1 second (fig 6).

Fig. 5

Fig. 6
The last step is to save the file as an animated GIF. Make sure GIF is selected in the Optimize palette and then choose Save Optimized As from the File menu. All that’s left is to drop the GIF into your web page.
Final GIF
Paul Vaughn is the Director of Digital Services at River City Silver, the premiere photographic and digital imaging laboratory in San Antonio and South Texas. This and other animations can be seen in the Family Photos section of his web site at, he can be contacted at

|| Home || Graphics Guy || Mac Guy || Gallery || Payment || ||

This site and all images and text contained in it are ©2006 Paul Vaughn.
(Unless otherwise noted)
Questions? Problems?