BasicAnimationTutorial: Fading Text

Renegade

Renegade

Moderator
Juggernaut
This is a fading in text effect animation tutorial.

Again there are two ways to do it one is the conventional long method of saving the picture at each step and then generating the gif via gif generating software available freely and free on the net.
Check these out as well as they are supplementary to each other.
Moving Square.
Scrolling Text.

The other way is using adobe imageready but this time I shall show you the power and simplicity of the ‘tween’ tool.

First the long method.
Open a new document and using the type tool punch in the text you want to display.
Now change the opacity of that text layer using the option in the layers palette and save the image at each step as shown.

text_animation1.gif

Opacity – 30%

text_animation2.gif

Opacity – 40%

text_animation3.gif

Opacity – 50%

text_animation4.gif

Opacity – 60%

[IMGhttp://home.ripway.com/2005-8/370580/boxan/TextAn/text_animation5.gif[/IMG]
Opacity – 70%

text_animation6.gif

Opacity – 80%

text_animation7.gif

Opacity – 90%

text_animation8.gif

Opacity – 100%

Now that you have the images use the gif generator software and load the images in the same sequence and hit the generate button.

This is what you shall have.
text_animationfinalfast.gif

Now the no frills tween method.
Open a new document and using the type tool punch in the text you want to display.
Open this document in imageready and duplicate the layer once using the duplicate frame button.
step1.JPG


Change the opacity of the first layer to 30% and that of the second layer to 100%.
step2.JPG


Now select the tween option and use the settings as shown in the pic and hit the OK button.
step3.JPG


Now you will have 6 additional frames in the animation palette.
step4.JPG


Click the play button and watch your animation in action. If you like it then you can save it using the save optimized as button.
 
sure soon enough we will have some high end stuff as well. but you see the mechanics are the same, all it takes is some fantasy.
 
Thanx very much for the tut, I thought image ready was going to be a nightmare, but you proved me wrong lol :clap:
My sig is the result.
 
Nice tut man :hap2: :hap2: .
I got a question though ,every time i make an animation in my sig the size shoots above 40kb which is the limit .Is there a way to optimise and keep the size under the limit ??
 
Yes indeed there is.

There are two ways....

1) reduce the frame count ie the no of frames in your animation... that way you compromise on the super smooth effect but you have a small file size image.

2) alter the optimization settings..
Here you can reduce the no of color the image is displayed in.
for ex. a 256 color image will be much larger than a 16 color image, the color table is also saved with the gif file and it occupies the largest space (almost all of the image size).
So the best way is to reduce the no of colors. however if you reduce the colors by much then you lose out on image quality, so for that you can use 'dithering'. Dithering makes up for the small color table by mixing the existing colors in the table to obtain the other shades and provide smoother edges.
The dithering option also has a slider for adjusting the % dither. At 100% you get maximum quality for the selected color table. optimum should be 85%.

Alternately you can also start off with a image which has less colors... that way you can reduce the file size even more.
 
Imagine said:
Thanx for the tips d00d but my sig went went pale wen i tried em... and i like my sig Richer so i'll stick with jpg .
Click to expand...

JPG is always there for richer and still pictures.
This tut is for animated pictures and the compression method too was for animated( .GIF) pictures.
You cant have animated images with JPG.
 
Back
Top