Log In Sign Up

"Signature Animation"


Welcome to the JustMommies Message Boards.

We pride ourselves on having the friendliest and most welcoming forums for moms and moms to be! Please take a moment and register for free so you can be a part of our growing community of mothers. If you have any problems registering please drop an email to boards@justmommies.com.

Our community is moderated by our moderation team so you won't see spam or offensive messages posted on our forums. Each of our message boards is hosted by JustMommies hosts, whose names are listed at the top each board. We hope you find our message boards friendly, helpful, and fun to be on!

Like Tree1Likes

Reply Post New Topic
  Subscribe To Blinkie Tutorials LinkBack Topic Tools Search this Topic Display Modes
  #1  
March 8th, 2007, 12:51 PM
SPinkD's Avatar Platinum Supermommy
Join Date: Jul 2006
Location: Oklahoma
Posts: 18,590
Send a message via Yahoo to SPinkD
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:



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.



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:



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:



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.







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.



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:



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.
Reply With Quote
  #2  
March 8th, 2007, 02:18 PM
Caeden'sMama's Avatar Mega Super Mommy
Join Date: Jan 2007
Location: somewhere over the rainbow
Posts: 1,765
It's not perfect, but it's a start!

Reply With Quote
  #3  
March 8th, 2007, 02:59 PM
SPinkD's Avatar Platinum Supermommy
Join Date: Jul 2006
Location: Oklahoma
Posts: 18,590
Send a message via Yahoo to SPinkD
Quote:
It's not perfect, but it's a start!

[/b]

Beautiful!!! I love it!
__________________
-Lindsay



Thank you RaspberryBeret for my gorgeous siggy!





Reply With Quote
  #4  
March 8th, 2007, 06:19 PM
BrandiiNikkii.*'s Avatar Mommy to Girls ♥
Join Date: Jan 2006
Location: NC
Posts: 13,666
I am VERY lost
__________________
Brandi.
Wife to Mark & loving mommy to Caitlin & Lorelai.


Reply With Quote
  #5  
March 8th, 2007, 06:40 PM
Mega Super Mommy
Join Date: Nov 2006
Location: The South
Posts: 2,260


my try
__________________
Reply With Quote
  #6  
March 9th, 2007, 04:55 AM
SPinkD's Avatar Platinum Supermommy
Join Date: Jul 2006
Location: Oklahoma
Posts: 18,590
Send a message via Yahoo to SPinkD
Quote:
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.

Quote:


my try[/b]
Great job!!
__________________
-Lindsay



Thank you RaspberryBeret for my gorgeous siggy!





Reply With Quote
  #7  
March 9th, 2007, 09:22 AM
*Firefly*'s Avatar Girlfriend and Blogger
Join Date: May 2006
Posts: 24,398
__________________
Cause I know my weakness, know my voice,
Now I believe in grace and choice,
And I know perhaps my heart is farce,
But Ill be born without a mask
~ Babel, Mumford & Sons



Reply With Quote
  #8  
March 9th, 2007, 09:36 AM
SPinkD's Avatar Platinum Supermommy
Join Date: Jul 2006
Location: Oklahoma
Posts: 18,590
Send a message via Yahoo to SPinkD
Quote:
[/b]
Are you working in elements? or photoshop?
__________________
-Lindsay



Thank you RaspberryBeret for my gorgeous siggy!





Reply With Quote
  #9  
March 9th, 2007, 09:59 AM
BrandiiNikkii.*'s Avatar Mommy to Girls ♥
Join Date: Jan 2006
Location: NC
Posts: 13,666
Quote:
Quote:
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.
__________________
Brandi.
Wife to Mark & loving mommy to Caitlin & Lorelai.


Reply With Quote
  #10  
March 9th, 2007, 10:42 AM
*Firefly*'s Avatar Girlfriend and Blogger
Join Date: May 2006
Posts: 24,398
Photoshop but I'm really confused
__________________
Cause I know my weakness, know my voice,
Now I believe in grace and choice,
And I know perhaps my heart is farce,
But Ill be born without a mask
~ Babel, Mumford & Sons



