Category: animated gif

Posted on

How I feel when I have too much coffee.

How I feel when I have too much coffee.

I was making this GIF this morning at a coffee shop while working on another GIF that I still have yet to finish. That one will be posted soon.

August Animated GIF challenge #11 is making a wiggle stereoscopic GIF. Seemed pretty easy—take a photo from two different angles and make a GIF so it wiggles. But this, like all digital storytelling, is an art. And I have a lot to learn. This one does not look like 3D like these sorts of things are supposed to. Rather, it looks like a jumping bunch of confusion.

I should have made the angles between the two images less—I should have taken the photos without moving so much in between. Lesson #1. I wanted the coffee cup to wiggle but not the computer so much. But the coffee cup wiggles too much and the keyboard of the computer wiggles too much too.

I should not have had a great deal of the cafe in the background, because what I wanted to stay fairly lined up was the computer screen, which meant that the background in the cafe moved a lot, which was really really annoyingly dizzy-i-fying. Lesson #2. What I did (in GIMP) to help with this was create new black layers on top of each of the two images, then create a layer mask with a selection so that the black layer showed only in the cafe part behind the computer. I reduced the opacity of the black layer to about 90%, then applied the layer masks to the black layers and merged them down onto the two original images. So now the background is blacked out a bit and it’s not quite as distracting. But I could have used more black than this, even. Maybe nearly full black, because the cafe movement is still distracting.

I should not have had a glare on the computer screen, because that moves too much with the two images as well. Lesson #3.

And why is my image so pixelated? Really…this has been happening with gifs a lot lately. Is it the gif format?

But it’s late and I need to go to bed, so, well, it is what it is for today.

Even though this did not turn out how I would have liked, I learned a lot, which is a good thing too. I want to make another one sometime that looks better, and then I’ll post it to the assignments bank as an example. This one…not so much an example of the right thing to do!

The GIF on my computer in the image is taking a little while because I have to do something to it layer by layer, which is kind of a pain but I hope it will turn out looking good as a result. Hopefully tomorrow or the next day that one will be done!

Posted on

Why didn’t Mr. Clown with flowers work like I thought it should?

So in my last post I posted a GIF I had made, and said that I had tried doing it another way that I thought should work but didn’t. I’m hoping someone who knows GIMP can help me figure out why it didn’t.

Looking at the GIF that previous post is needed to understand this one.

I thought I should just have been able to put the clown image on the bottom of the layers, then put in the flower layers on top of that in the following way:

For each flower, have three layers at 25% opacity. This way, I thought, they would fade in, 25% at a time, up to 75% opacity. They’d be above the clown layer, so would just fade in one at a time on top of it. Each flower would come in after another had already come in, and the first would stay there.

So I had my layers in GIMP like this.

image

But when I did that, here’s what I got as the GIF.

image

Ummmm…where’s the fade in? And why are they 100% opacity at the end rather than 75% like they should be?

The even weirder thing is that what I saw on the screen in GIMP, with all the layers visible, before exporting this as GIF, was this:

image

The flowers are at a different opacity, and different colours because I had messed around with the layer modes for some of them.

So why didn’t the exported GIF have the same colours and opacities as the image on my screen in GIMP?

I spent a long time last night trying to figure this out, and then finally just went with the really long way of making this GIF, which is explained in the previous post.

I don’t get it. Can anyone help?

Posted on

Making Mr. Clown look very nice

August 2013 Animated GIF challenge #8 is “Add some flower power!”

The idea is to make something not so nice look nicer by adding some flowers.

Todd Conaway made this scary picture the other day, for a thank-you note to a childhood fantasy character.

image

I thought this one could use some serious flowering.

So I made this. I think it takes some of the creepy out of him by covering his eyes and mouth with flowers. Right?

image

This actually took me MUCH longer than I had expected. I’ll note that in another post, because I would like some  help with a particular question about why something I tried didn’t work.

What I did here:

I got the flower images from a site Talky Tina pointed to in her blog about this assignment: http://www.clker.com/search/flower/1

1. Duplicated flower images three times, adjusted opacity of each so 25%, 50%, 75%. Also played with the “layer mode” on GIMP of some of them to get funky colours (the two on the clown’s eyes).

