Tag: headless 13

Radio Show Archives

See the Radio Show Archives at the GifAChrome site–we did a good deal of audio for GifAChrome!

GIFaChrome commercial

I also scripted and recorded a commercial with my 6-year-old son for the GIFaChrome camera. I recorded his and my sections separately and then edited them together using Audacity. He never really quite understood what he was talking about when he said his lines, but he was a good sport!

I got the music for this commercial from Kevin McLeod’s free music site, incompetech.com (all music there is licensed CC-BY). The piece I used is called “Friendly Day.”

In addition to these two audio pieces I did for the radio show, I acted as co-host for the GIFaChrome launch with Alan Levine. This was our second time co-hosting a radio show for the Headless 13 ds106, as we also worked together hosting a three-hour show during which we played all the group radio shows for this course. You can find the whole show, broken up into pre- and post-show discussions of each, here.

But back to the GIFaChrome launch. The idea for this radio show was to have a party atmosphere, as if we were broadcasting from a live party during which the camera would officially be launched. Alan Levine has a great summary of the radio show launch and how he managed a number of the audio effects, including the party sounds. Alan had all the audio pieces on his computer and designed the script for the show. The whole show, as well as the various pieces, can be heard from Alan’s post about the show. As usual, I just sat back on the Skype and talked while he handled the technical end of things. But I have learned enough in ds106 by now that I should be able to run a radio show with multiple people on Skype at the same time. It’s not just a straightforward thing, but I just need to try and ask people along the way and eventually I’ll get it to work. Sitting around wishing I could do it is going to get me nowhere.

Afterwards, we had a Headless 13 ds106 radio campfire, in which anyone who wanted to join in could call Alan on Skype and discuss their Headless experience. Alan has an archive of that radio discussion as well. I had to leave partway through, as that day was insanely busy for me, but it was great to be able to reflect on how this whole Headless thing worked, with others.

And speaking of reflecting on the Headless thing, that is what I do in the next post!

GIFaChrome…what the…?

GIFaChrome…what the…?

That’s what I thought when I first saw a tweet leading me to a blog post or G+ post about the GIFaChrome. I had been participating off and on in the “headless 13” edition of ds106 during the Fall of 2013. I’ll be writing another post very soon reflecting on the course as a whole and it’s “headless” nature. Here I want to focus on GIFaChrome.

I was only able to drop in and out of this iteration of ds106, given that I was teaching full time and doing a good deal of service work and research on top of that. It was an insanely busy term. So I missed a few things during the course, though I usually tried to at least look at most of the stuff people were making, even if I didn’t comment on it.

But at one point I felt I had missed something. Rochelle Lockridge was talking about a GIFaChrome camera and 106 film, and I had no clue what was going on. I figured that I blinked and missed the story, and tried hard to look back at G+, Twitter, blog posts to find the missing pieces. Turns out, though, that the story had yet to unfold. It was an idea that was put together through the collaboration of many people, including Rochelle, Mariana Funes, John Johnston and Alan Levine. The story evolved and changed from hour to hour, as people put in new ideas and created new artworks.

Mariana created an animated glitch gif with the new GIFaChrome camera, and John Johnston came up with the GLITCHaChrome camera idea. He also created a nifty little app that makes glitch giffing easy! (linked in the previously-linked post of his). Pretty soon several more glitch gifs popped up and found their way into the GLITCHaChrome frame (such as some by Janet Webster, Vivien Rolfe), including some in our collaborative gif story over at Giffi.us.

At some point around this time the weekly post came out explaining what we’d be doing for the last two weeks of the headless ds106: a final story project.  I knew that even though classes had finished for me by this time, I would still be too busy with marking essays and final exams to put together a whole story on my own. And, as I had volunteered for those last two weeks, the extent of my being “in charge” was to ask the other people who had also volunteered if we should suggest to people that they might do their project in a group. From there, Mariana suggested we work on developing the GIFaChrome story further, and invite anyone who wanted to join in to help. Sounded great to me!

Mariana and Rochelle put together a couple of Storify stories to explain what the GIFaChrome project is, its very short history, so that anyone who wanted to join in could potentially find their way into the project without being too lost. We had a Google Doc where we brainstormed ideas on what to add to the story. We decided to create a GIFaChrome website, a wikipedia page, an Amazon product page, several testimonials from beta testers, commercials, and more. You can see it all by perusing the GIFaChrome page/

