Simple GIF Animation Tutorial

Made by: Nick

In the older adobe versions there was a program called ImageReady, to make animations, but with Photoshop CS3 and above you can make them without the hassle of using a separate program.

In this tutorial i'll show how to make a simple animation in a few simple steps. This is what I created:




First write you're text or create the object you want to animate. Do note that it doesn't matter if your object is too large for your canvas if your aim is to animate the rest of the object onto the canvas like I do in the example.


 

Make sure each animated object is on its own layer. In this example we are only using one animation, so only one layer is needed.
 



Now open the Animations window (Window>Animation).
 



It should look like this
 



You can change the time of each frame if you like:


 

Now to start, create a new frame and move the object as you want. Repeat this step as you want. Or for a much easier way move on to the next step.
 


 

Another easier way is by putting the object on it's start position in the first frame, and in the second frame set it to the ending position
 


 

Then click the tween button


 

Here set the sittings you want (The More frames, the the more smooth the animation will be, but beware that more frames mean that the image file will be larger). 30 frames per second is usually the standard for smooth animations, but this does create large file sizes and I would be aware of this when creating an animated GIF image.

 


As you can see that I have frames now
 



Finally there's an option for repeating, you may set how many times the animation repeats
 



Now to save the work, go for Save for Web & devices from File menu (File>Save for web and Devices)
 



Make sure you set the type of image to GIF and then save otherwise it will not work properly.

Final Result