2. Duplicated the original clown image to put under each of the first flower layers (the blue one on the left)—so a clown image under the 25% opacity of the flower, then one under the 50% and 75% opacities. Then merged down so had three layers of the clown image plus flower at different opacities. The idea of what I did is given in the screenshot below, even though it is for different flower layers. This is before merging down.

image

3. Duplicated three times the layer with the blue flower at 75% that had been merged with the clown image, and then put one of those under each of the next flower layers (the purple one at left, in 25, 50, 75% opacities). Merged down.

4. Repeat with other flower layers.

5. I duplicated the last flower layer (daisy on the clown’s mouth) several times, so the whole image with all the flowers would stay for a bit longer at the end. That worked fine until I “optimized animation for GIF” in GIMP (Filters->animation->optimize for GIF). I didn’t do that at first, but then the image was too big to animate on Tumblr. Seems it needs to be less than 1MB to animate. Optimizing it makes it MUCH smaller (this one is just over 140 KB), but it got rid of the duplicate layers at the end, so the image with all the flowers didn’t stay very long. What it did was add “combined” to each layer, though I don’t know what that means. So to fix this, I after optimizing I just duplicated the last layer a few times again. Worked like a charm.

6. I don’t like how GIMP has been making the GIFs look all pixelated. This is probably due to the optimization stuff, and/or the GIF format? Yes? No?

I wanted to have the flowers fade back out again like they faded in, but by the time I got this far, I had spent way more hours than I had planned, and decided this was good enough.

I tried what seemed to me a much easier way of doing this, but it wouldn’t work like I thought it should. Next post: please help me figure out why that didn’t work!

Posted on

Scottlo going in circles in the desert

“Scottlo going in circles in the desert” by Christina Hendricks is licensed CC-BY-NC-SA Canada (the original car image is licensed as such).

The August GIF challenge for ds106 continues; this one is #5: reinvoke a missing ds106 friend! According to Talky Tina,

If you are missing a Friend from the DS106 Digital Storytelling Community, maybe you can re-invoke them into coming back with a voodoo Animated GIF Poster of your own!

Talky Tina and I both did posters for our friend Scottlo, who left Saudi Arabia a number of weeks ago, and has been very quiet since. I know he got rid of his Yaris and doesn’t have it anymore, but that’s how I remember him—talking about driving his Yaris in the desert on ds106 radio.

And you know what? It worked! When I sent out a tweet last night asking for help with gifs, Scottlo replied! He’s around! Bill Smith said Talky Tina and I invoked him with our Art Makes. Wow, art is powerful.

The process

I used a still frame from Andrew Forgrave’s gif on this ds106 assignment for Scottlo’s Drive By show on ds106 radio. I then got this picture from Flickr, which is a place in Saudi Arabia that I have no idea if Scottlo ever visited (“Cliffs Near Faisal’s Pinnacle,” by Peter, licensed CC-BY).

I cut out the car from the background using the lasso tool, as well as a layer mask so only the car showed. I made numerous copies of the car.

I put the text on the background, saying “Scottlo left the desert in his Yaris weeks ago…have you seen him?”, and made lots of copies of that.

So then I just moved the car layers across the background layers so it looked like it was moving. I had lots of car layers at first, but was ending up with too many layers, so I made it jump across a bit faster.

The last layers were just a background with no car, and the text “Oh wait…he’s just going in circles.” So it would be just the background with that text, then the whole thing would start over. But it didn’t look right when the gif moved, so I decided to make a second pass of the car across the desert with that text on the background, so it would be like you notice he’s going in circles when he comes back around.

PROBLEM! I wanted the car to go back across the desert, but had already merged the car layers with the background layers, so couldn’t re-do the moving car without using the lasso tool on the original car image AGAIN. Okay, so I just use the first moving car layers over again. NO, because those have the wrong text on them (the first text about him leaving the desert), and I’ve already merged that text onto the layers.

Nothing to do but use the clone tool to “erase” the text on the moving car layers and replace it. I don’t know if I could have used the eraser tool…maybe.

LESSON TO ME: Don’t merge layers down until you know you are through. Of course, Rockylou told me another trick: save several versions, some without layers merged down, so you can go back and change stuff with the earlier versions if need be. I even said “yes, good idea,” and then I didn’t do it! Boo me. The problem is that you can’t really see what the gif is going to look like until you merge layers (unless you’re really good at this stuff and can just tell what the program is going to do!).

