Creating Animations in Photoshop

Animations for PowerPoint presentations, email newsletters and web sites can be made quite easily using Adobe Photoshop 6. Remember that if it is a web or newsletter animation to keep the size of the image small, and the number of frames small as well. This is less of a concern in a PowerPoint document.

In this example we are going to draw a growing flower. You can, however, apply the same techniques to create other kinds of drawings, time-lapse animations and photo-montages. The only limit is your imagination.

Open Photoshop, go to the File menu, and choose New. Create a document that is 100 pixels wide and 200 pixels tall. Under Mode, choose RGB Color. Under Contents, choose White. Click OK.

Use the paint tools to draw the ground on your image. It should now look something like this:

Illustration 1 (background image)

 

 

 

 

 

From the layers palatte, click the New Layer icon (see illustration 2).


Illustration 2 (New Layer icon)

 

Use the paint tool to draw the stem of your plant. Click the New Layer icon again to add a third layer (layer 2). Draw two leaves. Click New Layer to add a fourth layer (layer 3). Draw the center of the flower. Click New Layer one last time to create layer 4. Draw the petals of your flower. Your final product should look something like this:

Illustration 3 (completed image)

 

 

 

 

 

Save your file.

Click on the Jump to Image Ready icon on the tools palette (see illustration 4)

Illustration 4 (Jump to Image Ready icon)

 

 

 

 

 

 

 

 

 

 

On the Image Ready Layers palette, make all your layers invisible by clicking the Visibility icons (they look like eyes - see illustration 5).

Illustration 5 (Visibility icon)

 

 

 

 

Bring up the animation palette by choosing Show Animation in the Window menu. Click on the little round button in the upper right corner. Choose New Frame. On the layers palette, make layer 1 visible by clicking the Visibility icon. Choose New Frame again. Make layer 2 visible. Choose New Frame again. Continue the process so there is a new frame for every added layer. In the example, this is a five frame animation. Use the Timing pull-down menus under each frame (illustration 6) to create your timings for each frame.

Illustration 6 (Timings pull-down)

 

 

 

Click the Play button on the animation palette to view your animation. Once you are satisfied with it, go to the File menu and choose Save Optimized. You can insert the resulting .gif file into PowerPoint, email newsletters, and web sites.

Use the following link to see the final animation, and other examples of Photoshop animations.

If you have any questions about this process, or want me to walk you through it, please don’t hesitate to call me at 719-549-2045, or email me at jeffrey.wood@colostate.edu.