Parkland College > CSIT Dept > Web Technology > CSC 121 >
Calendar > Lesson 11


CSC 121 WEB SITE DESIGN
Lesson 11: Animated GIFs (Prairie Gradens)
 Instructor: Paul Young

 

 
 

Objectives

 

  

To be introduced to the principles of animation. To learn to Adobe Photoshop production techniques by recreating this animated GIF web banner:

Download starter files

 

 
 

Discussion

 

  

Of all the ways to create visual emphasis ("focal point"), movement is the most powerful way to catch the eye. Making things move on the web is easy and can be whole lot of fun. But, please learn to use animation with restraint.

Animation is defined as making inanimate objects come alive. In cartoons, this is done by sequencing drawings that are slightly different from each other (i.e. a "flipbook"). In movies, this is usually done 24 frames a second. In web animation, we can get away with fewer frames.

The GIF file format can handle simple animation (we'll need Flash for more complex animation). Because GIF a pixel format, file size is an issue. Therefore, when designing GIF animation, keep these limitations in mind:

  • keep the dimensions of the animation area small
  • limit the number of colors (avoid photos, if possible)
  • keep the number of frames to a minimum

 

 

 
 

Procedure

 

  

Overview: Use the Photoshop to set up the art in layers, then jump to ImageReady. Tween two frames to create smooth motion. Turn layers on and off and record new "states" in frames. Adjust the timing. Optimize for fast download.

Prepping the art in Photoshop

  1. file > new: 468x60, RGB, 72 PPI; save as "prairie.psd"
  2. make background green (record RGB values)
  3. add text in Gill Sans Extra Bold: "Spring is here." (30px); "It's time for Prairie Gardens" (16px)
  4. make text yellow
  5. dupe type layers, hide original layers
  6. select duped type layers: layer > rasterize > type
  7. filter > blur > motion blur (angle=0, amount=?)
  8. open "bug.psd"
  9. file > save for web "bug.gif" (transp=yes, matte=green)
  10. open "bug.gif", image > mode > RGB
  11. move bug art into "prairie.psd", add drop shadow
  12. jump to ImageReady

Animating the art in ImageReady

  1. window > show animation
  2. move bug into initial position (top)
  3. dupe frame 1 (total=2)
  4. move bug to final position (bottom)
  5. tween with previous frame (add 10 frames, total=12)
  6. add 4 new frames with no bug (total=16)
  7. select all frames, frame delay time=.2 sec
  8. play animation
  9. adjust position of bug
  10. hide "Spring" for 3 frames
  11. hide "Prairie" for 3 frames
  12. play animation
  13. reveal blurred, hide sharp type at beginning and end of visible type sequence
  14. adjust position of blurred type
  15. go to "optimized" tab; window > show optimized: GIF 32 no dither
  16. file > preview in browser
  17. file > save optimized as "prairie.gif"
  18. make a pop-up window for your banner in Dreamweaver and link it from your personal web site

 

 

BACK TO TOP

______________________________

Last updated: 10/28/05 • Webmaster: Paul Young

 
 

Student
Exhibition

Influential
Designers

Internet
Resources

Tips, Tricks
& Handouts