[Guide]Swift Animated Text

[fdLP.]

Step 1 - Learning how to animate

 

This is not a program you usually do main animation to do. Adobe Photoshop / Imageready is just for small animations such as the tutorial I'm doing with you now. What i'll be teaching is how to add a regular text layer and a motion blur text layer together and form a animation. Above is the example i created.

 

 

Step 2 - Text Layers

 

Like I said, we're going to need sets of text layers, and duplicate sets of motion blur layers. So go ahead and pick 3-5 different phases you wish to add in the animation. Make sure their centered or aligned correctly, or else it will mess up the entire animation flow.

 

 

Step 3 - Motion Blur Layers

 

Alright, now after you got the 3-5 text layers, it's time to make the other 3-5 motion blur layers. Duplicate each text layer. Try to keep it organized, like each duplicated layer is right above each regular one. Don't make all 3 blurs on top and all 3 regulars on bottom or you might get confused.

 

Now for each duplicated text layer you just created, use the motion blur effect. Filters > Blur > Motion Blur. Use the settings below:

 

 

Step 4 - Start in Imageready

 

Alright, hopefully this isn't your first time in Imageready. If it is, you might want to read very carefully. Go up to File > Edit in Imageready. Once your there, go to Window > Animation and make sure it's already enabled. Now, create a new layer in the animation box (left side of the trash can icon).

 

For the first layer, make it the first motion blur text. Set the time of it to 0.1 seconds. To do that, just go to the bottom of the layer box and click on the time. Then for the second layer, make it 1.0 seconds. We want that one to stand out longer for people to read.

 

 

Step 5 - Continue the Animation

 

Ok, after you got the flow of the first 2 going, the rest should be easy. Just do exactly what you just did, but add the other phases in there. The animation box should show up as Motion Blur > Text > Motion Blur > Text > Motion Blur > Text. Then after the last text, it will repeat back to the beginning.

 

 

Step 6 - Finished & Troubleshooting

 

Alright, now make sure in the bottom left of the animation box it says Forever. Go ahead and click Play to see how it looks. If a bunch of text layers are coming up not like you want, make sure you made only one text / motion blur layer visible for each animation, not 2. This tutorial can now be used in many different ways including a radial blur to make it look like its bouncing. Do as you desire and I hope it comes in handy!

 

Congratulations, your finished! Here's a copy of the .psd file. Enjoy!

 

From webdesign.org

 

PS : an example of the tutorial is my avatar

Video :

 

PS : for PS3 users , in order to save it go to , File > Save for Web & Devices! and you are ready !

[K4rMa]

Smthing is wrong with the pictureS ? :P

[fdLP.]

Smthing is wrong with the pictureS ? :P

 

Ill do a video now or tomorrow with PS CS3 , btw whats wrong?

[K4rMa]

The pics dont show actions in photoshop but it shows the site !

 

Web design library 1,000 + tutorials mpla mpla

[Bleik]

Erm..pictures? xD...I can't see pictures, just the site!!

 

Edit: Pictures are fine..Thanks.

[fdLP.]

can u see them now ?

 

Check video :

[ZeRo*]

Thx fdLP. I'm gonna make an avatar tomorrow...! :)

 

Btw what means fdLP. ::)

[Raule]

For sure i'm gonna make also.Is more easy with the video.

Thanks fdLP.

[WebM0nst3r]

Btw what means fdLP. ::)

 

fuck de Lesbian Polish ^^

 

anyway nice guy i will give a try to make a avatar  ;)

[Blane]

Just to notice: For the newbies, ImageReady used to be something different than Photoshop.For those who use cs3 versions you can find that "Window > Animation" integrated in Photoshop.

 

Very good explained tutorial,

Blane

 

PS: What the fuck is going on these last days animation in signatures is ruling or what? :P 

[fdLP.]

Btw what means fdLP. ::)

 

Future dans le passe , in english , Future in the past

 

Just to notice: For the newbies, ImageReady used to be something different than Photoshop.For those who use cs3 versions you can find that "Window > Animation" integrated in Photoshop.

PS: What the -beep- is going on these last days animation in signatures is ruling or what? :P 

 

prolly ...

[Morian]

Very good share fdLP. I go to make an avatar :P Thank you

[ZeRo*]

Well after a lot of difficulties i made this

 

 

I made something wrong or it's my idea? ::)

[Blane]

Probably you forgot to hide blured layer in the 2nd and the 4th frame. ;)

 

Here's also an example of an other type of animation using the same technique:

 

 

-Blane

[ZeRo*]

@Blane

What about this? It's ok now ? :-\