DS106 on the couch

Tag: animatedgif

Experimenting with a new toy by John Johnston:

We are designing a new #DS106 Assignment and wanted to experiment with the tool. Here was the brief we discussed on the twitter:

Play the PechaGif once only and record video 
Think of a topic for a presentation
Record and audio track of the ‘presentation’ 
Use the animated gifs you recorded as your slides to talk from!
Have fun!

The worst part of it is that I have been plagues with techno glitches today. It has taken forever to get the video on YT. I tried to upload to Tumblr and failed. I recorded the voiceover and it did not record. Blah!

All that said it should not take long to do. 

I set the delay in PechaGif to 5 seconds. Promised myself I would use the first take – no cheating. Used Quicktime Player to capture video. Imported to iMovie. Created the voiceover as an improvisation exercise – the idea was think of a topic and wing it using the animated gifs that appeared as your slides. Todd Conway made an awesome example. John Johnston kicked us off with this example, where he used the tool to explain the tool! Get him all meta meta 🙂

Awesome tool to engage our creative improvisational brain!

“Wake up! Use Pechagif the best tool there is for a DS106 assignment” says John. Thank you for making it, John. I do not think it is silly at all.

Those of us who understand the psychology of creativity know that the type of exercise this tool forces on us is a desirable difficulty if we want to keep our creative muscles toned. Improvisation is not joke, says CNN.

What lies behind the mask?

Source and more faces: http://karialtmann.com/work/2008/dreamcaptchas/dreamcaptchas02.html

Oh! Sheep. I am addicted to fast cut animated gifs. Creating my own colour palettes now. I am such an artiste!

Hehehe! I am getting good at this now…. the how to is here.

Clips from: https://www.youtube.com/watch?v=s1OdeqIztt8

The Altered State Gif Technique

Just for you Michael…But also for me: take a look at this gif. Awesome.

So, now for instructions. It started with this Tweet:

I tried but failed to make anything work in my previous post. Michael visited my post and tried to help me in more than 140 characters. It worked. 

Here are the instructions that produced this lovely gif.

  1. Find a fast cut bit of video 6-12sec – This was referring to a piece of footage in which there are number of cuts in a short period of time. The most famous example of this of all time is definitely the shower scene from Psycho. There’s probably 50 some cuts in a two minute scene. That’s rough a cut every two seconds.
  2. Throw-out as many frames as secs – I’ve come to a rule of sorts with the maximum number of frames in a single GIF given it seems to work with Tumblr which has some often perplexing GIF rules. The file has to be less than 1MB and 500 pixels wide. But at times the GIF meeting those two requirements still gets rejected. At times by tossing out frames and hovering around under 30 frames in the GIF seems to do the trick. So with film/video being a medium that is 24 to 30 frames per second, I will throw out a corresponding number of frames based on the number of seconds long the video clip is. So for a one second video, I would use all the frames. Two seconds, I would use every other frame. For a six second clip I would use one in every six frames. Photoshop has this option while importing video to layers. I’m not sure if GIMP does this.
  3. Crop to liking – This is for Tumblr rules and aesthetic ones as well. Particularly if the original video is HD resolution or higher, sometimes focusing on an area of the frame rather than the entire frame is more interesting to me.
  4. Save w/o dither – Dithering is a form of digital noise added to the image to try and smooth the visual transition in color gradients. Think of a sunset’s reds to oranges to yellows. Without a dither, the transitions between colors can be very blocky/pixelated. Also without dithers, the size of the GIF tends to be smaller as there is fewer changes in pixel color assignments between frames.
  5. Only 12-16 colors – GIFs have a maximum color palette of 256 colors, which if you think about how good the image/animation can look it’s amazing. By intentionally reducing the color palette to a few colors, the image becomes ‘posterized.’ And for the same reason as no dither, the file size is typically smaller.
  6. Crazy – because the results were surprising and visually interesting. I really liked the even faster cutting of the image and the limited palette that holds it together.

It is so simple when you have good directions. These remind me of glitch art and I have learnt something about the aesthetics of choosing a gif moment. It is all in those instructions, read carefully. 

Here is to you Michael, thank you.

12 second clip from: https://www.youtube.com/watch?v=s1OdeqIztt8

Forget massive attend to community


Illustration by Christina Hendricks. 

