15 quick steps… nothing complicated, just the basic stuff. I will be using PS and IR version 7 for this tutorial.
1. In photoshop, create a small image, it can be anything you want.
For this example, I created a pixel-based image of 'Duo' from Gundam Wing. It doesn’t have to be pixel-based, but I like the way these look. If you don’t know how to create pixel-art, there’s a million tutorials on the web, just search for them. Basically, it's just creating an image using only dots (or pixels) using the pencil tool with a size of 1px in photoshop.
2. Save it as a GIF image. (see thumbnail 1)
3. Now, using the same image, change it slightly in any way you want. I'm making Duo blink, so I just changed his eyes to being closed in this image (see thumbnail 2).
It's IMPORTANT to note that you should only make a SLIGHT change to the image. Don't change the size at all (ie. keep the width and length the same), and keep the basic shapes or outlines the same. (If you practice and practice, you'll come to understand how to make just very, very slight changes... but we won't get into that now).
4. Save this image as another GIF, with a different name. Now you have two images that are the same size and basically the same in appearance.
5. Open them in ImageReady. In ImageReady, leave the settings to default (and all should be fine). Make sure you have the Layers window, the Animation window, and the Tools window open (they can all be found in 'Window' in the menu tab). These are all we'll need for this tutorial.
6. Click you're second image (by default, the 'original' tab should be chosen). Click on the 'Move' Tool in the tools window, and click and drag your second image ontop of your first image.
IMPORTANT: You need to make sure that the second image fits PERFECTLY over the first one. This is essential in making the animation work, and that's why I stressed earlier about keeping them the same size.
7. You can close the second image now. We don't need it anymore. Now in the Layers window, you should have two layers… the original GIF image (Duo with open eyes) first, then ontop, a second layer with your second image (Duo with closed eyes).
8. Click on the animation window, and you should see a little picture of your second image (these are called FRAMES) with the number '1' in the corner of it. Click the Frame Duplication button on the bottom on the animation window, and a second frame should appear in the window next to the first one – exactly the same as the first but with a number '2' in the corner. (see thumbnail 3)
9. Click the first frame again in the animation window (the one with the number '1' in the corner), then go to the Layers window, and HIDE the layer that has your SECOND image on it. (you hide by clicking the little eye icon to the left of the layer). The frame with '1' in the corner should now look like your FIRST image (duo's eyes open), while the second frame ('2' in corner), should remain as your second image (duo's eyes closed).
10. Now for the animation part! On the bottom left corner of the animation window, you’ll see a tab saying 'once' with an arrow next to it. Click the arrow and change the 'once' to 'forever'. This will make the animation continuous, instead of just moving once.
11. Directly below each frame you should see '0 sec' and a little arrow. These are to specify the length each frame will run for when the animation plays. Click that little arrow for the first frame, and a menu will come up with a list of times you can choose (these are all in SECONDS, by the way). Choose a time you want the first frame of the animation to play for, or click 'Other…' to specify your own time. For my first Duo frame, I specified the time to be 1.3 seconds.
12. Click the second frame, and specify the time you want THAT frame to run for. I chose my second frame (closed eyes) to run for 0.5 seconds.
13. After this, you can click the 'PLAY' button on the bottom on the animation tab to play your animation and see how it looks. It will play in the image window it originally opened in. YAY! Now my Duo blinks!
NOTE that if you specified really QUICK times for your frames, it might go slow on ImageReady, so just make sure to note that.
Press stop before saving.
14. To SAVE the animated GIF, go to "File > Save Optimized As…" and a save window will pop up. Choose the GIF's destination and name it anything you like. Save as type: Images Only (*.gif), and the settings: custom. (these should automatically be present by default)
15. NOW you have a working animated GIF! Just close ImageReady (you don't have to save changes), open your animation in a browser or image viewer or whatever… and watch it move! My Duo now blinks proudly! (see thumbnail 4)
(awww isn't he cute?)
Just some side notes: If you want to make more than one frame, no prob. Just keep making the VERY slight changes to each image, drag all of them so that the layers are in order ontop of the first image, and duplicate as many frames as you need to have them all there (remember you just hide another layer for another frame). Keep practicing to get really good! I use to create all these smilies of my friends, and at one stage I was into those little dolls, you know? Lol... teen years.
And you don't just have to make animations with pixel-art, you can manipulate normal images, too. But that's a little harder. I created this one for my sister's live journal last year, but it kinda looks scarey to me now... I don't really do animations that aren't pixel based. (watch his eye)
Just ask me if you don't understand anything or if you have any trouble.
Have fun chickadees!
