An artistic oracle. Meet fellow creators and swap advice. Every skill you can imagine is on show.
Topic locked

Text Fading

Tue Nov 09, 2004 7:41 pm

I need help figuring out how to fade one text into another (like my signature - Beware the Power of a Griffon... fades into- For they can be mightier than even the Dragon).

I've already read all the help things I could find on here, but either they made me so confused I couldn't follow them, or they only dealt with one fader (I think...). Do they all, or am I just really dense?

Thanks, and I hate to ask one question so soon after another, but this can't be helped... Once again, thank you.

Tue Nov 09, 2004 7:56 pm

(You'll need basic knowledge of Photoshop for this) It took me a while to realise how to fade(without using imageready). This is for photoshop. Now,
do not merge the text layer, but merge everything else as a mainpicture (I find naming the layers helpful, but thats normally for very complicated animations with many different fadings and stuff going on at the same time).
Then, duplicate the background, then the text, and place them in the layers pallet like so:

text
mainpicture
text
mainpicture

So your first text is 100 opacity, change the second text to 75 opacity (its shorter than doing it by tens, and dosn't look so jolty as when you do it by 50)

Then, duplicate the text and the picture some more, and place it like so:

mainpicture- 0
text- 25
mainpicture
text- 50
mainopicture
text- 75
mainpicture
text- 100
main picture

Then, name the last text layer ENDOFFIRSTFADE and do exactly the same as above with the second text layer.

Then merge each text layer SINGLEY onto their own seperate backgrounds. Now, repeat the process, just backwards so it fades back to visible. Now duplicate the layer of
ENDOFFIRSTFADE
several times untill you have your pause between the first fade and the second fade. Then, if you want a pause between the very beginning of the animation and the very end of the animation, duplicate the first or last layer.
Now, go to File-Save for web- Check the GIF. box- Check the Animate box- Check the loop -if you want the animation to loop- box.

Now you can adjust how fast the animation goes, the frame rate. 0.2 is the original, 0.1 or 0.0. 0.0 being the fastest.

0.0 and 0.1 are best for large opacity gaps in between frames, and 0.2 and above are better for loads of frames, or with opacity gaps like 5.

I think you can pretty much figure out, after you've got the hang of this, on how to do more complicated animations, with loads of little fadings, interlaced ect.

Tue Nov 09, 2004 10:50 pm

It's much easier if you have Jasc Animation Shop. You would really only need to create three frames.

Frame 1: Has the first part of the text
Frame 2: Has just the blank image for the sig
Frame 3: Has the second part of the text

Insert them all into AS in that order.
Select the first one, and at the top of the screen click Effects > Insert Image Transition.
In the window that pops up, there should be a drop down menu toward the center of the lower part of the window, select this to "Fade".
The top left and right will have Start With and End With, select both to "Animation Frame".
The bottom left will have options to change the settings for the animation. You can vary the finished length of the transition (in seconds) as well as the speed of the animation, and below that it tells how many total frames are required (it changes as you change the settings) You don't need very many frames to get a good effect, and remember, the more frames you have, the bigger the filesize will be.
Click OK once it looks good, and then select the middle frame (the blank one). Your settings should already be set from before, so just click ok.
Now both your lines of text should be fading nicely. You can click View > Animation to preview it.
But now you need to make it a flawless loop. So first take the center blank frame, and place it at the end of the animation. Go to the next to last frame (second half of the text) and insert the transition. Now take your first frame (with the first part of the text) and tack it onto the very end of the animation. Now select the second to last frame (with the second part of the text) and insert that same image transition again. Once it's inserted, delete the last frame (with the first part of the text).
Your animation should now be a perfect seamless fading loop. It should go Frame 1 > transition > Blank Frame > transition > Frame 3 > transition > Blank Frame > transition
You may want to adjust the speed of the main frames (not the transition ones). For example, you may want to make the first blank frame slightly shorter than the two with the text, and the second blank frame slightly longer. To adjust the speed of a single frame, go to Animation > Frame Properties and adjust the speed.
Once everything looks perfect, save it. Animation Shop will automatically go through the optimization process to lower the filesize of the animation.

Note: You can also do this without the blank frames, if you do, the two halves of the text will fade directly into eachother.
Topic locked