Animating gifs in PhotoShop/ImageReady
Another tutorial from the Adobe side of things--this is on how to animate gifs using ImageReady (the partner to PhotoShop; I'm using PS 7.0 and IR 7.0). It's kind of long, but hopefully detailed.
I'll go through step-by-step how I usually animate icons.
First, before anything, you should have your PSD file done with all the layers that will end up being separate frames. For instance, when I animate text, each block of text is on its own layer, so I can show it or hide it at will. When your PhotoShop file has all the layers you want to animate, have it open in PS. Then go to File > Jump To > Adobe ImageReady 7.0.
In the lower left hand corner, you'll see something like this. Your frame will probably be different, heh, but this is the window that you'll do your animation work in, in the Animation tab, naturally. You can see also the window with the file itself above that; when you're ready to hit the play button, that's where you'll see the animation. That's later, but I just want to give you your bearings for now.
You'll want your gif's animation set to "Forever" so that it loops endlessly. Unless you want to annoy people by having it only loop once, I guess, but I hate that.
The first thing to do is make some more frames. Hit the little page button to the left of the trash can at the bottom of the Animation tab. You can always add more frames later, or delete some if you get too many, but now is a good time to calculate how many main frames you need. This particular icon of mine is supposed to say "sometimes ... I can see ... right through ... myself." That's four frames. BUT--that's not all the frames you'll need, necessarily. If all you want to do is have the icon flash to the next frame, like in this sample, you might be set with the number of frames. I prefer to add one more, sometimes, and leave that free of text, so that the viewer knows where the lyric ends. That'd be five frames, then--4 for the text, and one more as a spacer.
You have a layers window, probably off to the right if you haven't been messing with the settings. Sometimes the History tab is active, but if so, just click on the Layers tab. Now we choose which frames display which text. Click where the little eye symbol is to turn the layer on or off. The very first frame should have the first layer of text--in this case, "sometimes". The base layers (the woman, the gears, and the texture, in my sample icon) should always be visible; all we're changing in this case is the text. The second frame should have only the second chunk of text visible (so make sure you remember to turn off any other text), the third frame should have the third chunk, and so on. You'll have a layer of text assigned to each frame, and if you set the delays right, you'll get an animation style like that first sample icon I linked.
But sometimes that kind of animation comes across as jerky. So we're going to use a trick.
Select frame one, hold shift, and click on the second frame. Both will be selected. Now hit the button below that has little squares diagonally across it; this is the tween button. What it does is make as many "between" frames as you want.
When you hit the tween button, this box pops up, and you can choose how many tweens you want. For very simple, fast fades, add one frame; for longer and slower fades, add more. I never add more than 3 tween frames.
So tween all your main frames.
I used one tween frame on this icon. The next thing I do is set frame delays (if you're skipping tweens and going for simple animation, this is the point where you want to start paying attention again). Click on the first frame where it says "0 sec." On the main frames--not the tweens--set them each to, say, 2 seconds. For short text, that's fine; if you've got longer lines on each frame, add more time, so it's easier to read. When you have all your main frames set to an appropriate delay, try hitting the play button (the lone rightward pointing triangle, just in case you don't have familiarity with DVD or VCR players, hee). You can see how the time delays work, whether you need to fudge them... If you have your tween frames set to 0 seconds, you'll see how very quickly they pass by; you can set them to 0.1 seconds if you prefer--it does make a difference, especially with more than 1 tween.
Okay, now, this part is important. If you use tween frames, it makes your animation look nice and smooth, right? But--unless you make another copy of your first frame and put it last, the animation will jerk when it gets to the end of what you've made. Take a look at this icon to see what I mean. It jumps jerkily from "myself" back around to "sometimes". This is the error that I see more than anything on animated icons, and it really bugs me. For something like this, where the animation has a linear progression (1 to 2 to 3 to 1 to 2 to 3 and on and on), it's very important to tween your last frame (here, the "myself") with a newly inserted last frame (which would be "sometimes" again--so the last frame is identical to the first).
If you're just animating two frames--I'll call them A and B--then you'll actually need three main frames. A, B, A. You tween A and B, and then you tween B and A. This makes it smooth overall, without that jerk at the end. Makes you look skillful. Like in this icon, "if you love me" is A, "then love me" is B, and then I added another A of "if you love me" and put one tween in for each pair of frames.
For animated icons that are more like this and this, they're not as linear; instead, they build up and then--this is the important part that people sometimes miss--they have to build back down again. So it doesn't go 1, 2, 3, 4, 1, 2, 3, 4. Instead, it goes 1, 2, 3, 4, 3, 2. That little 3, 2 segment is the part that people miss. If your icon is supposed to get progressively brighter, make sure you make it get progressively dimmer after that, so it doesn't just jerk from bright to dark!
Another piece of information about the icons like the ones I linked in the previous paragraph--you don't use tweening. What I did, instead, was select an area and increase the brightness by 5 on each progressive layer. I put them in order in ImageReady and set the delay to 0.1 seconds, with no tweening. You don't need tweening if you're manually doing the minor changes between each frame.
To save your file as a gif, now, go to File > Save Optimized As. If it doesn't want you to save it as a gif, close that box, check your Optimize window, and in the upper left, make sure it says GIF and not JPEG or something else.
One last neat thing about ImageReady is that you can open that program, hit ctrl-O, and open any saved animated gifs you have. That way you could see exactly how they were animated. For example, you could open any of the sample icons I linked in this post and see how long I set my delays, etc.
As usual, please let me know if I was vague! And if this was helpful, I'd like to hear that, too. If I don't feel it's very helpful, I won't make more tutorials.
- FAQ, rules, and other info in the userinfo.
- Request here.
- See the memories for older icons/bases.
- Get your icon critiqued by us.
I'll go through step-by-step how I usually animate icons.
First, before anything, you should have your PSD file done with all the layers that will end up being separate frames. For instance, when I animate text, each block of text is on its own layer, so I can show it or hide it at will. When your PhotoShop file has all the layers you want to animate, have it open in PS. Then go to File > Jump To > Adobe ImageReady 7.0.
In the lower left hand corner, you'll see something like this. Your frame will probably be different, heh, but this is the window that you'll do your animation work in, in the Animation tab, naturally. You can see also the window with the file itself above that; when you're ready to hit the play button, that's where you'll see the animation. That's later, but I just want to give you your bearings for now.
You'll want your gif's animation set to "Forever" so that it loops endlessly. Unless you want to annoy people by having it only loop once, I guess, but I hate that.
The first thing to do is make some more frames. Hit the little page button to the left of the trash can at the bottom of the Animation tab. You can always add more frames later, or delete some if you get too many, but now is a good time to calculate how many main frames you need. This particular icon of mine is supposed to say "sometimes ... I can see ... right through ... myself." That's four frames. BUT--that's not all the frames you'll need, necessarily. If all you want to do is have the icon flash to the next frame, like in this sample, you might be set with the number of frames. I prefer to add one more, sometimes, and leave that free of text, so that the viewer knows where the lyric ends. That'd be five frames, then--4 for the text, and one more as a spacer.
You have a layers window, probably off to the right if you haven't been messing with the settings. Sometimes the History tab is active, but if so, just click on the Layers tab. Now we choose which frames display which text. Click where the little eye symbol is to turn the layer on or off. The very first frame should have the first layer of text--in this case, "sometimes". The base layers (the woman, the gears, and the texture, in my sample icon) should always be visible; all we're changing in this case is the text. The second frame should have only the second chunk of text visible (so make sure you remember to turn off any other text), the third frame should have the third chunk, and so on. You'll have a layer of text assigned to each frame, and if you set the delays right, you'll get an animation style like that first sample icon I linked.
But sometimes that kind of animation comes across as jerky. So we're going to use a trick.
Select frame one, hold shift, and click on the second frame. Both will be selected. Now hit the button below that has little squares diagonally across it; this is the tween button. What it does is make as many "between" frames as you want.
When you hit the tween button, this box pops up, and you can choose how many tweens you want. For very simple, fast fades, add one frame; for longer and slower fades, add more. I never add more than 3 tween frames.
So tween all your main frames.
I used one tween frame on this icon. The next thing I do is set frame delays (if you're skipping tweens and going for simple animation, this is the point where you want to start paying attention again). Click on the first frame where it says "0 sec." On the main frames--not the tweens--set them each to, say, 2 seconds. For short text, that's fine; if you've got longer lines on each frame, add more time, so it's easier to read. When you have all your main frames set to an appropriate delay, try hitting the play button (the lone rightward pointing triangle, just in case you don't have familiarity with DVD or VCR players, hee). You can see how the time delays work, whether you need to fudge them... If you have your tween frames set to 0 seconds, you'll see how very quickly they pass by; you can set them to 0.1 seconds if you prefer--it does make a difference, especially with more than 1 tween.
Okay, now, this part is important. If you use tween frames, it makes your animation look nice and smooth, right? But--unless you make another copy of your first frame and put it last, the animation will jerk when it gets to the end of what you've made. Take a look at this icon to see what I mean. It jumps jerkily from "myself" back around to "sometimes". This is the error that I see more than anything on animated icons, and it really bugs me. For something like this, where the animation has a linear progression (1 to 2 to 3 to 1 to 2 to 3 and on and on), it's very important to tween your last frame (here, the "myself") with a newly inserted last frame (which would be "sometimes" again--so the last frame is identical to the first).
If you're just animating two frames--I'll call them A and B--then you'll actually need three main frames. A, B, A. You tween A and B, and then you tween B and A. This makes it smooth overall, without that jerk at the end. Makes you look skillful. Like in this icon, "if you love me" is A, "then love me" is B, and then I added another A of "if you love me" and put one tween in for each pair of frames.
For animated icons that are more like this and this, they're not as linear; instead, they build up and then--this is the important part that people sometimes miss--they have to build back down again. So it doesn't go 1, 2, 3, 4, 1, 2, 3, 4. Instead, it goes 1, 2, 3, 4, 3, 2. That little 3, 2 segment is the part that people miss. If your icon is supposed to get progressively brighter, make sure you make it get progressively dimmer after that, so it doesn't just jerk from bright to dark!
Another piece of information about the icons like the ones I linked in the previous paragraph--you don't use tweening. What I did, instead, was select an area and increase the brightness by 5 on each progressive layer. I put them in order in ImageReady and set the delay to 0.1 seconds, with no tweening. You don't need tweening if you're manually doing the minor changes between each frame.
To save your file as a gif, now, go to File > Save Optimized As. If it doesn't want you to save it as a gif, close that box, check your Optimize window, and in the upper left, make sure it says GIF and not JPEG or something else.
One last neat thing about ImageReady is that you can open that program, hit ctrl-O, and open any saved animated gifs you have. That way you could see exactly how they were animated. For example, you could open any of the sample icons I linked in this post and see how long I set my delays, etc.
As usual, please let me know if I was vague! And if this was helpful, I'd like to hear that, too. If I don't feel it's very helpful, I won't make more tutorials.
- FAQ, rules, and other info in the userinfo.
- Request here.
- See the memories for older icons/bases.
- Get your icon critiqued by us.