Animated Gifs Tutorial- Part 3

Now as we take a look at the final image that we'll be working with for the animation stage, think about what you want to animate. The eyes, ears, mouth, etc. Anything that you want, you can be creative with it. I will keep it simple for the tutorial and go with my "infamous" blinking animation. I'll be making both Meroko and Takuto blink once every several seconds, at different times to make it look more natural. So we must now create separate images for this to work.

15.) Make sure you name this file 'MT1.bmp', which stands for MerokoTakuto/1st frame. Make a copy of this file and name it 'MT2.bmp'. We will make the frame for Meroko's closed eyes. Now Open up 'MT2.bmp' in MS Paint and zoom in again to 400% or 800% to for more accuracy in this stage.

16.) Since we have a pretty rough idea of what Meroko's closed eyes might look like, we will fill in her pupils and iris to her fur color. Use the Eyedrop tool to get her pink fur color and manually fill in this area with the paint brush. Try to get some of the sides of her eyes colored as well, since that part will be closed as well. You should then get something like this.

You can draw the eyes closed anyway you want, but this is my version.

17.) Now make another copy of 'MT1.bmp' and name it 'MT3.bmp'. This will be the frame for Takuto's closed eyes. This should be fairly simple. You can either flood fill both black dots white or just erase the top of his eyes to make his eyes look closed. This is how mine looks.

Now that we have all the frames we'll need for this animated gif, it's time to animate the frames!

18.) In the PSP 8 program, go to 'File' -> 'Jasc Software Products' -> then 'Launch Animation Shop'

19.) Next, go to 'File' -> then pick 'Animation Wizard'. Now, you'll see a window come up asking you what the total dimensions of the new animation to be. Leave it on 'Same size as the first image frame' and click 'Next'.

20.) Now for the default canvas color, you want it to be set on 'Transparent', so you can later make the background of the gif transparent. Without this, you're gif will never get to have a transparent background. Now click 'Next'.

21.) For the next set of options, leave everything the way it is and click 'Next' again.

22.) You can choose whether or not you want the animation to play repeatedly or just a certain amount of times. I always set mine to play on repeat. And for how long you want each frame to be displayed, I always choose 72 for most of my gifs that blink, since it looks the most natural in speed. Click 'Next'.

23.) Now you must add each of the frames in this option but choosing 'Add Image'. Locate each of the three files adding them in this order: 'MT1.bmp', 'MT2.bmp' and then 'MT3.bmp'. It should look like this.

Once they are all in the list in this order click 'Next' and then 'Finish'. You now should have this displayed.

24.) Now for an early start on making the background transparent, we have to choose a solid color in the color palette from the 'Basic Colors' section. It should be a color that is not already in this gif. In this case, we'll choose the third color down the first row, the neon green. Now flood fill the areas that you want transparent, everywhere outside the plushies, even the little space between them. You can zoom in to get a better look. Make sure every space filled is the same for all three of these frames. It should now look like something like this.

Next we have to think about when you want the plushies to blink. For this example, I'll make Meroko blink before Takuto does. So now, we need to make duplicates of the first frame to start the animation off. For most of my blinking gifs, I make 4 copies of the first frame to make the interval between the blinks seem more natural.

25.) Now right click on the first frame or 'F:1' as indicated below the frame, and choose 'Copy' then right click again on the same frame and go to 'Paste' then pick 'After Current Frame'. Rick click on the first frame again and 'Paste' - 'After the Current Frame' 3 more times. Now stretch out the window and you should now have this.

This completes the part for Meroko's blink. Now we will go to Takuto's blink.

26.) You can choose to make him blink immediately after Meroko blinks or a couple seconds after. For a shorter interval we'll make about 3 copies of the first frame and put it between frame #6 and #7. Right click on the 6th frame as indicated by 'F:6', and 'Paste' - 'After the Current Frame' 3 times. Now you should have ten frames altogether.

27.) Next we will make the background transparent. Click on 'Animation' on the top menu and go to 'Replace Color'. You want to replace the color for 'All frames' and replace it with the 'Old color' which you should choose the same neon green as before. Then With the 'Transparent opacity'. Your settings should look like this.

Next, click 'Ok' and you should see this.

This completes the arranging and editing of the frames. Now it's time to make the magic happen! ^_^

28.) Lastly, go to 'File' - 'Save As' and name the gif anything you want. Click 'Save' and then when the next window comes up, click 'Next' 2 times and see the preview of the gif in animation. Once you are happy with the results, click 'Next' again and then 'Finish'.

The animated gif is now complete!! It's time to pat yourself on the back for a job well done. You have been very patient to get this far. This should be the final result of all your hard work!


There are definately a lot of steps in making an animated gif from scratch, which is why I stuck with a smaller and simpler gif for this tutorial. But I hope this has helped you somewhat in knowing how to make your own animated gif. If you have any questions, or would like to show me a gif that you made using my tutorial, then please send it to me in an e-mail. I would be more than happy to take a look or help you out with it if would like. Thanks for reading! ^_^


<- Prev