How do you make an animated .gif?

RATED R

you SERIOUSLY should make a full-on website of this because it is both informational and fucking hysterical

STEP FOUR: MAKE KIRK EAT BANANAS

Onto the more difficult stuff.

As always, I am totally making up the vocabulary here to try to describe what's going on. I'm going to be referring to something I call cover layers. Think about the steps we need to take to stuff a banana down Kirk Cameron's mouth. The banana will fly near his mouth. Ideally, his mouth will open in anticipation. Then the banana disappears down the mouth. There are two basic ways we could make the banana disappear. We could do the super amateur version, where it appears in front of the mouth and then disappears in the next frame. But today, I'm going to aim higher, for the moderately amateur version. I want the banana to appear "in" the mouth, that is, behind the teeth. To do that, we need one more cover layers for the banana to disappear behind on the way down the mouth. Hopefully this will make sense as I go through this, but if shit gets confusing, one helpful thing to think of is how you would do this in real life with paper cutouts. Imagine having a Kirk cutout, a banana cutout, and then how you would need cutouts for the lips, and a "cover" for the banana to disappear behind. Each of those cutouts is a layer you need in Photoshop.

Why go to all this trouble just to make a banana appear behind Kirk Cameron's teeth for one frame in an animation no one will ever see? That's an issue you're going to have to come to terms with if you're going all the way, just a head's up.

Here we go. I'm starting with the Kirk layer, 3 banana layers, a hot pink background, and just the first frame of animation. First, let's make Kirk's mouth open. Take a look at this guy's mouth (zoomed in at 200%).

http://i34.tinypic.com/2zgx2zl.jpg

Now, think in terms of paper layers. For the mouth, we're going to need 3 new layers: 1) The bottom lip, stretched downward in an open mouth position, 2) a layer for the teeth and top lip, and 3) a black "emptiness" layer that will show when Kirk opens his mouth, and will be behind the top lip and bottom lip layers.

1) The bottom lip. Make sure you've selected the Kirk layer in the Layers Window. Using the lasso tool, draw a selection around the bottom lip. Here's mine:

http://i37.tinypic.com/5wh7qg.jpg

It doesn't have to be perfect, but make sure you're not including the teeth, and also that your selection doesn't get too skinny up in the corners. Don't worry too much about your selection extending into the area below his mouth, because if it ends up causing a problem we can always fix it later.

Now, CTRL+C then CTRL+V to paste your selection into a new layer. Rename the new layer "Bottom", or whatever helps you to keep track. Also, Make sure you rename your main Kirk layer "MEGADOUCHE".

http://i36.tinypic.com/2lcqykj.jpg

Now let's stretch his mouth downward. I'm going to use the Warp tool. Make sure your new "Bottom" layer is selected, and then use your Rectangular Marquee Tool (topleft in Tools) to select it. Now right click in the selected area and choose Free Transform. Right click in the same area AGAIN and choose Warp. If you haven't done so already, play around with the tool a little bit (looool) to get used to it. When you're done, you can always just hit escape to undo everything, or if you accidentally hit Enter and finalize the transformation, just Ctrl+Z to undo the action. You're free to warp it as you choose, of course, but here's what I did:

http://i35.tinypic.com/287ll43.jpg

With the warp tool, there are 16 points on the grid you can move around. On the bottom row, I moved the two inside points down a little bit. On the second row from the bottom, I also moved the two inside points down a bit. That results, obviously, in the lip being pulled down, but it also leads to the top corners of the lips being pulled down along with it, annoyingly. To counteract that, I pulled a few of the top grid points up a little bit, so that the corner of the lips still come into contact with the top lips. In other words, make sure you're not totally breaking the mouth apart. Or in other other words, just play around with these grid points until you get an open mouth. Here's what I ended up with:

http://i36.tinypic.com/o0nmaa.jpg

Now you can probably see why we need more "cover layers". iirc, when people open their mouths, they don't reveal a bunch of face skin inside their mouth. So let's create our second new layer, the dark emptiness inside the mouth. If Kirk Cameron gave this much thought, he would probably believe that the dark expanse inside the mouth is a symbol for the existential emptiness people feel before they accept JC into their lives. The flying banana represents JC's love and perfection, so when it flies into his mouth and it eliminates the doubt and the loneliness.

ANYWAY, let's create the empty darkness inside the mouth. Create a new layer by clicking on the Create New Layer button over in the Layers Window, and then rename the layer to whatever you like. Next, move the layer down in the order, so that it's below/behind the bottom lip layer. Finally, switch to the brush tool, change the color to black, and paint in the "open mouth" area that will appear whenever Kirk opens his stupid lips.