We wanted to include a previous riff-a-gif flash mob project that had started as a daily create and turned into a riff on Alice in Wonderland. It became the GIFaKidChrome, thanks to Mariana (at least, I think this was her idea!). And John Johnston came out with another emerging technology, "Layercake," that allows gifs to move out of the frame.

Alan Levine had a pipeline to a mysterious source that was leaking information about GIFaChrome: here is a stolen schematic diagram for the camera, here is an amazing announcement of a breakthrough technology that allows the GIFaChrome to tunnel back into a person’s past when visiting the website, and here is a video by a competitor camera company, Hasselhlof.

Mariana and Rochelle…what didn’t they do for this project?! They made numerous gifs, turned Mariana’s dog Colin into the GIFaChrome mascot (and Vivien Rolfe made a lovely movie poster for Colin’s next movie…see the bottom of that page!), got Jonathan Worth to agree to be a spokesperson for GIFaChrome, sending us an audio testimonial (see the front page of the website), and more I don’t even know about. Rochelle created the GIFaChrome website, and spent who knows how long creating blog posts and pages for all the things that everyone else was creating, more stuff every hour! Mariana put together a board on Pinterest where intrepid reporter Rita Skeeter tried to undermine the GIFaChrome by spreading nasty rumours.

A couple of us had fun with Mozilla’s Xray Goggles that one can use to change web pages. Jess Hobbs made an Amazon product page for the GIFaChrome, and I tried my hand at making a Wikipedia article for it. I learned that you really can’t do much more than delete and paste things into pages with Xray goggles, as it doesn’t allow you to create new sections or radically change the page. I also had trouble with the footnotes (which I couldn’t really fix with the method discussed in this blog post, because every time I saved the page it had a new URL so my footnotes kept getting broken).

I also made a gif that I put into the GIFaChrome film frame, a gif of my son as a ghost—as described here (in which I wrote a testimonial by the “boo ghost” for the GIFaChrome) and here (in which I explain the process of what I did to get the gif into the GIFaChrome film frame). I also recorded audio of my son to go with the gif; the original audio, in which he’s making his oooooo-ooooo-booooo sound is on the first post linked in this paragraph, and for an audio testimonial I interviewed him and Rochelle Lockridge artfully edited the interview to come up with the audio you can hear here. 

I did a few other audio works for our radio show product launch, and I’ll discuss those in a separate post.

Read more

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!

Read more

This is a guest post by the boy ghost in the image above, who…

This is a guest post by the boy ghost in the image above, who has chosen to remain anonymous.

I am so thrilled about my beta test of the GIFaChrome camera! I was able to get a version of the camera from my friend Ina, and she kindly agreed to take an image of me that shows my real nature. If you hover over the right side of the image above you can see an arrow pointing to the old image Ina took of me, a boring old still image. It does me no justice, as you can tell when comparing it to my GIFaChrome image. Whoever heard of a ghost that doesn’t glow and move?

This camera is so easy to use: all you do is point and click and a beautiful animated gif appears. It’s like magic! You don’t even have to have full material substance to work the thing, as I have been able to play around with it myself (though I still need practice, and this pic by Ina is the best image so far). 

The only thing that is missing from the GAC image is my lovely “booooooo-oooooooo-oooooo” sound that I tend to make when floating in this way. But those people over at GIFaChrome are so clever, I expect this will be available in a software update soon!

The GIFaChrome launches December 13, 2013. To pre-order yours, go to the GIFaChrome website!

Here is my ooooooo-oooooooo-booooo sound, just so you know what a lovely voice I have!

Read more

#ds106 Design Safari

Week 6 of the Headless ds106 course is about design. When I did ds106 in May/June of 2013, for the “ds106zone” edition of the course, I ended up pretty much skipping design week. Well, I did one assignment during that week, which I really struggled with. I didn’t do many of the suggested readings or watch suggested videos. I just wasn’t that into it.

Why? I think I have some kind of mental block when it comes to design, and I believe it has mostly to do with lack of confidence. I feared, when I started ds106 earlier this year, that I just wasn’t very creative and thus would suck at doing this stuff. That turned out to be totally false (as I kinda guessed it would), but somehow I still have that sense with design. It’s even more deeply ingrained for some reason that I just don’t get it and maybe never will. Okay, that’s also complete bullshit and I need to get over it.

