This is a UMW 2016 Summer Orientation Production, brought to you by Teaching and Learning Technologies and the Digital Knowledge Center 

The GIF That Keeps on

GIFFING

1. Why GIFs?

Animated GIFs were all the rage in 1992 — and they’re all the rage again. From “Under Construction” emblems to cinemagraphs, let’s discuss where they came from, what they are, and why they’re so darn popular.

2. Make One!

We’ve put together all the instructions you need to make your own animated GIF from scratch using GIMP.

The first step is locating the video from which you want to grab a very short clip

Read more...

x

Use MPEG Streamclip to trim the exact portion of the video you want to use.

Read more...

x

Import your Image Sequence into GIMP and do some minimal editing.

Read more...

x

Export your GIF from GIMP for later use.

Read more...

x

Create a much larger version of your GIF with a video mask for the UMW Media Wall.

Read more...

x

3. Submit Yours.

Name your GIF something so that we can keep track of it in our system (this won’t be displayed publically).


[Transcript]The history of the GIF, or JIF, goes back to the days of dial-up networks. Your computer would be connected to a device called a modem, and it would dial into a computer network. One of the popular commercial networks in the mid-1980’s was CompuServe. CompuServe introduced the GIF format for downloading and displaying of graphical images. The images were generally small dimensions and the 256 colors that were available was pretty far removed from a true “photographic” image. But it was all in an effort to shorten download time of these graphics.

The original GIF, introduced in 1987, was known as 87a. From the start the GIF supported multiple images within the file, but with an enhanced version known as 89a, you were able to manipulate the animation parameters. In the early 1990’s, when the Internet web browser was introduced, support for loop-able GIFs was born. Thanks to the Netscape web browser, endlessly looping animations were now possible.

Early animated GIFs consisted mainly of practical visual indicators such as under construction signs (for web pages), and animated email buttons. However, as imaging technology became more sophisticated, more complex GIFs were born. In 1996/1997, the most culturally iconic animated GIF of the time was the Dancing Baby – also know as Baby Cha-Cha. The 3D rendered Baby Cha-Cha video was popularized by the TV show Ally McBeal, and the animated GIF version soon followed. This was the beginning of the Animated GIF heyday.

Interest in animated GIFs waxed and waned until a rebirth occured in association with the website Tumblr. Because of it’s easy way of sharing images, and eventual support for files greater than 1 megabyte, Tumblr has become a haven for experimenting with complex animated GIFs. A new class of GIF has come on the scene known as the Cinemagraph and popularized by, among other Tumblr sites, “If We Don’t, Remember Me.” – found at iwdrm.tumblr.com.

So what’s the key to a successful animated GIF. The key to an animated GIF is Repetition. The key to an animated GIF is Repetition. The key to an animated GIF is Repetition. Oh, sorry. Anyway, It’s taking the essence of a short moment of a video or film, and looping that moment. The repetition allows for and encourages analysis. Here’s an example. Take this video of a break dancer performing in front of a crowd. We concentrate on his entertaining style – until – something unexpected occurs – [kick!]. When we make this into an animated GIF, the repetition intensifies the uneasy humor of the moment.

Other examples include this hockey player, this boxing kitten, or the kung fu baby. It even allows for the essence of a mashup video to be intensified – as in this example. The art of the animated GIF therefore is somewhere between the still image, frozen in time, and the complete narrative of full motion video. It provides a solid middle ground position that will keep it relevant for years to come.

Written, Created, and Narrated by Andy Rush

Step 1: Find & Download Your Video

The first step is to find and download a video clip that you would like to use to make your animated gif.

One popular way to find source material for animated gifs is by downloading them from a video sharing site like YouTube or Vimeo. Remember that when using sites like these you want to be aware of copyright laws and restrictions. Generally speaking, if your animated gifs are only a few seconds long, are of lower quality, are used as a form of commentary, and are not being used for commercial purposes, they probably fall under the Fair Use doctrine of copyright law. However, this has yet to be tested in a court of law. Therefore, you should be prepared: if you post your GIF on a Web site you own, and the legal owner contacts you and claims you’ve violated copyright, you must be prepared to take down the image (or fight the issue in court).

Another option is to use video you’ve created and own for an animated gif. This will absolve you of any copyright concerns.

You can also search and use video that is in the public domain or that is licensed under Creative Commons. Archive.org is a great source of public domain and CC videos and film. The Creative Commons Web sitewill also let you search for CC-licensed material

