Tutorial: How to Make Animated Pictures (Version #2)

I got a request not to long ago from Net Movie Blogger from Its a Wonderful Movie to make a tutorial on how to make animations. I have found two ways of creating these animated images, one that requires software to be bought, the other with free software. The first way that I discovered how to make the animated images, in addition to buying the software, also required a little bit of skill to accomplish, and, if you are not familiar with Paint Shop Pro or Animation Shop, can be a little overwhelming and complicated. This version of the tutorial can be accomplished without spending money and it is easier to accomplish. So, on we go with the tutorial!

Introduction: When creating animations on the computer, think of it as using an artist's flip book: you use a number of sketches that when flipped through appear to be moving. All an animation is is a bunch of pictures that flash before you eyes to create the appearance of movement. This tutorial is also for PCs (or Windows computers).

Programs You May Need: An Image Handling Program (Paint, Photoshop, Paint Shop Pro, etc), AnimateGIF
In this example, I am going to show how to use the simplest and cheapest program: Paint. It comes free on all PCs and is very easy to use.
AnimateGIF is a free program that you can download from http://download.cnet.com . Download.com I have used for years. It is supposed to be virus and spyware free, and I never had any problems with it before. AnimateGIF is a fairly simple program which anyone could accomplish easily.

Part 1: Taking the Pictures
First, you will need to take the pictures that you will use for your animation.

Step 1: Find a video clip that you would like to put into a picture. For this example, I'm going to be using this video clip from Pride and Prejudice (1995) from 1:36 - 1:42


Step 2: From the very beginning of your video clip, leave the video on pause and take a screenshot. To take a screenshot on a PC, press Alt + Print Screen. Then, take your image into Paint and paste it into Paint (Edit > Paste). You will end up with something like this (click the picture for a bigger picture):

Step 3: Trim down the picture by going to Edit > Select All, moving the picture so that the upper left corner of the picture is at the upper left corner of the "canvas" of paint. Deselect the picture. Then, go to the bottom right corner of the "canvas" and drag it to the bottom right corner of the picture (if you're using a YouTube video like I am, you may want to trim out a small part of the bottom to get rid of the time bar). Then, save your image by going to File > Save As and save your image in either the GIF or JPEG format. I like to save my images in a folder and number them from 01 to however many pictures I take.

Step 4: Go back to your video. Double Click on the Play/Pause button to make the video advance forward to the next picture.


Step 5: Repeat Steps 1 - 4 until you reach the end of your video clip. BE CAREFUL that you keep your pictures in the same position so it doesn't look like the animation is shaking. You can use any of the Image Handling Programs. It may not be the quickest way in Paint, but it is the simplest and it works. For time's sake for this tutorial, I'm going to use screenshots that I have taken with Photoshop because it is fast, but you can get the same result with Paint.


Part 2: Putting Together the Animation
Step 6: Now that you have all your pictures together (and you may have a lot depending on how long your clip is: I have 27 pictures for a six second clip), open up AnimateGIF. It will be a small window that looks like this:

Step 7: Open up the folder with all your pictures in it. Make sure it is not maximized and place both windows near each other so you can clearly see both.

Step 8: Select each individual file and in the correct order drag the pictures into the AnimateGIF window and drop the images where it says "Drop image files here".

Step 9: Once you have all your images in AnimateGIF, press Animate. Select the spot that you would like to save the new animation to, click save, and let AnimateGIF do it's work.

Step 10: Once it's done, find your animation, view it to make sure it came out okay, and then go back to AnimateGIF and press Clear Frames.

Here is my finished product! You will have to click on the picture to see it move.

Some Small Notes
* If you find that your picture is too fast, you can increase the frame delay number to slow it down. If it is going too slow, decrease the frame delay number to make it go faster.
* I haven't tested this out with this program, but usually for similar programs, if you make a picture/animation of a higher quality, it will take up more space. Keep that in mind if you want to improve the quality of your animation.
* Blogger doesn't animate smaller versions of a larger picture. Keep that in mind when making animations so that they're the right size without having to resize them in Blogger.

Let me know if there is anything that I should clarify! Your comments for this tutorial will help with the clarity of the video, so if something is unclear, comment!


 God Bless,