Handwritting animation

[ConnorSears]

Hey guys, just wondering if any of you guys new how to go about creating a animation where you see a word being handwritten? Thanks for the help ahead of time.

 

[Welles]

Hi ConnorSears and welcome to the forums.

What you want to do is actually pretty easy but it is tedious...at least the way I did it. First create a new document with a background layer of whatever color you wish. Then either use a hand written script font or draw it your self and put the writing on an otherwise transparent layer. Now duplicate the layer a zillion times. The more times, the smoother the result.

The little sample I show here has 32 frames. If you open it up in ImageReady you can see what is going on. I started with the whole psg and erased all but the beginning. On each following layer, I erased less of the lettering until it was all in place. I did that in Photoshop and then opened the file in ImageReady and made the background layer and one of the text layers visible in each frame of the Animation palette. Then export the optimized GIF.

If the directions here aren't adequate, open the GIF I've made in ImageReady and you may figure it out that way. If you then have further questions, feel free to ask away!

 

[ConnorSears]

that is very clever. Thanks a lot for the help. I get exactly what you mean, you were very clear. I will try that out ASAP.

 

[mflintjer]

Nice little tute there Welles!!

 

[ConnorSears]

OK here is the next question. I have a backround of notebook paper. is there not a way to make the hand writing gif and make its backround transperant, then comp it on to the notebook paper? Btw I know icould find thi out for myself but i am at work and want to see if this is easily done =)[/i]

 

[Welles]

Hi again, ConnorSears. Sure. Trash any solid color background layer in your PSD file. Keep all your script layers transparent except for the script. In ImageReady, locate the Optimize palette and make sure the Transparency check box is checked and then Save Optimized as... Your transparent GIF will be a bit larger of a file size and it will look a little more pixilated but should work just fine.

 

[mflintjer]

Welles wrote

Your transparent GIF will be a bit larger of a file size and it will look a little more pixilated but should work just fine.

Couldn't you scale down the gif portion, as well as distort to try and match the notebook paper? Wouldn't this also keep the pixelation down as well as file size? \:] Just a couple of questions I thought of from your last post Welles!! 8}

 

[Welles]

Welles wrote

Your transparent GIF will be a bit larger of a file size and it will look a little more pixilated but should work just fine.

Couldn't you scale down the gif portion, as well as distort to try and match the notebook paper? Wouldn't this also keep the pixelation down as well as file size? \:] Just a couple of questions I thought of from your last post Welles!! 8}

Hmmm...I'm not sure what you're trying to suggest. If ConnorSears has a piece of notebook paper as his web pages background he will make the GIF sized to fit in between lines, I would think, just as if he were writing in his notebook. If it were possible to place the GIF exactly, he could use a background of white with a blue line (or whatever matched his notebook) as the baseline for the font or handwriting. Then the GIF file would be smaller but the blue line would have to line up exactly for the effect to look real.

Actually, in this case, file size isn't too much of an issue. The GIF I posted originally was under 8K. When I made the same one transparent the file size was under 12K. Typical. There's no way around the outer edge pixilation of transparent animated GIFs, to my knowledge.

 

[mflintjer]

Well, what I meant was, that when you scale down the gif's, wouldn't you lose alot of the "staggering" effect of pixelation, by making the picture smaller that is!?

You know when you have a picture (either found on the web or even scanned in) that you didn't create -- and you go to try and blow it up? You get that pixelation or rough edges. If you take it smaller -- you GENERALLY end up with a crisper image! \:]

Get my meaning -- by scaling it down, can he keep that pixelation down to a virtual minimum? -- keeping it crisp and clean? I do agree that there will always be some pixelation though!

 

[Welles]

Your logic is sound but... see for yourself

 

[mflintjer]

I guess one can't just scale it down -- dam! [slick]

And if you try to improve the ppi -- the file size just gets bigger! -- dam, dam!! [slick] [slick]

Oh well, never hurts to ask!

 

[mflintjer]

btw -- nice animation!!

 

[Welles]

Yes they are. I didn't create those. They were done by the Animation Factory. I used them simply because they have most all their animations in four or five sizes and black, white, and clear backgrounds as downloads for members to use without restriction. It was the easiest way to demonstrate the pixilating of edges in different sizes of GIFs. I also liked that the guy was shaking his head, 'No.' [honesty]

 

[sPECtre]

Remember that gif have only one bit transparency: opaque or transparent, thus it will often have jagged edges.

 

[mflintjer]

Thanx sPECTre, that really clears up the reason for me! I wasn't aware of the binary format of gif files!