Scrolling Text
Let's learn how to make an icon like this:

 

First, open your icon base. Here's mine:

 

Place your text where ever you want it, using any kind of font, straight, crooked, upside down, however you want the text to be. (My Adding Text Tutorial)

Make a new layer above your text layer, and fill it with a gradient.

Now we're coming to a tricky part, and I can't really show you. Hold down the alt key while putting your cursor on your layers palette, on the line between the text layer and gradient layer. Move the cursor slowly, when you get it just right, you will see two entwined circles. I have no clue what this is called or why it works, I just know it does. 8^) When you see the two circles, click with your mouse. If you do it just right, you will now see the gradient only where your text is.

Now, click the very bottom button on your tool palette to jump to image ready (Or, go to File > Jump To > Image Ready. If you are totally unfamiliar with Image Ready, you might want to look at my tutorial about the program.) Your icon will be open when you get there. If your animation and layers palettes are not open, you can open them by going to Window > and putting a check next to Layers and Animation. In the animation palette, you will see your icon open in the first frame. Add another frame by clicking on the icon that looks like a dog eared piece of paper. Now, click on the first frame on the animation palette, and click on the gradient layer to select it. Use your move tool and keyboard arrows to move the gradient all the way to the left, until it no longer shows on the screen.

Then click on the second frame and gradient layer, use the move tool and keyboard arrows to move the gradient all the way to the right until it is off the screen.

Now click on frame one again, then click on the icon that looks like diagonal fading squares. You will get a "tweening" pop up box that looks like the one below. Change your settings to match these:

You will need to play around with how many frames in order to get the effect you like. It can't be too many, or the icon will have too large a filesize to use at LJ. Too few frames, and your icon will just be a fast, jerky motion rather than smooth and scrolling.

Click ok.

You will see many frames in between your original two frames now. 5 to be exact! You will need to click on each frame, and turn on each layer that you want on in that frame by using the layers palette.


(Click for larger image)

Next step is to set the timing of the frames. If you do not know how to do that, please visit my tutorial on learning to animate. I set mine at .15 seconds, then saved as a .gif, which is also covered in the animation tutorial.

Done:

If you have questions or comments about any of my tutorials, if you would like some one on one Photoshop or graphic building help, or if you have a suggestion for future tutorials or other resources, please email me. I would love to hear from you there! Or please consider dropping some coins into the Tip Jar to help pay for this site's bandwidth usage.

 

Tutorials Index

©icondoit