Basic Animation Guide with Adobe ImageReady

This guide will teach you how to make a basic animation with Adobe ImageReady CS, like the one in my avatar.

I used Adobe ImageReady CS Version 8. But I suspect most features should be the same with other versions so if it doesn't work by using this guide, there will probably still be another way of doing it.

Create a new Document by going to the File Menu and selecting "New..." or you can press Ctrl + N.

A Dialogue like the one below will appear.



I have used the normal size for an avatar, 100 X 100 pixels. If you want it to be bigger or smaller, adjust it to suit your liking. When you are finished, press "OK".

Before you do anything more, make sure you have the following windows open, by selecting the "Window" Menu on the top toolbar. Select the windows with ticks beside them.



Open the first image to be used in the animation. For example, my first image is a picture of my Runescape Character in Melee Form.



Open as many other images to go in the animation as you want and then move on to the next step.

Click and drag from where the bottom arrow is pointing (one of your images) and drag it to where the top arrow is pointing (into your animation).



Continue doing this for the other images you want to use.

Close the windows you don't need open... don't close your animation file.



Duplicate the frame for as many images you need to put into the animation. I have duplicated twice, giving me 3 frames, for 3 images.



Now: These are the eyes. In the Layer Menu.



Take away the eyes so that there is a different image in each frame...





Now change the Delay times. This is how fast an image will show for before switching to the next image.



In the File Menu, select "Save As..." and save as an Imageready and Photoshop file.

Then to save in the .GIF Format (to make it viewable and animated) select "Save Optimized As..." as shown below.



Then... The Finished Product!



To upload and post to forums, have a look at the topic on how to upload images.

***Guide created by Chief. Snake - (c) 2005***

Thats ImageReady right. Ok, can I ask you what version are you using .
Cause mine doesn't look exact same as yours. Just out of curious, but the tools are same.

Nice turtorial! You could post this in the Guide forum.. Where you'll get more attention.

gj, i like the guide, but i have a program that lets me make animated pics really ez.

Look the the one i made yesterday in my sig, took me 10 mins with the program i use

Oops .. Didn't see that part ..

Ty so much for the comments everyone Ill post this in the guides section ASAP.

Also it may not look too easy but it's mainly because it looks long and Ive put alot of pics in it. Once you do it a few times you basically memorise the whole process. I actually taught myself how to do it, like I do with a lot of things

And yes, I agree there probably is an easier way, for example where you have to click and drag the parts - you just switch into Photoshop and use Copy & Paste, then switch back to Imagready. I was wondering if I could do it without switching to Photoshop so that you would only need the one program (Imageready) to do it. And so I found a way and taught myself.

And of course there are other GIF creators out there, and they are usually very simple to use, and very quick too, but they are very very basic and don't have skills like Imageready. I used to have one called Animagic it was only a free trial though so I didn't do much with it...

So thanks again and I'll go post this in the Guides forum now.