IPOWERWEB.com

 Affordable, reliable
web hosting solutions

Call IPOWERWEB Today at 1-888-511-HOST Chat with an IPOWERWEB representative LIVE!
24/7x365 service - Live Technical Support

Domain Name Registration
web hosting services
cheap web hosting
IPOWERWEB help section
contact IPOWERWEB
testimonials for best hosting
affordable web hosting
IPOWERWEB web hosting
IPOWERWEB accolades
best domain prices


Web Hosting Money Back Guarantee
home build profit promote manage


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:

  1. 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.
  2. 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.
  3. 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:

  Next Page
 
home | products | about us | help center | testimonials | press room | contact us
affiliates | careers | domain names | web hosting | site map

Copyright © 1999-2007 IPOWER, Inc. Read our Terms and Conditions. All rights reserved.