Animated GIF Tutorial in Adobe Photoshop

Here’s a tutorial for making a simple animation of a blinking cat in Photoshop.

Step 1:  I start with an illustration I created. Notice that I have several sets of eyes in different states of closing. I organize each pair of eyes on a different layer (using the Layer Palette – Window > Layers), so they line up on top of each other.

Step 2:  Next, I open my Timeline Palette in Photoshop (Window > Timeline).

When that is open, I click on Create Frame Animation.

Step 3:  Now, I see that I have my first frame in my animation. I can turn off and on the set of eyes I have on layers in the Layer Palette. I started with the pair of open eyes.

Step 4:  Next, I want to create my next frame in the animation. I click on the Duplicates Selected Frame button. Then, I go back to the Layer Palette, turn off my open eyes layer, and turn on my three quarter open eyes layer.

Step 5:  I continue on adding new frames and changing the eyes in each one until I have each of the four eye states that I created in their own frame.

Step 6:  Now, I have my eyes going from open to closed, but I want them to blink. So, they need to open up again. I can do a shortcut here by selecting all the frames and copying them.

Click on the drop down menu in the upper right hand corner of your Timeline Palette and select Copy Frames.

After you copy them, go back to the same menu and select Paste Frames.

Step 7:  When you paste the copied frames, a dialogue box will pop up asking you where you want to paste them. I selected Paste After Selection.

Step 8:  Now, you have your copied frames, but they are in the wrong order. Select the new frames, go back to the drop down menu, and select Reverse Frames.

This reverses the order of your copied frames, so they go from closed eye to open.

Step 9:  Now that you have all your frames done for your animation, you can test your animation by playing it. Click on the Play icon on the Timeline Palette. Also, make sure that the Forever option is selected. This will make your animation loop.

Step 10:  After watching the animation, I decided it needed some time between blinks. I didn’t want my cat to look like she had a blinking problem.

So, I clicked on the drop down on my last frame and changed the time from 0 seconds to 2 seconds.

Step 11:  Finally, I need to save my animation. Go to Save for Web. From the file format options, choose GIF. Then, save the file.

Once I have my saved GIF, I usually open it up in my internet browser to see what it looks like.

Step Finished:  Here is my finished animation. Hopefully, this helps you create your own animations.