So this week I decided I would spend as much time as I could (which admittedly isn’t very much right now) doing readings on various design principles—here is the document I was working from. I decided also to do the “design safari” (see the above link for the week 6 announcement). The idea is to take photos of various objects that illustrate four of the design principles discussed for this week (either as examples of good design, or bad).

I found this activity really, really fun and informative. It helped me understand the design principles much better than I did just by reading about them. Here’s what I managed to do.

Color

I have to admit this was the part of the design document linked above that I had the hardest time with. I kind of understand the idea of the colour wheel, and the differences between hue, saturation, value, chroma, but I found it difficult to determine just what might make for a good use of colour versus a bad one.

This post was helpful—it pointed out that colour can be used to group related things, such as how “repeating colors on elements like page headings gives an immediate visual cue that those headings are related.” The post also noted that “a small dose of color that contrasts with your main color will draw attention.” I’ve been doing this already, in my slides for lectures/presentations—drawing attention to the main points by using a contrasting/bold colour next to otherwise grey or black text.

So I challenged myself to try to find things that could exemplify a good (or bad) use of colour.

I found a new building on the University of British Columbia campus that had some fairly striking colour (well, at least, compared with most of the buildings on campus).

image

 https://secure.flickr.com/photos/clhendricksbc/10220221885/

There’s a good deal of construction going on around this building, thus the mess in front of the building. I think this building really stands out in contrast to those next to it, which are shades of grey (as is the sky, which is unfortunately a common look to the sky here in Vancouver, BC).

Here’s a bright yellow staircase inside the same building.

image

 https://secure.flickr.com/photos/clhendricksbc/10220340543/

As I was looking at this building, I was struck by how much I was thinking of such bright colours being connected to children. Maybe it’s because I have a 6-year-old, and most of his toys are really brightly coloured. Why are bright colours so prevalent amongst children’s toys and environments designed for children, but less so for other environments or objects? Or maybe it’s just the sorts of things I come across in my life that don’t have bright colours. And my own preference is for more muted colours, in my own wardrobe and indoor environment.

Perhaps unsurprisingly (?) This building is an “art centre” of some sort (not sure what exactly it is). But one of the new buildings of the Business school on campus also has some pretty bright colours, so maybe the fact that this building has to do with art makes little difference.

Is this a good use of colour? Honestly, I have no idea. Are the colours used complementary in some way? Should they be? Why are these particular colours used, and why are some colours on top of others—what guided that choice? No clue. All I can go by is what seems pleasing to me, and I do like this one. I think the contrast of the colour and the dark-ish glass is nice, and the colours are spaced in a way that seems balanced.

Here’s another example of colour, but one that also connects, to some extent, with the form/function relationship.

image

https://secure.flickr.com/photos/clhendricksbc/10220342543/

Sustainability is a big theme on the UBC campus, and this is one of the new bins one sees around campus, suggesting that we “sort” what we’re throwing away (in some buildings, and more and more as time goes by, there is also a place for compostable items).

I felt that the use of colour for this wasn’t terribly effective. The blue really stands out, which is fine—it’s for sorting paper in order for it to be recycled. The black is for trash, that which cannot be recycled or composted. Interestingly, there is no indication of that on the bin—it just says “stop: can’t you recycle that?” Okay, I guess most people can figure that out, and black does kind of fit the “not as good as the other stuff” category, or the “don’t put stuff here” category (consider whether it can be recycled).

But the grey I don’t think works. It is for “recyclable containers”—bottles, cans, plastic containers. But it just fades into the background. It seems like something I should ignore. I think it’s a poor choice for this “sort it out” campaign, as I don’t really pay attention to what’s in grey. Not a big deal, but I think another colour may have been more effective.

I spent last year in Melbourne, Australia, and I thought they had an effective way of using colour to distinguish rubbish bins from recycling bins. Rubbish bins in parks, building, even in our apartment, were green, while recycling bins in the same places were always yellow (or rather, had yellow lids). Okay, Australia has yellow and green as national colours, so it makes sense, but the continuity was really helpful too. One wouldn’t have to think too much when tossing stuff, because the colour signalled where to put things right away.

Balance

According to this article, "Balance is an equilibrium that results from looking at images and judging them against our ideas of physical structure (such as mass, gravity or the sides of a page). It is the arrangement of the objects in a given design as it relates to their visual weight within a composition." The article was really helpful in explaining the idea of balance, both symmetrical and asymmetrical, with simple graphics.

