Find » Technology » How to Create a Text Fade Animation...

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

Technology Tutorial: Flash Animations in Photoshop and Image Ready

By Nikki Freeman, published Oct 29, 2006
Published Content: 92  Total Views: 265,092  Favorited By: 33 CPs
Embed:  
Rating: 3.6 of 5
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.”

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

Simple text animation, all the frames in one pic.

Credit: Christina Freeman

Copyright: Christina Freeman

Takeaways
  • Graphic Designers should know how to make simple animations
  • Tween effect is very powerful
  • Use these simple guidelines to create your own creative animations
Did You Know?
Macromedia Flash is a more powerful animation tool, and can be used to create more interactive animations
Comments
Showing Comments 1 - 14 of 14
 
 
Thanks, Christina! You got me past the first step that had me lost - and explained it clearly step by step. Looking forward to having fun, now!

Posted on 02/04/2008 at 12:02:05 AM

 
Thanks, very useful, I've been looking for something like that.

Posted on 10/08/2007 at 2:10:00 AM

 
thanks i knew there was an easier way to fade text beside doing the opacity manualy, so thanks for the info

Posted on 09/21/2007 at 7:09:00 PM

 
Thanks - this tutorial is very user-friendly.

Posted on 09/12/2007 at 6:09:00 PM

 
thnx nikki, i got the hang of animation in photoshop

Posted on 08/10/2007 at 8:08:00 AM

 
Thanks for the info!!!

Posted on 07/16/2007 at 11:07:00 PM

 
amit

Posted on 06/06/2007 at 5:06:00 AM

 
thanks i appreciate it

Posted on 02/26/2007 at 10:02:00 PM

 
thanks a lot i really learn SOMETHING.

Posted on 02/26/2007 at 10:02:00 PM

 
u cant create animaion with photoshop ? how .......

Posted on 02/22/2007 at 12:02:00 PM

 
genious thanks!

Posted on 02/13/2007 at 7:02:00 PM

 
Great JOB! :D

Posted on 01/21/2007 at 5:01:00 AM

 
hi im kaleem from kuwait now but im indian its my id shaik_kals5s5@yahoo.com pls sent type photoshop toturial

Posted on 01/17/2007 at 10:01:00 AM

 
Good Job

Posted on 11/18/2006 at 12:11:00 AM

Type in Your Comments Below - (1000 characters left)
Your name:

Submit your own content on this or any topic. Get started »
Showing Comments 1 - 14 of 14
 
Most Commented On