Tutorials::How to animate using Image Ready

Intro

This is a tutorial that goes over how to animate using Image Ready, which is a program that comes with Adobe Photoshop. You may not know it's there, but it is. Let's say we want to upload an avatar to use on a forum, but OH NO! You can't choose between four avatars! What you can do instead is animate them into one avatar. Be careful not to animate too many into one, though. The more files you animate into one, the lower the quality.
This is what you will be making.

Step 1

First, open up all the avatars you want to use. (You can actually do the same for banners. Just follow this tutorial. If you need to do anything differently, it should be self-explanatory.
E-mail me if you have any problems.) I have decided to use these four avatars.

Step 2

Once the avatars are opened up in photoshop, create a new image (Ctrl+N) that is 100x100 pixels. Now use Ctrl+A (select all), Ctrl+C (copy), and Ctrl+V (paste) to put all of the avatars on top of eachother onto a new canvas, but on different layers. So, this is what your layers window should look like:

Step 3

Now, we need to transfer this file to Image Ready. To do that, just click on the very bottom button on the tools window. This is what the button looks like:

Once you click this, it will open Image Ready and the image we just created (the canvas with the avatars on top of eachother) will be there.

Step 4

Alright, let's start animating. At the bottom, you will see this window:

This is where all of your frames are displayed. A frame is a still/screencap of an animated picture. For instance, the frames for this animated graphic would be these:

So now we just need to make four frames for our avatar, with a different avatar on each frame.

Step 5

On the window that shows your frame, you will see a little arrow at the top right corner of it. Click on that, and then select 'Make Frames From Layers'. Now you should have four frames.

Step 6

Play your animation by clicking on the green arrow. As you can see, it is way too fast. See, below each frame, where it says '0 sec.'? That means the second frame plays immediately after the first one. We will have to change that.

Step 7

Highlight all of your frames (by clicking on the first frame, holding 'shift' down, and clicking on the last frame) and click on the drop down arrow next to the any of the '0 sec.'s. Now try setting it to 2 seconds, and click on the play button.

Step 8

It may be okay for you, but I think it's a bit too fast. I'm going to highlight all of the frames again, click on the drop down arrow, and click on 'Other'. A window will pop up. Type in however many seconds you want it to be. I set mine to 3 seconds.

Step 9

Once you are pleased with what you get, go to File>Save Optimized As... and save it as whatever you like. Make sure you are saving it as a .gif file, because that is the only file extension that allows animated graphics.

Well, you're done! Here is the final result:

As you can see, the quality isn't all that great (you can see little dots here and there). Try not to use a bunch of pictures in an animation. Also, if you have too many images in an animation, pages will load slower for people with slow internet connection.
Now, you can have four avatars at the same time! Hope this tutorial helps!

Other

Can I animate images that are different sizes together? Yup! Just make sure that when you make the new image, the resolution is the maximum out of all of the resolutions. (Ex: If you have images that are 700x150, 400x100, and 550x200, you would want to make your animation 700x200.) .GIF also allows transparent backgrounds, so just put your smaller images wherever you want on the canvas.
But how do I make a glitter name/signature? It's not like I want to put different images in one signature/avatar. Well, it technically is different pictures, except they are called frames. Like the red glitter graphic I posted above, all of the frames look similar, but they actually aren't the same. Just animate like you normally would. For example, if you want to make a glitter banner, duplicate your actual banner three times and use the same star brushes for all three. Put the stars in different places for each duplicated layer. In the end, you will have three layers that look the same, but with stars in different places.

Have any questions or comments? E-mail me.
Back to Tutorials Index