How do you make an animated .gif?

I'm going to "draw" the area I want to select by using the lasso tool

magic wand, dude!

DAMMIT

I can only defer back to what I said yesterday,

"...I don't really know what I'm doing! Along the same lines, I'm sure some of the ways that I do things are really dumb and could be easier, and I just don't know it...I'm apologizing in advance to anyone who actually knows what they're doing."

http://farm4.static.flickr.com/3004/3027962567_44f42a4562.jpg

Although, I did try the magic wand, and while it did help with a lot of the work on Kirk's edges, it was still kind of a hassle to select everything on the interior. It took like 10000 clicks to finally get everything. I guess a good middle ground is to use the lasso to quickly select everything on the interior, and then use the magic wand on the edges. Thanks for pointing that out, though, ledge - I'll probably end up learning more than anyone else reading this!

Use the magic wand on the background once, then delete the background - only thing left will be kirk

...

DAMMIT!
:)

ahahaha, how many hours could you have saved?

Serious answer: Probably dozens. 30+

When there's not a monochromatic background to make things easy, I tend to work in Quick Mask Mode a lot.

OK so that is Adobe Photoshop CS3 Extended. I am so there.

keep the tutorial going! these magic wand, invert selection tricks are pinch harmonics -- teach us the power chords!

OK, I'm going to pick back up where I left off with kirkinprogress.psd

STEP THREE: MAKE BANANAS AND TACOS FLY THROUGH THE AIR

I'm adding bananas to the work order because they are THE ATHIEST'S NIGHTMARE.

First things first, find a banana, isolate and extract it similarly to step two, and paste it into kirkinprogress.psd. Here's the one I'm using:

http://i34.tinypic.com/fkbiqh.jpg

Of course, this banana is much larger, relatively, than Kirk's head. To fix that, just resize the banana. In case you don't know how to do it, you should probably know how to resize it using the transform command, something you're probably going to end up using over and over again. First, select the banana, which, using the magic wand tool that I have always used and known about (FUCK), shouldn't take too long.

Then, with the rectangular marquee tool selected, right click in the selected area and choose Free Transform, and you should have something looking like this:

http://i33.tinypic.com/35c3alt.jpg

If you right click on the selection, you'll get a list of ways to fuck around with the image. Most of the time I just use Free Transform, but the other options come in handy sometimes too. To size the banana down while maintaining the same shape, hold down the shift key and drag the corner box until it's the smaller size that you want. If you don't hold down shift, you can resize it however you like, so that it becomes really thin or wide, tall or short. Mess around with the different transforming options and get familiar, realizing that you can always just go back a few steps using the history window.

Once you've got it to a size that makes sense, press Enter to finalize it, and then, since the banana is still selected for you, go ahead and copy and paste it into the kirk picture. Pasting it will automatically create a new layer, leaving you with this:

http://i37.tinypic.com/2ykxkcx.jpg

Alright, finally we can actually animate something.

First we'll make the banana fly in an extremely amateurish way, and then we'll make it fly in a moderately amateurish way (the only way I know).

Open up the animation window by going to the Windows menu up top and checking it.

We'll do a five frame animation. Add four more frames to your animation window by clicking on the "duplicate selected frames" four times.

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

Now you should have something like this:

http://i37.tinypic.com/dfg655.jpg

Notice that you can change the timing of each frame. It will actually work if you just leave everything at "0 seconds" (it'll just go really fast), but I'm going to change everything to 0.1 seconds. The last thing to do for this super amateur version is to place the banana in a different place in each frame.

Click on Frame 1 in the animation window. Now, with the banana layer selected, use the Move Tool (on the top-right of the tools menu) and place the banana on the left side of the frame.

http://i37.tinypic.com/1z48zna.jpg

Notice that when you do this, frames 2,3,4 and 5 also change. This is because of the "Propagate Frame 1" option, checked by default, over in the Layers Window. This option can come in handy sometimes, but it can also lead to massive fuckups. For example, if you had an object in all of your frames perfectly set at different positions, and then you moved the object in the first frame 3 pixels to the right, it will move the object 3 pixels to the right in ALL of the frames. So there are times when you'll definitely want to disable that option.

But for now, select frame 2 in the Animation window, and use the Move Tool to move it a bit to the right. At this point, you can hit the play button to see your awesome work.

http://i33.tinypic.com/e06eso.gif

Yeah, it looks stupid. It's because frames 3, 4 and 5 are still identical to frame 1. Select frames 3 and 4 and complete the movement of the banana across the image. Then, in frame 5, uncheck the banana layer. This will mean that in frame 5, there is no banana. Finally, change the timing of the fifth frame to a full second. Now you should have something like this:

http://i36.tinypic.com/33c0r5h.gif

Yeah, it's choppy. Of course, you can always add more frames.

http://i38.tinypic.com/2edbozq.gif

Now the moderately amateurish version, which we'll create by making the banana twirl and placing the whole thing in a ridiculous scene.

To make the banana twirl, we'll need 3 different banana layers. You've already got one of them. You just need to make two more, and rotate the banana in each one at different angles. First, erase all of your frames of animation so you just have one again. Now, click and drag the banana layer to the "create new layer" button. Do this twice to make two copies of the banana.

http://i37.tinypic.com/2s7ct4y.jpg

At this point, you have three bananas exactly on top of each other, so it looks like you only have one. If you click on each layer and use the Move Tool to spread them out a bit, you should be able to see all three.

http://i34.tinypic.com/1zp0ifo.jpg

Now, choose one of your new banana layers, draw a selection rectangle around it using your Rectangular Marquee Tool (upper left), and then right click on it and choose "Free Transform". You can either move the cursor to a corner of the resulting rectangle and click and drag to rotate, or right click again and choose "rotate". Either way, rotate the banana, and press Enter to finalize it. Then, choose the third banana layer and do the same thing, only at a different angle. You should now have three bananas at three angles.

Now, follow the steps above to create some frames and make the bananas move across. Only this time, instead of having one single banana in different places in each frame, you'll switch to a new banana layer during each frame so that it twirls in the air.

INCREDIBLE
http://i37.tinypic.com/20sxc87.gif

To make things completely professional, find a suitable background and paste it in, and place it in the Layers window so that it's above the hot pink background but behind Kirk and the flying bananas.

http://i37.tinypic.com/s1s408.gif

Tomorrow, as we continue the grueling slow pace, making Kirk eat the banana, swallow, and like it.

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