How to Make an Animated Forum Signature.

[Mad-Hamlet]

Greetings,

Sig files in forums are nothing new; with an effective imagination not the rectangular slab of trite new-age image boredom that, many 'Iz so kool!' tutorial non withstanding, many think it is.

And quite frankly, why be happy with this:



When you can have....




How does one embrace this new epic of coolness and 'net savy?

I cannot say that I know definitivly the method but I can safely state I know a method.

Well, first you need to know what is required and in the spirit of that inquiry....

A LIST OF WHAT IS REQUIRED

Photoshop

Imageready

Animation isolated from a larger bit of animation (Like with an movie editing program of some sort)

A way to convert the .AVI format to .MOV(Quick Time)


Part the First: Understanding.

There are several things to understand.

One. Know that whatever you want animated must be incredibly short and the less happening in it, the better. It's quite easy for a ten second bit of animation to blow a sig file size well over the one megabyte mark. Even with high speed 'net connections popping up all over the place, that's a bit excessive for a sig file.

I make mine by phrase: Under Five Seconds or Under Five Hundred Kilobytes.

Two. You're going to end up with a .GIF, not a JPEG so be prepared to lose some detail. Not as much as you'd originally think, but some nonetheless.

Three. You're smashing several different formats together and the end result can have wacky results. Patience, as with all things, is key and improvising too. This is not a general outline, but specific instructions but even these steps have produced some results that have freaked me out, proven nigh impossible to understand why, but I have always found a work-around.

Part The Second: The Parts.

Any animated sig file is made up of two parts.

The Core Graphic.



The Animation.




For the Core Graphic make whatever strikes your fancy. Just like a normal static sig a few things I would recommend:

However you're going to place the animation within the Core-Graphic make sure the animation will be enclosed in a frame. Chances are you can't do diddly with whatever is in the background in the animation and just having this color difference 'hanging' in the open space of a static image is careless. It doesn't look good.

You might be tempted to not use a rectangular shape since in .GIF files empty space takes on the background of wherever they are posted.

In a word: DON'T.

I don't know how it is for all .GIFs but animated .GIFS have an ugly white frame around anything not covered by a background color made in the creation of the image.

In other words, if I were to post this:



in any other forum that didn't have a white background, you'd see a very, VERY ugly white frame following the contours of the image. It's far better to create a square image and if you want to 'break out' of the rectangular format for sig files then make a layer matching the color used in whatever forum you frequent. This has been a lot easier since I found this nifty color sampling add-on for Firefox which is called ColorZilla

Continued Below.

I remain, as always,
Mad-Hamlet

[Mad-Hamlet]

Greetings,

So by now lots of you are thinking, 'Okay, this schmuck has used this so far to 'show off' and throw a lot of DURRRTASTIC information at us, when are we going to get to the actual mechanics?'

Right now.

I'm going to assume that you know how to create a Core Graphic and have edited your animation and converted it to a .MOV format. (Remember? That's what Quicktime is)

Okay.

Part The Third: Tweaking the Animation.

Open Imageready.

Go to File> Open. Browse to your .MOV file and click open.

You will see:



Make sure the button marked 'From Beginning to End' is marked.

Below that is an option that normally will be greyed out. Select it, from there you have the option of having the program choose every 2nd, 3rd, 4th so on, frame from the animation.

I cannot stress this enough: We Want To Keep It Small!!

In that interest I typically choose every 3rd frame but have sometimes gone so far as every 6th. I have never chosen every 2nd frame and the idea of including every frame from an original animation is so hysterically stupid that I've fallen out of my chair laughing before ever reaching the 'Okay' button.

Typically no more than fifty frames is good for a three to four second bit of animation. But feel free to experiment. Oh, the fewer the frames the faster the animation will play in the end result.

When you're ready and happy with the number of frames hit okay.

Now you should be here:



For the sake of ease I've moved the Layers tab (Or window)

There are two windows, the Layers tab and the Animated Frame Tab. Burn this into your brain: What you change on a layer, you change in the corresponding frame of animation. So, erase a bit of head in frame ...say...thirty two, whoops, that head vanishes from the corresponding frame and doesn't your animation now look ugly?

You can find out what frame represents what layer by looking for the 'Eye' in the layers tab that shows which layer is currently active.

The first thing you want to do is have a way to grab all these different layers easily, so make a group-layer folder and shove all the layers in there. This will not effect the animated frames at all.



A moment if you please: I want to be clear that I don't think anyone here doesn't know these basic steps but I'm writing this for the 'everyman' and that is best done by assuming that even the smallest step can present a monumental roadblock.

Now, back to the action.

I remain, as always,
Mad-Hamlet

[Mad-Hamlet]

Greetings,

Part the Forth: Tweaking the Core Image.

This one won't require any real images. To get the Core-Image ready to be joined with the animation you'll have to, or at least I've found it a lot easier, to merge all the existing layers onto one layer. So, make sure you're happy with what you've got then merge the layers. Do not flatten the image or save as a JPEG, that'll fill any blank spots you've left for the animation with white.

Then, when you're done go to 'File > Edit In Imageready' and your now mono-layered PDS will be shunted into the brother program of our beloved Photoshop.

So you have the Core-Image done and your animation for the most part ready and tucked away. Great, let's move on then.

