Gif Animation's are very common on the Internet, because they are fun to look at and if they are done right they are relatively small in file size. I will explain the basic steps on how to create these animation's. I will use this sample gif animation for my tutorial.

Think of an idea for your animation. Draw out the idea or frames on a piece of paper.

Using any paint, drawing or 3d program to create and save each frame of the animation (There are 4 here). I prefer to save them as a gif file all using the same color palette. I like to use Adobe Photoshop or LightWave for this process, but you can use whatever program you are best at.

Next, get a program that will combine all of your images into one gif file. There are dozens of them out there now days and I would check out my software page for the latest. I like to use Adobe Image Ready and Ulead Gif Animator, but who knows…maybe next month I’ll be using something else.

After getting one of these programs. Open it, and then import all of your individual gif files. After all of the pictures are in the program, set the frames to loop and view the image. You have a lot of control over you images in these programs. You can set the delay time in-between each frame to different amounts, select one of the colors to be transparent, and many other features.

Once you have edited your frames and the animation looks good, save the file. The program will automatically compile all of your frames into one gif file. Place this file into you root directory of your html code and add the syntax to your page.

Since it is only one file, the code is the same for a non-animation gif: <IMG SRC="speak1.gif" alt="Speaker Animation">