Web Design   Web Hosting   Photoshop Tutorials   Free Fonts   Drawing Basics  
Photoshop Tutorials - Free Fonts
[Read Me First!]
[Photoshop Tutorials]
[Canvas Tutorials]
[Corel Tutorials]
[Quark Tutorials]
[Illustrator Tutorials]
[FreeHand Tutorials]
[Drawing Basics]
[Porting Files]
[Free Fonts]
[Font Tutorials]
[Misc Tutorials]
[About Mike]
[Related Sites]

  Miscellaneous Animation Tips and Techniques - Part One

I've been mulling around some ideas for miscellaneous tips and techniques for animation for awhile, now, and came up with a few here. Animation software has really improved this past year or so. It's a lot easier than it used to be. Adobe® ImageReady™ and Macromedia® Fireworks® are two of my favorites, but there's also Jasc® Animation Shop™ (packaged with Paint Shop Pro™) which is also very user-friendly. I really can't keep up with all of them so check here at Royal E. Frazier's software page for a more complete list.

Anyway, here are the tips:

Tip No. 1

Approach your animation project or think about it as being made up of two parts or steps:

A. First create the frame images
B. Then assemble the animation

These steps break down very conveniently this way because you will use distinctly different kinds of software applications for each. You can use an image editor (such as Adobe Photoshop®, Jasc Paint Shop Pro or Corel PHOTO-PAINT®) or drawing program (such as CorelDRAW®, Adobe Illustrator®, Macromedia FreeHand® or Deneba Canvas™) or even a 3D program to create the individual frames. Some 3D programs will take care of the entire process from start to finish and you won't need the animation program to assemble the individual frame images.

Tip No. 2

Create frames in true color wherever possible (more here on true color).

You can make the individual frames using the GIF89a format but the main drawback with saving frames as GIF files is that they have a limited color palette. The GIF format only supports a maximum of 256 colors. With the newer generation of animation software (such as ImageReady or Fireworks), you can assemble the frames using true color images (such as Photoshop PSD, Windows® BMP or Macintosh® PICT) and the software will figure out the best palette for the finished animated GIF.

If the individual frames are saved as GIF files and each consumes a full palette of colors (256) you can get color flicker in the finished animation unless the animation software can somehow compensate for the different colors between the frames. Each GIF image has its own palette and when you are saving frame images as GIF files, there will be subtle differences between them.

The advantage to building the animation with true color frames is that the colors in the finished palette aren't committed until the GIF file is generated.

Sometimes you will want to save the frames as GIF images when the animation has a transparent background, though. Just be aware of the limitation of the GIF format.

Tip No. 3

Understand the main factors affecting GIF file size:

A. The size of the image (its dimensions or number of pixels).

The number of pixels in the image is the biggest factor. You can always downsample an image if you want a smaller file size:

Original Image
117 X 117 pixels
1963 bytes
Downsampled Image
80 X 80 pixels
1766 bytes

B. The total number of colors in the palette.

A GIF image with 64 or 128 colors will compress to a smaller size than one using 256 colors:

Original Palette
256 Colors
2786 bytes
Reduced Palette
64 Colors
2030 bytes

C. Use a global color palette.

Some animation software applications support individual palettes for each frame. This may be desirable but there is a much greater chance for color flicker and slow browser rendering. Always try to use a global palette.

D. Use "super compression" - redundant pixel removal.

When you load an animated GIF in an animation program, some programs will reconstruct the frames so they are visually appealing, rather than display them in their compressed form:

Frame 1 Frame 2 Frame 3 Frame 4 Frame 5

Actual super compressed images in the frames (when viewed in GIF Construction Set™):

Frame 1 Frame 2 Frame 3 Frame 4 Frame 5

Not all programs support super compression (redundant pixel removal on a pixel-by-pixel basis). Some programs will remove redundant pixels only within a rectangular region. Can you notice the difference between the following frames and the ones shown above?

Frame 1 Frame 2 Frame 3 Frame 4 Frame 5

When the animation is played in a browser, the individual frames are rendered one by one. Each frame is displayed one after the other in order. Rather than storing an entire image for each frame, super compression works by identifying only the pixels that change from one frame to the next. In effect, this is like stacking the changed pixels on top of the previous frame as the animation is played.

Note: For this to work the redundant pixels must be in adjacent subsequent frames. If one frame is exactly like another but not adjacent, then there may not be any redundant pixels to remove.

Click Here To Continue...


Previous   Home    Contact Mike   Related Sites    Next

Copyright © 1998-2016 Mike Doughty, All Rights Reserved Legal Notices
Page Last Revised: October 26, 2016
Privacy Policy