Graphic Design / Interactive Design / Fine & Applied Arts / Parkland College

Graphic Design Exercises
Photoshop: Animated Logo


To be introduced to Photoshop's animation techniques by recreating the
following GIF animation:


creating the animation

  1. download starter file
  2. open "dm-logo.jpg" in Photoshop
  3. save as "dm-logo.psd"
  4. duplicate "background" layer 3x, rename "small", "medium" "extreme"
  5. reveal only "small" layer
  6. filter > distort shear (add anchor points, move small amount)
  7. repeat with "medium" and "extreme" layer
  8. window > animation: add 4 new frames (total of 5 frames)
  9. reveal layers on each frame:
    > frame 2=small
    > frame 3=medium
    > frame 5=extreme
  10. adjust timing (f1=1 sec, f2=.1 sec, f3=.1 sec, f4=2 sec, f5-0 sec)
  11. play animation
  12. file > save for web "dm-logo.gif" (GIF 32 no dither)
  13. open animated GIF in a browser (drag and drop)
  14. publish you animated GIF with Google Page Creator (tip: edit HTML and replace ".jpg" extension with ".gif")

Last updated: 3/2/17 ■ Webmaster: Paul Young