Reply With Quote
  #11  
March 9th, 2007, 11:05 AM
SPinkD's Avatar Platinum Supermommy
Join Date: Jul 2006
Location: Oklahoma
Posts: 18,590
Send a message via Yahoo to SPinkD
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.
__________________
-Lindsay



Thank you RaspberryBeret for my gorgeous siggy!





Reply With Quote
  #12  
March 9th, 2007, 11:24 AM
*Firefly*'s Avatar Girlfriend and Blogger
Join Date: May 2006
Posts: 24,398
but how do you make it look like its going around the text?
__________________
Cause I know my weakness, know my voice,
Now I believe in grace and choice,
And I know perhaps my heart is farce,
But Ill be born without a mask
~ Babel, Mumford & Sons



Reply With Quote
  #13  
March 9th, 2007, 11:56 AM
SPinkD's Avatar Platinum Supermommy
Join Date: Jul 2006
Location: Oklahoma
Posts: 18,590
Send a message via Yahoo to SPinkD
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.
__________________
-Lindsay



Thank you RaspberryBeret for my gorgeous siggy!





Reply With Quote
  #14  
March 9th, 2007, 05:26 PM
BrandiiNikkii.*'s Avatar Mommy to Girls ♥
Join Date: Jan 2006
Location: NC
Posts: 13,666
I got it!
__________________
Brandi.
Wife to Mark & loving mommy to Caitlin & Lorelai.


Reply With Quote
  #15  
March 10th, 2007, 06:07 AM
SPinkD's Avatar Platinum Supermommy
Join Date: Jul 2006
Location: Oklahoma
Posts: 18,590
Send a message via Yahoo to SPinkD
Yay Brandi! I love your new siggie...those colors make me so excited for spring!
__________________
-Lindsay



Thank you RaspberryBeret for my gorgeous siggy!





Reply With Quote
  #16  
March 23rd, 2007, 05:09 PM
Mommy2Amara&Kayori's Avatar Platinum Supermommy
Join Date: Aug 2006
Location: Missoula, Mt
Posts: 17,100
Send a message via Yahoo to Mommy2Amara&Kayori
I figured it out for elements


here is my name

__________________
Jenny - Wife to James - Mommy to Amara(6) and Kayori(4)
missing our Angels 2001, 2005, and 2010

Expecting our 3rd bundle of joy!


Reply With Quote
  #17  
March 24th, 2007, 09:42 AM
SPinkD's Avatar Platinum Supermommy
Join Date: Jul 2006
Location: Oklahoma
Posts: 18,590
Send a message via Yahoo to SPinkD
Awesome Job! I love that butterfly! You get an A+!
__________________
-Lindsay



Thank you RaspberryBeret for my gorgeous siggy!





Reply With Quote
  #18  
April 10th, 2007, 02:14 AM
claire1979's Avatar mummy to a special angel
Join Date: Jun 2006
Location: huddersfield, england
Posts: 33,629
Send a message via MSN to claire1979
__________________




Reply With Quote
  #19  
April 10th, 2007, 09:27 AM
SPinkD's Avatar Platinum Supermommy
Join Date: Jul 2006
Location: Oklahoma
Posts: 18,590
Send a message via Yahoo to SPinkD
woo hoo claire, so proud of you!
__________________
-Lindsay



Thank you RaspberryBeret for my gorgeous siggy!





Reply With Quote
  #20  
April 21st, 2007, 12:18 PM
*Fiona*
Guest
Posts: n/a
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 When i open my psd file in image ready, it looks just the same as it did in PS


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


Reply With Quote
Reply

Topic Tools Search this Topic
Search this Topic:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off



All times are GMT -7. The time now is 01:48 AM.



Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2014, vBulletin Solutions, Inc.
Search Engine Optimization by vBSEO 3.6.0