• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 4. 2-D Animation > Animating the Elements of Graphic Design

Animating the Elements of Graphic Design

Keyframe 2-D animation tools are often used to animate the elements of graphic design, including type, photos, and illus trations. Many of these programs were originally intended for titling—making the animated titles and credits at the beginning and end of videos and movies—so they are all well versed in handling type and graphics. A typical example is Adobe's After Effects.

The classic example of this type of animation on the Web is advertising. Andrew Keeler of Keelerkom Communications has mastered the art of animating type and graphics for low-bandwidth advertising. See the Case Study at the end of this chapter for more details.

Animated Type

Many programs excel at animating text. Moving type can be as simple as titles scrolling up from the bottom of the screen or as dramatic as type that explodes into fragments that reassemble to form another word. One has to watch only a half hour of TV or surf the Web for a minute to see some of the countless ways that text is made to grab our attention. Object Dancer, Director, After Effects, and a host of desktop video-editing tools all have excellent text-animation capabilities.

Here are some ways that these programs are used to animate text:

  • Scrolling, to move from top to bottom of the screen, as in film credits.

  • Fading in and out, for titles.

  • In flight, so that the text appears to zoom onto the screen from any of an infinite number of angles and dimensions.

  • Rotoscoping, so that frames of animation or video play within the boundaries of the type.

  • Morphing, to make the size, shape, weight, or other typographic qualities change over time.

  • On a path, so that words and letters follow an invisible curved path across the screen.

  • Exploding, so that letters or parts of letters break up and fly away on their own trajectories or, in reverse, fly together into readable text.

Text on a Path in Adobe Illustrator

Here is a very simple set of steps for creating animated text on a path in Adobe Illustrator:

  1. Open Illustrator and create a new document. In the Document Setup dialog box, set the animation's dimensions.

    Figure 4.20a. Draw a curved path

  2. With the pen tool, draw a curved path for your text to follow. See Figure 4.20a.

    Figure 4.20b. Type the first letter

  3. Make sure that the paragraph alignment is set to left and that the character setting is 36-point Helvetica. Select the text-on-a-path cursor and click the path near its left end.

  4. Type the letter R. See Figure 4.20b.

    Figure 4.20c. Export the image

  5. Export the document as a GIF file (01.GIF) with the palette set to Exact. See figure 4.20c.

  6. Click the path with the text-on-a-path tool again, and add the letter I. The text on the path now reads RI. Export the document as 02.GIF. See Figure 4.20d.

    Figure 4.20d. Add a letter and export another image.

  7. Click the text line again and type the letter D. Save the illustration as 03.GIF. See Figure 4.20e.

    Figure 4.20e. Add a "D" and export the image

  8. Repeat the previous steps until you've spelled out the phrase RIDE THE ROLLERCOASTER! and export each change as a GIF file.

  9. In GIFBuilder, open the directory that contains the GIF files, and drag all the files into the GIFBuilder Frames window. See Figure 4.20f.

    Figure 4.20f. Add the frames to GIFBuilder.

  10. From the GIFBuilder Edit menu, choose Sort Selection to make sure that the frames are sorted in numerical order.

  11. From the Animate menu, choose Play to see the animation play back in the Preview window.

  12. From the Options menu, choose Frame Optimization, and save the animation as an animated GIF file (RIDER.GIF).

  13. This animation saves very compactly because the animation changes only minutely—the size of a single character of text—from one frame to the next. (Please see Chapter 8 for explicit directions for using different GIF-building utilities on the Mac and in Windows.)

Animating Designs and Logos

Like text, photographs or drawings can be animated to fly about the screen, move behind a mask or stencil, morph into other pictures, explode, or simply fade away. The techniques for working with photos in most keyframe animation programs are similar to those for working with type. I describe specifics of working with photo animation tools in Chapter 5.

Like typography and photos, elements such as icons and logos lend themselves to animation. Artwork created in layers in a program such as FreeHand, Illustrator, or CorelDRAW is easy to export in pieces, so you can make various parts of the illustration move on their own. In painting or illustration programs without layers, you may have to carefully select pieces of the artwork and paste them into new documents to create objects. FreeHand 8, for example, has an export feature that lets you export layers of illustration as frames of animation in Flash format.

Tip

The most important aspect of a logo is recognition, which means that you don't want to animate a logo in a way that's going to significantly alter its normal appearance. You have to be careful to not get too wild. Because logos are usually on the home page of a Web site and help to identify the site as belonging to a particular company, probably the best choice for an animated-logo file format is animated GIF— the most widely supported animation standard. Animated GIF also lets you use a transparent background, so that the logo appears to blend into the Web site.


Slow in and slow out are very useful with logos. You can animate the logo so that it comes together or slows to a stop and holds this position for several seconds, so that viewers have plenty of time to fix the image in their mind. Here are some suggestions for animating logos without destroying their original character:

  • Fly together. Animate pieces of the logo so that they fly together, resulting in a normal logo.

  • Lens flares and lasers. In programs such as Photoshop, you can create lens flares on corners of a logo. Modify the flare's value over several frames from no flare to a bright flare to give the logo a glint of light.

  • Bouncing logo. Use squash and stretch to animate the logo so that it bounces or vibrates excitedly for a few moments; then hold it still for 5 or 10 seconds. The bouncing will attract the viewer's eye, but the hold will give him or her a chance to register the design.

  • Tumbling. Have the logo spin onto the page in an arc and come to rest with slow in. You may want to repeat this only once, so that it plays through at proper speed the second time but doesn't continue to saw away at the top of the page.

  • Spinning. Have the logo spin slowly on the page. Make sure that it doesn't spin so fast that it's confusing or unreadable. Usually, you'll want the logo to come to rest after a few turns.

Morphing and Warping

Morphing and warping programs nearly defy description. They include tools such as MetaFlo', Kai's Power Goo, and Elastic Reality, which can turn bitmapped images and animations into putty. When you animate a photo with these programs, the effect is as though the photo were printed on an infinitely malleable rubber sheet, like newspaper comics transferred to Silly Putty. You can stretch this sheet in any direction and set keyframes for each stretch, so that the intervening frames are tweened accordingly.

Morphing software, such or Gryphon's Morph and Elastic Reality (which does double duty), allows you to animate pictures and animations so that they appear to magically transform into one another. Warping, meanwhile, transfers an image onto a virtual rubber sheet, that you can stretch, squash and otherwise manipulate in various gooey ways.


  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint