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

Graphic Design Exercises
Photoshop: Animated Type


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


styling the type

  1. download starter file
  2. turn on "Lithos" using Font Agent Pro
  3. open "hula.psd" in Photoshop
  4. practice Adobe navigation keyboard shortcuts: space=hand; space+cmd=zoom in; space+cmd+opt=zoom out; cmd+zero=fit in window
  5. choose default colors (d)
  6. add layer style "color overlay" (color=green)
  7. add layer styel "stroke" (size=4, color=purple)
  8. add layer style "bevel & emboss" (style=stroke emboss, technique=chisel hard, direction=down, size=5, soften=3)
  9. add layer style "inner shadow" (distance=3)
  10. duplicate "hula" layer; go to "hula copy" layer
  11. edit > transform > flip vertical; adjust position
  12. layer opacity=20%
  13. new layer "white"
  14. set foreground color=white
  15. gradient tool: paint gradient to fade reflection (foreground to transparent)
  16. save

animating the type

  1. go to "hula" layer
  2. window > animation
  3. add new frame (frame 2 is selected)
  4. layer > type > warp text (style=flag, bend=20% horizontal)
  5. repeat with "hula copy" layer (use negative number)
  6. tween (layers=all layers, tween with=previous frame, frames to add=5)
  7. play 7 frames
  8. select frame 7, add new frame (frame 8 is selected)
  9. layer > type > warp text (reverse bend percentage on each layer)
  10. tween (frames to add=11)
  11. play 19 frames
  12. select frame 19
  13. tween (tween with=first frame, frames to add=5)
  14. play 24 frames
  15. select all frames (flyout)
  16. change timing to 0.1 sec
  17. optimize animation (flyout menu)
  18. file > save for web "hula.gif" (setting=GIF 64 no dither, images only)
  19. drag "hula.gif" into a browser
  20. publish GIF as a link from your projects page

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