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
follow the steps below to create your animation:
with a rectangular canvas in Photoshop, use whatever background
color you like. I used a canvas 687 x 295 Canvas and a black
- 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.
- Duplicate your "background" layer
THREE times, double click on the names in your LAYER STACK to rename these layers "small", "medium" and "extreme"
- Use the Layer EYEBALLS to reveal
only "small" layer
- 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.)
- 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.
- Click on the top menu: Window > Animation,
you will see a new Animation Panel at the bottom of the screen.
- Use the tiny "Duplicate Selected
Frame" button at the bottom of the Animation Panel to add at least
FOUR new frames.
- 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.
- 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!
- Use the tiny PLAY button at the bottom
of the Animation Panel to play your animation.
- To save, click File > Save
for Web and Devices > Save (From the PRESET panel, select the format GIF
32 no dither) as "lastname_animation.gif".
- To see how your animation looks,
open MY COMPUTER, browse to your file and double click on it.
- Please TURN IN your "lastname_animation.gif" by
emailing your .gif to Mr. B. for points.
- 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!