Ball of Life, Animated Signature

We are going to be making a sig like tihs one



Part 1: The Signature

1. Open up a new document with a transparent background and make it 373x100.

2. Go to Layer >> New >> Layer. Name the layer "Background." Delete all the other layers except for the Background layer.

3. Hit D on your keyboard to reset the colors and then go to Filter >> Render >> Clouds.



4. Next go to Filter >> Render >> Difference Clouds and apply that 5-6 times.



5. Now go to Filter > Stylize > Extrude and use the default setting.



6. Now to add color. Go to Image >> Adjustments >> Hue/Saturation (make sure that the word "colorize" is checked) and choose a nice color.



7. Now we are going to put a border around the image. Go to Layer >> Layer Styles >> Stroke. Use the follwoing settings.

Size: 1 px
Position: Indside
Blending Mode: Normal
Opacity: 100
Fill Type: Color
Color: White (FFFFFF)



8. Make a new layer. Using the Rectangular Marquee Tool, create a small box and fill it with the color black. Then go to Layer >> Layer Styles >> Stroke, stroke it with the color white and 1px. Change the opacity to 50%.



9. Now take out the Line Tool and make a 1px white line coming down out of the box (holding shift makes the lines straight) While still holding shift add another white line going to the left until you are about 2/3 to the end. Go to Layer >> Rasterize >> Layer.



10. Now we are going to make the scan line. Using the Line Tool, make a line inside the box that goes from left to right (make sure to hold the shift while making the lline). Then go to Layer >> Rasterize >> Layer. Again using the Line tool make a line inside the box that goes from top to bottom(make sure to hold the shift while making the lline). Then go to Layer >> Rasterize >> Layer.



11. Now we are going to add a text. Go to Dafont.com and download a font called "Dark Crystal Outline." Using the Type Tool, type the text you want and move it right next to the long line. Make sure your using a the Dark Crystal Outline font and it is in color black.


As you can see, I erased some of the long line in order for my text to fit.

12. Create a new layer called "White Font." Now fill the layer with the color white. Move this layer directly above the text. Now on you keyboard press Ctrl+G.
The layer is going to merge with the text and the text will become white. Using the Move Tool, move the White Font layer out of the text so you cant see it. The layer should be right on the edge of the text so that when you nudge it to the left just a little it is visible.





13. Now to make the white ball, make an new layers. Using the Elliptical Marquee Tool and holding shift to make it a perfect circle right in the middle of the line. Then fill it with the color white.





14. Now switch to ImageReady

Part 2: The Animation

1. In the animation window, duplicate the first frame.

2. Ok then using the Move Tool, move your scan lines the inside the black box. Hit the Tween button right next to the duplicate frame button and change the amount of frames to 15. Then you can do this over again to make the scan like to go from the last place you stoped it to another place. Then in the end make sure it goes back to the original place. (To make it go back to the original place, dublicate the first frame and move it all the way to the end and then tween.)

3. Then dupilicate the last frame. Move the white ball to the bottom and Tween it to 10 frames. The dupilicate the last frame and move the ball to the left all the way to the end of the line. Tween it to 20 frames.

4. Dupilicate the last frame and then lower the opacity of the white Ball to 0%. Then move the White Layer all the way to the right and then Tween it to 50 frames.

5. Dupilicate the last frame and then move the White Font layer all the way to the right. Tween it to 50 frames.

6. Dupilicate the last frame and change the opacity of the white ball to !00%. Then move the ball all the way to the right and tween it to 20 frames. Then duplicate the last frame and move the ball to the top where it originally was. Tween it to 10 frames.

QUOTE (Cowie @ Nov 28 2004, 04:25 AM)

Nice tut. I did the original one and made this Keep in mind guys do not put a colour overlay on the text. The changing colour of the text part of the animation will not work. I cracked the shits for like an hour before I realised. edit: I noticed some of the animations jump around. Select your move tool and use the arrow keys on the keyboard to move things to exactly where you want them. And when it comes to sliding the ball and lines along, use only your arrow keys so they stay in an exact line.

