Tips for GIF
Animation and File Size Reduction
For use with Adobe Photoshop 4.0 and GifBuilder
of wisdom by Paul M. Carhart
BEFORE You Design
designing animation with alot of movement, keep most of the action
to the left so subsequent frames can be cropped after changes.
not anti-alias your text unless you absolutely have to. Although
it doesn't always look as good, this can be the difference between
frames that are eight to ten colors or frames that are only two.
These colors add up when compounded with each frame. Keep in mind
that HTML text is not anti-aliased either and many people are used
to seeing type of this nature on the web. Don't sacrifice your design
to live by this rule though. Use your judgment to determine what
is or is not acceptable.
Will Save You
your ad with solid backgrounds that can easily be masked over. Stay
away from gradations if you can since this will inevitably lead
to color shifts and large file sizes.
Frames: Your First Line of Defense
frames in which changes do not occur all the way to the bottom or
all the way to right of the file. GifBuilder sees imported images
from the upper left corner and places all frames there by default.
the Color Shift Problem
a mask layer in your Photoshop file that is a solid color all the
way across. This color should not be present in your "real" animation
frames. This layer can have sections deleted in blocks or non-anti-aliased
selections from it to reveal the changes in the animation. This
will not only eliminate the amount of colors from each frame but
can virtually eliminate color shifts.
not use alternate frame disposal methods in Gifbuilder. Current
popular browsers (i.e. - Netscape Navigator 3.0 and Microsoft Internet
Explorer 3.0) do not recognize them. Default is you best bet.
GifBuilder into Transparency
in GifBuilder should be done with the "based on first pixel" option.
If the color you want transparent is not the first pixel in the
upper left corner of your frame, put a small square of your transparent
color there for GifBuilder to read.
Pattern: Pros and Cons
using photo-realistic images, shading or gradations, try saving
your frames the old fashioned way by going to the Mode menu and
selecting "indexed color." This will give you the option utilizing
the "Diffusion" option (something you cannot do with the Export-Gif89
option in Photoshop 4.0) which applies a dither pattern to the file.
This sometimes accomplishes more gradated look with less colors.
The downside, however is that the frames are sometimes a little
larger in size than they would otherwise.
this one all the time now. If you have a hard time getting your
frames down in colors, try re-indexing them. Turn them back into
an RGB in Photoshop. The file will remember how many colors are
in it. Make it an indexed color again and tell it to be about five
colors less than what it was. The difference is usually not much
visually. What this does is limit the amount of colors the computer
can re-map to the image. This process can sometimes be repeated,
eventually deleting all but the absolutely vital colors to the image.
As you get down further, you can pull out one or two colors until
you narrow it as far as it can go. I have gotten files that were
forty colors down to fifteen in the past Ð five, three or one color
at a time. This means you can make files with alot of colors to
keep the look, eliminating most of the 256 colors present in any
8-bit graphic (256 - 40 = 216 colors gone) and then narrow it down
to your optimum amount of colors from there. This generally results
in cleaner looking frames at less colors.
That Stay Together, Play Together
frames if necessary. This is sometimes the last resort. Look at
the way your animation plays out very carefully. If copy or movement
is revealed in such a way that it that it doesn't necessarily have
to be, you might be able to combine frame elements in such a way
that you can eliminate a frame or two. You may have to change the
scripting of the animation so everything can be viewed and/or read.
Remember, changing the timing and scripting of frames in GifBuilder
does not change the final file size.
Intel Logo Trick
you have alot of color in your design that absolutely has to remain
intact, try this little tip. Cut the part (in this case it was an
Intel logo that had to be perfect in order for the client to get
credit in the co-opt advertising) and put it on the frame following
the first one, cropped down to it's bare essentials. Then physically
(using X and Y coordinates) move that to it's location. In GifBuilder,
give the first frame a 1 (1/100 of a second) in the timing column
and the second one a longer time. This will give the illusion of
a lot of color at the same time, even though it really is on two
separate frames. The downside to this is that when/if it loops there
will be a 1/100 of a second hiccup as the ad turns over Ð a small
price to pay to get the color you need to satisfy color requirements
that are beyond your control.