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