Current mood:	accomplished
Entry tags:	animation: animated gifs, animation: file size optimisation, animation: mini movies, animation: miscellaneous, program: imageready, tutorial: animation

Animating Icons in ImageReady
Okay, I've broken down and started writing a little tutorial on animating icons in ImageReady. I use ImageReady 7.0, but, from experience, I'll say that everything I'm going to show you can be done in ImageReady 3.0. I don't guarantee anything; this is the first tutorial I've attempted to write.

NOTE: Since writing this, I've discovered an even easier way to animate the multiple frames. I'm going to add that in here, setting strikes through the old so that it's still legible, but you know where it starts and ends.


The Shortest, Easiest Way to Animate
We're going to start out with the easiest way to actually animate an icon. First, you can prepare each of the frames of the animation in Photoshop. Do whatever you'd like with them. I'll be animating two Seabiscuit icons together. When you have the pictures the way you want them, save them and open them up in ImageReady.


Here you can see the two pictures I'll animate.


If your layer menu looks something like this, select Layer --> Merge Visible. If everything is in one layer, it will make it easier to move.

Then create a new document sized 100 x 100 pixels. Note the animation menu near the bottom of the window.



This is where much of the work will be done. Each of the little windows you see shows a frame of the animation. Right now, we don't have anything there. Go ahead and drag your first picture (the one you want to show up first in the animation) into the window, making sure to cover the transparent part of the icon.

Your layer menu will look something like this now:



Go ahead and merge all the layers into one. This will simplify things if you choose to use a fade transition later.

BEGIN EDIT: Here's were we're going to change things around a bit. I apologize for my lack of new pictures, but I have class in a few minutes... Anyway. Remember how we have all of our desired frames opened in separate windows? Choose the document window with the picture you want for the second frame. Then go to the animation submenu (like it shows in the picture below) and choose Copy Frame.

Now go to the right end of the animation menu, click the little arrow and choose New Frame. This is illustrated below.



Drag your next picture into the animation. Your animation menu will probably end up looking like this, with the new picture covering the first frame as well as the second. That's okay. Click on the first frame, drag the unwanted picture out of the document window.




(Dragging the unwanted picture out)

Go back to the document with your original frame. Click on the animation submenu and choose Paste Frame. A smaller window will pop up with a number of options. Choose the one that puts the frame where you want it in the sequence. The first time around, this will probably be Paste After Selection. Just pay attention to what frame is highlighted in the animation window when you first click and choose accordingly. Now your second frame is there, all lined up, with no fuss, no dragging and no altering old frames. END EDIT

Now you can make sure that the picture is moved to the correct position in the second frame. Remember to click on the second frame in the animation menu. If your program is set to create a new layer with each new frame, go ahead and merge the second frame down onto the transparent layer. You can repeat this as many times as you need for frames, but keep in mind that you can't put too many different pictures in an LJ icon, animate it, and still keep it under 40k. If you try to, you'll have to ruin your color quality in trying to optimize it.

Once you have all of your desired frames made, it's time to set the timing on them. Personally, I prefer slower animations. There is nothing I hate more than an animation with text that flashes by too quickly for me to read. So if you have multiple words, lyrics, etc. in one of your frames, please don't set the time less than 1 second. Sometimes ImageReady doesn't display longer animations with the proper timing when you preview it. It may be necessary to save it as a .gif and preview it a few times. Don't worry if you don't know how to do that yet, we'll get you there.

The place to change time is at the bottom of each individual frame. There are some preset times that you can choose, or you can customize by giving the program particular numbers of seconds. That's up to you and it depends a great deal on what you're animating.

When you think you have the frames timed the way you want them, you can preview the animation by clicking the "Play" button on the animation menu.



If you don't want any special animated effects in your animation, you can skip on to Saving and Optimizing.


Faded Transitions
To accomplish effects like this, you can use the Tween button on the animation menu.



A secondary window will pop up. For a faded transition in an LJ icon I suggest having the following settings:



You won't manage to get more than 2 fade frames into an icon and keep it under the size limit, unless it's some kind of mono-color icon. Just FYI. You'll need to change the time spent on those frames as well, probably to 0.2 seconds or less. Check frame-by-frame to make sure that it transitions the way you want it to. Sometimes, due to layer problems, ImageReady gives me trouble on faded transitions. If that's the case, mess around a little while with your layer orders, etc. and see if that helps.

Now, to make things a little more seamless in the transitioning of this icon, I'm going to duplicate my tweened frames and put them at the end of the animation menu, so that the icon does a fade transition between both frames. Depending on the number of frames you have, you might not be able to make it wrap around like this. It all comes down to file size in LJ ;-)



My final animation menu looks like this:



And the final icon looks like this:



Now you can go to Saving and Optimizing.


Scrolling Text
This effect is best used on a still photo. If you try to scroll a photo and text, you'll wind up with a file way too large for LJ. Trust me, I've done it ;-) Prepare your still photo and open it up in ImageReady. I'll be working with a Haldir base of mine and adding a quote from Edgar Allen Poe.

Create a text layer, using the text tool (the same black T as in Photoshop) and draw out a box long enough for your whole quote. Don't worry if it goes off the picture, we're going to scroll it across later. Adjust the text to whatever font, color, outline, etc. that you want.

Now, drag the text layer so that the first word is just visible on the icon:



You'll want to note, in terms of height, where the text lies on the icon, because you want the scrolling just to go across, not to move up or down as well. Go to the animation menu the way we did earlier, and chose New Frame. In this frame, drag the text so that the end of the quote is just visible.



Now go to the Tween menu (the button is displayed in an earlier photo), and set the next menu's settings about like this. Your number of frames will depend on the length of your quote. Keep in mind that this will have to play slow enough for someone to read it.



Click through the frames and make sure that the text scrolls the way you want it to. Then change your time settings on each one. This is quickest if you return to the animation sub-menu (where New Frame is) and choose Select All Frames before setting the time on one of them to something like 0.2 seconds. Play it a little while to make sure that you can read it as it goes by. Once that's done, you're ready to move on to Saving and Optimizing.

Just for reference, here's what my final icon looks like, with settings to 0.2 seconds a frame:


Saving and Optimizing
When you're finished with the animation and its effects, you'll want to switch to the Optimized tab on the document window, so you can see what it will look like with the current optimization settings. I'm moving my document window up to the top right corner of the screen where the optimization menu is, mostly for ease in photo-taking ;-)



Here you can see the chosen optimization tab along with the current settings of the icon. At the bottom of the document window, the current file size is shown. On the optimization menu you can see that I've only got 60 colors in my .gif photo currently. Because these are monochrome pictures, I can get by with something like that in my transitions. Full color icons take a lot of colors to make fade transitions look good. The main way to optimize an icon is by increasing or reducing your number of colors to get the file size below 40k with the maximum quality. If you can't get the file to optimize with decent color quality, try removing some of your transition frames, or taking out some frames altogether.

When you have the file to the size and quality that you want it, go to File --> Save Optimized As... It's very important that you choose this and not Save As... The typical window will pop up, name your icon and save it to your desired directory.


There you go! An animated icon, hopefully with as little pain as possible :-)