Mama and Boo Ghost at the aurora

MamaBooGhostAurora-June2014

I decided to combine the ds106 daily create for June 6, 2014: “Make a picture of yourself in a place you’ve always wanted to go but haven’t been yet” with my participation in the summer ds106 experience over at https://thebergerons.wordpress.com/

So here is the Boo Ghost and me as Mama Ghost at an aurora. I’ve always wanted to see an aurora borealis in person, but never have.

The background image of the aurora is by Omar Smith, and licensed CC-BY.

The process

In GIMP, I opened up both the aurora image linked above and an image of me and my son in Australia from September 2012. To cut us out of the original image I used the process described here, which involves using the “paths” tool–something I’ve never done before. In case that page disappears, here are the steps.

 

1. Click on the “paths” tool and go around the parts of the image you want to “cut out.” When you reach the first path marker, be sure to hold down the “control” button when you click that first marker to close the loop (although if I remember correctly, on my Mac the control button didn’t work and I think I had to use the “command” button, but my memory is fuzzy on this).

— Then you can move the anchor points around with the mouse to adjust where they are and adjust what is being outlined, which is nice.

 

2. In the window that has the layers in GIMP (see screenshot below), click on the little white button that looks like it has two sliders. You should be able to there choose “selection from path” (you can’t see it in the screenshot because I’ve already done it and I can’t recreate it…this is just to show the white “slider” button). This creates a selection from the path.

Screen Shot 2014-06-06 at 7.42.10 PM

3. Create an alpha channel–this means to give the image transparency, so when you cut out part of it you don’t get white space but a transparent space so the image underneath it will show through. Go to “layer” on the top menu and choose “transparency,” then “add alpha channel.”

— This step is really important for the part where I had to erase something (see step 5).

 

4. Now you need to cut out the background from what you’ve selected, so you need to invert the selection and cut out that part. Go to “select” on the top menu, then choose “invert.” Then you can just use control-x or command-x (for the Mac) to cut out the background. You should just have the piece you created a path around on a background that looks like a checkerboard (see top layer in screen shot above).

 

5. For mine, I still had part of the original image between myself and my son, between my left arm and his right arm. I needed to get rid of that, so I just used the “eraser” tool and erased it. What was underneath was just transparency, so the aurora image showed through. If I hadn’t added the alpha channel, when I erased part of the image I’d get a white space there.

— I also needed to erase around some of me and my son because there was a bit of the original image around the edges, which looked strange

 

6. I had to scale the layer (top menu: layer->scale layer) to make it a bit smaller, and then move it where I wanted.

 

7. Then the fun began with playing with the colours of the layer with me and my son. I just messed around with Colors->Curves until I got something that looked kind of ghosty. Then I reduced the opacity of that layer (with the slider on the top of the screenshot above) so we were kind of transparent. Finally, I used the “blur” tool to go around the outlines of me and my son so we didn’t have such sharp outlines. It made us blend into the background image a bit more.

 

8. I didn’t collapse the two layers into one (which you could do by right-clicking on the top layer (or control-clicking, on a Mac) and choosing “merge down), but left them separate in case I wanted to adjust the layer with me and my son more. Having it separate means you can adjust colours, etc. on that layer alone.

 

9. I then exported as a jpg and voila…

 

How I got the boo ghost into the GIFaChrome film

image

The past two weeks have been a blur. For the last two weeks of the Headless13 installment of ds106, several of us have been working together on a group project around a fictional camera called GIFaChrome.

How did this come about? While I was utterly swamped with work, I one day noticed a tweet or two referring to blog posts or G+ posts that had to do with something called “GIFaChrome.” Here is a page with a few Storify stories that explain how it all unfolded. The short story is that Rochelle Lockridge came up with the idea of putting an animated gif into a film frame and lots of people added in their ideas from there, including that there should be a camera that takes images and turns them into gifs (I think that was Mariana Funes’ idea). Then came the idea of putting glitched gifs into the frame, and so GLITCHaChrome was born (can’t recall the provenance of that one). John Johnston developed “LayerCake,” which allows for images to move OUT of the frame! There is also GIFaKidChrome, which makes animated gifs from the audio of children’s stories—that one was the product of spontaneous riffing on an image that originally came from a daily create assignment, a spot of riffing I was so sorry to miss but loved watching unfold.

I’ll do another blog post soon reflecting further on this GIFaChrome project and the Headless 13 course as a whole. This post is dedicated to explaining how I did the gif at the top of this post. This was meant to be part of the GIFaChrome story, as a testimonial from a beta tester (see my previous post)

For a daily create earlier in the course we were asked to make an image of another ds106 participant as a ghost. I was trying to do one of someone else when my son heard about what I was doing and insisted he wanted to be in the picture. Thus, he is the ghost.

Making a gif from the original image

Here’s the image I started with, which I made in GIMP. Here’s a link to it on Flickr, in which I explained briefly how I made it. 

image

When I made this image in GIMP I had two separate layers, the one with my son as a ghost and the background forest layer. That made it easy to create a gif out of the image.

Before duplicating layers, I used the “blur” and “smudge” tools around the outside of the ghost layer so it didn’t look quite so “cut out” but more blended into the background a bit.

1. I first duplicated the image of my son as a ghost several times so I could have multiple layers to move around.

2. I wanted the ghost to “glow” a little, so what I did was select a layer, go to Color->Brightness-Contrast and played with the contrast a bit. Then I did the same only a little more for the next layer, and again for the next layer, then I started dialing it down gradually by the same amount for the next few layers so it would pulse a bit.

