Text Animation Photoshop Tutorial

January 1, 2006 by · 7 Comments 

Text Animation…
This tutorial is very useful in all fields of webdesign, and text effects. In this tutorial you will be learning how to create smooth and slick text animation. The only programs used in this tutorial are Adobe Photoshop, and Photoshops sister package. Adobe ImageReady…

Getting Started
Setting up your work space.
To set up your work space you will need to open a file of any size. Ive used a white background and simple text effects to create my main base for the animations. Blue and white text that advertises TutorialBlog.org.

Step 1
Build up all of your text layers and hide all of them apart from the first 1.
text animation tutorial step 1

Step 2
Since we will be using Adobe ImageReady for the main animation stage, you will need to port your source files from Adobe Photoshop, to Adobe ImageReady. You can do this by click the ‘Edit In ImageReady’ button located at the bottom of the tools palet.
text animation tutorial step 2

Step 3
Making sure that your ‘Animations Window’ is open we will continue to the next step. If your animations window is not open, you can do so by going to; Window -> Animation.

Duplicate your first animation frame by clicking the ‘folded paper’ icon in your Animation’s Window.
text animation tutorial step 3
text animation tutorial step 3

Once duplicated the fun stuff starts to begin.

Step 4
Now we are ready to start animating!.
To start animating your text, you will need to pick which text layer you want animated first. To do this you can simply click the hide and view button within the layers palet.

text animation tutorial step 4

Next we will need to set a time frame for each window. You can do this by clicking the ‘Select Frame Delay Time’. Once you’ve clicked this you will be prompted with different time settings. For what we are doing 2.0 seconds is probably the best time delay.

text animation tutorial step 4

Step 5
Once we’ve done that we just need to selected which frame, and which layer.. You can do that by viewing the example below.

text animation tutorial example 1

text animation tutorial example 2

——————————
That’s all there is to it. You can view the final outcome below.

text animation tutorial final draft

Thanks
Peter Avey

Comments

7 Responses to “Text Animation Photoshop Tutorial”
  1. ttz says:

    Thanks a lot

  2. Agnieszka says:

    Fajny tutek, ale można coÅ› takiego zrobić w innych programach… Jak co, to jestem z POLAND :D :D

  3. Rusty says:

    Awsome guys really big help !! : )

  4. vickiieeee says:

    how come whenever i press the imageready thing it always say sumthing like missing application directory?

  5. ghull says:

    not so beauty but the ideea is great

  6. riz says:

    how do i save it to work as an animation because wen i save it as a gif it doesnt work :| and also wot if i am tryin to use it as a screen saver on my fone how would i do tht so it works

  7. Bram says:

    Webdesign with animated gifs rock!