Creating
GIF Animations
Home > Build
> Software > Photoshop
 | Excerpted
from: Adobe Photoshop 5.5 Fundamentals with ImageReady 2 Author: Gary
David Bouton Publisher:
New Riders ISBN: 0735709289
Published: December 1999 Pages: 600 pages CD-ROM included: (Yes)
Price: US$39.99 suggested retail price. Click here to buy this book
from Amazon
(sizable discounts may be in effect!) |
CHAPTER
12 - Creating GIF Animations 
(Order
Book from Amazon)
A discovery that surprised everyone a
few years ago was that the combination of Netscape Navigator 2.0 and a GIF file
that contained multiple images would play an animation when loaded in the browser.
Microsoft (which is no one's fool) quickly emulated the technology, and it wasn't
long before GIF animation kits were being offered all over the Internet.
The Technology Shouldn't Be More Sophisticated
Than Your Idea
One of the perks to owning ImageReady
as a sidekick to your Photoshop purchase is that Adobe makes it simple to create
GIF animations. And at the same time, you have more control and options for the
animated GIF than you will probably ever need. I'll point out all the features
of ImageReady's Animation palette, but because a lot of the palette is self-explanatory,
my primary emphasis will be on concept-the idea behind the animation. It's all
too easy to use Adobe's wonderful technology to produce an uninspiring piece.
You'll create four different types of animations in this chapter, each with its
own reason for being. To a certain extent, all animations on the Web, especially
banners, have but one purpose-to catch your eye. But you need to follow through!
Once my attention is there, what are you going to tell me? Now that's a working
framework of a concept.
Three Different
Approaches to GIF Animation
Here's a working list
of some of the qualities you do want to include in your animation:
The animation has to be short in time, small in dimensions, and contain a minimum
of colors. There's nothing more depressing for the creator, and nothing quite
as irritating for the viewer, as an animation that takes more than five seconds
to load and animate. This is the Internet, and we're all surfing on Internet Time
(I think it's about one traditional year equals five Internet minutes). Speed
is your friend because you're using immediate thrills to introduce visitors to
your site. If you catch your audience by surprise (for example, by having a page
that downloads in five seconds), they will come back because you're a good showman.
The
story line of a GIF animation has to be simple, and it should end where it begins.
This is called looping, and you get more play out of your work when the animation
repeats nonstop. There are three different types of scenes that I can think of
that you can follow:
- The camera
or the object moves. You are constrained to left, right, up, and down, because
you cannot rotate around a 2D object. (There are 3D animation packages, such as
XARA 3D, that can animate in 3D.) An example of this type of scene is a logo that
flies on and then off screen, from left to right. I'll show you how to do an animated
object in this chapter.
- The object's outline changes shape. You might
morph one object into another (for example, changing a company's logo into the
product the company makes), or the object might simply wiggle, changing the contour
of its shape. In this chapter I'll show you how to create a bouncing ball that
changes shape as it hits the ground.
- The object's texture changes. A
good example of this is what MTV used to do with their logo; the logo remained
the same shape, but colors and textures changed within the logo. We have an example
of texture-changing coming up that is eye-soothing (you're supposed to do this
on the Web?), and easy to create.
I'm sure that
right now you can think of at least 50 examples of animations that fit into these
categories. We'll start with my own examples, but they only exist to show you
the features for animation in ImageReady, and what each option does.
Using an Action and Your Own Art
The
Actions palette in ImageReady more or less serves the same purpose as the one
in Photoshop, except that ImageReady's presets can give you a leg up on animating
stuff. There are Actions on the Actions palette that create zoom-ins and outs,
and Actions that rotate your artwork.
In the steps to follow, you actually
get your hands right on the controls, and I'll just sit in the back seat here
and call out the instructions for creating an animation with the camera zoom,
supplied by an ImageReady script provided on the Actions palette, and any art
you might care to use: