View Full Version: Ball of Life

Khubsurat Graphics > ImageReady Tutorials > Ball of Life

Pages: [1] 2 3 4


Title: Ball of Life
Description: Animated Signature


Zythyr - October 15, 2004 03:16 PM (GMT)

We are going to be making a sig like tihs one

user posted image

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.

user posted image

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

user posted image

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

user posted image

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

user posted image

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)

user posted image

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%.

user posted image

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.

user posted image

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.

user posted image

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.

user posted image
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.

user posted image

user posted image

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.

user posted image

user posted image

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.

user posted image

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. :angry:

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

user posted image

This tutorial is credited to Sharp.


Psycho - October 15, 2004 06:43 PM (GMT)
Neat Commander Nice Tut

Meister - October 15, 2004 09:01 PM (GMT)
Cool thanks for posting this.

I'm gonna give it a try

Zythyr - October 15, 2004 09:44 PM (GMT)
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.

Meister - October 15, 2004 09:52 PM (GMT)
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...

user posted image

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

user posted image

What do you think?

Zythyr - October 16, 2004 05:08 AM (GMT)
Ok, if you read Part 1: Step 12-13 correctly you wil will have all the layers that look like this

user posted image

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.

Meister - October 16, 2004 01:11 PM (GMT)
Ok cool thanks, i think i got it.

user posted image

MyFlameIsSexy - October 25, 2004 06:03 PM (GMT)
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!

Gecko - October 25, 2004 09:00 PM (GMT)
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 :blink:

Zythyr - October 25, 2004 09:31 PM (GMT)
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

Boles Roor - October 25, 2004 11:16 PM (GMT)
Its a good tutorial but, the ball is too big, and, with so much animation the filesizes are quite big.

eclipsevwgti - October 26, 2004 03:01 AM (GMT)
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
:unsure:

user posted image

Psycho - October 26, 2004 06:33 AM (GMT)
Shaz Man This made It onto http://www.good-tutorials.com/tutorials/12 <--good tuts.com Nice man

andy - October 26, 2004 05:46 PM (GMT)
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

Boles Roor - October 26, 2004 06:08 PM (GMT)
Um, give the link to it please, not just the text.

Zythyr - October 26, 2004 07:53 PM (GMT)
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."

TheMeep - October 27, 2004 08:18 AM (GMT)
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

Zythyr - October 28, 2004 12:48 AM (GMT)
You have to select the long line layer (the line you drew) then you Go to Layer >> Rasterize >> Layer.

TheMeep - October 28, 2004 05:26 PM (GMT)
QUOTE (commander @ Oct 28 2004, 12:48 AM)
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`?

Zythyr - October 28, 2004 07:11 PM (GMT)
Is the layer with the line LOCKED or UNLOCKED? Also is it hidden (the eye) or it is not hidden?

TheMeep - October 29, 2004 07:40 AM (GMT)
QUOTE (commander @ Oct 28 2004, 07:11 PM)
Is the layer with the line LOCKED or UNLOCKED? Also is it hidden (the eye) or it is not hidden?

all the layers are unlocked and all the layers are shown too

Zythyr - October 29, 2004 07:07 PM (GMT)
I don't know how to fix the problem. I think you should try again. Try to start the whole tutorial over and see if it works. If it doesn't then i don't know what is wrong. Try to ask one of the VIP members, maybe that can help.

TheMeep - October 29, 2004 08:32 PM (GMT)
hehe I have tried again and again, seems like my photoshop just dont like it :lol:

Zythyr - October 29, 2004 08:52 PM (GMT)
Like I said

QUOTE
If it doesn't work then i don't know what is wrong. Try to ask one of the VIP members, maybe that can help.

Boles Roor - October 29, 2004 11:25 PM (GMT)
Maybe dont rasterize it, I dont see the point anyways, though I haven't read the tutorial proper..

bob_bob - October 30, 2004 02:38 AM (GMT)
sry but im having problem with saving the file in .gif.. it doesnt work..
if anyone knows how to fix this please help me.. :(

Psycho - October 30, 2004 02:52 AM (GMT)
you need to go to File then save optimized as

bob_bob - October 30, 2004 01:07 PM (GMT)
that's what i did but it doesnt work... i cant see it with the image viewer of window... is it normal?

Zythyr - October 30, 2004 02:19 PM (GMT)
When you finish making the sig in ImageReady, go to File>>Save Optimized As

It is going to take kinda long to save because this animation is long. So wait till it is finished saving and then go to the My Computers>>>WHERE EVER YOU SAVE THE FILE

bob_bob - October 30, 2004 05:27 PM (GMT)
:( i did this but it still doesnt work... it takes 5 sec to save and when i try to see it with whatever program it doesnt show up... :blink:

EDIT: the .gif file works if i open it in image ready...

Stealth - October 30, 2004 09:27 PM (GMT)
in step 9... where the line tool... not to sound like a newb... im usually prty good with my sigs... but never worked with this line tool... but i like ur sig n tut... its nice....

Stealth - October 30, 2004 09:53 PM (GMT)
ahh nvm i figured it out....

wsx - November 3, 2004 12:42 AM (GMT)
i'm having trouble with the white layer thing.....i dont exactly understand what you're doing.......like i dont know what u mean with "fill the layer with white"...doesnt a new layer already start white?...im confused. help?

Zythyr - November 3, 2004 05:04 AM (GMT)
wsx- If you look at the first step it says " Open up a new document with a transparent background." This means that when you make a new layer the background is set to have no color. In your case you did not start off with a transparent background. You can skip the step that says FIll the Layer with the Color white becuase you new layer is already white.

Ultimatum - November 7, 2004 01:35 PM (GMT)
very nice tut

jubbincake - November 14, 2004 04:51 AM (GMT)
Hey. nice tut. I just cant figure out how to import that text file into photoshop CS please help, thanks.

Zythyr - November 14, 2004 05:57 AM (GMT)
Go here and download the font.

If you Windows XP then follow these directions

1. Go to the place where you saved the font.
2. Extract the file.
3. Go to Start>>>Control Pannel>>>Apperance and Themes>>>See Also (its on the left)>>> Font (click on it.)
4. A window will pop up. Go to File>>>Install New Font... Locate the font, then click Select All and click OK.

shinobi - November 26, 2004 10:06 PM (GMT)
heres mine

user posted image

Zythyr - November 26, 2004 10:23 PM (GMT)
I don't think you followed the tut correctly.

Darkcloud - November 27, 2004 11:05 PM (GMT)
Here's Mine:

With a few addons ofcourse... :P

user posted image

Here's the original version:

user posted image




Hosted for free by InvisionFree