GIFestivus2012 – Page 2 – Assignment Bank

Rolling Rick St. Nick

View Assignment Details

This contribution for GIFestivus2012 belongs in the category of Animated GIF Assignment 859: Riff A GIF.

This one truly did fall into place quickly — the idea came as soon as I saw Giulia‘s recent post, “Never Gonna GIF You Up,” for HB. This is the seasonal Riff on her GIF to accompany her original.

I quickly chased down some found Santa hats on the net, did a bit of work with the Magic Wand Tool and the eraser to remove the background around the hats and then scaled them to suit each image.

The shadow Rick in the lower left took the longest, as I had to make four different hat shadows — I just took a clipping of the head area and used the Clone Stamp Tool to extend the shadow texture into a hat shape. The eraser made it easy to edit, and I wound up removing most of the non-shadow part of the replacement so that it would just sit over the original head and leave room for the hands to do their thing.

I guess it goes without saying that Giulia’s post Rick-rolled my brain, as I had that song circulating as an ear-worm while I was working on this. Hopefully the next GIF will let me give up the tune and move on to another one.

The three Santa Hat GIFs above may come in handy to you. Please feel free to use them — they have a transparent background, so you just need to resize and apply as needed.

View Assignment Details

Waiting for “Waiting for Groomot”

View Assignment Details

This post contains a link to my GIFestivus2012 submission for Ben Rimes’ “Hurry Up and Wait” Animated GIF Assignment 864. As soon as I read the description of his assignment, I knew I couldn’t wait to do it.

However, completing the GIF turned out to be an exercise in waiting.

Getting the GIF out of Photoshop turned out to be a bit of a pain. All told, the .psd file had 298 frames, made up of 39 layers — although a lot of most of the layers are primarily transparent. Photoshop kept giving me this bothersome (and very OLD looking!) error message whenever I tried to make the GIF via the Save for Web menu item.

I also saw some familiar, old-fashioned Mac wait-icons and behaviours during the failed export, making me think that Adobe STILL hasn’t got all of their code fully up to date. While the export continued to fail, it DID give me some new material that I decided to capture and add to my GIF. So there was that.

A bit of web research led to some web Q/A discussions where others ran into the same kind of GIF export limitations in Photoshop, likely due to the number of frames. The suggested solution was to split the photoshop file into two (or more) pieces — deleting the second half of the frames from the first file copy, say, and then deleting the first half of the frames from the second copy), do the partial Save for Web from each piece, and then reassemble them using an actual GIF editor. Seems simple enough.

All I needed was an actual GIF editor.

The ancient yet reigning Mac GIF editor GIF Builder only runs on Power PC or Rosetta-supporting Macs, and I’ve long since said goodbye to those old ways. I guess I could have downloaded it and booted up an older PPC Mac into an earlier version of Max OS X to run it, but that seemed like a lot of extra work, and wouldn’t give me a solution I could take forward into the future. Like if I run into it again tomorrow.

I remember GIF Builder from the mid-to-late nineties, when I was coding web pages using Macromedia’s Cold Fusion and tastefully added simple GIF animations to highlight important points. Ah, the old memories of OS 7, and 8, and 9 come flooding back…

Continuing the search, Ulead GIF Animator seemed to top the results on the web charts. However, Ulead has been purchased by Corel, and their GIF Animator software seems to have been absorbed invisibly into the collective. Nuts. A PC version was available, but for that I’d have to get a Parallels disk image set up. In the Age of the Cloud, I’ve stopped running PC software. I then downloaded something called ImageOptim from another location, as it showed up in my search — but, as the name would suggest, it simply optimizes images — including GIFs, – but doesn’t let you edit them.

Then, I lucked out and came across giftedmotion-1.20 – actually a Java executable, distributed as a .jar file – and it loaded up the two halves of my intended GIF and then spat them back out as one. It took a while (and gave me yet another version of a wait icon!) but finally my GIF was done. GiftedMotion provides a simple interface for ordering images, setting timings, and exporting to a GIF file. It nicely recognizes the frames in a previously existing imported GIF.

As I started to compose this post, I finally needed to confront the reality that the GIF was over 900 pixels wide. Fine, if I post without sidebars, etc — but the simple theme that I’ve been using for this blog includes wide margins/sidebars on both sides. Rather than continuing to live within this originally temporary (and plain, yes?) theme, I’ve decided to switch de•tri•tus over to the Gantry Framework/Theme from RocketTheme that I tend to use for other sites that I administer. It’s nicely customizable, and will provide all the flexibility that I’m likely to need for this blog. It’s about time that I put a little effort into the design of this space, anyway.

~~So I’ll sort that out now.~~

Actually, it appears that I can display the full GIF on it’s own page if I link to the Attachment Page. Not sure if this is something newer in this theme or in WordPress 3.5, perhaps easier to navigate to? At any rate, without changing the theme, I can let you see “Waiting for Groomot” now.

~~View “Waiting for Groomot.”~~ EVEN BETTER, just view the GIF directly at full resolution.

Be sure to watch until the end. You’ll know when it arrives.

View Assignment Details

Multi Frame GIF Story: Beaker’s Hair

View Assignment Details

The ds106 Digital Storytelling GIFfest (known as GIFestivus2012 around here) continues, this time with a two-fer. As well as providing another submission for the Animated GIF Assignment 856: Muppet GIF assignment, it’s also going to reflect a new Animated GIF Assignment 880: Multi-Frame GIF Story.

