Animated Typewritter Avatar

tuzaj · 05-20-2005, 12:16 PM

Anyone knows it here? Teach me please. Make it simple and easy I'm just a beginner. Thanks!

rck · 05-20-2005, 01:48 PM

Pretty much the same like that one. The difference: Instead of moving the text-layer, you'll put an opaque layer (with a coloured box on it) above it which hides all the text. you would move the opaque layer to the right, making it reveal the text after a while.

A quick example:

for the "true" typewritter effect, with a letter after the other, you could do frames for every letter and add a letter at a time. this can soon get boring for longer texts, as it is a lot of work for you. on the other hand, you could even vary the times between the appearance of the letters, so it would give an more organic feel.

try playing around with the Animation Palette of ImageReady and tell us how far you got :-)

tuzaj · 05-20-2005, 02:34 PM

I'm really confuse Rene. I'm just really a beginner. Its kind of frustratig though.

tuzaj · 05-20-2005, 02:35 PM

Do you have any step by step tuturials for that type writer avatar?

I'll appreciate it. Thanks, man.

Ferre · 05-20-2005, 03:14 PM

rck · 05-20-2005, 03:54 PM

that surely rockz0rs, Ferre :-)

ok. well, start Image Ready. You got Image Ready, right?

1. close every palette you see except the Layer palette, they are only confusing.
2. in the layer palette, you should see one layer. It's probably called "Background" and written italics. It doesn't matter if it's different.
3. press the "new layer" button. It's the one next to the trashbin
4. press the Type tool in the toolbox. It's the one with the "T".
5. enter your text
6. do yet another new layer and stack above your text.
7. draw a rectangular selection that includes all the text you've written, make sure you're on the new layer.
8. edit -> fill -> Use: White
9. you have a white box over your text now which should render it invisible. you might want to give your layers useful names, btw. Let's call this one "curtain" by "slowely doubleclicking" the title.
10. it's showtime, we're doin' the animation now.

11. Window -> Animation. It has a "0 sec." below it, right? Change that to "0.1 secs" so the animation has the same speed on all computers.
12. Press the "new frame" button. It looks the same like the "new layer" button, except it's the one in the Animation palette.
13. Having selected your second layer, move the white box all the way to the right. make sure to keep the shift-key pressed, so it would be moved a straight line.
14. select both of your frames.
15. press the "tween button". it's the one left of the "new frame" button. enter 15 there.
16. press "play" in the Animation palette to preview your animation.
17. File | Save optimized as | GIF

please try all of that and show your results. We can then go on from here. Also make sure you'll save a PSD file of it as well or you'll have to restart from scratch.

tuzaj · 05-20-2005, 05:36 PM

Rene wrote:
6. Do yet another layer and stack above your text

What's this mean? Anyone please?

Ferre please lend me some hand since you're currently online.

rck · 05-20-2005, 05:42 PM

What I meant by "stack it on top" was: Drag it with the mouse on the very top of your layer list.

That is: If the layer isn't the first one Press and hold the mousebutton on your new layer, move the mouse upwards, release.

tuzaj · 05-20-2005, 06:12 PM

how do I move the white box to the right?

tuzaj · 05-20-2005, 06:32 PM

how to select both the frames in animation?

rck · 05-21-2005, 03:22 AM

Quote:

Originally Posted by tuzaj

how do I move the white box to the right?

the same way, you stacked the layer on top: by dragging it to the right!

rck · 05-21-2005, 03:22 AM

Quote:

Originally Posted by tuzaj

how to select both the frames in animation?

like everywhere else in Windows. Hold the shift-key and press on the other one.

tuzaj · 05-21-2005, 10:40 AM

Yipee! I made it, Rene. Thanks to you!

By the way, any idea how can i add up a computer screen cursor like a small vertical line before a letter so it would appear like an avatar typewriiten in a computer screen.

Thanks!

rck · 05-21-2005, 02:00 PM

Quote:

Originally Posted by tuzaj

i add up a computer screen cursor like a small vertical line before a letter so it would appear like an avatar typewriiten in a computer screen.

easy! remember the white box we put above the text? just draw a black line on it's left side :-)

tuzaj · 05-22-2005, 10:50 AM

This really a dumb question, Rene. But I still don't know the basics - I don't know how to draw a line.

tuzaj · 05-22-2005, 11:17 AM

Quote:

Originally Posted by rck

A quick example:

By the way, how did you this with the letter words moving backwards. Cool!

rck · 05-22-2005, 11:50 AM

Quote:

Originally Posted by tuzaj

I don't know how to draw a line.

For straight lines, give the pencil or the brush tool a try.

1. Select a colour
2. select a brush
3. click on the origin
4. hold the shift key
5. click on the destination

rck · 05-22-2005, 11:51 AM

Quote:

Originally Posted by tuzaj

how did you this with the letter words moving backwards.

I simply did another frame where I put that white box back in place. Then I tweened them again and set the middle frame to 5 seconds.

tuzaj · 05-22-2005, 01:57 PM

Rene, adding lines for the typewriiter avatar is hard work, right? Like what i did is try to make lines in every frame before the white box, right?

Any other options?