According to the article, “Symmetrical balance occurs when the weight of a composition is evenly distributed around a central vertical or horizontal axis. Under normal circumstances it assumes identical forms on both sides of the axis. When symmetry occurs with similar, but not identical, forms it is called approximate symmetry.”

Here’s an example of “approximate” symmetrical balance. It has such balance on the horizontal axis, with the male and female figures, as well as on the vertical axis, with the “R” beginning both words.

image

https://secure.flickr.com/photos/clhendricksbc/10220090194/

There is also “radial symmetry,” in which elements are arranged equally around a central point, such as here, in the UBC Museum of Anthropology logo:

image

Of course, on their website (from which this screenshot was taken), they cut off two of the radially symmetrical forms in the middle, which is actually a kind of symmetry itself.

This poster may exemplify asymmetrical balance—it approximates radial symmetry, but departs from it at the top left. (Sorry—photo not in focus!)

image

https://secure.flickr.com/photos/clhendricksbc/10220089164/

I prefer this kind of asymmetry to one in which the circles would be perfectly symmetrically arranged around the middle blue one—that would be less interesting. Is it balanced, though? The article linked above states that “involves the arranging of objects of differing size in a composition such that they balance one another with their respective visual weights.” The two top circles are not balanced by anything else in the image. Somehow this doesn’t bother me in the design, though. Maybe balance doesn’t always need to be achieved?

Colour stands out here too, of course. Several of the colours are pretty close (red, orange, pinkish), which makes the green and blue stand out. I don’t think there is any particular reason for those icons to stand out in this poster, given what it’s for, but it does show how contrasting colours do draw attention.

Minimalist design

I’m not certain exactly what makes a design minimalist, except that it has very few elements and tries to distill meaning or a message down into a kind of small package (for lack of a better way of putting it at the moment). I had a hard time finding minimalism as I was walking around the city and the campus, but I think this would count.

image

https://secure.flickr.com/photos/clhendricksbc/10220228395/

You see these flags all around various cities these days, including Vancouver, marking particular neighbourhoods. This is the most minimalist set of such flags I’ve seen. They all had just one simple image on them, along with “Cambie Village” in a circle. 

The main problem I found with this is that I couldn’t for the life of me figure out why there’s a picture of a watermelon as being somehow connected to this neighbourhood. Is this a place to get fresh fruit? To spend a nice sunny day in the summer? I have no clue, and in that sense I think this design is not as good as it might be. I wish I could remember what some of the other images were, but alas.

Here’s another minimalist design.

image

https://secure.flickr.com/photos/clhendricksbc/10220140824/

Quite distilled down, definitely. Though I’m not sure why there are arrows going to the left. Maybe pointing to the copy at the bottom left? Maybe having to do with “Go” in the “GoWiFi” tagline? But the “it’s here” works well, I think: meaning, (1) it’s arrived, and (2) you can find it here, there, and lots of other places.

Rhythm

I got this one wrong when I was first walking around taking photos. I was thinking it was just design elements that indicated movement and flow. But according to this site, “Rhythm is the repetition or alternation of elements, often with defined intervals between them. Rhythm can create a sense of movement, and can establish pattern and texture.” Oops. Got the movement part right, but not the repetition part, when I took the following picture.

image

https://secure.flickr.com/photos/clhendricksbc/10220248766/

Not the best shot, because the “wave” on the glass of this bus shelter gets kind of lost with the street behind it. Still, I thought it gave a sense of movement, and maybe even rhythm, but I didn’t remember the idea of repetition.

But hang on, look at the bench from the side.

image

https://secure.flickr.com/photos/clhendricksbc/10220247576/

Rather a similar movement, I thought. I wasn’t taking this one because I was thinking of repetition, but because I noticed that the bench had a similar kind of wave form. But hey, it’s a type of repetition, right? Wall and bench of the same bush shelter?

Typography

My favourite suggested resource from design week was this page, which is about typography for lawyers, but really has lots of useful information about typography itself and various font examples, for anyone.

Still, while out walking around, I didn’t find many great typography examples (or even bad ones)…just ones that didn’t stand out much one way or another. Of course, I could have gone looking on the web, but I wanted to do this assignment outside mostly because I spend way too much time on my computer anyway.

