AnimatedGIF Assignments (try random one)

The Gist Through a GIF: Digitally Capturing the Essence of DS106.

Assignment Value:

1 Star - Easy Peasy2 Stars3 Stars4 Stars5 Stars - Really Frickin Hard
Difficulty public rating by 2 people.
Click to rate

Submitted by: delovelyames / Amy Fanghella

So far, 0 people have completed this assignment.

ACTUAL BLOG POST: http://delovelyames.com/ds106/the-gist-through-a-gif-digitally-capturing-the-essence-of-ds106/

 

Also Known as “An Open-Letter to Current and Future DS106 Students”:

As the semester commences, or rather, as you’ve accidentally blinked and suddenly find yourself wondering where the heck it went, you will undoubtedly begin to realize that DS106 is NOT just any ordinary three-credit class. I’m sure you, like most of us, chose to take it only so that you could fulfill one of those pesky gen-ed requirements. However, DS106 is not that black-and-white (#NOIRPuns #totallyintended) … You’ll find that it’s a beast of a class that really should be listed as a 300-level, that’ll consume your weekends, and also be extremely gratifying and rewarding not just in terms of your grade but in how much you push yourself and subsequently learn about yourself should you willingly choose to put in the amount of work that’s required … Oh yeah, did I mention that it’s a lot?!?

I did? Okay, then; moving on … :).

Based on your experience in the class thus far, I challenge you to capture what you believe the essence of DS106 to be in the form of a GIF.

Sound a little daunting? Well, never fear, ’cause Amy’s here to walk through it with you step-by-step!

First, you must recall your own experiences with the course, as it really varies for everyone, because like I said, some people are really into it whereas others just took it to tick off one of the check boxes of college-must-dos. So think of some moments from your own personal DS106 journey that correlate to or somehow perfectly explain your highs, lows, or a combination of both.


In my case, I was reminded of a scene from the Lizzie McGuire Movie — a classic of my childhood, but that’s besides the point — which I had watched for the umpteenth time just a few weekends ago (… I know, y’all; I’m such a party animal). In the scene, Kate, the OG mean girl before Mean Girls even existed, totally sassed Gordo like only she does. She basically figures out that Lizzie has been doubling as an Italian pop star and living “la dolce vita” and what not and Gordo’s all like “When did you switch from starring in Lizzie McGuire to starring in CSI?!” Proud of her awesome deductive reasoning, and of successfully sassing the very astonished Gordo in front of her, she quips back with a smirk: “Embrace it … fear it!”

 

And that for me, was DS106 in a nutshell. As I was signing up for this year’s spring semester of classes, I knew I just had to be in Digital Storytelling, as it was totally up my alley. And once I was, I had fully embraced it from day one! Yet at the same time, sharing my ideas and my stories with essentially the world since we were publishing everything openly the web; as well as being vulnerable and totally embracing both my character and myself throughout the entirety of the course constituted some of my deepest fears.

But, as I learned from DS106, my amazing instructors, and my fellow creators-slash-amazingly inspiring peers, those fears amount to some of the greatest creativity! … Thus, my inspiration for my GIF!

So how exactly did I go about making said GIF, you may be wondering?

Well, first I consulted the DS106 Handbook … which is a lifesaver and answers pretty much every question ever, so if you’re not using it, you’re missing out!

Otherwise, for the overall project of creating a GIF, you are going to need to start off by downloading the three necessary programs: QuickTime Player (which normally comes built into Macs; I’m not sure about PCs …), GIMP, and MPEG Streamclip. The good news? … THEY’RE ALL FREE!!!

 

Now, once you have an idea of the ideal scene that you would like to use, you then must capture the clip that you intend to transform into a GIF. This is where QuickTime Player comes in.

So open QuickTime Player, then go back to the window with the video of your clip, pan up towards your toolbar, and click “File” > “New Screen Recording”.


This following little side-tool bar will pop up and will allow you to record whatever’s happening on your computer screen, such as your clickstream, or in this case, the video clip!


The difference between the “Screen Recording” option and “Movie Recording” option is that a Movie Recording will turn on your computer’s camera as if you were about to make a video … Screen Recordings record the video on your screen, without sound, which is just perfect for the task of making a GIF!

So click and drag accordingly, and may I recommend only capturing the part of the screen with the actual video to avoid adding any unnecessary cropping to your ever-growing list of things you must do to make a GIF? ‘Kay, thanks :).

 

Next, click the “Start Recording” button, then start playing your video, and let the magic commence!

Once you’ve captured the desired bit of the video that you want, you can then save it to your Desktop or elsewhere like any other file.

 

