PDA

View Full Version : Adding Text to an ImageReady Animation :: A Tutorial ::


whiskie
06-29-2006, 02:17 PM
Adding Text to your ImageReady Animation

Well I was browsing through AOI's ANIMATED GIF Tutorial thread (http://forums.narutofan.com/showthread.php?t=15156) and it seems a lot of people want to add text to their ImageReady animation but can't get it to remain throughout every frame. I didn't see anyone answer the question yet, so figured I'd help out. If someone else already answered, I apologize, but I didn't see it.

Adding text is not difficult at all. It only takes a few minutes in ImageReady. I am going to explain it thoroughly though while also explaining some things about ImageReady and how the whole animation and text thing work. The more you know about it, the easier it is to do more on your own by exploring and being intuitive. Ok so here we go.

Okay, so I'm going to assume everyone who needs help has already done a Tutorial or made something on their own, and they have a working animation open in Adobe ImageReady. Now we just want to add text to the animation, such as putting your name on it, or whatever. If you haven't made an animation yet for your GIF, I suggest reading AOI's Animated GIF Tutorial by clicking on the link above or doing another ImageReady Animation Tutorial.

To add static text to your animation. (Meaning, text that isn't changing, moving, flashing, or anything. Static text = my sig, for example...

1.) Open up your animation in ImageReady, with the Animation bar also open. (The bar that shows each frame in sequence. This is covered in AOI's Tutorial.)

It should look pretty much like this:
http://i46.photobucket.com/albums/f150/piratebri2/tut1.jpg

2.) Okay, the first thing we want to do is select the first frame's layer. If you look at the right hand of the screen, you will see the Layer window. This is a list of all the pictures being used in your animation. What ImageReady does is tells the animation which layers to show at what time, and the result is a moving sequence of pictures. That's just some FYI stuff, though, so if you don't understand, don't worry about it.

All we are going to do now is make sure we are selected on the FIRST FRAME'S LAYER. The first frame's layer is usually at the bottom of the layer list. You can make sure by looking at what the first picture is in the Animation toolbar and seeing if it's the same.

If you used VirtualDub or another program to get the frames from a video/anime movie, then VirtualDub probably numbered your frames for you. Something like testframe66, testframe67, testframe68.. for example. If that's the case, then when you Imported the frames into ImageReady (in AOI's tutorial), ImageReady probably sorted the frames in order from smallest number to largest.

Okay, I hope I didn't make that sound more complicated than it should be. Basically all we're doing is selecting the layer for the first picture in your animation. Here's a pic of where mine was:
http://i46.photobucket.com/albums/f150/piratebri2/tut2.jpg

3.) Okay, once we have that layer selected, we're going to go to the Animation toolbar (the long bar with all the little frames lined up in order). We need to select ALL the frames. There are 2 ways to do this:

-The easiest way is to click on the small arrow ► in the upper right hand corner of the Animation toolbar window. Once you click that, a small window opens. Click Select All Frames in that little window. This should highlight all the frames in your Animation toolbar window.

-Another way to do this is to select the first frame in the Animation toolbar window, and then scroll the window all the way to the right, so you're at the end of the Animation toolbar window. Then hold shift and click on the last frame in the window. This will highlight all the frames in between the 1st and last frames.

Here's what it should look like:http://i46.photobucket.com/albums/f150/piratebri2/tut3.jpg

4.)Alright, so we have all the frames selected. Now we're going to add the text to the animation.


- Click on the text tool. It's the T icon on the Toolbar to the left side of the screen. This should turn your arrow cursor into a text cursor.

-Next, put the cursor where you want the text to be, on the big picture of your animation. Once you have it about where you want it, click once. This will put a cursor on your animation window.

-DON'T WORRY IF THE CURSOR ENDS UP IN A SLIGHTLY DIFFERENT LOCATION, WE CAN MOVE THE TEXT IN A SECOND.
For now, we should look like this:http://i46.photobucket.com/albums/f150/piratebri2/tut4.jpg

5.) Next, type in the text you want. It should show right up on your animation, in the big window. Again, don't worry if it's the wrong color or in the wrong spot, we will change those in a second. Here's what we should look like:http://i46.photobucket.com/albums/f150/piratebri2/tut5.jpg

6.) Okay, once we have the text typed out on our animation, we want to go back to the Layers window on the right-hand side of the screen.
-There should be a new Text layer that appeared in your Layers window. It will look different than the rest because instead of a small picture to the left of the layer, it will have a big T. Do you see it? It should also say whatever your text says. I.e. if you typed out "Banana" on step 5, the layer will be named "Banana". Simple huh?

-Once you see the new Text layer, click on the Text layer, and HOLD THE MOUSE BUTTON DOWN.

-While holding the mouse button down, drag the Text layer to the VERY TOP of the Layers window. Make sure the Text layer is at the very top of the Layers window, so it's the first layer in the list. This is very important!

Okay, it should basically look like this:http://i46.photobucket.com/albums/f150/piratebri2/tut6.jpg


Now, because I'm only allowed 6 pics per post,
I'm continuing this in the next post. We're almost done!
Read on!
........
......
....
...
..
.

