Dick's GIF Tutorial


Home ] Up ]

Home
Post Your Link on My Site!
View all the Posted Links
Dick's Web Forum
Dick's Newsletter
Dick's Online Chat Room
Dick's Animated GIFS
Dick's JavaScript
Dick's Backgrounds
Dick's Horizontal Lines
Dick's Banners
Dick's Picture Viewer
Dick's FAQ
Dick's How to Link to Me
Dick's Web Design Lnks
Dick's Thanks Page
About Dick
Sign my Guestbook
View my Guestbook
______________________

To receive my newsletter, just enter your e-mail address: and click GO!

Subscribe      Unsubscribe

Tell A Friend about my site!
Type In Your Name:

Type In Your E-mail:

Your Friend's E-mail:

Your Comments:

Receive copy: 


 

        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...

Keyword Link: Gif Tutorials

        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,

Create two or more pictures in Gif format, using Paint Shop, Microsoft Image Composer, or any other program.
Alternately, find some clip art, scan some of your own, or have a buddy make some.
Put them in a program that will animate them.
Watch them move.

     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,
I select only what I need of the picture.
I scan at between 50 and 70 dpi. (I know that sounds low, but we're not creating an heirloom here)
I try to imagine the picture size in a web browser and reduce the percentage size as I scan.
I use compression software to compress further.
I try to reduce the number of colors in the pictures. (It's amazing how many colors you think you need and you really don't)

If I draw something my self,
I keep it simple.
I use the smallest number of colors. (Some software lets you reduce the numbers of colors with a real time preview, that makes it easy)
I keep the file size small. My idea of a small file size is under 1K, for each frame of the animation. (Remember, this is drawing not scanning)
I try to keep the whole animation under 10K. (You can put a lot of drawn animation in 5-2K frames)
Remember to keep it simple. These animations are only seen for a few seconds. (It's not much reward for all the work, but that's the nature of the web)

Software that I use and recommend, (Some bought, some downloaded free)
Microsoft Image Composer
Microsoft Gif Animator
Paint Shop Pro
PhotoImpact

 

Following is an example using my scanner and my daughter,

lauren_jumping_1.gif (2874 bytes) 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.

lauren_jumping_2.gif (3550 bytes)

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 lauren_jumping_ani_1.gif (6431 bytes)

 

Now, an example of drawing your own,

 

Guestbook_icon_1.gif (533 bytes) Frame 1 (533 bytes) Guestbook_icon_2.gif (546 bytes) Frame 2(546 bytes)Guestbook_icon_3.gif (552 bytes) Frame 3 (552 bytes)

These simple drawings have only a few colors, but they give the viewer information, and provide a little

animation. The final three-frame animation Guestbook_ani_1.gif (1549 bytes) comes in at a skinny 1549 Bytes.

 

    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.
I opened the wreath in Image Composer as a Gif, Wreath_1.gif (2691 bytes) at 2.6 K bytes, reduced its size to 80x80 pixels, and saved it.
I reopened it, added some blue lights, Wreath_Lt._blue_1.gif (2698 bytes) at 2.7 K bytes, and saved.
I reopened the original and added some yellow lights, Wreath_Lt._yellow_1.gif (2730 bytes) again at 2.7 K bytes, and saved.
I animated the three frames and got a nice wreath animation, Wreath_ani_1.gif (6574 bytes) at 6.7 K.

 

Now, remember what I said about rule #1 and reducing file size ? Well, lets go on a diet together.
All three frames that I used in the wreath have 256 colors. This doesn't mean that they use all those colors, this just means there are 256 colors available.
First lets reduce the color count.

I opened the first frame in Paint Shop Pro and decreased the color count to 16.
This is the 256 color version Wreath_1.gif (2691 bytes) at 2.7K.
And this is the 16 color version Wreath_1_16_colors_1.gif (2179 bytes) at 1.3K.

 

A little different, but I'm happy because the file size is down by half.

 

Now lets decrease all three frames, animate it, and see how it looks.

The first one at 6.7K. Wreath_ani_1.gif (6574 bytes) And the 16 color one at a thin 3.9K Wreath_1_16_colors_ani_1.gif (3907 bytes)

 

I hope you will agree that for the money the 3.9K wreath twinkles just as nice.

 

Now, one final method to reduce size even more, by having one frame of the wreath, and two other frames. One contains only the blue lights and the other contains only the yellow lights. This one is stripped the bare essentials.

 
First open the original 16 color wreath gif.
Then draw on it some blue balls to represent lights.
Depending on your software, separate the wreath from your newly drawn blue lights and delete the wreath, leaving only the array of blue lights. Make sure they are on a white background that you can later make transparent.
They should look something like this. Wreath_blue_16_colors_dots_1.gif (1118 bytes) This is 1K bytes.
Then the same with the yellow. Wreath_yellow_16_colors_dots_1.gif (1097 bytes) This is 1.1K bytes.
Then combine them, making sure the wreath frame remains all the time. Wreath_1_16_colors_ani_with_dots_1.gif (2772 bytes)
This one barely weighs 2.8K Bytes!
Using your animation program, make the wreath your base object. Think of it as being turned on all the time, as it is only drawn once.
Then import the blue lights frame, then the yellow. Both are drawn and erased on top of the wreath over and over.
This way your visitor's browser has less work to do and can get done faster.

 

 

As a summary for Gif animation let's look at the three Christmas Wreaths and their file sizes.
Here is the 256 color animation, at 6.7K. Wreath_ani_1.gif (6574 bytes)

Here is the 16 color animation, at 3.9K. Wreath_1_16_colors_ani_1.gif (3907 bytes)
And finally the 16 color animation with the blue and yellow dots, at 2.8K. Wreath_1_16_colors_ani_with_dots_1.gif (2772 bytes)

 

 

    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.

 

 


____________________
Buy your books online at
barnesandnoble.com Homepage Check out books on Computers   Try a quick search by Keyword Link: Web Design And be sure to check out their
Special Feature
______________________



Free Webtools for Webmasters



Free Web Tools!


______________________

CDNOW


Shop here!

Home ] Post Your Link on My Site! ] View all the Posted Links ] Dick's Web Forum ] Dick's Newsletter ] Dick's Online Chat Room ] Dick's Animated GIFS ] Dick's JavaScript ] Dick's Backgrounds ] Dick's Horizontal Lines ] Dick's Banners ] Dick's Picture Viewer ] Dick's FAQ ] Dick's How to Link to Me ] Dick's Web Design Lnks ] Dick's Thanks Page ] About Dick ]

 

 

1