Tag Archives: animatedGIF

He’s a Maniac! And He’s Dancing Like He’s Never Danced Before

I must have been blind when I took this photo at the recent Apple Store Markville opening (slideshow). I didn’t notice @jimgroom doing a dance-webcast (a popular Apple Store pastime for teens at one time) off to the side until I got home and developed my memory card.

"Jim Groom at the Apple Store" animated GIF by aforgrave

“Jim Groom at the Apple Store” animated GIF by aforgrave

You can clearly see the MacBook open on the counter in front of him, and Jim dancing in glorious ds106 abandon.

Shared in response to @iamTalkyTina‘s August 2013 Animated GIF Challenge #2: based on @johnjohnston‘s Animated GIF Assignment 1001: Dancing Jim All Over the World.

Such a fun guy! Go, Jim, go!


Jim Groom, Upgraded

(August 3rd)

Well. So this morning’s Twitter brought a little snippet of information that adds a nice feature to projects like this. John Johnston (@johnjohnston, on Twitter) (over the sea) has a technique of attaching an audio file to his animated GIFs that he documented this morning in response to this dancing Jim Groom assignment. And given that Christina commented that Jim was dancing to music that only he could hear, it seems only fitting that I add the music that Jim must certainly have been listening to as an experiment in applying John’s technique.

While I was at it, I edited the Photoshop file in two ways to produce a GIF upgrade to my original from yesterday

  1. I used the eraser tool to remove some of the residual black outline that existed around Jim in the template GIF — it was making Jim look a little bit pixel-ly and unnatural, stopping him from completely fitting into the resolution of the photo.
  2. I stepped up the speed of Jim’s dancing by decreasing the frame interval — but I also introduced a couple of hiccup’s into his movement, to make it seem a bit more manic.

As a result, here is the newly modified GIF, complete with click-on-the-GIF code to start and stop Jim’s dancing music.

"Jim Groom at the Apple Store (upgraded)" animated GIF by aforgrave

“Jim Groom at the Apple Store (upgraded)” animated GIF by aforgrave (click GIF for music)

The original MIDI file, “She’s a Maniac” was sourced from MIDI Files S-Z.

Scaling Multiple Layers using The GNU Image Manipulation Program

There was a brief time when I switched hard drives (I’m thinking it was sometime during the late summer/early fall of 2012) when I poked around using GIMP to try to understand Animated GIFs because I didn’t have ready access to my Adobe Photoshop and there were some ds106 tutorials about GIFfing with GIMP.  While I did make some limited progress with GIMP, I was still trying to understand the rudimentary aspects of making GIFs at the time, and so I didn’t have any good experience with which to extend my understanding of GIMP.

Fast forward a little bit, and I got my Photoshop installed, and I started poking around learning how to make GIFs using Photoshop, which is similar, but different. Getting my head wrapped around how Layers worked in conjunction with Frames in a Frame Animation within Photoshop took a while (and was the reason My New DS106 Shirt is Here GIF has languished — still) and really only came as I concurrently came to understand masking and reducing GIF file sizes. All told, it was quite a journey, characterized by progress, yes, but also reflecting many unfinished GIFs, and many, many pieces of GIFbits littering my hard drives.

And along the way — primarly resulting from GIFestivus2012 which started around December 1st and ran for over a month and a half — I developed a very bad case of GIF-Eye-tis.  I still have it. It is a most beautiful affliction.

At any rate, I have much learning to document. Most of it is with Photoshop, but the concepts and techniques should be replicable with GIMP, and I am going to undertake to sort out some of them.

So, let’s say you have a series of images that animate nicely, like the ones that make up this GIF, “Red Alert,” from The Twilight Zone episode, Monsters Are Due on Maple Street.

Red Alert 5

“Red Alert” animated GIF, by aforgrave, from “Monsters are Due On Maple Street”

Viewed in GIMP, the GIF is composed of 8 layers with a canvas size of 600 pixels width and 448 pixels height (I’ve scaled the image shown above back by 50%, but the original dimensions are as given.)

Fig 2: Red Alert GIF, 8 layers in GIMP

Fig 2: Red Alert GIF, 8 layers in GIMP