There is a new Student Union Building being built on the UBC campus, and while that’s happening the old one is still open and (mostly) fully functional. There’s quite a campaign going on to let people know that, and it has retro feel, supposedly because it’s the “old” SUB (I’m guessing here). 

Here’s a sign that uses a font reminiscent of retro “we are open” signs, at least so far as I remember.

image

https://secure.flickr.com/photos/clhendricksbc/10220339563/

And the font for “Last Call” on this sign is suitably retro as well. It is very much familiar to me, but I can’t place it. I mean, it seems to have the right feel, but I’m not sure why, where I’ve seen it before.

image

https://secure.flickr.com/photos/clhendricksbc/10220087634/

A number of these signs, like this one, are posted on the barriers around the construction site. The new not yet here, the old still beckoning.

Well, that’s certainly plenty for one design safari. It took me over a week to finish this blog post, and probably it’s far too long for anyone to read through the whole thing. 

This was an excellent way to learn some design principles, and I’m so glad I took the time to do it this time around.

Read more

Ahhhhhh! The hand! The hand!

Ahhhhhh! The hand! The hand!

This is for August Animated GIF challenge #10: Monster Chiller Horror Theatre 3D style GIF. It is also a new animated GIF assignment on ds106. The idea is to find a 3D style movie scene and somehow

find your own way to emphasize the moving of a thing out of the screen and into your face in a GIF.

I found this scene from a 3D Dracula movie trailer on YouTube.

I wanted to try to emphasize the hand moving out of the screen somehow, and came up with the idea of selectively colourizing it. I discovered that if I selected the hand with the lasso, or free select tool, and then inverted the selection (so everything but the hand was selected), then I could go to Colors -> Desaturate, and it would make what was selected b/w (everything but the hand) but not what was unselected (the hand).

I did a few layers that way, but then realized that what would be really cool is if it started off in full colour and gradually went to b/w except for the hand…like the hand was really coming out at you while the background was fading into, well, the background.

So for the layers that would be first in the gif, I kept the first two full colour, and then gradually desaturated the next few: 20%, 40%, 60%, 80%, then one at 90% b/c I wanted another step there. How I did this was to free select around the hand, invert the selection, then use Colors -> Hue-Saturation, and chose the amount of desaturation for each layer. Then the last layers of the gif were full desaturation.

What took the longest, of course, was doing the lasso/free select tool around the hand on each layer. There were a couple of layers where the hand didn’t move very much, so I could keep the selection from one layer and use that for the next layer too, for desaturation purposes. But for most of the layers (12 total, 10 desaturated to some degree) I had to do a new free select around the hand each time.

I actually started off with twice as many layers as I ended up with, and deleted every other layer to end up with half as many. That saved a lot of time, and made the gif file smaller. Desaturating most of the image made the gif file smaller too.

I realized too late that I wanted to have more of the full colour and gradual desaturation layers, so the desaturation was more gradual. But I’d have to re-do all the free selecting to change the saturation level on any of the layers. So instead I just slowed down the first few layers by putting the time in milliseconds I wanted them to last after the layer name (e.g., “full colour (300 ms)”). Then when I exported as a GIF, I chose something like 200 ms for all the layers that weren’t otherwise specified for length. The first few layers go a bit slower than the last ones that way. It’s not quite the effect I wanted, but it’s close. If I were to do it over again I’d have more full colour layers, and do the desaturation more gradually, over more layers, with just a couple at the end fully desaturated.

Finally, I used a new trick I learned from Alan Levine’s comment on my last post, as well as Talky Tina’s reply on Twitter: dithering. When I was done with the layers, I went to Image -> Mode -> Indexed (because GIFs get indexed when exported anyway), and chose the fullest number of possible colours (256 for a GIF) and clicked the check box for dithering. I played around with several dithering options, and just used the first, which is called “Floyd-Steinberg (normal).” And I didn’t get the colour banding I’ve been getting on my other GIFs! Sure, the quality isn’t perfect, but it’s an animated GIF, after all.

I had a lot of fun with this one, even if it took me awhile to finish because of the hand lassoing of most of the layers!

And I think my favourite part is that—ha ha!—Dracula never gets to grab the woman. He keeps trying and trying and he never does it. A nice twist on the fact that these horror creatures continually attack women. Not this time. In your FACE Dracula!

Read more

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!

Read more

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!