Printer Friendly Version

BellaOnline's Digital Art and Design Editor

How to Make a Simple Animation With the New Animation Palette in Adobe Photoshop CS2

Project Information-- Skill level-Basic AdobeR PhotoshopR CS2

One of the new features in Adobe Photoshop CS2 is the Animation Palette which allows you to create animations for the web right in the Photoshop workspace. We are going to make a simple animation using the Warp Text feature that you learned how to use in a previous tutorial.

An animation is made up of frames played in sequence and it's very simple to create these frames from the layers in a Photoshop image. Each layer of the image is a potential frame for the animation. You can use all of them or just a few. Let's get started.

Step 1. Start a New Image. Click File > New to start a new image. Set the background to white, the height to 100 pixels and the width to 300 pixels.

Step 2. Add the Plain Text. Now use the Text Tool to type your text onto Layer 1. Then click the Checkmark on the Options bar to close the Text Tool.

Step 3. Duplicate the Text Layer. We will now duplicate the text layer and then use this second layer to create the Warp Text effect. On the Menu bar, click Layer > Duplicate Layer.

Create Warped Text Button
Step 4. Warp Text Effect. Click on the Text Tool and then click and drag to select the text. Click on the Create Warped Text button. From the dialog box, choose the warp effect you wish to use. In the example, I used Bulge. Now you have two layers of text and we are ready to create the animation frames.

Step 5. Open the Animation Palette. Click Window > Animation. When the Animation Palette opens you will see that you already have one frame that contains your image.

Step 6. Turn Off the Top Layer. We want only the plain text to show in the first frame. So go to the Layers Palette and click on the visibility icon (looks like an eye) for the top layer. The warped text will become invisible in the original image and in the first frame of the Animation Palette.

Layers Palette

Next →

AdobeR product screen shot(s) reprinted with permission from Adobe Systems Incorporated. AdobeR, BridgeR, IllustratorR, PhotoshopR and PhotoshopR AlbumTM are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.

Digital Art and Design Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2016 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor