Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
adv banner
Photoshop  Home Photoshop ImageReady Animation Swift Animated Text
rss

Swift Animated Text

Author: Muxla.com More by this author


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.

Swift Animated Text Tutorial: Final Result

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.

image 2

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:

image 3

image 4

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.

Click to enlarge
Click to enlarge

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.

Click to enlarge
Click to enlarge

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!

Swift Animated Text Tutorial: Final Result



Author's URL: www.muxla.com

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Swift Animated Text"