This tutorial helps you create an animated gif with Photoshop’s Animation feature. We are going to create a simple loading gif, like the ones you see on sites with Ajax calls. I’m going to assume you have Adobe Photoshop installed and that you have a basic working knowledge of how to use it. If not there are plenty of tutorials out there that will help you learn the basics and so much more.

Photoshop’s Animation feature works in frames, the same as a movie does, so we essentially have to create a series of frames. Lets start by creating a new file, a simple 50px by 50px will do.

New File

Now we need to create the last frame of our animation. Its better to do things this way as we can work backwards to the first frame and then back to the last so the animation repeats. For this animation we are going to show the outline of the Moosch icon, and gradually fill it up. Creative huh?

Moosch Icon

It’s looking good so far.

There are many ways to build your animation, but for this tutorial we are going to take our completed image, and cut it up into each animation stage. We will end up with many layers which when all present make up the complete image. Make sure you name your layers, that way if your animation is comprised of multiple layers, you can easily search though the frame sets to find the one you want to work on.

The basics of how Photoshop animations work are at each frame, you specify effects on the layers, as well as the time delay on each frame. So for example, at frame 1, all but 1 layer have opacity set to 0 and time delay is set to 0 seconds. At frame 2, the opacity may change on some layers, bringing those layers into view, and delay is again set to 0 seconds. If you’re looking for a smooth animation it’s best to keep all time settings at a constant. Once you have these settings configures, you use tweaning to set a transition method, changing the smoothness of the animation. That’s pretty much it.

So lets start to get our layers together. Lets keep a master layer that is the whole image, and duplicate it and cut away all except the portion of the image that we will later make disappear. We are going to delete all but the first 2 rows of pixels, then create another duplicate of our full image and delete all but the first 4 pixels, then the 2 pixels we deleted in the first. So you will see how we are going to have a modular image here.

Photoshop Layers

Carry on in that way until you have created 2 pixel strips of the whole image.

Next we need to open the Animations window.

animations window

You will see that there is a Frame already created. This is our starting frame for the animation. On our first frame we should set all the layers to hidden so we can build an animation from there.

Frames

Select your first frame, then click the Duplicate Selected Frames icon at the bottom of the Animations window. Then select our newly created second frame and in the layers window reveal the layer at the bottom of the image. We are wanting our complete image to ‘fill up’ so we are starting from the bottom and working our way to the top.

Second Frames

Continue in this way until you have the same number of frames as your animation layers, remembering to set the time delay for each frame.

All Frames

You can use the Tween command to ease specific sections of the animation by adding additional frames between the existing frames.

tween

This can be useful to smooth out transitions, so instead of simply revealing one frame after the other, there is a step or steps between where pixels fade in. But for the size of our animation we will not need this feature.

Ok last test to make sure everything is as we want it. Select the first frame, set zoom to 100% (cmd + 1 on mac) then click the play button.

plan animation

It should look pretty nice, so lets go ahead and save it as a gif. We need to use Save for Web & Devices, so click File and you will see it as an option (if you’re on a mac hit shift + alt + cmd +s).

save for web

Select preset as GIF 64 No Dither, and be sure to set the transparency if you need to.

Save Settings

We want our gif to continually animate so at the bottom of the window set Looping Options to Forever.

Loop forever

Now we are good to go, so name the file and save it where you want it.

That’s it! You’re very own loading gif animation to use wherever you feel.

Moosch animation

Download PSD