So yeah, I cloned the sky, and got rid of the original text, and put the “circles” text on the second go-around of the car. And of course I didn’t clone the same way on each frame, so you can tell that the color around the text changes. Also, I didn’t put the second text on enough of the moving car layers, so it doesn’t go for long enough. But if I try to add it to another layer now, it won’t be in the same place on the image (I duplicated the background with the new text, so it was always in the same place). So again, lesson to me!

And why the heck is the text so pixelated and not-nice looking? no clue.

I had a lot of fun with this one, and again, I’m learning more and more with each GIF!

Posted on

Jim Groom in my fridge

DancingJimGroomInFridge-bigger

 



So I was out of town for a week, and when I got home I opened the fridge to…what the H-E-double-L is THIS? Jim Groom in my refrigerator? Okay, I’m a bit creeped out now. At least he seems to be having a good time. Maybe he ate all the food and just left the sparkling water and the Metamucil.

This is the Dancing Jim All Over the World ds106 assignment, as part of the August 2013 GIF challenge created by Talky Tina.

This one was not as difficult as I feared it might be, in large part thanks to some very helpful instructions posted by Rockylou and Brian Bennett.

I used an earlier image I made for a ds106 daily create as the background and foreground for Jim.

The process

 

1. Opening and duplicating the background image

I opened (as layers) the wireless mic version of the Groom template that Talky Tina created into GIMP. Then I opened (as layers) the almost-empty-fridge-blues image I had from the earlier daily create assignment.

I put the fridge image on the bottom so that I could see the Jim layers above it—this made it easier to see where I needed to scale and move Jim’s layers.

I then duplicated the fridge image so that I had the same number of fridge layers as Groom layers.

 

 

2. Scaling and moving the Groom layers

There were 9 layers in the Groom gif, and in order to move them together and scale them together, I had to do two different things, as explained in an earlier post.

In order to scale all the Groom layers together (rather than one by one) I put them all into a “layer group” (click the link to see how to do this). Then I could scale them by right-clicking (or control-clicking) on the layer group folder and choosing “scale image.” I made Groom the right size to fit into the fridge shelf.

But I also needed to move all the layers together so they’d be in the right place. Unfortunately, due to some strange quirk of GIMP, you can’t move layers together in a layer group. Instead, you have to “link” them. Then you can move them all at the same time.

 

3. Creating a foreground in front of dancing Jim


I already had 9 fridge layers to act as background for the Groom layers, but now I needed to create a foreground for him too. To do that, I duplicated the fridge layer one more time, and then used the “lasso” or “free select” tool to select the shelf that would go in front of Jim.

I then created a layer mask on that image (go to Layer->Mask->Add layer mask) and clicked “selection” in the dialogue box. This made it so only the shelf was visible and the rest of the image was transparent. In GIMP you also need to “apply layer mask” to the image after adding it. You can do this by clicking on the layer with the mask, and going to Layer->Mask->Apply layer mask.

I needed 9 of these foregrounds as well as 9 of the original image as backgrounds. So I just duplicated the image that had the layer mask applied.



 

4. Putting Jim between the foreground and background, and merging

I first put a fridge layer under each Groom layer so that each Groom has a background. Then I put a fridge shelf layer above each Groom layer, so each Jim has a foreground.

Time to merge down. First, I merged a fridge shelf layer with a Groom layer. Select the top layer and right or control-click to get the dialogue box and choose “merge down” (see screenshot). Then, I merged the fridge shelf/Jim layer with the fridge background layer beneath it using the same process. And repeat for each threesome of shelf, Jim, fridge.



 

5. taking layers out of the layer group

You can’t animate the layers in GIMP if they’re in a layer group, so you have to take them out. You can do this anytime after scaling and moving them, but I kept them in for awhile just to make sure they were in the right place.

Move the layers out by just clicking and dragging each to the top or bottom of the layer group, keeping the same layer order. Then you can delete the layer group by clicking on it and control- or right-clicking and choosing “delete layer.”

 

6. Changing the animation speed

Jim was dancing too fast at first, so I exported as gif again and changed the dialogue box on export to read 200 millisecond delay between frames. That got him about right, I think!

Now, if only I could get my act together and add some music! 

 

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!