[HOME]9:43 PM December 17, 2016

Making Animated GIFs

When I first got interested in computers, I really wasn't interested in the fixing and repairing part. I was more interested in the desktop publishing and design aspect. That part didn't work out so well but I still do up an occasional poster, greeting card, label, etc for someone. Anyway, I also became interested in creating logos at one time. Here's an animated logo that was supposed to be my logo for my site.

blinking-logo

It only has two frames made from two separate images.

logo-separate-images

It's called and Animated GIF. In the early days of the Internet the GIF (pronounced JIF according to it's creator) was the dominate picture format before JPG stole the spotlight.

more here: https://en.wikipedia.org/wiki/GIF

Do you remember those cartoon flip books where you had a little book with a cartoon drawn on each page and each one was drawn slightly different so if you flipped through the pages it looked like the images were moving like a cartoon animation.

ANIMATED GIFS work on the same principle. An animated GIF is just where you take a number of pictures and stitched them together, much like frames of a movie. The frames are displayed one frame after another, for fractions of a second, in a continuous loop giving the impression of movement or animation.

So one of the first animated GIFs, if not the first I created was the logo GIF already pictured above. Even though I can't find a download link for this program anymore, I used Microsoft GIF Animator to create what I have done.

microsoft-gif-animator

I just Opened the program drag each picture over to the program in the order I wanted them displayed and just saved it. The images are my own drawings. This is the second one I done.

animated-snowglobe-on-windows-desktop

Actually, I cheated on this one because I actually didn't create the globe figure. I downloaded it from the Internet and originally when I did this, on a Windows XP system, it had a component called Active desktop. It apparently became a security concern and was dumped in future versions of Windows. But when it was available it gave you the option to set animated GIFs as your background with full animation. You could also sit a web page as your background with all links clickable.

The screen shot shown above is what I took my screen at the time when I set it as my wallpaper or desktop background. I couldn't actually take a screen shot of the animation itself so I had to create a simulation of what my desktop actually looked like. What I did was first dissect the actual animated globe GIF. I believe I used a program called GifSplitter that's still available from http://www.xoyosoft.com/gs/

It was only three frames. So I made three copies of my screen-shot and pasted one copy of the frames from the globe into each screen-shot. Then using Microsoft GIF Animator I created a new GIF showing my screen background and the globe blinking. This I posted to my own site back in Dec 2006.

Searching on-line for a download link for this program, I didn't find it but there a few options available. One on-line service if you want to give it a shot. https://toolson.net/GifAnimation/Create

Go to their site and drag and drop the images you want turned into a animated GIF. Or click on the UPLOAD IMAGES button.

upload-images

Once you get them uploaded, you can click on hold down on them and drag them around if they are not in the right sequence.

drag-and-drop-to-right-sequence

Enter a name for the final image.

In Step 3 enter the frame interval. How long do you want each image/frame to display before going on to the next one in the sequence. You'll might have to experiment a bit here to get the right motion. I left it at the default and my snow-globe didn't snow quite right. The original only had it set to 10.

Step 4 - your choice if you want it a certain size.

Step 5 - if you want it to continuously loop over and over chose this option.

Step 6 - if you don't mind it being displayed on their site - check or uncheck.

Step 7 - if you wanted to add an extra effect to your final product

Finally, Step 8 - just click on Create. Then it takes you to a new page with your final results and a Download button to save it to your computer.

Some final thoughts. To split Animated GIFs theses days I use PhotoFiltre - http://photofiltre.free.fr/frames_en.htm

You have to install a separate plug-in called Animated GIF import from http://www.photofiltre-studio.com/plugins/plugins-en.htm

Unzip the file's content in the PhotoFiltre's Plugins folder. Then restart PhotoFiltre to load the plug-in. In my case then I like to open up the program and across the top menu click on View, then check Plug-ins bar. It parks itself on the left had side of the program screen. It will show all plug-ins installed, so just click on the one that looks like a folder with the word GIF by it. And it will give you the option to open an animated GIF - just a friendly warning at this point. The GIFs I have been dealing with here only have 3 frames but there are more complicated ones that can have dozens of frames, maybe up to a 100 or more.

PhotoFiltre-plug-ins-bar

If you open up one of theses in PhotoFiltre, lets say a hundred frames, then that's a hundred individual pictures you will have to close down and answer the prompt, Do you want to Save the changes before continuing? If you ever found yourself in this situation, just use taskmanager to close it.

How do you know how many frames in in an animated GIF. I use XnView - http://www.xnview.com/en/ picture viewer and if I open such a GIF down in the lower left hand corner you will see something like Frame 03/03 - The first number tells you the frame number showing, the second number, total number of frames.

xnview-animated-frames-count

You may also ask in my snow-globe screen-shot why I didn't use a similar green background colour to blend in with the animation and the simple answer is the green background looked black on my monitor. That is why I chose a all black background. This was on a old low resolution CRT monitor at the time. I didn't even notice the difference in colour until I started fooling around with the screen-shots on another computer.