This is the second week of bootcamp for our online ds106 classes at University of Mary Washington; and one of the assignments this week is a challenge.
We asked out students to create an animated GIF in response to the Say it Like Peanut Butter assignment— and purposely did not provide explicit instructions. What we are curious to see is how people figure out how to learn something on their own (or if they are clever, they will ask/search). What we want is not for our students to create masterful GIFs (well that’s ok if they do), but to get the hang of creating blog posts that correctly use the tags from the Assignment Collection.
Part of our philosophy as teachers is to do the same work we ask our students to do. What should I do? What movie? Hmmm, stay with my dog theme…
And I thought of last month visiting my friend Shelley in Norfolk who has the sweetest St Bernard, Gemma
cc licensed ( BY ) flickr photo shared by cogdogblog
Shelley’s family breeds these dogs (some trivia is that they raised the dogs used in the sappy/happy movie Beethoven). She old me, however, the movie that best helped their breeding was Cujo, because it, for a while, cut down the demand that creates puppy farms. What’s crazy is you can watch the full movie on YouTube.
In the spirit of letting people know how friendly dogs are, meet the puppy, first in an animated GIF done in GIMP:
and a second one done in Photoshop
This first one I made in GIMP, the open source photo editing software many ds106 students use because the price is decent ($0.00). We have a new tutorial for doing this that is pretty much the process I followed.
I used this clip from YouTube
http://www.youtube.com/watch?v=V2jKAxIadnk
which I was amble to bring directly into MPEG Streamclip (another open source tool) which is great for extracting clips or frames from video. I marked just the segment where Cujo was wagging- it had close to isolated movement — but it also plays with the scary dog notion, as Cujo is playing before he attacks.
In MPEG Streamclip, I am able to access the video directly from YouTube via Open URL.. and I marked the in and out points to trim the clip (another tutorial for you)
I then use Trim Clip and I can work with just this tiny segment (2 seconds). I then step through it use the Save As Frame option to get a series of about 15 images,
In GIMP I then import these as layers to GIMP. In looking at them, I realized I had to many, so I picked just four frames that have the cycle of the tail moving (the camera had some vertical movement, so I deleted those layers).
To isolate the tail, I followed Jim Groom’s screencast on turning using Layer Masks to isolate portions of the frame (only the tail). You want to leave the bottom layer alone so it is the consistent background.
Under the Filters – Animation menu there is an option to view the playback as a preview for the GIF. That’s handy. My next step here is to change the image to a limited color palette (doing it here produced better results then letting GIMP do it later). Under Image menu select MOde and change it to Indexed. The extra step here is to set the dithering option on the bottom menu (I use Floyd-Steinberg, no idea who those dudes are).
Save your GIMP file in its native format, then under the File menu do an Export and save it as a GIF (an option will pop up, make sure you tell it to check the box for animation).
Just for fun, I decided to try the same thing in Photoshop. I first converted the clip I had saved from MPEG StraemCLip from an MP4 to an MOV file (I use QuickTime Pro, but something like zamzar.com can help). In Photoshop I used File – Import – Video Frames to Layers, and since it was a short clip, selected every 4th frame.
Again, I ended up with more than I needed, so I deleted layers until I had 8 to work with. I used the PhotoShop masing layers to do more or less what I had done in GIMP.
This is not really the full tutorial, but an outline. Going the extra step in using layer masks means a few things- firs of all, you can isolate the motion to the key part of the scene, and it looks less jittery (any camera movement in the original will make your GIFs bounce around). But it also makes for much smaller file sizes. Mine are under 160k.
Aren’t I a nice dog?
