This work is licensed under a Creative Commons License.

Rotating Text Effects

Tutorial submitted by WebGuy

Creating a rotating text effect which you can use on your Web site, or on banners is actually a very easy process. Fine tuning and making it look a little flashier takes more time. You can, however, in a matter of 2 minutes, put rotating text on any project you are working on. If you have any questions or don't quite understand one of the steps feel free to e-mail me.

Step 1
For the first step I created a new document with a black background that is 200 pixels by 200 pixels. The size does not really matter, I just pulled the dimensions out of a hat.

The next thing to do is select the text tool option from the tool bar and to put some text on our blank document. I used yellow text because it stands out very nicely on a black background.

Make sure that you make relatively large text, I used impact font and set the text size to 30 pixels. That way it will be very easy to distinguish the rotating effect and be easily legible.

Step 2
The second step is also the last step. Which should be a sign as to how easy it is to animate text and make it rotate. Click on the text on your document using the selection tool and then click on modify on the toolbar, then animate, then animate selection. If you look at the image below you will see the settings that I used. You can play around with these settings to get your own nifty effects. Because we want our rotating animation to be fairly smooth I made it using 12 frames. I also set the starting opacity to 0 and the rotate to 360 degrees clockwise. Make sure you set the move to 0. Otherwise not only will it rotate and fade in it will move across the page, which is really not what we want for this sample. Once you click on OK it will animate your selection and you now have text that fades in and rotates three hundred degrees clockwise. Play around with the settings a bit and you can come up with even more impressive animations. This technique is very simple to do a simple animation and even more complex animations can be achieved with a bit more time put into it. Make sure you have the file optimization set to animated gif, and then select the last frame of the animation and set it to 150. This way your animation will stop on the last frame and you can easily read the final product.

This is what the end product should look like. It should not take you longer then one minute to do this. It is a very basic technique, which is easy to learn.

Top