whiskie
06-29-2006, 02:18 PM
Okay, so let's go ahead and and click on the first frame of our Animation, in the Animation window, and click the Play button. See if it runs okay. The animation should run through, and the text should remain static throughout. If it doesn't, then unfortunately you did something wrong. It's no big deal though. I messed up a few times when I was trying to figure this stuff out on my own before. If your text isn't staying put, and you're sure you did everything correctly, go ahead and post on the thread and we can get you some help!

If your animation is running fine, and the text is staying put, let's move on to the final steps:

7.) If you need to move your text, or change the color/font/style, read this step. If you're text is just the way you want it, and you want to finish up, go on to step 8!

Moving the text.
-Okay, so your text isn't exactly where you want it, and you want to move it. Make sure that the Text Layer is highlighted in the Layers Window in the bottom-right hand corner of the screen. It should still be highlighted from the last step.

-Okay, when it's highlighted, click on the Move Tool in the top left hand corner of the Tools Window (which is on the left side of the screen). After you click on the tool, a blue line will appear under your text, and your cursor will change to the Move tool cursor. It should all look like this:http://i46.photobucket.com/albums/f150/piratebri2/tut7.jpg

-Now, once you have the Move Tool selected, click on your text and HOLD THE MOUSE BUTTON DOWN. You can now drag the text anywhere you want on the picture.

-Once you decide on a new location for your text, release the mouse button. You will notice that the text automatically moves itself on every other frame of the animation. (This is because we put the Text layer on top of every other layer in the animation, so in essence, the animation is going on underneath the text. A great way to cut a lot of corners of extra work.) It should now be in the new location, and look something like this:http://i46.photobucket.com/albums/f150/piratebri2/tut8.jpg

Changing Text Color/Size/Style/Font
-Okay, so now that your text is in the right spot, you want to change the color, size, style, and font right? Awesome, this is easy. Let's do it!

-Make sure the Text Layer is still the only highlighted layer in the Layers Window.

-With the Text Layer highlighted, select the Text Tool from the Tools Window (on the left side of the screen). It's the one with the T icon.

-Now, with the Text Tool equipped, move it directly over your text. Right in the middle of the word, and click once. This will bring up the cursor in the text, so you can edit it.

-Highlight the Text
With the text highlighted, you can now change all of it's characteristics easily.

Changing Color:
-To change the text color, highlight the text, and click on the Colored Square on the top of ImageReady's screen. Make sure you click the Colored Square, NOT the arrow next to it! The arrow next to it is for pre-set colors. By clicking the colored square, you can customize your very own color for your unique animation!http://i46.photobucket.com/albums/f150/piratebri2/tut9.jpg

Changing Size
-To change the size of the text, make sure the text is highlighted. When it is, click on the down arrow next to the TT symbol on the Text Editing Window at the top of the screen. http://i46.photobucket.com/albums/f150/piratebri2/tut11.jpg

-Select the size you want.

Changing Font & Styles
-On the same bar that you used to change Color and Size, you can also change Font and Styles.

Refer to this screenshot for the locations of the Font and Styles menus:http://i46.photobucket.com/albums/f150/piratebri2/TUT12.jpg

-Again, make sure the text stays highlighted whenever you go to change the color, font, size, and styles of the text.

8.)Saving your animation!
-De-select the text so you can see the color, size, style, and font, and make sure it's what you want. If you want to change any of those things again, all you have to do is re-highlight the text with the Text Cursor tool, remember it's the one with the T icon on the Toolbar.

-If you want to move the text again, just click on the Move Tool and click/drag the text to where you want it. I'm sure you remember how to do this.

-The important thing is that you make sure the Text Layer is at the VERY TOP of the Layers Window list.

-Once you have everything set the way you like it, go to:
---File
---Save Optimized As...
---Select the location where you want it saved.
---Click OK

Now you can host the image on a website like Photobucket.com or ImageShack.us and use it as your avatar/signature for the forums!
Keep in mind that longer animations are bigger in size, as well as animations that are physically larger than normal. Photobucket's maximum upload size is 1.0MB, but actually, .gif animations take unseen space. So try to keep it under 800K for Photobucket.

The same applies to ImageShack. The max upload says 1.5MB, but for .gif animations, keep it under 1.0MB, otherwise ImageShack will try to resize it / optimize it, and it will end up being smaller, choppy, or covered in compression residue.

So remember, the smaller the animation is (in Kilobytes), the better off you'll be. Even if you manage to get the animation to upload properly, if it's large in size, the website will probably remove it due to heavy bandwidth usage. (It requires more bandwidth to host a sophisticated animated image than it does to host someone's avatar of Naruto's face).


And that's it! You now know how to put static text on an Animated Sequence! Not many people can do that!


It is also possible to have the text change as the animation progresses. Whether it be what the text says, what color it is, or other stuff. But that takes a little more work. I'll make another Tutorial for that another time, but for now, I really need to get something to eat!

Oh, here's how my Sample Animation came out...

http://img348.imageshack.us/img348/217/testsig4bn.gif