Tag: animated gif

Posted on

Headless Selfie

LosingHeadGIF2013

Who is really running the show?

Here is my headless self (see also here)—though actually, it’s less headless than showing some other head hidden behind mine.

Truth be told, who is really running the show is my 6-year-old son, but since I don’t like to show his image in public on the web, I used one of my cat Snapper instead. I was on sabbatical in Australia for a year, and during that time my cat was staying with my mom in Idaho. I’m there right now to visit and take Snapper home.

Talky Tina has started an August animated GIF challenge for ds106, and given how long this one took me, my chances of doing one every day are very, very low. But I’ll do what I can!

This was really, really challenging for me. I honestly wasn’t sure how to even start. And it didn’t turn out how I’d like—the wicker chair behind my head got animated at the top of my head and I honestly can’t remember how or why I did that. And my chin doesn’t disappear until Snapper’s head comes through. Can’t recall why that happened either.

The process

Here is a lesson for me (and others): if you’re going to blog about your process (which beginners like me sure do like because we learn a lot that way), then it’s good to take notes and screenshots while you’re doing the process rather than waiting until the end. Because I tried so many different things just to see what they would do, that by the end I wasn’t really sure what I actually did do that worked. And since I merged layers down after making layer masks and such, I no longer can get screenshots that show the process before the layers were merged.

Here’s what I remember—some notes I took last night right after I finally got this to work. I’m not sure it entirely fits what I did.

I used GIMP for this project, and two pictures: one of me, and one I took of Snapper yesterday.

1. I used the “lasso” or “free select” tool to do a rough selection around Snapper’s head. Then I used “create layer mask” on his layer, “to selection,” so that just his head was visible and the rest of the image was transparent. I also did the same thing around my head so that my head disappeared but the rest of the image stayed, so that then I had an image with my body and Snapper’s head. I had to move Snapper’s layer a bit to make his head fit into the “hole” I had made in my picture’s layer.

But that didn’t end up working well, because Snapper’s face shape doesn’t fit mine, of course, so I had to figure out how to get the wicker chair background behind Snapper’s head.

2. On a layer with my image, I created a background of wicker chair over my head with the clone tool. That was tricky—getting it to look reasonably realistic. I am still not entirely happy with that, but after spending a lot of time on it, doing it over and over, I finally just went with what I had.

What I can’t remember is how I determined how big to make this cloned wicker background so it would show up behind my head when my head disappeared and Snapper’s appeared.. Whatever I did, it didn’t fit exactly—more of the wicker chair animates than needs to.

3. I then put the image of me with wicker over my face under the Snapper head layer. Next, I made several Snapper head layers, each with a graduated opacity: 25%, 50%, 75%, 100%. I put the image of me with wicker over my face under each one, so that when Snapper was partly transparent, the wicker showed through. I then merged the Snapper head layers down onto the wicker chair head layers.

4. To do the same thing with my own face, I made a different layer mask on my layer than I did originally—one that allowed my head to show through and the rest of my body to be transparent. I put that one on top of the image with wicker where my head should be. I then created several versions of my head layer, again with different opacities: 100%, 75%, 50% (I just went to 50 on this one, not 25), and put the wicker char background layer under each of these—again so that when my head fades out there is wicker chair underneath it. I merged each “head” layer with the “wicker chair” layer under it, so each layer had my head at different opacities with the wicker chair underneath it.

5. I ordered these layers so that it started off with my full opacity image, then my head fades out 75%, 50%, then Snapper’s head appears 25%, 50%, 75%, 100%. Then I just duplicated layers so that the process went backwards in reverse order. And tried animating.

6. But GIMP animates from the bottom of the stack up, apparently (at least it did with this one…does it always? I don’t recall), so it started off with Snapper’s head, which faded out to mine, and back. So I had to reverse the layers. Searching on the web, I found that there is a tool in GIMP for doing this automatically instead of moving layers one by one (which I now vaguely remember doing at some point on another project). You just go to Layer->Stack->Reverse Layer Order, and voilà! It animated in the right order!

7. Lastly, I had to play with the timing of the frames so it animated a bit slower than the default. When you “export” and save as a GIF, you get a dialogue box that gives you a choice of milliseconds to delay between frames. It was at 100, but I changed it to 300. Then I had to click the check box saying to use that delay between each frame.

I expect there is an easier way to do this that wouldn’t take so long. If you know of one, please let me know in the comments!

Posted on

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!