Parkland College > CSIT Dept > Women in CSIT > Web Workshop for Girls >
Calendar > Lesson 5


WEB WORKSHOP FOR GIRLS
Lesson 5: GIF Animation
 Instructor: Paul Young

 

 

Objective

To be introduced to the principles of GIF animation in ImageReady (Photoshop's sister application) by creating a simple animation similar this sample:

 

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: Using the starter file provided, make a 12-frame animated movie by revealing and hiding appropriate layers. Using the skills you learned, animated your name.

Animating the hula dancer

  1. download starter files
  2. open "hula.psd" in Photoshop, then jump to ImageReady (bottom icon in toolbox)
  3. examine layers (note "skirt 0" layer is visible)
  4. window > animation: add new frame
  5. reveal "skirt R1" layer, hide "skirt 0" layer (only one skirt layer should be visible)
  6. add 5 new frames revealing the skirt layers in this order R1, R2, R3, R2, R1
    (frame 7 should show "skirt 0")
  7. add 5 new frames revealing the skirt layers in this order L1, L2, L3, L2, L1 (total frames=12)
  8. play animation
  9. view > show optimized (or click OPTIMIZED tab)
  10. settings: GIF 64 no dither
  11. file > save optimized as "hula.gif" (images only)
  12. add animated GIF file to your web site

Animating your name

  1. in Photoshop: file > new (400x200px, white background)
  2. type tool: type your name (hint: all caps might animate better)
  3. layer > merge down
  4. layer > duplicate layer (for safe keeping)
  5. run a filter, some filters to try:
    filter > distort > ripple
    filter > distort > zigzag
    filter > brush strokes > spatter
    filter > brush strokes > sprayed strokes
  6. edit > undo if you don't like it, rename layer if you want to keep it
  7. file > save as "yourname_animated.psd"
  8. jump to ImageReady
  9. create an animation by revealing and hiding layers (adjust timing)
  10. view > show optimized (or click OPTIMIZED tab)
  11. settings: GIF 32 no dither
  12. file > save optimized as "yourname_animated.gif" (images only)
  13. add animated GIF file to your web site using Google Page Creator (must display actual size)

 

 

BACK TO TOP

______________________________

Last updated: 6/23/06 • Webmaster: Paul Young