How to Create a Text Fade Animation in Photoshop and Image Ready

Technology Tutorial: Flash Animations in Photoshop and Image Ready

Graphic Designers are beginning to focus on every aspect of the digital medium, including web design and Flash animation. If you’ve ever been asked to create a banner ad or short animation for a client whom you have previously only offered print designs, this tutorial is very beneficial. For the experienced Flash animation designer, this is definitely too basic for your skills. Creating SWF format animations in Photoshop and Image Ready is actually very simple, and whether you want to turn a static ad into an animated ad, or would like to watch a cartoon hand wave back and forth on your web page, these tools are capable of accomplishing this.

In this Tutorial, I’m going to explain how to create a simple text fade in animation, saved as a SWF file (Flash file) using just Photoshop and Image Ready. I will also show you how easy it is to export your SWF animation and put it in your website. Although I’m using a very simple example (text fade) you can use these steps to accomplish any type of animation.

1. Open your Photoshop program, and click on “window” in the top menu. Make sure you click on the “animation” window, so that you can see the frames of your animation. You will see a long thing “animation” frame window appear at the bottom of your working space.

2. Create a new file, the size of the animation that you wish to produce.

3. Create a new layer, and do not type any text that you wish to fade. If you have some design elements that you want in the background of the text, or say, a background color that needs to be present before the animation initializes, go ahead and create those styles in this layer.

4. After you’ve created your blank (or somewhat styled) layer, go to your animation window, and click on the little arrow on the top right of the animation window. A menu box will fly out to the right, and select “new frame.”