Regardless, you’ll need to make sure your video is in a standard format that can be imported into Adobe Photoshop (for the purposes of this tutorial). The most common format to use is MP4 (files will end in the extension .mp4); you may also use MOV files (ending in a .mov extension).

Some popular tools for downloading from video sharing sites, should you decide to go that way:


The interfaces for using these tools regularly change, so we’ve avoided writing up step-by-step instructions that may quickly become outdated. Whenever you’re using Web sites for downloading videos, be particularly attentive to what links you’re clicking. It’s easy for ads to look like part of the site, and you can accidentally download and install adware/malware unwittingly.

​​​If you are attending the workshop offered during summer 2016 UMW orientation, you don’t need to worry about downloading a video. We’ve collected a large library of clips for you to choose from.


Step 2: MPEG Streamclip

In this step, you will be trimming your longer video to a short clip to turn into your animated gif. We recommend that you choose a clip no longer than 5-7 seconds. Longer lengths will result in larger animated gif files, which can take a while to load.

For this step, you should download and install the free software, MPEG Streamclip (available for both Mac and PC); in addition, you will need the video file you prepared in Step 1.

1. Open your video file in MPEG Streamclip. Open MPEG Streamclip, and from the Files menu, choose “Open Files.” Browse to your video file on your computer, and choose “Open.” Your video will appear in MPEG Streamclip’s editing window.

Your video will appear in the MPEG Streamclip player window.

2. Select where in the video you would like to begin your animated gif. Move the bottom cursor in the editing window to where you want to start your clip. When the cursor is where you want it, go to the Edit menu, and choose “Select In.”

3. Select where in the video you would like to end your animated gif. Move the bottom cursor again to where you want your video clip to end. Go to Edit, and choose “Select Out.”

4. Trim your clip. Once you’ve selected your “In” and “Out” points, choose “Trim” from the Edit menu to clip the video the exact length you’ve chosen.

5. Export to other formats​. Open Files and choose Export to Other Formats.

6. Choose your Export Settings. Set the Format to Image Sequence, then set Frame rate to 8.

Make sure to check the boxes for Better Downscaling and Deinterlace Video.
Set Frame Size to 1280×720 (16:9) and then click Okay.

​7. Give your image sequence a name and save it.​ Now on your screen you will see all the images from your sequence.

Step 3: Import Image Sequence Into GIMP

​1. Open your image sequence as Layers

2. Select all the frames you downloaded. These frames will all make your GIF.

3. Scale your image. Go to Image, then click Scale Image.

4. Scale your image. Set width to 500, then click Scale.

5. Test your GIFs animation. Go to Filters, Animation, then Playback. Watch your playback to ensure that it looks how you want it.

Step 4: Export Your Final Product

1. Export your GIF. Go to File, then click Export.

2. Choose your export options. Change File type to GIF, and name your GIF, then click Export.

3. Choose Export as GIF options. Uncheck GIF comment, and check As animation, then click Export.

Step 5 (Optional): Prepare for the ITCC Media Wall

If you wish, you may add a “mask” to your animated gif for display on the ITCC Media Wall. The two-story wall is comprised of 43 individual flat screens, arranged in a non-uniform pattern. In Spring 2015 during a visit to UMW, Professor Michael Branson Smith (of York College/CUNY) created an image mask that can be used to prepare an animated gif for display on the wall. This step involves pasting the mask into a layer in your Photoshop file so that it hides parts of the image that wouldn’t be displayed on the wall.

Above, you can see what the mask looks like. The white portion represents the location of the actual screens. Any part of your image that appears in this section will be visible on the wall. The black portion represents the part of the wall that is not screen; any part of your image that appears in this section will NOT be visible on the wall. 

1) Download the image mask (in PNG format).  This image mask will be used to make your gif compatible with the UMW media wall.

​2) Scale image​ to 1920 pixels wide. Go to Image -> Scale Image… ​When doing this, ensure the chainlink icon is displayed in order for the image height to scale with the width.

3) Open the image mask “as layers” with the GIF from Step 4 open. This will create a new layer comprised of the image mask.

4) Duplicate the image mask layer.  ​To do this, right click on the image mask in the layer select panel and select “Duplicate layer”. Do this until you have as many masks as frames.

5) Arrange the layers. Arrange the layers so there is one image mask copy above every frame of your GIF.

6) Merge mask layers with frames.  ​To do this, right click every image mask and select “Merge Down”.

​7) Export as .gif file type ​ using the settings provided in Step 4 to create your GIF.