Community: the condition of sharing or having certain attitudes and interests in common: ’the sense of community that hashtag classrooms can provide (remixed from Oxford Dictionary definition

Last Friday Jim Groom and Martha Burtis gave a presentation titled ‘Open is as Open does’ exploring the pedagogy of DS106. A key take away for me was the title of this post. DS016 is not a MOOC it is an OOC that focuses on community building.

I have issues with using the word community as so much academic speak has been written about what it does or does not mean. What was lovely about how Martha and Jim use the term, is that they use it in its common sense meaning – without creating complex narratives about what it does or does not mean. I like that. I went back to the dictionary and found its common sense definition. DS106 is certainly ‘the condition of sharing or having attitudes and interests in common’. I am happy that I belong to the DS106 community and that it is an open online course. No frills. Open is as open does. 

The rest of this post is about what an OOC can mean in action with animated gifs examples. What could be more important?

My weekend started on wednesday with this Tweet from Michael.

The tweet refers to this type of amazing gifs Michael has been creating:


To some this 140 character may be forgettable, to me it was a tutorial from somebody whose skill at creating animated gifs genuinely admire. So I decided I would focus on this at the weekend. I started with the ‘find a fast cut of video 6-12 seconds’. Clearly having led a more sheltered life than Michael, my mind went to the film ‘The Artist’ which has a little Jack Russell dog called Uggie as its star. I thought I might find a moment with Uggie doing one of his many tricks to try the technique, and I was curious what would happen with black and white film. I went searching for my moment.


What was really interesting here, was how I processed the frames on the film clip differently. When you look for 6 to 12 seconds of film your attention goes to the question: where is the essence of the motion? I worked out that you focus on the moment of change. In this case from Uggie lying down to him getting up. I was pleased with the output above – it was smoother than other gifs I have made and caught the exact moment I wanted really well. Time for the next step.

When I read the tweet again I noticed ‘fast cut bit’. Hmmm. What on earth is fast cut bit? I went looking and found out that Uggie just would not do. He was not fast cut, poor darling. But I was hooked on Uggie’s gif and I also realised I did not know what Michael meant when he said ‘throw out as many frames as seconds’. Did he mean include in final gif as many frames as seconds (this is what I thought it meant at first) or did he mean delete as many frames in each second as the total number of seconds – if a 12 second film, throw out 12 frames per second? 

This shows up an interesting element of learning online, we use what we can and are very aware (at least I am) that those part of the DS106 community give their time freely online and have busy day jobs. I try to not ask for help unless really stuck. I felt I needed to try both options first and then if I could not work it out, contact Michael. 

Ahh! but there was that other technique to try – there is always another technique to try – the white lines to create depth and a 3D effect on animated gifs. There had been chat on the DS106 hashtag about these gifs and they did look cool.


I went looking for tutorials and found a great one that also had a .psd file of the lines so that you could see how the whole thing was done,

I watched, got sick of the Japanese pop soundtrack, watched again. Spent hours trying to get it to work and failed. For the sake of helping others I will post my crappy attempt here <hiding head in shame, should know better>


I call it the ‘bad-Uggie-Gif’. I spent hours, deleting bits of white lines and finding that it just did not gif with the white lines added. Some peculiarity of the template I used I imagine. I so wanted to make it work, I asked Tom Woodward, another ‘animated gif whizz kid’ in the DS106 community, for help. He said he would try if he could, and he did. 


I cannot stop looking at it! I think he deleted quite a few frames as well as changing the direction of the lines. I don’t know if he uses Photoshop or anything about how it was made. I always download and load into Photoshop to answer as many questions as I can about them. It would be better if i could have a chat and ask – this way is slower but arguably I learn more as I experiment with what others make. I thanked Tom for his gift on Twitter and he responded,

I will make the darn lines work. I now have a lovely Storify made by another DS106er, Rochelle Lockridge, that pulls our conversations together.

And I still need to get back to that original tweet from Michael and learn the altered state gif technique. I may need to find a different film genre to find my fast cut film clip to attempt it. Yes, DS106 never ends, it is #4life and cult deprogramming is expensive!

Want a ‘business model’ for your MOOC? Remember that open is as open does and that is about attending to community not counting beans.



The conversation continues on Twitter. I learnt that the z axis was compressed on the Uggie clip and this made it harder. I saw a few more awesome examples. John Johnston posted an awesome gif and a link to a great post on how to use Fireworks to get a good gif. He also posted an example of how the effect is used on film.

It looks like depth of field matters and picking the right clip in the first place. 

And the lovely Talky Tina has created some beautiful posts mixing, planes and pancakes and guessing  games to help us understand the idea of depth more. You can find the first one here and the second one here. The lovely Tom Woodward has also put virtual pen to paper and has made some great diagrams to help explain depth using Tina’s pancakes. If I cannot get my Uggie to 3D with all the resources in this post – then I ought to be banished from DS106. Watch this space.

Copyright © 2024 DS106 on the couch

Theme by Anders NorenUp ↑