Making a move: Animated gifs (in Photoshop CS2)

For many web sites, animation is created using Flash. Flash is an Adobe program that can combine images, text, web programming and more to make something as seamless as a movie or as annoying as a “skip intro” page. If you want just a tad of movement somewhere on a page, such as lightly flickering stars in the background, I would suggest using an animated .gif instead of Flash.

If you are a basic Photoshop user, you can create an animated .gif if you know about layers and are willing to learn about the animation palette. Older versions of Photoshop do not allow for this, and Photoshop Elements or Image Ready can be used. In this tutorial I am using Photoshop CS2, a.k.a. Photoshop 9.0.2.

Photoshop defines animations as: “a sequence of images displayed over time. Each frame varies slightly from the preceding frame, creating the illusion of movement when the frames are viewed in quick succession.” Basically, you are creating animation the way cartoons are made, by replacing each frame with another frame that is slightly different.

Here is the sample image that I will be animating – a little stick figure enjoying Yoga.

In this instance, you can see that I have 4 layers on the image. From the top they are: Forward Bend, Downward Dog, Cobra and the white background.

GOAL: My intention is to have the stick figure do some fluid Yoga, going from one pose to another.

Step 1: Because I want the man to do his Yoga in place, I centered the layers with each other.

Step 2: With the image open, go to Window on the main menu and select Animation. This opens theanimation palette. Your image will appear in the first frame of the animation palette.

Step 3: Add a frame to the animation palette.

You can do this by clicking on the arrow on the top right of the animation palette and selecting “new frame” from the fly-out menu, or you can click the square at the bottom of the animation palette. Now you’ll see your image in the first frame & new frame of the animation palette.

Step 4: Select a frame and edit the layers of that frame.

You can do any of the following:

• Turn visibility on and off for different layers
• Change the position of layers to make layer content move
• Change layer opacity to make content fade in or out
• Change the blending mode of layers
• Add a style to layers

(FYI: you can only animate linear movements. Rotations need to be done frame by frame.)

You can generate new frames with slight changes between two existing frames easily and automatically using the Tween command in the animation palette. Tweening is a quick way to make an object move or fade into another shape. The button looks like a series of squares changing opacity:

In this case, I wanted to Tween my Yoga man between the 3 Yoga positions to make it look as though he is moving. I selected frame 1 and turned off the visibility of layers 2 and 3, so only Cobra and the Background layers were visible. Then I selected the 2^nd frame in the animation palette and turned off the visibility of the Cobra layer, and turned on the visibility of the Downward Dog layer.

Ready to Tween the 2 layers: allowing Photoshop to create the movement for me of the little Yoga man between the 2 Yoga poses.

Tweening: First I held down the shift key and clicked on both frames of the animation palette, so they were both selected. Then I clicked on the Tween button (the series of squares at the bottom of the animation palette.)

My tween menu popped up and I made the following selections:

6 new frames have appeared in the Animation palette!

I did not preview the animation at this time, because I had not edited the frame delay – the rate at which the animation changes from frame to frame. The animation would therfore move too quickly. So next I …

Step 5: Set frame delay and looping options.

You can assign the delay time between each frame (do you want to go from frame to frame every 4 seconds or every .25 seconds? etc…) and specify looping, so that the animation will run over and over or just run through once. I have chosen .5 seconds on each frame. Just click on the tiny black arrow next to where it says “0 sec.” on the bottom of each frame in the animation palette. (I did this 8 times.)

Ready to preview the animation.

Now, press the play button on the bottom of the animation palette to play a preview of the animation. You can also preview the animation in your web browser.

Step 6: Edit layers of additional frames as needed for your project. The number of frames you can create is limited only by the amount of system memory available to you.

I had another Yoga pose to animate, so I created a new frame in the animation palette. With only that new frame selected, I turned on the visibility of the Forward bend layer and turned off the visibility of the other 2 Yoga pose layers.

Then I followed the same Tweening process, highlighting the new Forward Bend frame and the one just before it, pressed the tween button, and instantly added 6 new layers.

Then I selected my frame delays of .5 sec again for each frame.

I also made some manual changes to the layers, duplicating those I thought would show better action and making the frame delay longer on frames that showed the finished Yoga poses.

Step 7: Save the animation.

In Photoshop, go to File, Save For Web. Make sure gif is selected. There are control buttons on this window to see the animation as it will finally appear one last time before saving.

(In ImageReady you can also save it in SWF format, like a Flash file.) I strongly recommend saving the animation as a .psd in case you need to rework the animation later.