DS106 on the couch

Tag: Gif tutorial

Whose side are you on? Mine.

Well, I am now beginning to wonder about John. He does not seek escape. He gives little information and certainly not INFORMATION. Yet he responded to a cry for help from me yesterday in the G+ side of the village. 

Curiouser and curiouser!’ Cried Alice (she was so much surprised, that for the moment she quite forgot how to speak good English).

Somehow I think viewing my giant gif with the hypnotic village font led to John volunteering more information than he intended. 

I downloaded, resized to 400px wide, exported adaptive pallete 128 colours, loss 20% and got 2.9mb. Still quite a hefty gif but the one I d/led was 28 MB! (a sneaky move in wordpress is to put in a small dimension gif and stretch it a bit with css or the width parameter…

And in places he was speaking in code!

A request for information from the resident artist Kathy O led to both of us spilling yet more information. John,

It used to be tumblr liked < 500px width, < 30 frames &  < 1MB size. I think you just got to remember that a gif loads with a webpage, a movie will either wait till click or just load the first bit and play if autoplay. Too many big gifs makes your blog a sluggish boy. 

… and, having spent the evening watching the awesome giant gif (it bears watching for a long time – watch it now, or will you?) I could not help but join in.

And there is an unwritten game gif makers play! Least number of frames preserving aesthetic detail and smoothness 😉 hence play with colours and size as well as frame number. Michael has a rule of thumb for selecting frame per second depending on length. Will find.

Who is Michael? What is this rule of thumb? Will it help our prisoners residents give us more information? What made us blab? Is Kathy O on our side? Why did she resign?

John worked with my giant gif and produced a 2.9MB version that Tumblr rejected as it had been doing with all my previous versions of my giant gifs. He kept viewing it and working with it in his dream lab…


…and would you credit it? Here it is at just over 1MB comfy 400×257 and there is more information on his post about his secret recipes to extract information:

Any zooming was due to carelessness;-)
Downloaded your file
Reduced to 2.9MB as per notes
Used a gifsicle script to kill every second frame x 2
Back in Fireworks made frames a bit longer 30/100 sec I’d like to do that in script but can’t figure it out.

He managed to delete almost all the information on my original giant gif and cut to ‘1.1 MB I guess losing too much detail… frames cut to 29.” What did he mean? Losing too much detail? I thought that was precisely the point. Lose detail so they do not get the full information. 

I felt that it was right to make this into a Gif-Collab with jjgifs. I suggested this straight after expressing my amazement at the amount of information he had gotten out of my original gif. I did not think this through. 

Happy to share your credits, we can have a non-alcholic whisky in the Village bar! Sounds like poison:-)

We can share credit units alright, after all we have both been working hard enough to keep our lights on at the village. But the rest of the message? He speaks as if he does not know about ‘the cave’ with real whisky? The village bar? Sounds like poison? Does he mean to poison me? Is he worried I might poison him? Has he been to ‘The Cat and Mouse’?


And then resident Ron joined us. He seemed relaxed and cheery enough. He had overheard our conversation. 

He suggested he would join us at The Cat and Mouse game Bar. Or did he meant ‘the cave’ with real alcohol? We all know what happens there and what that alcohol really does to you, don’t we?

I’ll toast virtually on your collaborative success!

Hmmmm….virtually? May be he is not real, Ron I mean. You can’t trust anyone’s information here. Or can you? Then  the village librarian, Mel, also viewed the giant gif and…

@mdvfunes That is awesome. And now I want to etch ALL the pint glasses!

All the pint glasses? Where? Why? Does she have information we need? Does Mel know we can buy those glasses and use them at the bar when we visit? Question is will we just use the glasses or will the glasses be a warning for something more sinister?

I then go to John’s blog and he has clearly been affected by the hypnotic village font signs. He has given out more information. He keeps repeating the same information. Have they got to him? Here is an excerpt.

  1. Open video in MPEGStreamclip
  2. Select in and out points
  3. Trim (command T on a mac)
  4. Export to Other Formats…
  5. Choose Image Sequence
  6. I usually click options and choose Jpeg and 12 frames /second
  7. Export
  8. Right Click on First File in export list
  9. Open in Fireworks
  10. Select all the other images in series & Drag to FW window
  11. Cmd-A Select All
  12. Open FW Frames window, Choose Distribute To Frames from the Window
  13. This creates a series of frames.
  14. Further editing and setting the Export Options in the Optimise Window
  15. Export to Gif

Once again some of it is in code and it requires Fireworks. Only the Committee has access to Fireworks. Too much information. 

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 © 2023 DS106 on the couch

Theme by Anders NorenUp ↑