Alliedassault - View Single Post

Proteus · **Animated Sig Tutorial. -** 07-10-2003, 03:41 PM

Okay, now, animated sigs can be cool but you have to remember the sig size laws of this forum and not run them into the ground. As long as you keep your animated sigs(or non animated for that matter) under 100 kb you can use them.

Lets start off by learning how to make layers invisible.

To make a layer invisible you go to the layers tab and press the eye so it dissapears, with that, the layer will dissapear also. Just click the empty box again to make it reappear.

[img]http://www.six-online.com/uploads/uploads/eye_copy1.jpg[/img]

Okay, now that that's out of the way.

I will start off by making a simple image in Photoshop, it has 2 text layers, and 1 white background.

[img]http://www.six-online.com/uploads/uploads/tut001.jpg[/img]

*NOTE* I want to fade the two text layers in and out.

Now that we have our sig ready to go, we need to take it into ImageReady. To do so, click the button all the way at the bottom of your toolbar.

[img]http://www.six-online.com/uploads/uploads/tut002.jpg[/img]

Make sure you have your animation box on the screen. If you don't, then you can go to: Window > Animation.

Okay, to make any animation work. You must copy the first frame of what you want it to look like before you do anything. So you hit this button in the animation box.

[img]http://www.six-online.com/uploads/uploads/tut003.jpg[/img]

**For example. If you wanted to fade your name in, before out, you would copy the first frame with your name hidden.**

Okay. Now that we have the first frame copied we will fade the word, "Victor" out.

So make the, "Victor" layer invisible. Once it's invisible, hit the arrow button in the top right, it looks like this:

[img]http://www.six-online.com/uploads/uploads/tut004.jpg[/img]

You will see a bunch of different options, all you need to do is select, "Tween." A menu will pop up that looks like this.

[img]http://www.six-online.com/uploads/uploads/tut005.jpg[/img]

Set the settings exactly to that of the picture. And you will see that 5 frames have been added to the animation bar. Now, duplicate that layer and let's move on.

**Halfway check**

You should have 7 frames by now, if you dont, please start over. biggrin:

****

Let's do the same thing to the, "Charlie" layer by making it invisible and tweening it again, with the same characteristics of last time. And you should see nothing but a blank screen. Copy the frame, again.

**You always want to copy the frame after you tween the layer just because it makes it look better.**

Okay, let's just fade them back in together to save us frames, because we cant have too many if we want to keep the size of the image down. So make everything visible again and tween it again, same thing, once again, this time. And we should be done. Now all you have to do is save it.

You can't save animations as .jpg's. You must save them as .gif's. So, all you have to do is go to: File > Save Optimized As... > And .gif should already be selected. Just name it and save it. And we're done, your final product should look something like this...

[img]http://www.six-online.com/uploads/uploads/tut006.gif[/img]

	(#1)
Proteus is Offline Lieutenant Colonel Posts: 7,162 Join Date: Dec 2002 Location: Plymouth, MA	Animated Sig Tutorial. - 07-10-2003, 03:41 PM Okay, now, animated sigs can be cool but you have to remember the sig size laws of this forum and not run them into the ground. As long as you keep your animated sigs(or non animated for that matter) under 100 kb you can use them. Lets start off by learning how to make layers invisible. To make a layer invisible you go to the layers tab and press the eye so it dissapears, with that, the layer will dissapear also. Just click the empty box again to make it reappear. [img]http://www.six-online.com/uploads/uploads/eye_copy1.jpg[/img] Okay, now that that's out of the way. I will start off by making a simple image in Photoshop, it has 2 text layers, and 1 white background. [img]http://www.six-online.com/uploads/uploads/tut001.jpg[/img] NOTE I want to fade the two text layers in and out. Now that we have our sig ready to go, we need to take it into ImageReady. To do so, click the button all the way at the bottom of your toolbar. [img]http://www.six-online.com/uploads/uploads/tut002.jpg[/img] Make sure you have your animation box on the screen. If you don't, then you can go to: Window > Animation. Okay, to make any animation work. You must copy the first frame of what you want it to look like before you do anything. So you hit this button in the animation box. [img]http://www.six-online.com/uploads/uploads/tut003.jpg[/img] For example. If you wanted to fade your name in, before out, you would copy the first frame with your name hidden. Okay. Now that we have the first frame copied we will fade the word, "Victor" out. So make the, "Victor" layer invisible. Once it's invisible, hit the arrow button in the top right, it looks like this: [img]http://www.six-online.com/uploads/uploads/tut004.jpg[/img] You will see a bunch of different options, all you need to do is select, "Tween." A menu will pop up that looks like this. [img]http://www.six-online.com/uploads/uploads/tut005.jpg[/img] Set the settings exactly to that of the picture. And you will see that 5 frames have been added to the animation bar. Now, duplicate that layer and let's move on. Halfway check You should have 7 frames by now, if you dont, please start over. biggrin: ** Let's do the same thing to the, "Charlie" layer by making it invisible and tweening it again, with the same characteristics of last time. And you should see nothing but a blank screen. Copy the frame, again. You always want to copy the frame after you tween the layer just because it makes it look better.** Okay, let's just fade them back in together to save us frames, because we cant have too many if we want to keep the size of the image down. So make everything visible again and tween it again, same thing, once again, this time. And we should be done. Now all you have to do is save it. You can't save animations as .jpg's. You must save them as .gif's. So, all you have to do is go to: File > Save Optimized As... > And .gif should already be selected. Just name it and save it. And we're done, your final product should look something like this... [img]http://www.six-online.com/uploads/uploads/tut006.gif[/img]