In this article our goal is to create an animation gif image that can serve as web graphics or banner. For this article I chose to create an animation of evolution. We will use 7 images to animate.

We will use a series of image and apply a small increment of a filter, movement, or other operation. Copy the layer again and apply the operation one more time. Continue this process until the animation is complete.

If you would like to get the source files for your practice you can do so by downloading the files from Download section. You will need to register to download the files. Registering to this site is free.

Here is a step-by-step example of preparing the Photoshop animation:

1. Open the evolution.psd image. It should look like this on your layers palette
 
Figure 1.1 the images are separated from the Background

2. Choose Window → Animations. You should see an animations window as shown below

Figure 1.2

3. Click on Duplicates Layer 6 times. In your case it may be different depending how many layers of images you have. On the figure 1.2 the Duplicates layer is circled in red.

4. You will now see duplicate layers of same images as show in figure 1.3.

Figure 1.3

5. On your layers palette make all your layers invisible except the one that you want to display on your first frame. In this case it will be layer zero.

6. You layer palette should look like figure 1.4. You can click on the time and reset the time to you needs. We are setting it to 1 sec.

Figure 1.4

7. Next Step is to make the Layer 1 visible and click on frame 2. This is the layer you want to display on your second frame. Set the time and move onto the next one.

8. Keep repeating the same steps for each layer. Once complete you can click on the play button on the bottom of the animation window and see it in action. If you are happy with the result you can save the images by going to File --> Save for Web --> save as gif.

That's it. You are done. You have now created an animated gif. You can use this method to create banners, animated button, images and more. Now your image should look like this:

I hope you have enjoyed and hopefully learned something from this article. If you have any questions or comments feel free to post it in our forums section.