http://i38.tinypic.com/14v0eax.jpg

Great, except that his teeth are now gone. Now, you may be thinking that it would be better just to carefully paint in the black up to the teeth, and then stop. And you can do that, but it'll probably take you a relatively long time to zoom in reaaaally close and make sure you're not painting over the teeth. So to me, it's much easier and quicker just to create a THIRD new layer, the top lip/teeth layer, and then use that to cover up the empty black layer we just created.

To do that, uncheck the empty black mouth layer in the Layers Window so you can see the teeth again. Then, with the MEGADOUCHE (kirk) layer selected, use the lasso and select the top teeth and lip area. Here's my selection...

http://i36.tinypic.com/2mhtxu0.jpg

Now, copy and paste the selection into a new layer, rename it ("top"), and move it up in the layer order to that it's above the empty black mouth layer. Recheck that empty black mouth layer, btw, so you can see what the final open mouth will look like with all layers firing:

http://i34.tinypic.com/212741w.jpg

Oh. The teeth look kinda funny. Never fear, if you encounter something similar, just select the teeth/top lip layer, and clean it up using your own discretion. In this case, I'm just going to use the Eraser tool and clean it up a little around the teeth.

http://i33.tinypic.com/2ccsaom.jpg

Kirk Cameron's favorite album of all time?

http://farm1.static.flickr.com/23/41226035_72319e9871_o.jpg

Now we have all the layers necessary to make Kirk's mouth open and close. So let's create a quick 2-frame animation so we can enjoy our handiwork. The first frame is just the original Kirk.jpg over a hot pink background, while the second frame includes all of our new layers we created:

http://i34.tinypic.com/35170ub.gif

Not perfect, but it'll get the job done. The rest of this involves getting the banana to fly into Kirk's mouth. Hopefully, you should be able to do that using the Steps two and three Remember that we have three banana layers now so it can tumble through the air with ultra realistic motion. But if you followed the steps I gave you today (FOOL! AHAHAHA), you're going to run into a problem when the banana actually enters the mouth. THIS:

http://i35.tinypic.com/15hodw7.jpg

To understand what's going on, we need to look at the layers:

http://i35.tinypic.com/ifn6mq.jpg

The banana layer is above the the top lip/teeth, above the empty black mouth layer, above the rest of kirk cameron, but below the bottom lip. So far, so good, because want the banana to be above everything but disappear behind the bottom lip as it enters the mouth. But the horror show Banana-Through-The-Mouth occurs because after it disappears below the bottom lip, there's nothing else to cover it up. Again, think of how you would do this with paper. Currently, the banana would slip beneath the bottom lip and then pop back out into visibility. We need ONE MORE cover layer to give it something to hide behind.

Again, choose the MEGADOUCHE layer (kirk), and use your lasso tool. We want to select a big enough area for a banana to disappear behind. Here's what I selected:

http://i37.tinypic.com/23tsbnr.jpg

Again, copy the selection and paste it into a new layer, rename it "CoverLayer", and then position it like so in the Layers Window:

http://i35.tinypic.com/1zn9zqg.jpg

There. Now the banana disappears behind the coverlayer when it gets near the mouth. Now I'm going to create some new frames, make the banana tumble toward Kirk, and as the banana comes near, have his mouth open (turning on all the layers we created today, the top lip, bottom lip, black space, and CoverLayer), show the banana entering, and then snap his mouth shut. To top it all off, I'll do my best to think of what Kirk Cameron would say, and place him in an semi-appropriate context.

http://i38.tinypic.com/290tr9t.gif

I realized I skipped some steps there at the end, but you should be able to figure it out. (hypothetical you, if anyone is actually doing this) The text is just created using the text tool - ok, I used the shape tool to create the heart and then merged that into the text layer (shift-select the layers you want to merge in the Layers Window, then right click and select Merge Layers) - and then turn that text layer on during the final frame. And the hell layer is just copied and pasted from these internets, and placed at the very bottom of the layer order, where the hot pink used to be.

ZS it is so fantastic of you to explain all this! Thanks for your time & your awesomeness.

Don't thank me, thank Kirk Cameron! I can't think of anyone else's pixels I'd like to manipulate, hubba hubba! :)

He is the banana's worst nightmare.

Whoah ZS this is so awesome! And you sound like the perfect teacher: patient, funny, Kirk-hating... <3

Thanks you guys. :)

I'm going to make just a few more next week, covering topics such as

1) How to "zoom in" on an object/person
2) playing with opacity
3) how to do the "flythrough" effect:

http://i161.photobucket.com/albums/t214/ZachRScott/flythrough.gif