For Photoshop CS3 or ImageReady

When I was new to Photoshop I found that learning simple animations first was a good way to understand how the layering and frames operate. I’ll post a tutorial on video animations later ;]
First we’re going to do a few simple animated text effects- blinkies and a glitter. Here’s what the end results will look like;

Flashing Text

1. So open a new document. File > New > Width: 300 pixels; Height: 100 pixels; Background Contents: White

2. Select the Type tool in the toolbox or by pressing the letter ‘T’ on your keyboard. Set your colours to default black and white (if they aren’t already) by clicking the small overlapping squares in the toolbox.

Choose a font from the menu at the top (preferably a bold/chunky one. I’m using Impact, size 72pt) and type your name or any word onto your document.

3. Deselect the text, then in your task bar at the top of the screen go to Layer > Duplicate Layer. Click the eye icon next to the original layer beneath to turn its visibility off. Highlight the text in the top duplicated layer and change the colour to anything other than black.

4. Deselect the text again. Now open your Animation panel (Window > Animation). Click the paper icon at the bottom to create a second frame.

While the second frame is selected, go back to your Layers panel and click the eye next to the duplicated layer to turn it off and then turn the original black text layer on again.

5. Back to the Animation panel, select both frames by holding down the SHIFT key while clicking, then click where it says ‘0 sec’ and change the frame time to 0.5 sec. Make sure the repetition is set to ‘Forever’ and press the play button to test it out.

6. Looking good now, yes? If you’re using ImageReady, go to File > Save Optimized As… and save it as a .gif file.

Photoshop CS3 users, go to File > Save for Web & Devices… and save it as a .gif file. Don’t worry about changing any of the other fields for now.

And now you’ve finished your flashing text animation ;D

Chasing Text

This is similar to flashing text, we only need to change a couple of things.

Do steps 1 & 2 as written above.

3. Deselect the text, then in your task bar at the top of the screen go to Layer > Duplicate Layer. This time when we change the colour we’re going to highlight and change every second letter, like this;

4. Once you’ve done that, deselect the text, turn the top layer off and select the layer beneath it. Do the same thing again but with the opposite letters to before;

5. Deselect the text again. Go to the Animation panel and create a second frame. While the second frame is selected, turn off your current layer and turn the top layer back on again.

6. Repeat step 5 from above, but change the frame time to 0.2 sec instead of 0.5 sec.

7. Repeat step 6 from above and you’re done!
 

Running Text

This is starting to get a bit more complicated because we’re introducing more frames.

Do steps 1 & 2 as written above. *It makes things easier if you choose a short word for this one.

3. Deselect the text, then in your task bar at the top of the screen go to Layer > Duplicate Layer. Do this for as many letters that are in your word- for example, my word is ‘running’ which has seven letters so I should have a total of 8 layers in my Layer panel (including the white background)

4. Colour only the last letter to anything other than black. Turn the top layer off, select the layer beneath, then colour only the second to last letter. Turn that layer off…and continue to go through the rest in this order. Just remember too always select the layer you’re currently working on.

5. Deselect all text. In the Animation panel create the same amount of frames as there are letters in your word. Select frame 2, then turn off the bottom text layer and turn on the one above it. Continue this pattern for all the frames and layers (you’ll need to keep turning off the bottom text layer for each frame).

6. Select all frames in the Animation panel and change the speed to 0.1 sec. Press play to see if there are any mistakes. If its all running smoothly, save it as written above and you’re done!
 

Glitter Text

1. Save these pre-made glitters to your computer.

CS3: Open them in Photoshop. In the task bar at the top of the screen go to Edit > Define Pattern. Do this for all three files and then close them.

3. Open a new document. Width: 300 pixels; Height: 100 pixels; Background: Transparent.

4. Type a word, preferably using a bold font, then deselect the text. Click the F/FX button at the bottom of the Layers panel;

IR:

CS3:

Choose ‘Pattern Overlay’.

CS3: From the patterns drop-down menu, find the glitters you just added at the end and select the first one;

Click OK.

IR: Go to the Patterns panel and click the arrow, choose Other…Open Glitter1.jpg

5. Duplicate the layer. Click the eye next to the layer underneath to turn it off (the Effects sub-layers will turn off with it).

CS3: Double-click the part of the top layer that says ‘Pattern Overlay’. Choose the second glitter pattern and click OK.

IR: Select the part of the top layer that says ‘Pattern Overlay’. Go back to the Patterns panel, choose Other again and open Glitter2.jpg.

Repeat this step for the third glitter pattern.

6. Create two new frames in the Animations panel. While frame 3 is selected- turn off the top layer, turn on the bottom layer. Select frame 2- turn off the top layer, turn on the middle layer. Select all three frames and change the speed to 0.1 seconds.

7. Play the animation to see if it’s working fine.

IR: Save file as written above.

CS3: Save file as written above, but also make sure you have the ‘Transparency’ field ticked;

That’s all folks!

Please let me know if you’re having trouble with something or if there are any further questions you might have.
*This is my first time making a tutorial so it's likely to be flawed ;P*