Graphic Design: Fun Project- Photoshop Animation

PROJECT: Just a fun exercise to show how to use simple animation using Photoshop. This is a useful technique for animating avatars or online badges.


How to Create the Animation: Start with a rectangular canvas in Photoshop, use whatever background color you like. I used a canvas 687 x 295 Canvas and a black background. Type whatever you like on your canvas, such as your name. Use some Blending Options or Filters to make your name look interesting and then MERGE all of the layers of your canvas, so that you only have one layer- the BACKGROUND.

Then, follow the steps below to create your animation:

  1. Duplicate your "background" layer THREE times, rename these layers "small", "medium" and "extreme"
  2. Use the Layer EYEBALLS to reveal only "small" layer
  3. Use Filter > Distort > Shear on the "small" layer. Click to add a couple of anchor points, move each anchor point a small amount. This begins the distortion of your letters.  (You don't have to use Shear, you can use any effect that changes your text in stages:  Color, Blur, Text Warp, etc.)
  4. Repeat steps 2 and 3 with your "medium" and "extreme" layers, move your curves a little more each time. If you wish, you can make one of your curves go a different direction from the others.
  5. Click on the top menu: Window > Animation, you will see a new Animation Panel at the bottom of the screen.
  6. Use the tiny "Duplicate Selected Frame" button at the bottom of the Animation Panel to add at least FOUR new frames.
  7. Click on each of the resulting frames in order and use the EYEBALL to reveal layers on each frame:
    > On Frame 2= show "small" Layer
    > On Frame 3= show "medium" Layer
    > On Frame 5= show "extreme" Layer.
  8. Click on the tiny arrow at the base of each Frame to adjust the timing for the Frame. This is the delay of the frame before it moves to the next frame. Try starting with Frame 1=1 sec, Frame 2=.1 sec, Frame 3=.1 sec, Frame 4=2 sec, Frame=0 sec. Adjust them however you wish!
  9. Use the tiny PLAY button at the bottom of the Animation Panel to play your animation.
  10. To save, click File > Save for Web and Devices > Save (you want the format GIF 32 no dither) as "lastname_animation.gif".
  11. To see how your animation looks, open MY COMPUTER, browse to your file and double click on it.
  12. Please TURN IN your "lastname_animation.gif" by copying it to the DROPBOX for your class period. If you would like extra credit for this exercise, see #12 below. If you have completed your Typography Portrait early and DO NOT turn in an animation, you will receive NEGATIVE POINTS for this exercise!
  13. PRACTICE WHAT YOU HAVE LEARNED: Photoshop animation is essentially the showing of the visibility of different layers over time. These layers can be anything from letters to photographs to masked images to clip art. Almost anything is possible, given enough time and patience. With this in mind IMPRESS ME WITH YOUR OWN ANIMATION IDEA!