Part the Fifth: You've got your Core-Image in my Animation!



Here we see where people hit the first major snag. They open the Core-Image and then try to shove the animation into it and in point of order, we want to go in reverse.

I'm not as familiar as I should be with Imageready, in fact, this is about the only thing I can do with it but I digress. In the image above I've 'selected' the Core-Image and in the animated frame window you can see a whopping total of one frame, which is why shoving the animation in there won't work. You'll have umpeen layers shoved into one frame. The image will freeze.

What you have to do is pull the Core-Image into the Animation and line them up real nice.

First we change the canvas size of the animation to match the image size of the Core-Image.



Which in this case was 524x159

Second we actually drag the Core-Image into the Animation...which is right about when everything goes straight to hell.

Earlier I stated what effects the layers, affects the frames. This is now more true than ever. You're going to be dragging the mono-layered Core-Image into the animated window but you'll have to line it up. So let's do that, let's go by the old fashioned method of dragging one image into another then lining up the edges, save as .GIF and bask in our animated sig file glory.



But...but what did I do wrong? I lined up the Core-Image perfectly! See?



By Joves, Holmes! What curmudgeons is this? I don't see how even your magnificent brain can solve this puzzle!

To be Continued!

Dun-Dun-Dun-DUUUUNNN!!!

I remain, as always,
Mad-Hamlet

[Mad-Hamlet]

Greetings,

So what went wrong?

Simple really, well it wasn't simple to figure out, in fact, the first time I hit this snag I got so frustrated I wanted to track down the programmers of Imageready and gnaw through their brain stems, but upon actual real reflection I was ashamed that I hadn't figured it out earlier.

Here is the problem.


I wrote already how what affects a layer affects a frame and vice versa. Only one frame of animation was 'Activated' when I dragged the Core-Image into the animation, then lined the Core-Image along the edges; because of that, only for a split second does the image line up correctly, for the rest of the time the Core-Image is seen where it was when it was initially dragged into the Animation ! Can we hear it for DUuurrrrhhh!!

Here's how you drag a Core-Image into Animation.

-Drag n' drop the Core-Image into the animation. This will be reflected in every frame.

-Select all the frames. Scroll the Animated Frame window to frame one, click on frame one, then holding down 'shift' scroll to the right and click on the last frame.



-Look at the Layer Tab, the Layer with the Core-Image should still be 'activated', if not, activate it again- this will not deactivate the frames- and line up the Core-Image correctly.

You're done.

At least with that step.

It's always a good idea to test the animation as there might be a frame still not synced up right, just highlight it, and you'll see what's wrong, correct it, and it should be smooth so you'll have, something akin to, this.



This is good, but there's still some final tweaks too be done.

Or at least I'd do so.

I remain, as always,
Mad-Hamlet

[Mad-Hamlet]

Greetings,

Looking at this:



it looks good but there's room for improvement, for instance there's that white space on the right side, and its kind of big. So further tweaking is necessary.

There are two ways to edit the animated bits, quick n'dirty, and slow, suicidally monotonous; yay for the fact that basic transformations are the the former.

So we want to 'nudge' the Animation and transform its size. If you do this as brazenly as one does this in normal Photoshop you're going have one freaky bit of animation. We need to make changes that affect every layer, and insure those changes are reflected in every frame.

Now in normal Photoshop if you wanted to make transformation that effected multiple layers that was easy enough. Click the layer you want to make the changes too, hold down the shift key, and click the bottom layer, and every layer in between those two will be 'activated, ready to be changed by the transformation. Or hold don't CNTRL and click the individual layers you want to make the changes too.

Well, the same holds true for your animated sig in Imageready with one extra step. That's right, you have to 'Activate' every frame as well.

Open the Layer Folder in the Layer tab. Click the top Layer, then holding Shift, scroll down to the bottom and click the last Layer.

Move on over to Animated Frames window and repeat the exercise; scroll to frame one, click the first frame, hold down shift while scrolling to the last frame and click on that as well.



You are now ready to make some basic changes to all the animation. This can be very resource demanding on a users machine so be careful, and slow. You can do all the basic transformations, size, rotation, and flips; you can nudge the entire thing where you want within the canvas; You can create a colored layer above the animation and then change it's layer style for some interesting effects.



However, you can't change layer styles, or use filters. Those are greyed out.


In essence you can do lots of things but whatever changes you make, must be reflected in every. single. frame.

Again, this only works for basic changes. Detailed changes are a lot harder...and far more boring.

To do those kind of changes, for example, say making an square of animation, into a circle, as if you had a round television set,



takes using the Elliptical Marquee Tool, making a 'selected area' (marching ants circle) inverting it, then deleting, on every layer, the corners off, making sure the correlating frame of animation is activated. I tried doing this with all sixty layers activated at the same time and Imageready practically lunged out of the monitor and tried to strangle me to death.

There you have, the basics to smashing formats together to create an animated sig file. And these are just the basics. With some real tweaking you can work After Affects into the equation as well as movie editing software or hand making your animation frame by frame within Imageready or other .GIF making programs, or fooling around with blue screening,



green screen and the like. It just really depends on how much you're willing to work at it.

And just because you can animate something huge and awesome, doesn't mean you should...sometimes smaller conveys much more.



And with that....

I remain, as always,
Mad-Hamlet