Better Twilight Zone Invaders gif

Creepy little spaceman is even creepier now.

Here is what I managed to do to fix the jumping image in the first animated gif I ever created (see previous post). The part of the image with the dress was moving around a lot, but the spaceman’s movements looked pretty good. I asked for help with this on my previous post, and voilà, I got it! Andrew Forgave suggested using a mask to keep the dress part still and the spaceman be the only part that’s moving.

I’m using gimp to make these gifs, so I watched some gimp tutorials on layers and masks just to get my head around them. I found this one pretty helpful and straightforward, and I also watched this one, which didn’t quite get me what I was looking for, but gave me some ideas on just what the heck a mask is and how to make one by painting.

Neither of these told me how to do what I needed to do, though: create masks that will apply throughout all the layers in an animated gif, so that one part of the image remains still and the other part goes through all the layers as an animation.

I tried my best to figure out how do that on my own, but didn’t get very far. Basically I was making the part I wanted to animate transparent, which made sense to me b/c I thought I’d want those animation layers to come through. But it wasn’t working; the dress part was still animating too.

Then followed a frustrating web search for things like “gimp animated gif layer mask,” or some such, and I was just about to give up when I found…I should have known…a tutorial by Jim Groom on exactly what I’m trying to do.

That tutorial shows a simple, though somewhat work-intensive (repeating easy steps over and over) way to animate just part of a gif. And after several tries of getting the selection right, I got something I’m pretty happy with. It’s not perfect, as I could still use to tweak the selection a bit so that less of the stuff around the knife animates, but I’m quite happy at this point.

The process

What I did was use the “free select,” or “lasso” tool to select a section around the spaceman: I selected the black rectangular area that he is in, and had to go around the knife. I wish I had screenshots to show you, but I didn’t take any during the process, and then after I had applied the layer mask to each layer you can’t see the earlier steps!

Then, I created a layer mask: go to Layer->Mask->Add layer mask, and choose “selection.” I can’t remember whether it will make the selection black or white, but what you want is for it to be white, because that means that that part is visible. Black turns that part of the image transparent. Transparency in gimp looks like a strange checkerboard. So if when you do the selection and make a layer mask to selection the selection is black, what you have to do is go to Select->Invert and then add a new layer mask to the “inverted” selection and it should be the right colour.

Here, in a screenshot of the final product layers, you can see that everything but the spaceman is transparent in the gif.

What this does is allow the bottom layer to show through as is—that’s the “still” part. Then the part that isn’t checkerboarded is the part that is visible on each layer, and as GIMP moves through the layers when it animates, those parts of each layer are visible and you get the movement.

But, as noted in Groom’s tutorial (linked above), you have not not only create a layer mask for each layer, you also have to “apply” it. You can do that by going to Layer->Mask->Apply layer mask. Or there’s a shortcut for layer actions: click on the layer in the layer list (in the image above, I’ve clicked on the first one, so it’s got a white border), and then do “Control-click” on it (on a Mac, anyway; same for PC?). That will give you a list of commands to choose from—you can add layer mask, apply layer mask, change layer attributes (including giving it a new name), and more.

With this gif, I was able to use the same selection for adding layer masks to each layer, because the knife didn’t move very much. What you do is just don’t unselect anything, but keep the selection as is and add layer masks to each layer. But I did have to make sure the selection went far enough around the knife that when it’s in a different position on each layer, the selection still covers it so it doesn’t move into the transparent area.

Another option, of course, is to make a new selection for each layer, but who wants to do that unless you have to? (Added later: I did have to do that for a different gif, and it took a long time!).

And now it’s time for bed here in Australia. With a sense of accomplishment!

[Added later] And in true ds106 fashion, this gif was added to by Vivien Rolfe, to make something even better! See (and hear) here!

Twilight Zone: Invaders gifs

Creepy little spaceman with paring knife is creepy.


This potato sure is tough…


The top one is my first gif ever. They’re both from the Twilight Zone episode posted for #ds106, here, called “The Invaders.” I could only download part of it, so I didn’t have as much material to work with in making a gif as I would have liked. I’m going to try to make one or two from another episode I find elsewhere on the net.

Both of them jump a lot, which means I need to work on the timing, or picking a different scene.

I don’t have much of a story behind these, except I was trying to find scenes that would make smooth gifs!

In the first one I was focusing on the spaceman’s knife and I think I got the movement from that down pretty well…it looks okay, but the woman’s movement is jerky. I wish I could just mask her out or something to make the alien knife look better. Any suggestions on how to do that sort of thing?

In the second one, I thought it would be cool if she could just chew forever, and have an endless amount of potatoes going into the pot. I like how the candle in the background actually looks like it’s just flickering! I think of the two, I like this second one best for smoothness…but I like the first one best for creepiness and I wish I could do something about the jumping woman to the left of the spaceman.

One more question: I’d like to be able to show the captions for images in the posts, rather than only when you click on the images (as it is now). Any idea how to do that?

These were done for the #ds106 animated gif assignment on Twilight Zone

I used MPEG Streamclip and then GIMP, as described here.