Final Product



This tutorial is credited to Sharp.

This post has been edited by commander on Dec 25 2004, 04:40 PM

Final Product



This tutorial is credited to Sharp.

Neat Commander Nice Tut

Cool thanks for posting this.

I'm gonna give it a try

Thanks guys. The finall product turned out to be kinda sloppy. I mean I was in a hurry while doing the Part 2: The Animation of the tut. So I went through it really quick. Also my finall product turnded out to be sloppy too.

If you guys don't understand something, then just ask me in this topic.

For some reason i didn't quite understand how to change the text to white, maybe i mis read it but i couldnt get that part down but this is what i go so far...



Ok cool i think i got the hang of it now...



What do you think?

Ok, if you read Part 1: Step 12-13 correctly you wil will have all the layers that look like this



As you can see that the Whtie Font layer has this wierd arrow on it and it is pointing to the Text layer.

When you did that you would have noticed that the text tured white. Then you have to use the move tool and move the whtie font layer all that way to the left so it is 1 px off.

In Image Ready, you have to move the white font layer to the right and Tween it. Then you move the layer to the left and tween.

So far the sig you made looks good. Just try to make the white ball a little smaller and put more animation to the scan lines. In Part 2: The Animation, I edited step number 1 in order to show you how to make the the animation of the scan line better.

Ok cool thanks, i think i got it.

When I first preview it, it goes pretty slow as in you can see each frame go, is that just because it is still speeding it up or should I just put less on the tween.

Edit: Oh, sorry nevermind, I prewied it in internet explorer and it worked fine.

Awesome tut man!

hey man great tut i just lost it in the scan lines, when i make them the lines are moved as one and they go out of the box can you tell me what i messed up on?


SORRY missed the part where i was to make two different scan lines

Scan Lines- there are 2 scan lines. One is horizontal and one is verticle. When you more the horizontal one, you have to press UP or Down arrow on your keyboard. If you move the verticle line, you have to press LEFT of RIGHT arrow on your keyborad

Its a good tutorial but, the ball is too big, and, with so much animation the filesizes are quite big.

Thats why its called an animation, of course its gona be a big file!!Here is what i came up with using this tut. Thanks meister good tut!!!

EclipseHome

Shaz Man This made It onto http://www.good-tutorials.com/tutorials/12 <--good tuts.com Nice man

ohh my god that tut is a copy the original forum that submittet the excat same as this done it on :

Animated Signature Techniques - Machina Designs
This tutorial shows how to make a signature with multiple animations flowing together.
July 21, 2004 | 10116 total clicks | 1156 clicks this month

plus it had more detial load of theifs you are

Um, give the link to it please, not just the text.

andy- That tutorial was take off. The web site for Animated Signature Techniques - Machina Designs does not even work any more. Since the tutorial does not work anymore, there has to be someone to make another one so other people can see it. Also at the end of this tut, I credited that tutorial to the orignal maker "Sharp."

Im trying to do this tut but since Im a photoshop newbi Im having troubles with step 9.

mostly since where it say step 9. Go to Layer >> Rasterize >> Layer.
My photoshop wont let me press the Rasterize so could anyone tell what Ive done wrong and how I make it able to click the Rasterize.

thanks

You have to select the long line layer (the line you drew) then you Go to Layer >> Rasterize >> Layer.

I have a layer named Background
With the clouds/different clouds and the extrue done on it and the effect stroke.

then a nother layer with the black box with the stroke around it.
Then made a new layer with the white line.

But even when I have that photoshop wont unlock Layer >> Rasterize >> Layer thing (with unlock I mean make it so I can click it)

is it only me that happens for or have my photoshop fucked up`?

Is the layer with the line LOCKED or UNLOCKED? Also is it hidden (the eye) or it is not hidden?