Animated GIFs
History:
The image type known as GIF (Graphics Interchange Format) was one of the first standards for pictures on the internet. While it only had 256 colors and corresponding 8-bits, it was widely accepted. The low colors also made it easy to send during days of low bandwidth. Since this image type and licensing were owned by one company the inevitability of greed set in. Controversy over the licensing agreement from the owner Unisys occurred and drove the rest the internet users to other standards including JPG. Nowadays the GIF format is an antique but still has a valuable place. Find out why GIF is still very important below.
Animated GIF of moon images I took sequentially
1) Go to Resizing and Beneton GIF tutorial
2) Go to video and see demonstration first
GIF Strengths:
Standardizing animation with these pictures long ago gave it something special. Within just one image you could stack several images and create a small movie. Today you can see complicated streaming video, Java, and many other formats trying to send your computer video or animations. The problem is that paranoia has set in among computer users due to horrible pop-ups, viruses, and hackers. With everyone's guard and firewalls up so high there is a good chance anything fancy you create with video will either be blocked or need to be accepted before it can run on someone's computer. People often don't accept anything they don't already trust or know. Therein is the problem for some common video streams. However, animated GIFs work with little problem even on the most guarded systems' browser. This once again makes it a simple but terrific solution for showing off small clips of motion.
Above is 25th Annual Hand Bell Ringer GIF Animation
Okay, now admit that you watched the Bell concert above and tried to pick out features or isolate what someone in the animation was doing? It's hypnotic as we try and see where the animation loop begins and ends. Above are ten stacked images from the 25th annual Hand Bell Ringer festival in Colorado Springs, Colorado (2007). These make for an interesting Animated GIF. This sequence wasn't taken with the idea of becoming a GIF. But because these images happen to be taken seconds apart and convey action they were a great match. Watch as the conductor dashes back and forth across the stage.
GIF Challenges:
Unlike streaming video you'll want to keep the size of your GIF animations to a minimum. This is because it will have to be loaded frame by frame and may take a bit depending on the internet bandwidth of your audience. When you see a page loaded with many animated GIFs then usually the browser window will appear sluggish. That being said you may want to minimize the amount of animated GIFs on one page. Remember the old adage, too much of even a good thing is no longer a good thing.
Building an Animated GIF:
So how do I actually create an animated GIF? The free software you'll need is below on this page. The methods for getting images into an animated GIF are plentiful. You can draw consecutive images with your mouse, photograph new images with your camera or simply get video from one of your favorite movies. In our tutorial case we begin by taking consecutive images with your home digital camera. By shooting many still images in a row you can use a digital camera to create the files you need for your animation as I did with the bell ringer concert. Using a burst or sports mode can usually take these images close together for events with motion.
If your camera is like mine you may want to reduce the size of them from mega-pixel down to something reasonable. The majority of animated GIF programs I've tested do not import many mega-pixel images without reducing them first. A resolution of 1024x768 or lower is a reasonable starting resolution. As the animations get smaller they will look smoother. You must weigh all of this when considering where your GIFs get used and for what type of end product.
As you work the tutorial remember that for smoothness you can loop the GIF animation. This gives the illusion that perhaps the video is longer than it really is. This also keeps the clip from ending on an abrupt action and then bouncing back to the beginning of the animation with a totally different image. Here is how you can create a loop if there isn't one. You can copy a sequence of your images and then reverse their direction. The animated moon GIF image on the top of this page is an example of this technique. In the moon animation it counts from the first moon image to the fourteenth and then goes backward do to how I loaded the images before saving it.
***********************************************
Click here to Download Photo Resize Magic v1.1 by realfiletools.com
***********************************************
Photo Resize Magic is a freeware program (about 543K in size). Most GIF animation programs refuse to accept images with the original sizes coming directly from a digital camera. They limit one's image size to around 720x500 or slightly larger but seldom Mega-pixel size. So far only the high-end software packages allow users to resize images directly while importing them into the animation program. Given this fact, Photo Resize Magic becomes invaluable! We'll use Photo Resize Magic to shrink our digital images before processing them into an animated GIF. Let's start.
1) Left-click the link above and download Photo-Resize-Magic. Immediately choose Open and you will see the compressed file open up to reveal setup.exe as the contents.
2) Double-click the setup.exe and choose OK to proceed.
3) When the Setup Wizard comes up then choose Next
4) Choose Next again and accept the default location for download destination folder.
5) Left-click Install to quickly install the program.
6) Left-click Next to create a desktop icon.
7) Left-click Finish to now run Photo Resize Magic.
8) At this step you will need to know where your images are located that you plan to use for your animated GIF. If you haven't done so go ahead and put all of the intended files into a folder just for this purpose. In this way you will not alter the originals and you will also know exactly where they are located for the next step. Additionally be sure to create yet another folder for the images that we will resize. Perhaps call the folder Resized_Images. As a general rule try not to use the space bar on the keyboard when creating folders. I hold the shift key while pushing on the minus key. This provides an "underscore" to the name as above.
9) Toward the bottom of the program window you will see a form line that reads Source folder. The source folder is where your images should be. Use the three dots icon to browse to the location where you stored your image. The three dots icon looks like this "..." without the quotations of course.
10) Fill in the form line that reads Target folder with the location where your new resized images will land. You should have created this folder in step eight.
11) At this step everything will work. However let's optimize our images to 720x500 because that is the largest size that Beneton Movie animator works with. Under the Settings portion of the window you will see a form line that reads Size. Change this pull down menu to Custom. Then change the custom boxes below to 720 and then 500 after the "X" in that order. Push Start in the lower right hand corner of the program window and the resizing begins.
12) When resizing is complete the program will show this with a message box that you must left-click OK on. This will be in the background if you have been shuffling windows while it resized your images. Go to the Target folder and see if the images meet with your approval. If they are not satisfactory then try the conversion again with different parameters.
Beneton Movie GIF Animator Tutorial:
***********************************************
Click here to Download Beneton Movie GIF animator v1.1.2
By Beneton Software
***********************************************
BMG is a freeware program that takes consecutive images (if they are 720x500 or smaller in size) and turns them into an animation clip for posting on your web pages and other mediums where the smaller file size is an advantage. BMG gives you 20 different effects such as an embossing effect for your GIF animation. It also has a built-in image editor with many tools (pencil, shapes, airbrush, alpha brush, fill, selection, text). It provides a preview window that previews individual frames or the animation with options such as zoom, loop, etc.
1) Left-click the link above and choose open from the link. This may take a few seconds. The next step is to double-click BMG_setup.exe to install the program.
2) Left-click Next on the bottom right of the setup wizard
3) Left-click the radio button next to the "I accept the agreement" statement and left-click Next again.
4) Left-click Next another three times or so and then left-click the Install button. The install is fairly quick.
5) Avoid their Free webcrawler tool and uncheck the Add crawler toolbar box. Left-click Next and then left-click the Finish button on the next screen.
6) The software update program will run and probably tell you that your copy is up to date.
7) On the top row of icons in the Beneton Movie program there is and icon that has a "+ 1 2 3" under it. This icon is for add frames from a batch of image files. Left-click this icon and another window comes up. note that I tried drag-and-drop which did not work and this method was the best.
8) Change the first fill box labeled what is the filename prefix of your files to the name of your image set. My example will be for the image set of dog001.jpg and dog002.jpg and more in sequence. In this box you put dog without the other part of the image name
9) In the second fill box change the Put the extensions of your files from .BMP to .JPG or whatever your particular images are. You can type .jpg in lower case letters if the actual images are so labeled.
10) If your images were numbered like dog001 and dog002 then you will need to change the Enter the minimum number of digits after the filename prefix box. For our example of dog002 change the digits after the prefix to 3.
11) Change the Load frames boxes to match the number of images you are using.
12) Left-click OK to start the import. If it works the animation should run as it loads. If it doesn't work check your filenames again. This manual filling in of information has to be correct to make this work.
13) Under the main image view there is a green triangle for Play Animation much like your DVD player. Left-click this button and see how your animated GIF looks thus far.
14) If your animation is running too fast then try this. Left-click one of the frame below the main image. On the keyboard hold down the Ctlr (control key) and while still holding it press the "a" key. This selects all frames. Above the main image window you will see where it is labeled Delay. Change this to 20 and then see how your animation runs with the play button. Do this until you like the speed and flow of the animation.
15) You can see all the cool tools to change your GIF like colorblend, rotate and so forth. You can play with those later. The last important thing you need to know is that going to the disk icon in the top left lets you save as an animated GIF. After you do this your images will be one movie. Try making a little movie clip and then testing it out by double-clicking it in windows explorer.
Have fun making animated GIFs!
Note that if you have encountered the "Can't allocate DIB handle" error in Easy GIF Animator then your images are probably too large. Using the Resize Magic software above should fix your problems.
Now to see my tutorial in video form. If you are the type person who learns faster from watching than reading the below video may be for you. Here I create the entire animation in a few minutes with no rushing around. Once you know what the icons are for you can head straight into the process as shown in the video. Feel free to send me feedback if this tutorial worked for you or maybe why it didn't. I've just put up a feedback area in the icon at the bottom of the screen. Happy GIF'ing!
Written March08 and updated Aug11 by Tracy Rose