Thanks to Jim Groom for pointing me at the multi-framed GIF story idea. It seems like an excellent way to highlight important themes or details within a longer narrative, like a movie (hint, hint). But it also tells a nice visual story here from this short muppet clip.

I’ve always wondered what Beaker did to get his hair like that.

Some thoughts, just as I finish finagling these six GIFs into a nice table so they can be viewed in tandem.

I didn’t know that you could get electric metronomes. I guess you maybe need them for really, really long songs.
The fifth panel was made using a small number of sporadic frames that existed as the lights shorted out now and then in the original clip. I thought it would be neat to envision how this might look with a longer sequence of darkness. The big plume in the upper left was the result of a little photoshop editing.
I wonder how this might be different if I applied the “less is more” approach, say three or four key frames per GIF. Hmmm. Maybe I’ll revisit this when I’m out of other ideas for GIFestivus2012.

Neat, eh? Now I want to do this with a movie. I wonder which one I’ll try? Hmmmmm.

View Assignment Details

Pöpcørn, anyone?

View Assignment Details

The Swedish Chef has always been one of my favourite Muppet characters, and so when MBS (@mbransons) posted Animated GIF Assignment 856: Muppet GIFs, I was quick to start with The Chef.

This source video is posted on YouTube by MuppetsStudio. In it, the Chef seems to be making both popcorn shrimp (?), and regular popcorn, all to the tune of that pre-MOOC Disco 1972 song Popcorn by Hot Butter.

My copy of MPEG StreamClip wouldn’t download the video (it might be an issue with Mountain Lion and AppleMPEG2Codec.component, although it seems to be present in the Library/Quicktime/ directory), and neither would my free copy of the Fastest Free YouTube Downloader. Nuts. However, a quick search of the web produced MacX YouTube Downloader, and that did the trick just fine.

Choosing which segment of the clip to animate was difficult. There were two or three points where I thought I might be able to get a good, close-to-seamless loop, but in the end, I opted for a number of different selections. You might want to tell me which one works best for you.

The first GIF: Drumming on the Counter

Drumming on the Counter, interval of 0.1 sec per frame

The second GIF: The Big Dance

The Chef’s BIG Dance (1.8 MB)

The third GIF: Fingers Up

Swedish Chef Fingers Up dance segment

The fourth GIF: Fingers Up Shortened

Swedish Chef, Fingers Up dance segment (short)

Maybe these are too close to video captures and too far from the cinematic / moving still style, but I think they capture the spirit and energy of the Swedish Chef. I tweaked the timing of the last two GIFs — they were going really fast, so I set the interval to 0.1 seconds per frame, and they view better now in Safari.

From where I am sitting right now, however, I can see the Chef sharpening up his knife for Cårven Der Pümpkîn. Perhaps I’ll post another one of these shortly.

Bork, bork, bork.

View Assignment Details

GIF the ds106

View Assignment Details

Last night as I was reviewing my process for making animated GIFs using Photoshop, I ran out of time and had to stop in mid-project. While I was happy with the basic GIF (CogDog has used it as the basis for a new assignment called GIF Me Again About My Eyes), I had bigger plans for the Saint’s halo. And so began the editing.

The Saint, with Halo, from "The Wonderful War"

Where I got to last night … before sleep time …

First, I wanted to use the halo has part of text within the GIF. But I found that the orientation of the existing halo was odd. Also, the halo was static within the sequence of images, and I wanted it to appear — like it does just earlier in the credit sequence. So I had to remove the existing halo. This turned out to be quite a simple task once I sorted out the correct tool for the job — a few applications of the Spot Healing Brush Tool with a nice large diameter did the trick. Suddenly, Simon had no halo. I spent a bit of time trying to apply this cleaned up layer to all the other layers using a mask, but I need to do some more research into that. So in the end, a simple rectangle copy, duplicate, and merge with each of the existing layers did the trick. Then, back to frames.

Simon has lost his halo …

I had already sorted out a font and a number of transformations that would let me replicate the halo (albeit with a better orientation) and the other necessary letters, and a bit of exploration resulted in a nice outer glow effect to mimic the original. By gradually increasing the opacity of the halo, it appears and disappears as Simon looks up and down. I had to do this one two times, as somewhere along the way in the first attempt, I lost the glow effect on the halo in some frames, and it looked really wonky. I got it right the second time, and then adjusted the opacity to allow the halo to gradually appear. But here’s the wonky one.

First attempt, some halos lost their glow …

My response to the pulsing halo and glance up and down suggested that I wanted the halo to appear more gradually (so I changed the opacity — larger increments, fewer frames), and spent a considerable amount of time fiddling with the timing intervals. It would appear that some browsers render the time increments differently that others. My original from last night just seems to rip along now (at least the copy embedded on the ds106 site) — way too fast. I wanted the halo to remain distinct and attached to the original image, but also I wanted the additional text to appear, augmenting the halo to produce the final result. I’ve intentionally used slightly different opacities in the image that displays the full “ds106″ code – but all of this was generated from the same font, with f/x, rotations, and both vertical and horizontal stretching.

The Saint, with his ds106 halo

And so here you have it, AnimatedGIFAssignment869: “GIF the ds106″ — a new assignment for your enjoyment, contemplation, and creativity — and just in time for GIFestivus. All you need to do is somehow incorporate the ds106 course code into an animated GIF. But try to make it natural, and make use of something already in the image. Remember, ds106 is everywhere!

Next up, the Swedish Chef.