Perhaps you want to fit the GIF layers into — oh, I don’t know — a ds106zone Scene template card, which has a canvas size of 1128 pixels width and 752 pixels height. (Of course, the transparent window on the card is a bit smaller than that. but the point is we want to re-size ALL of the Red Alert GIF layers simultaneously and identically, so the animation remains.

Now, GIMP doesn’t appear to let you select more than one layer at a time (please correct me if I’m missing something). Changing them all, 0ne by one — and identically — is a labourious and involved process. I know, because I initially did that in Photoshop, and decided that there just had to be a better way. And as it would turn out, a similar solution exists for both Photoshop and GIMP.

The answer is collecting the layers into a Layer Group.

In GIMP, do the following:

  1. You need to use the Layers >> New Layer Group to create a group for your animation files.
  2. In the layers palette, drag the associated layers that animate together into the layer group you have created. They should appear within the Layer Group (it has a folder icon), displaying with an indent to show they are within the folder. Make sure you get them all in, and in their original order. I tried selecting multiple layers to move at once but had no luck with that, so it may not be possible. But get them all into the layer group folder.
  3. Once they are in the layer group folder. select that layer group within the layers palette so that you can change the group (and thus all the layers within it simultaneously)
  4. Now, use Tools >> Transform Tools >> Scale to bring up the resize handles on the group, as well as a Scale dialogue. Note that there is a link-unlink icon to the right of the dimensions in the Scale dialogue. If you have it set to link, then the scaling will maintain the aspect ratio which will keep your image looking proportionate.
  5. Once you have the group scaled appropriately, press the return key to apply the transformation.

Note that you can apply other transformations to all of the layers in a group — rotate, flip, etc.  The key is to group all of the layers within a layer group and then apply the transformation.


GIFestivus 2012: Is the Learning Fun Over?

Wow! Has GIFestivus2012 been a blast, or what?

As I write this (originally dated January 18, 2013, but only published July 8th, 2013), I have something on the order of 14 posts on de•tri•tis that are tagged with GIFestivus2012 and couple of those have several GIFs on them, putting me at about 20 completed and posted GIFS. (As I scan through my Animated GIFs work folder, I see another 12 11 10-odd GIF endeavours in various stages of completion (3 or 4 of them are multiple GIF projects), and I must be sure to include two other projects that have been waiting on some improved skillz for quite some time — my summer 2012 Bladerunner GIFs, and my secret-project my ds106 t-shirt has arrived GIF.* Their completion is now assured. (AddedJuly 2013:  well, maybe not as quickly as I had thought when I first drafted but didn’t post this in January 2013)

Much of my learning has come through brute force experimentation within Photoshop, with a few instances when it became clear I had a specific question that needed clarification via some kind of YouTube tutorial. Google and YouTube are nothing short of marvellous at helping answer “how to” questions these days, once you understand your question well enough to ask it properly. I found that frequently a full sentence question in the safari/google search revealed the same question — previously asked — and already answered.

The two big questions that I really needed to dig into were:

  • the relationship between the layers and the frames (that took quite a while to sort out by playing around)
  • how to make layer masks (I’d watched Jim’s GIMP tutorial, but couldn’t find the right commands in Photoshop. Eventually, I located them with the help of a video — and the process was virtually identical to Jim’s.)

Many, but not all, of my GIFs have started as clips from video. The tutorial about MPEG StreamClip and Photoshop was really helpful with that.  Some of my GIFS have far too many frames or too much overall movement to fit into the  Cinemagraph/Cinematic GIF category. However, in general, I’ve been pleased with what I’ve learned along the way, and the resulting products.

  • The other “big thing” that I’ve been working on is developing an eye for seeing things that are truly GIF-able.

This aspect of GIFestivus2012 has been a wonderful learning experience. And it has been that — experience. I very much enjoy the “AHA” feeling that comes now when I suddenly see something and say — that needs to be a GIF!  Diane Bedard’s (@Windsori) Feral Cat sequence last week was such an example. It was a lot of work to accomplish (lots of good learning in a difficult animated GIF), but very rewarding. (In the end, I really had to cheat on the last frame. Can you tell?) 

In terms of “selecting” things to GIF, that was informed in a big way by seeing the kinds of wonderful GIFs folks in the ds106 community have been doing over the past two years. When I think back to the original incarnation of ds106 as an Open Online Course (an OOC, how’s that? Jim? Alan? ), I remember the pre-christmas excitement that I observed as folks started making animated GIFs, even before the official start of the class. There was a kind of manic energy there. That, coupled with the birth of ds106radio early in the course, are two significant formative memories from my initial involvement, limited in participation, but informed by observation when I had time.  The other key source of motivation was the wonderful collection of cinematic GIFS on IWDRM: If We Don’t, Remember Me

As for my question in the title — Is the Learning Fun Over?  — my answer, a resounding NOT YET!!

  •  In Part II, I’m reflecting on key variables I’ve come to better understand that influence the quality of an animated GIF
  • In Part III, I’m going to tell my story of the evolution of techniques I’ve learned that help me to minimize the file size.

As for your GIFestivus/GIFest/GIFmas — Are there “big questions” or “big learnings” that you’ve come away with over the past few weeks?

(Again, this post was originally drafted a couple weeks after the unofficial “end” of the December 2012 GIFfest / GIFestivus / 12 Days of GIFestivus, but has languished, unpublished, for close to six months. I’m posting it now — and calling out myself to write Part II and Part III in response to some recent questions about making animated GIFs. Although I’ve stopped tagging my GIFs with GIFestivus2012, I have not (by a long shot) stopped making the durn things. I may post a Part IV before doing II and III, as I already have a post underway, about this affliction I have developed, called GIF-Eye-Tis. Perhaps you, too, have become afflicted?)

It’s A Good Life: Trading Cards

Brian Bennett (@bennettscience) beat me to the punch this evening by posting a ds106zone The Twilight Zone trading card of Mr. Hollis from The Twilight Zone episode “It’s a Good Life.”  While I had started working on GIFs from the episode a couple weeks back (originally thinking of doing a multi-panel GIF, either synchronized or sequenced), it was after I had initially posted my original static trading cards (and then GIFfed the Katatmit) that I decided to put this episode into Trading Cards, and completed my first two, that of Mr. & Mrs. Freemont, and the Mr. Hollis Jack-in-the-Box shadow (below).

This evening when Brian posted his Mr. Hollis head trading Card, I decided it was a good opportunity to complete a couple more and add mine to complement his.

Here, then, are four animated Character Trading Cards from the Season 3, Episode 8 entry, “It’s a Good Life.”   I have posted static jpeg versions to the Flickr group for inclusion in the Gallery.  (Animated GIFs can get easily borked when posted to Flickr.)

"Anthony" animated GIF Trading Card by aforgrave

“Anthony” animated GIF Trading Card by aforgrave

"Mr. & Mrs. Freemont" animated GIF Trading Card by aforgrave

“Mr. & Mrs. Freemont” animated GIF by aforgrave

"Mr. Hollis Jack-in-the-Box" animated GIF Trading Card by aforgrave

“Mr. Hollis Shadow Jack” animated GIF by aforgrave


"Mrs. Hollis" animated GIF by aforgrave

“Mrs. Hollis” animated GIF by aforgrave

The Next Morning: In the end, after a good night’s sleep, I just couldn’t leave an animated Mr. Hollis Bobblehead unposted, and so here it is:
"Bobblehead" animated GIF, by aforgrave from "It's a Good Life"

“Bobblehead” animated GIF, by aforgrave from “It’s a Good Life”


10 Animated Candles for WordPress

Today is the day that WordPress is celebrating its 10th Anniversary. In honour of this occasion, I have prepared a celebratory birthday card.

"10 Animated Candles for WordPress" animated GIF by aforgrave, CC BY-NC-SA 3.0

“10 Animated Candles for WordPress” animated GIF by aforgrave, CC BY-NC-SA 3.0

The 10th Anniversary banner was found on the Manchester WordPress Users Group site, one of over six hundred organizations celebrating today with for-real, face-to-face, with-cake get-togethers.

The cake icon was animated from pieces of two separate icons from The Noun Project site:

Birthday Cake designed by Ben Rex Furneaux from The Noun Project

Birthday Cake designed by Ben Rex Furneaux from The Noun Project

Birthday Cake designed by Consuelo Elo Graziola from The Noun Project

Birthday Cake designed by Consuelo Elo Graziola from The Noun Project


You can see that my cake is based on a slightly shorter version of the Ben Rex Ferneaux cake, with the Consuelo Elo Craziola flame flickering back and forth.

Given that I spend quite a bit of my time using the open-source, self-hosted WordPress to support a number of different sites, I think I’ll find myself a little bit of cake later today.

Thanks, WordPress — best wishes for the next ten !!!

Subsequent to posting, it became clear that the ds106 Digital Storytelling Assignment Bank did not have an Animated GIF Birthday Card assignment — well, it does now!!  For your consideration, AnimatedGIF Assignment 1086: “It’s Your Birthday, Happy GIFfin’ To You!”


Daily Create Shirt – 2017

What Is Your Question Today?

#prisoner106 Summer 2015

#noir106 Winter 2015

ECOO 2014 #bit14

#ecoo14 #bit14 Bring IT Together

#wire106 Fall 2014

Bava/Nobody WIRE106 T-Shirt

3D Anaglyphs

3D Glasses_FLAT AnaglyphBADGE GREY fill BLACK

3D Glasses_FLAT Anaglyph-A-GIF BADGE GREY fill BLACK

The Daily Create T-Shirt


ds106 Spring 2014

#ds106 The DS106 Workplace

ds106 Summer 2013

Posts by Date

January 2019
« Jul    

Creative Commons

Visitors to de•tri•tus

MiniCYHMN? | Status | 64K | Listening Options

Winampwindows Media PlayerReal PlayerQuickTime
Listening to 105theHive - details FAQs

What is is #4life.
Why do you
Who is is of The Earth. That's you, brother! MiniPlayer

MiniCYHMN? | Status | 64K | Listening Options