Dick's GIF Tutorial
|
|
|
|
Animated Gifs are a simple and fun way to add a little excitement to a page, although they can be a lot of work. I have spent a lot of time on these Gifs, and I have really had a lot of fun. The difficult part for me has never been the idea of what the animation should look like, but making the software duplicate what I have in mind.
To continue your study of Gif's check out Barnes and Nobles books on the subject of Gif Tutorials by clicking on this link...
I got started by scanning some pictures of my four year old daughter so she could see herself on the computer. Then I got the idea that I could animate them. Finally I began taking pictures with animations in mind. So, as in most hobbies, one thing follows another. Animated Gifs are nothing more than a computerized version of the old flip books that I played with when I was a kid. The kind where you draw one picture, perhaps of a stick man standing, on the first page of a tablet. Then on the second page of the tablet you draw the same stick man at the same place on the paper, only this time he's jumping. Add as many drawings and pages as you want, maybe walking, maybe running. Flip the pages and the stick man looks like he's moving. A little trick to fool the eye. The basic concept is simple,
Animated Gifs rule number one is, REDUCE, REDUCE, REDUCE! If your viewing a family album on disc, in the comfort of your living room, file size is unimportant. Web pages, however, are notoriously slow and a file size that downloads fast is very important to your viewer. Text content is good, but if your viewer has read all the text, and is still waiting on the pictures, it can be frustrating. My general rule is any Gif Animation should be under 10k, with about 4k being perfect. I know that seems cheap, but there are ways to reduce the file size and still retain a good looking animation. I have received some very good advice that got me pointed in the right direction from the Webmaster at a friends site, The Metro Car Club, so please check her site out and in particular the animations that she has made. Things I do to watch that file size, If I scan a picture,
If I draw something my self,
Software that I use and recommend, (Some bought, some downloaded free)
Following is an example using my scanner and my daughter,
Frame two was the same process, ending up 3.5K (Getting her to hold still was the hardest part) The final two frame
animation. At 6.3K
Now, an example of drawing your own,
These
simple drawings have only a few colors, but they give the viewer information,
and provide a little
Another way to create animations is to start with a clip art image, modify it to make different frames, then put it together. One advantage is that if you have trouble drawing, that part is already done for you. One disadvantage that I have found is that the file size is some larger. But, get some, give some. As an example, it was near Christmas '97 while I was working on this page, so with that in mind I found a Christmas wreath metafile and got started.
Now, remember what I said about rule #1 and reducing file size ? Well, lets go on a diet together.
A little different, but I'm happy because the file size is down by half.
As a summary for Gif animation let's look at the three Christmas Wreaths and their file sizes.
I hope these three examples help to illustrate the three different methods that I use to animate Gifs. If you make some for yourself they will hopefully point you in the right direction. There are some differences in the look of each animation, and it depends on the application what method you use. I hope this helps to explain the basics involved in Gif animation for web pages. They take a lot of time to develop and while the payoff for the web page viewer is a few seconds glance, for us, as animators, the payoff is the satisfaction of creating something fun and of value.
|
Free Web Tools! ______________________ 
|
|
|
Frame one is a scanned picture of my
daughter, scanned at 50 dpi. I cut out just the part of her I wanted, and
compressed the gif before saving. It went from 96K when I first scanned it to
2.8K at the end.
Frame 1 (533 bytes) 
Frame 2(546 bytes)
Frame 3 (552 bytes)
comes in at a skinny 1549 Bytes.
at
2.6 K bytes, reduced its size to 80x80 pixels, and saved it.
at 2.7 K bytes, and saved.
again at 2.7 K bytes, and saved.
at 6.7 K.
at 1.3K.
This is 1K bytes.
This is 1.1K bytes.