JustMommies Message Boards

JustMommies Message Boards (http://www.justmommies.com/forums/)
-   Blinkie Tutorials (http://www.justmommies.com/forums/f262-blinkie-tutorials/)
-   -   "Signature Animation" (http://www.justmommies.com/forums/f262-blinkie-tutorials/494470-signature-animation.html)

SPinkD March 8th, 2007 12:51 PM

This tutorial is made with photoshop. If you haven't done the previous photoshop blinkie school lessons, you may want to do those before you start this, so it makes more sense.

We are going to learn how to make and animated signature like this:

http://i37.photobucket.com/albums/e5...ials/julia.gif

Open up a decent sized document, we can crop it smaller later. I am going to use 400 x 400 px.

Step One:
Create the word you would like to animate. Add, stroke, drop shadows, whatever you want. I think a more scripty or handwriting type font works the best. Make sure the font size is large enough to work with Here is what I am starting with. I added a layer underneath in white, so I can see where the drop shadow and stroke stops. I will delete it before I save, so the image stays transparent.

http://i37.photobucket.com/albums/e5...rials/sig1.gif

Step Two:
Create the image you want to "draw" your signature with. I just went to my custom shapes and choose the butterfly, but you can use what you want. Add layer styles as you wish. Make sure both the text layer and your object are how you want them and then rasterize. (Right click on both layers and choose rasterize). Place your object at the start of your word, like so:

http://i37.photobucket.com/albums/e5...rials/sig2.gif

Step Three:
Here is where it can get pretty confusing, so stick with me. You will probably want to come up with some sort of labeling system, like word 1, object 1 for each layer. Duplicate both layers---just forget about the white background layer if you did that, we are just talking about the word layer and the object layer from now on. Name those layers Word 2 and Object 2. On your 2nd object layer, use your move keys to move your object to another part on your first letter. Think of how you would write it and and at what point your had would stop to start moving in a different direction. Have I lost you yet? lol. Make sure your first set of layers is invisible (click on the eyeball). Now, click on your 2nd word layer...you are going to use your eraser and erase the rest of the word beyond the object, like so:

http://i37.photobucket.com/albums/e5...rials/sig3.gif

You are going to keep repeating step 3 over and over until you get to the end of your word. You will want to make sure that you are duplicating your first text layer, so you have the full word to work with each time. Also, you will want to drag your two duplicated words to the top of your layer box each time. I will do a series of screen shots now, so you can see my progress on the word.

http://i37.photobucket.com/albums/e5...rials/sig4.gif
http://i37.photobucket.com/albums/e5...rials/sig5.gif
http://i37.photobucket.com/albums/e5...rials/sig6.gif
http://i37.photobucket.com/albums/e5...rials/sig7.gif
http://i37.photobucket.com/albums/e5...rials/sig8.gif

and so on...If you have an i or j...you can dot it at the end by tracing an "invisible" line with a series of object layers as shown below.

http://i37.photobucket.com/albums/e5...rials/sig9.gif

Onto animation...

Step 4:
Open image ready.
Frame 1: Object 1 only
Frame 2: Object 2 & Word 2
Frame 3: Object 3 & Word 3

and so on until you get to the end. If you do not have an "i" or "j" to dot, end with your last frame with Word 1 only. Play around with the timing of your frames and voila!

If you have and "i" or "j" to dot, simply keep your last word layer visible (not 1st) and create a new frame for each one of your object layers that are tracing the invisible line...finish the last frame with your Word 1!

You should have something that looks like this:

http://i37.photobucket.com/albums/e5...ials/julia.gif

Crop to a more manageable size and remove the white background layer, if you wish. Save optimized as and you are done. I hope this made sense, if not, please please ask questions and I will do my best to answer. If you use another program, please feel free to adapt this tutorial to your program and we would love it if you would post it here for others to use.

Caeden'sMama March 8th, 2007 02:18 PM

It's not perfect, but it's a start! :P

http://i158.photobucket.com/albums/t...hotos/erin.gif

SPinkD March 8th, 2007 02:59 PM

Quote:

It's not perfect, but it's a start! :P

http://i158.photobucket.com/albums/t...hotos/erin.gif[/b]

Beautiful!!! I love it!

BrandiiNikkii.* March 8th, 2007 06:19 PM

:blush: I am VERY lost :(

my2lilcubs March 8th, 2007 06:40 PM

http://i142.photobucket.com/albums/r...s/toddlers.gif

my try

SPinkD March 9th, 2007 04:55 AM

Quote:

:blush: I am VERY lost :([/b]
Brandi...I wish I had psp. I have already downloaded my free trial and it is expired. I KNOW you can do it with PSP, I just don't know how to tell you to do it. Are there different layers in psp or do you it all on the same "layer". If so, you would just have so save after ever step as a different file name.

Great job!!

*Firefly* March 9th, 2007 09:22 AM

:huh: :wacko:

SPinkD March 9th, 2007 09:36 AM

Quote:

:huh: :wacko:[/b]
Are you working in elements? or photoshop?

BrandiiNikkii.* March 9th, 2007 09:59 AM

Quote:

Quote:

:blush: I am VERY lost :([/b]
Brandi...I wish I had psp. I have already downloaded my free trial and it is expired. I KNOW you can do it with PSP, I just don't know how to tell you to do it. Are there different layers in psp or do you it all on the same "layer". If so, you would just have so save after ever step as a different file name.

[/b]

I was using PS CS3 to do it.

I got lost at step 3.

*Firefly* March 9th, 2007 10:42 AM

Photoshop but I'm really confused

SPinkD March 9th, 2007 11:05 AM

Okay, so let me try to explain it a little better. ;)

You are going to need an "object" layer, like the butterfly and your "word" or "text" layer. These two layers are basically going to be your "template" layers. You will need to duplicate them both each time you are going to start on a new "pen position".

So, I guess you could say that your "object" is your "pen". So, each time you duplicate your two layers, you will click on your duplicated object layer and move the object/pen to a new point on your letter. Just like if you were writing it out yourself, where would your pen start changing directions to complete the letter. Most letters will have about 3 object positions, but some more complicated letters will have more.

Now, the reason why you duplicate your text layer every time is because after you put your object in the next pen position, you will erase everything after your object position on that duplicated layer. You may have to zoom in our use a smaller eraser to get some of the tight spots.

You will end up with a ton of layers, that is why you will want to rename and number each of them, like in my pictures.

If you still need help, please keep asking questions. ;)

*Firefly* March 9th, 2007 11:24 AM

but how do you make it look like its going around the text?

SPinkD March 9th, 2007 11:56 AM

Quote:

but how do you make it look like its going around the text?[/b]
Around the text? Not sure I understand.

Is your object layer on top of your text layer? If not it will make your object look like it is underneath your text.

or...

Are you talking at the end where it goes around to make the dot on the "i"?

Can you take a screen shot of where you are stuck and send it to me?

http://www.iopus.com/guides/screenshot.htm <---saving as .gif instead of .png is fine.

BrandiiNikkii.* March 9th, 2007 05:26 PM

I got it!

SPinkD March 10th, 2007 06:07 AM

Yay Brandi! I love your new siggie...those colors make me so excited for spring!

Mommy2Amara&Kayori March 23rd, 2007 05:09 PM

I figured it out for elements :cheer:


here is my name

http://mypicsat.acefacts.com/images/2/31/00000025.gif

SPinkD March 24th, 2007 09:42 AM

Awesome Job! I love that butterfly! You get an A+! ;)

claire1979 April 10th, 2007 02:14 AM

http://i107.photobucket.com/albums/m...ebutterfly.gif

SPinkD April 10th, 2007 09:27 AM

woo hoo claire, so proud of you!

*Fiona* April 21st, 2007 12:18 PM

Quote:

Onto animation...

Step 4:
Open image ready.
Frame 1: Object 1 only
Frame 2: Object 2 & Word 2
Frame 3: Object 3 & Word 3[/b]
I feel very stupid... I don't see where to create frames in image ready :unsure: When i open my psd file in image ready, it looks just the same as it did in PS :mellow:


EDIT: DOH!!! The animation toolbar wasn't visable... can you tell I'm new to image ready lol!!


http://i19.photobucket.com/albums/b1...y/fionaani.gif


All times are GMT -7. The time now is 04:17 AM.

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2014, vBulletin Solutions, Inc.
Search Engine Optimization by vBSEO 3.6.0
Copyright © 2003-2012 JustMommies.com, All Rights Reserved.