Welcome one! Welcome all! This is RaVeN’s Animated Sig TUT! (Version 1.3)
The reading of RaVeN’s Photoshop Sig TUT is required before reading this as this TUT will not be so noob-esk based. (Which means you must have some understanding of Photoshop).
This is also just a name animation TUT (for other animations you will need to do different things.)
Things you will need: For this TUT I use the program Image Ready (it usually comes with Photoshop. If ya dont got it, try reinstalling Photoshop, or buyin it *whispers* or downloading it.
SO lets begin!
Ok you just finished your wicked sick sig and you want to make it GODLIKE!
First things first, we need to collapse the image into one image (a.k.a. get rid off all the layers). Layer>Flatten Image.
You can also use merge down options but be careful because this puts all layers on the same layer. So if you have a layer in the background that you want it to stay in the background DON’T MERGE as it will be sharing the foreground with the rest of the layers. (for example, my black cut-up Raven is on top of the white light while the feathers are behind it. If I merge down the layers the raven will also be behind the white light.)
Ok once you got 1 layer (and your sig looks the same as when it was cut into many layers) duplicate that layer. Layer > Duplicate layer
Put the new copy layer on top of the original. Make sure you stay on the top layer so that your work doesn’t venture onto the original. Now go to the tool bar on the left hand side and click and hold down on the TEXT option. Select the Horizontal Type Mask Tool.
Your Sig will turn red, for reasons I don’t yet understand but w/e. Select the font, size, and the place on your Sig you want you name to go (don’t worry about color right now). Then enter it in like every other text.
Once you typed it out click on the move arrow tool (top of left tool bar). The red will go away and your text will be clear and lassoed. Make sure the copy layer is still activated and click the cut tool (left tool bar) Click inside the lassoed area.
Then use your arrow move tool again to cut it out. Make sure that when you cut it out you don’t see any white in the space where your name was but rather it looks like there is no change to your Sig at all.
(Don’t worry, you DID cut it out but just from the top layer. Since you have two identical layers if you cut something out from the top layer your bottom image will just come through. Optical illusion ^^
Delete the name you just cut out, you dont need the name you need the hole u just made.
Ok now I think I’m getting your interest!
Now make 3 brand new layers (not of the original or copy, blank brand new ones) Layer > New > Layer.
Put your copy on top of these new layers and leave your original on the bottom. Choose one of the new layers and click your Gradient Tool (or press G if you’re a shortcut junky like me)
BEFORE YOU CHANGE YOUR SETTINGS SEE IF YOUR GRADIENT STICKS ALREADY MATCHES UP WITH MINE BELOW: see ~skip to~
Go to the top header and make sure your settings match mine below (it doesn’t have to be colored yet) and click the long box on the left hand side with the pull down arrow thing:
Again, make sure your settings match mine in the new window:
~skip to~
Ok time to make your first gradient stick. First turn off the eye (in the layer menu bottom right) on the top layer so that we can see what we are doing. Then choose the left hand side of where your name is / think it is. And click, hold, and drag your mouse a good half inch straight right, then release. Should have something like this:
If what you have does not equal this go back and reset your settings. Now make 2 more sticks on the other two layers (make sure to not put all three sticks on the same layer as then you wont be able to animated them separately)
You can change the color of the sticks using the two squares on the left tool bar. just change the top square to w/e color u want that stick to be.
W/e color your sticks are thats the color your name will be.
You don’t need to match this look exactly, feel free to experiment (you can also have more than 3 sticks).
Ok we are almost done with Photoshop, just one small thing remains. Click your top gradient stick layer and press ALT + G. Then again with the other two layers. A small arrow should appear pointing down next to the layers in the layer window.
Now go to File > Edit in Image Ready (or, once again, Shift + Ctrl + M if you’re a cool kid)
Let it load up…
Ok first you need to open the animation window, Window > Animation.
In the animation window click on the first frame, the frames will be expressed in your picture window so maximize the picture window (the one with ur full length sig in it).
Make sure your Sig looks the way you want it and that when the top layer is turned on you cant see any gradient sticks where your name is. If you can see an edge of a gradient go ahead and move it out of the way now by clicking and dragging.
OK! so everything is where you want it. In the Animatin window, on the bottom there is a new frame button (next to the trashcan). Click it once.
This will be your end frame! Now move the sticks around in the animation pattern you want. For example, the one that is vertical on the left hand side just move it all the way to the right hand side.
My horizontal one is still there it is highlighting the bottom.
Ok, now you need to make sure your end frame is good and turn the top layer on. If you can see your name at all turn the top layer back off and move the gradient stick out of the way. Before the next step click your first frame and make sure the eye on the top layer is on and on your last frame as well.
TIME TO ANIMATE!!!
In the animation window click the arrow on the top right hand side and choose the option Tween…
Use these options for now:
And press OK.
On you layer window make your top layer activated and click on your first frame in the animation window. Then click play.
You must be saying something on the lines of:
“OMFG I JUST ANIMATED SOMETHING!!!”
That you did, but we don’t have a file yet to show all your cool cat friends.
Go to File > Save Optimized As…
Choose .gif, default settings is fine and give it some 1337 name.
Your done…
YAYAYAYAYAYAYAYAYAYAYAYAYAYAY!!!!
*Side notes* Some colors are not internet safe so when you animated it it will look like crap online, so watch your colors!
You can upload your image via imageshack but your animation cant be too big, so watch your file size. Also too big of animations will really kill the forums so don’t go crazy!
As always, plz inform me if any information is incorrect or unclear.
Plz also give meh a quick post if this TUT helped you.
Thankxies and good luck animating!
The reading of RaVeN’s Photoshop Sig TUT is required before reading this as this TUT will not be so noob-esk based. (Which means you must have some understanding of Photoshop).
This is also just a name animation TUT (for other animations you will need to do different things.)
Things you will need: For this TUT I use the program Image Ready (it usually comes with Photoshop. If ya dont got it, try reinstalling Photoshop, or buyin it *whispers* or downloading it.
SO lets begin!
Ok you just finished your wicked sick sig and you want to make it GODLIKE!
First things first, we need to collapse the image into one image (a.k.a. get rid off all the layers). Layer>Flatten Image.
You can also use merge down options but be careful because this puts all layers on the same layer. So if you have a layer in the background that you want it to stay in the background DON’T MERGE as it will be sharing the foreground with the rest of the layers. (for example, my black cut-up Raven is on top of the white light while the feathers are behind it. If I merge down the layers the raven will also be behind the white light.)
Ok once you got 1 layer (and your sig looks the same as when it was cut into many layers) duplicate that layer. Layer > Duplicate layer
Put the new copy layer on top of the original. Make sure you stay on the top layer so that your work doesn’t venture onto the original. Now go to the tool bar on the left hand side and click and hold down on the TEXT option. Select the Horizontal Type Mask Tool.
Your Sig will turn red, for reasons I don’t yet understand but w/e. Select the font, size, and the place on your Sig you want you name to go (don’t worry about color right now). Then enter it in like every other text.
Once you typed it out click on the move arrow tool (top of left tool bar). The red will go away and your text will be clear and lassoed. Make sure the copy layer is still activated and click the cut tool (left tool bar) Click inside the lassoed area.
Then use your arrow move tool again to cut it out. Make sure that when you cut it out you don’t see any white in the space where your name was but rather it looks like there is no change to your Sig at all.
(Don’t worry, you DID cut it out but just from the top layer. Since you have two identical layers if you cut something out from the top layer your bottom image will just come through. Optical illusion ^^
Delete the name you just cut out, you dont need the name you need the hole u just made.
Ok now I think I’m getting your interest!
Now make 3 brand new layers (not of the original or copy, blank brand new ones) Layer > New > Layer.
Put your copy on top of these new layers and leave your original on the bottom. Choose one of the new layers and click your Gradient Tool (or press G if you’re a shortcut junky like me)
BEFORE YOU CHANGE YOUR SETTINGS SEE IF YOUR GRADIENT STICKS ALREADY MATCHES UP WITH MINE BELOW: see ~skip to~
Go to the top header and make sure your settings match mine below (it doesn’t have to be colored yet) and click the long box on the left hand side with the pull down arrow thing:
Again, make sure your settings match mine in the new window:
~skip to~
Ok time to make your first gradient stick. First turn off the eye (in the layer menu bottom right) on the top layer so that we can see what we are doing. Then choose the left hand side of where your name is / think it is. And click, hold, and drag your mouse a good half inch straight right, then release. Should have something like this:
If what you have does not equal this go back and reset your settings. Now make 2 more sticks on the other two layers (make sure to not put all three sticks on the same layer as then you wont be able to animated them separately)
You can change the color of the sticks using the two squares on the left tool bar. just change the top square to w/e color u want that stick to be.
W/e color your sticks are thats the color your name will be.
You don’t need to match this look exactly, feel free to experiment (you can also have more than 3 sticks).
Ok we are almost done with Photoshop, just one small thing remains. Click your top gradient stick layer and press ALT + G. Then again with the other two layers. A small arrow should appear pointing down next to the layers in the layer window.
Now go to File > Edit in Image Ready (or, once again, Shift + Ctrl + M if you’re a cool kid)
Let it load up…
Ok first you need to open the animation window, Window > Animation.
In the animation window click on the first frame, the frames will be expressed in your picture window so maximize the picture window (the one with ur full length sig in it).
Make sure your Sig looks the way you want it and that when the top layer is turned on you cant see any gradient sticks where your name is. If you can see an edge of a gradient go ahead and move it out of the way now by clicking and dragging.
OK! so everything is where you want it. In the Animatin window, on the bottom there is a new frame button (next to the trashcan). Click it once.
This will be your end frame! Now move the sticks around in the animation pattern you want. For example, the one that is vertical on the left hand side just move it all the way to the right hand side.
My horizontal one is still there it is highlighting the bottom.
Ok, now you need to make sure your end frame is good and turn the top layer on. If you can see your name at all turn the top layer back off and move the gradient stick out of the way. Before the next step click your first frame and make sure the eye on the top layer is on and on your last frame as well.
TIME TO ANIMATE!!!
In the animation window click the arrow on the top right hand side and choose the option Tween…
Use these options for now:
And press OK.
On you layer window make your top layer activated and click on your first frame in the animation window. Then click play.
You must be saying something on the lines of:
“OMFG I JUST ANIMATED SOMETHING!!!”
That you did, but we don’t have a file yet to show all your cool cat friends.
Go to File > Save Optimized As…
Choose .gif, default settings is fine and give it some 1337 name.
Your done…
YAYAYAYAYAYAYAYAYAYAYAYAYAYAY!!!!
*Side notes* Some colors are not internet safe so when you animated it it will look like crap online, so watch your colors!
You can upload your image via imageshack but your animation cant be too big, so watch your file size. Also too big of animations will really kill the forums so don’t go crazy!
As always, plz inform me if any information is incorrect or unclear.
Plz also give meh a quick post if this TUT helped you.
Thankxies and good luck animating!
Last edited by RaVeN on Mon Oct 30, 2006 9:28 pm, edited 1 time in total.
My New Ownage sig