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:

free divs simple animation in photoshop


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.

create your object
 

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.
 
own layer


Now open the Animations window (Window>Animation).
 
open animations window


It should look like this
 
animation window


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

changing the time frame
 

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.
 
new frame
move object
 

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
 
start position
end position
 

Then click the tween button

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.

tween settings 


As you can see that I have frames now
 
all frames


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


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


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

save as a GIF file

Final Result

free divs simple animation in photoshop

Feed the Dragon MySpace Tutorials