3. Then I moved each ghost layer a little bit to try to make the movement look smooth and somewhat ghost-like. At first I had the ghost move around in a circle, but my son nixed that: “Ghosts don’t move in circles, mommy. They move up and down.” Okay, so I started over and made it move up and down (and a little bit side to side too, even though that wasn’t what I intended at first). I had to keep making various layers visible and invisible (by clicking the “eye” icon next to them) so I could see how the ghost would move when it cycled through each layer. 

3. In GIMP, if you go to Filters->Animation->Playback you can see what the animated gif will look like. Except that if you just have a bunch of ghost layers and one background layer you’ll just see the ghosts move and then the flash of the background. To see the finished product as it would really look, I had to duplicate the background so I had as many background layers as ghost layers, and put a background layer under each ghost layer.

image

Then I had to control-click on each ghost layer and choose “merge down” so that each ghost layer merged with the background layer under it. Then, when going to Filters->Animation->Playback I could see what it would really look like.

5. The problem was that if I didn’t like the movement and wanted to re-do it, I was unable to do “undo” for enough times to get the layers unmerged. I was able to use “undo” for most of the layers, and then it just wouldn’t go back any further. So I’d have to close the file and start over, which kinda sucked because then I had to re-do the glow again from step 2. Boo.

6. Finally I had a nice looking gif, but the file was too big. So I first used the “crop” tool to crop the image to approximately a square, and then went to Image->Scale image to get it to about 450px x 450px.

Putting the GIFaChrome frame around the gif

Rochelle Lockridge provided a GIFaChrome template on her blog, which I downloaded. It was a photoshop file, but turns out that opened in GIMP just fine.

Here’s what I did to get my gif into the frame.

a. I first opened the GIFaChrome frame template in GIMP, and tried to use File->Open as layers to open up my GIMP xcf file with the gif I had just made. But what it kept doing was opening it up in one of the “layer groups” in the template file, which wasn’t going to work for animation. The screenshot below shows the various layer groups in the template files.

image

I realized I’d have to somehow get these groups into one layer so I could copy that layer and put it above each of the layers in my animated gif. 

b. I discovered how to do this. First, I control-clicked on the top layer in one of the layer groups and chose “Merge layer group,” which put all the parts of the layer group into one layer.

image

That gave me four layers instead of four layer groups. Then I had to get all those layers into one layer so I could duplicate the whole thing easily. I just control-clicked on each layer and chose “merge down” until I had one layer.

c. Then when I did File->Open as layers and opened the GIMP xcf file with my ghost gif in it, it simply opened all those layers onto new layers, not in any layer group. Perfect! 

d. Of course, the frame layer was not the right size for my animated gif layers, so I had to scale the frame layer down so it would fit.

e. I duplicated the frame layer enough times to put one above each gif layer, and then used control-click on each frame layer and chose “merge down” (just as in step 3, above). Voila! I had layers that would animate as a gif just fine. 

On the GIFaChrome website, this gif has sound attached, I think through the way John Johnston explains here. I don’t think I can do this on Tumblr, though maybe through the “html” function it would work. At any rate, it’s his own voice to go along with the image!

Headline Mashup Visual

Vader-JarJar-Selfie
ds106 dailycreate for December 5, 2013: “Create a visual that might accompany one of the mashed up headlines from @twoheadlines.”

The original tweet: https://twitter.com/TwoHeadlines/status/407970369447161856




So this is supposed to be Vader taking a selfie but it’s Jar Jar that appears as his own image instead of Vader, like Vader is actually Jar Jar. Now that I think about it later, though, it just looks like he’s watching Jar Jar on the ipad. D’oh. My idea was a little too complicated to come out well in a visual image. Oh well…it took me long enough to get this done at all I’m not going to go back and fix it now.


The process (in GIMP)


I got the Vader image from the GIF Fight tumblr from August 2013—I had remembered this image from last summer. You can see the cool gifs people made with this image on the GIF Fight tumblr arhive for Aug 2013.

I then got an image of an ipad from Flickr; it took awhile to find one that was in approximately the right angle. Here’s the one I used: “iPad car mount,” by Jan Hammershaug, licensed CC-BY.

Lastly I had to figure out what should be on the ipad screen. I tried to find a good Yoda image that was openly licensed, but no dice. So why not Jar Jar Binks? Here’s the image I used: “Jar Jar Binks at SGTTC2010,” by Parka, licensed CC-BY-SA.

I first put the ipad in Vader’s hand by scaling it to the right size and then selecting around it by going to Select->Float, then Layer->To New Layer to get the ipad onto a new layer. I then deleted the rest of that image with the ipad.

I got Vader’s finger in front of the ipad the same way: I selected around the finger, floated the selection, then put it on a new layer so I could put it in front of the ipad.

Then I selected around the original image that was inside the ipad frame, did Select->Float and then Layer->to new layer to get that image out of the ipad frame. I then deleted the new layer with the image that was originally inside the ipad frame.

Finally, I had to crop the Jar Jar image and scale it so it would be small enough to fit inside the ipad frame.

Now I had layers in this order:

1. finger

2. ipad frame

3. Jar jar

4. the rest of the vader image

But of course, the Jar Jar image wasn’t at the right angle to look like it was actually on the ipad. That’s when I discovered the “perspective” tool in GIMP, which lets you warp a layer so it takes on a new perspective. I played with this a bit, moving various corners various amounts to see what it looked like, until I got the perspective looking pretty good.

I also had to play around with scaling the Jar Jar layer so that it didn’t stick out the sides of the ipad frame but still fit within it. In the end I had to use the paintbrush tool to cover over some parts of the image that were a little too small for the frame and some of the background was showing through. But it works okay.

I’m amazed I got this to look pretty much like I pictured it when I thought of it.

This image is licensed CC-BY-SA: https://creativecommons.org/licenses/by-sa/3.0/

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!

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!

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!