(A little side-eye from Gordo for the folks at home … #You’reWelcome #MyMainMan #ok #breaksover)

OKAY PART ONE DONE! You now have the clip that’ll soon become your GIF. Now it’s time to convert them into the image set that makes up a GIF (did you know a GIF isn’t actually a video?! ‘Cause I sure didn’t!). And to do that, we’ll open up MPEG Streamclip.

 

Import your video file.

  • “File” > “Open Files”

Select the start and end points of your GIF.

  • “Edit” > “Select In” > click the desired timestamp of the video clip; “Edit” > “Select Out” > do essentially the same thing, but the opposite.

Now go to trim it so that’ll cut everything down to just the bits you want!

  • “Edit” > “Trim”

The last thing you have to do in MPEG Streamclip is to export the clip as an image sequence so that it’s all nice and prepped for the last step in GIMP.

  • “File” > “Export to Other Formats”
    • Check all the appropriate boxes and then click “Okay” … okay? (#TFIOSPun #StillSobbing #DarnYouAugustusWaters)
  • (Also, don’t forget to click “Options” and make sure all those are set accordingly!)

NOW. Do not be alarmed if, after you do all this and MPEG Streamclip transfers everything either to your Desktop or your saving destination of choice, an INSANE amount of images suddenly get transported there. It just means you have a really large, and therefore really awesome GIF. Just remain calm, create a new folder, and drag and drop all the created images into said folder so you can keep everything nice and organized and in one place.

You have at last reached Stage Three, the final stage where you’ll finally actually make a GIF! And to do this, you are going to use the program GIMP. So go ahead and open it up!

  • (Also, don’t forget to click “Options” and make sure all those are set accordingly!)

NOW. Do not be alarmed if, after you do all this and MPEG Streamclip transfers everything either to your Desktop or your saving destination of choice, an INSANE amount of images suddenly get transported there. It just means you have a really large, and therefore really awesome GIF. Just remain calm, create a new folder, and drag and drop all the created images into said folder so you can keep everything nice and organized and in one place.

You have at last reached Stage Three, the final stage where you’ll finally actually make a GIF! And to do this, you are going to use the program GIMP. So go ahead and open it up!

 

Then, scale down the GIF to 640×360 pixels, the ideal size for most blogging purposes.

  • “Image” > “Scale Image”
    • Once you type in 640 as the width, the height should automatically adjust accordingly.

Also, if you desire to add text to your GIF like I did …

  • … access the “Toolbox” to the left of the screen and click on the big bubble lettered “A”.
  • Then simply add text!
    • Note that you’ll want it to be in a size, color, and font that is as legible as possible.

Now you have text available for the one image layer, but for the purpose of your GIF, you probably most likely want the text to remain across the entire duration of the GIF, not just for the one second when that one layer will be popping up. Basically what I’m trying to say is that, for however many image layers you have (in my case, 13), you will need to add the text to each of those layers individually. I like to do it one-by-one for each layer.

So to add text to each of the layers,

 

  • Travel to the “Layers & Brushes” side bar on the right
  • Hover over the first text layer you just made > right click it > click “Duplicate Layer”
  • Now right click the freshly duplicated layer > “Merge Down”
    • The text will now have merged with the frame of your GIF that lies beneath it!
      • Repeat the process as need until all the GIF layers have been properly merged with a text layer.

Now, before you fully export as a GIF, which I’m sure at this point in the blog post you are more than ready to do (sorry for my wordiness), I recommend that you playback your GIF to make sure everything is as it should be, especially if this is your first time using GIMP like it was mine! … My GIF may or may not have been completely backwards the first time I attempted to make it, hahaha …

  • “Filters” > “Animation” > “Playback”
 

Lastly, you want to optimize your GIF right before exporting to ensure the best possible quality.

  • “Filters” > “Animation” > “Optimization (For GIF)”
    • Know that once your GIF is optimized, it’ll open in a new, Untitled GIMP window, which is where your final GIF will come from.

Now you can officially export your GIF!

 

  • “File” > “Export As”
    • Click the drop-down menu and be sure that the format in which it’ll be exporting is “.gif”
      • Also be sure that you have selected the appropriate destination that you want to save it to … in my case, the Desktop!

The “Export Options” box will pop up … check the option “Save as an Animation” 


WHABAM! Ya got yourself a GIF … “smoother than a fresh jar o’ Skippy”!

Feel free to upload accordingly, just like you would regularly upload media to your WordPress blog! And be sure that when you do, you make sure that it’s “Full Size” so that it will properly play.

And that, my friends, is DS106 in a nutshell … so many steps on the to-do list, but so worth it in the end :).



Do this Assignment

If you complete this assignment, share it! If you are signed up with a blog that feeds the main DS106 site, to have your example added below just add the following tags (or labels if you use Blogger) when writing the post on your own blog (You must use BOTH!): AnimatedGIFAssignments, AnimatedGIFAssignments1678

If your blog is not connected to ds106, you can add your example directly.

Submissions So Far

Help Someone Else Do this Assignment

If you create a tutorial for this assignment, share it! To have your tutorials appear below, make sure your posts are showing up on the main DS106 site and that you use the following tags (or labels on Blogger) when writing the post on your own blog (You must use BOTH !): AnimatedGIFAssignments, AnimatedGIFTutorials1678

Tutorials So Far