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

The GIF That Keeps on


1. Why GIFs?

2. Make One!

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.

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

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

Read more. . .


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

Read more. . .


Photoshop makes it easy to import your short clip and automatically turn every frame into a layer.

Read more. . .


When you're ready, Photoshop makes it easy to export your GIF and tweak settings to get it to the optimal size. 

Read more. . .


If you'd like us to display your GIF on UMW's ITCC Media Wall, we have a handy image mask you can use.

Read more. . .



Why GIFs?

Giffing with Gifs


Callie: Have you ever wanted to send a friend a feeling?

Spencer: What? Like a text or something? Or like a YouTube clip?

Callie: Like a gif.

Spencer: What’s a gif?

Callie: A gif is a kind of the happy medium between a text message and a video message. There’s no sound, though, so it’s more like a picture than a video.

Spencer: Oh! I have an Instagram that I use for my nature photos. But I want to share scenes with people, not just a viewpoint of an area. I want to make them feel like they’re there.

Callie: Well you can make a GIF from pictures, and Gifs are the perfect way to capture a feeling. In the late 80s before the modern Gif, Steve Wilhite created the first Gif.

Spencer: You said modern gif. What’s changed since then?

Callie: A lot of things! The picture quality and software have improved, there are also better image editing platforms like Photoshop now in the internet age.

Spencer: These sound really cool. Wait. I think I’ve seen a few of these on Facebook, actually. My friends send these sometimes in conversations, but I didn’t really know if they were links to images or videos, or what.

Callie: Yeah! Those are called reaction GIF’s people use them as quick ways to convey feelings. Without having to actually type out their feelings. People often use them on social media sites.

Callie:Another type of Gif you might have seen is an endless looping gif, it is a Gif that has no clear beginning or end. So it looks like it goes on forever.

Spencer: So there’s only 2 types of gifs? That’s simple.

Callie: Actually there are lots of different types of GIfs! Those are two of the most common types people see. There are lots of cool and innovative Gif’s out there too like 3D Gifs and cinemagraphs.

Spencer: Oh, I like 3D. Every new movie–3D showings. Do I need to have the glasses for 3D GIFS to work?
Callie:Nope! 3D Gifs work by creating optical illusions that trick your eye into thinking that the image is 3D when it is actually 2D. There are several different ways to make 3D Gifs actually, either using white bars to create the illusion or using static photographs.

Spencer: Oh neat! So I can use my nature photos to make a 3D gif? That sounds pretty cool.

Callie: You can! A lot of artists actually use nature video instead of photos and convert those to cinemagraphs to capture a scene.

Spencer: Scene. Cinema. Those are film terms. Could I use those for movies, too? What is a cinemagraph, exactly?

Callie:You certainly can! A cinemagraph is a gif in which very few portions of the gif are animated. People often use cinemagraphs to closely examine moments in film or create interesting art.

Spencer: Oh, so I don’t have to keep replaying a video, worrying about the volume, and can eliminate distractions from the action I’m trying to highlight. Like, “Did you see those birds fly in the background?”

Callie: Exactly! Or trying to follow a single character through a scene in a movie.

Spencer: That sounds really useful, actually. My friends send me silly ones, but that sounds like something even a professor might use in a classroom.

Callie: Gifs are very useful for academic purposes as well. Most commonly in film classes but other classes might use reaction Gifs or cinemagraphs to emphasize talking points. I have even had to make a few for assignments.

Spencer: I expected essays and projects, but gifs? That’s a bit different. That must have been hard.

Callie: GIFs are actually very easy to make once you learn the steps!

Spencer: So gifs seem to have made quite an impact on our culture, especially internet culture, then. From the late 80s until now, gifs have come pretty far, and are a lot more diverse.

Callie: Yeah! And it’s nice being able to make them from either images or videos, since some people prefer one or the other.

Spencer: Can you show me how to make one, please please please, Callie??  

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. is a great source of public domain and CC videos and film. The Creative Commons Web site will 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: Trim Your Video

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.”

Use the play bar cursor (or "scrubber") to find where you want to start your clip.
Choose "Select In" from the Edit menu when you've found your starting place. 

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.”

Choose "Select Out" from the Edit menu when you've found your ending spot. 

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. 

Choose "Trim" from the Edit menu when you're ready to clip the video.

4. Export your clipped video. Go to the File menu, and choose “Save As.” A screen will appear displaying your save options. Make sure you choose “MOV” as your format. 

From the File menu, choose "Save As."
Chose "MOV" as the format. 

Animated GIF: Trimming Your Video with MPEG Streamclip

Step 3: Import Video Into Photoshop

The next step in this process involves importing your video into Adobe Photoshop. Luckily, recent versions of Photoshop include a feature that will automatically import a video, transforming ever frame of the video into a layer in your Photoshop file. 

1. Select your clip for importing. Open Photoshop, go to the File menu, select “Import” and then “Video Frames to Layers.” Browse to the location of your image, and click Open

Use Photoshops "Video Frames from Layers" option in the File menu. 
Browse to the location of your video file (created in Step 2),
and click the Open button. 

2. Select your import settings. In the screen that appears, you may further tweak the start and stop points of your video. In addition, if your video is a bit long, you can choose to only import fewer frames. Make sure “Make Frame Animation” is checked off. 

Make sure "Make Frame Animation" is checked off. If you like, you can further trim your video. Click the OK button when you're ready. 

3. Import your video. When you are ready, click OK. Your video will be imported, with each video frame converted into a Layer. Layers are usually visible in a right-hand box in the Photoshop interface. If you can’t see them, go to the View menu and choose “Layers.” After the import, the Timeline box should also be visible at the bottom of the Photoshop interface. If you can’t see it, go to the View menu and choose “Timeline.”

After you import the video, you should see the Layers (on the right) and the Timeline
(on the bottom).

Animated GIF: Importing Your Video in Photoshop

Step 4: Export Your Final Product

Once you have completed your GIF, it’s time to export it from Photoshop. If you plan on submitting your GIF to this site, we recommend that you export it with and without the ITCC Mask. The form requires you to upload a non-masked version (for display in the Gallery); optionally, you can upload a masked one. 

1. Begin the save process. From the File menu choose “Save to Web.” 

When you're ready to save your GIF, choose "Save for Web" from the
File menu. 

2. Choose your save options. In the panel that appears, you can adjust the properties of the image that you are saving. The most important option that you should set, no matter what, is the Format option. This should be set to “GIF.”

From the Preset option, choose “GIF 128 Dithered.” 

In the Image Size section, set the width to “500.” The height will adjust automatically 

Be sure to choose "GIF 128 Dithered" as the Preset and adjust the width to 500px.

3. Save the file. When you’re done setting your options, click Save. Remember to title the GIF and save it where you can find it! 

Name your file and save it somewhere you'll remember.

Animated GIF: Exporting Your GIF from Photoshop

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. Add the media wall mask to your image. Download this image file (in PNG format) to your computer; it contains the “mask” you will use to determine the size of your final animated GIF and what area of the GIF will play on the media wall. 

4. Paste the mask into your photo file. Back in Photoshop, return to your animated GIF file. In the Layers Panel, make sure you have selected the top-most layer before proceeding. 

From the File menu, choose “Place.” Browse to the location of the mask file you downloaded and click the Place button At the top of the Photoshop window, click the check mark to accept the placement of the mask. 

You should notice a new upper-most layer in the Layers Panel, displaying the mask. You should also see the mask layered on top of your image.

Choose "Place" from the File menu. 
Be sure to click the "Check Mark" after locating/placing the mask file.
After you place the mask, you should see it in the top-most layer,
as well as overlaid on each frame in the timeline.

5. Adjust the mask’s position and size. Photoshop will automatically place the mask to either match your image’s height or width. Once it is there, you can move it to adjust it’s final position. 

First, make sure you have the mask’s layer selected in the Layers Panel. Then, choose the the Move Tool in the main Photoshop toolbar. After selecting this tool, simply click and drag the mask to move it. 

Make sure you do not move any portion of the mask outside the boundaries of your image!

Use the Move Tool in the main Photoshop menu to reposition the mask. Be sure
you are working with the mask layer. 

6. Check your animation. Now that you have the mask positioned, you should check to see what part of your animated gif will be visible on the wall. In the Timeline Panel, click the Play button. Your gif should play, with the mask on top the entire time, making it clear what portion of your image will be visible. If you’re not happy with the positioning, complete the next instruction. 

When you're ready to check your animation, use the Timeline Panel. Click the
play button to see the animation play.

7. Adjust your image/video frame positioning. Once your mask is positioned, you may wish to adjust the video frames beneath it so that the focus of the image is what appears in the video wall space. To do this, go to the Layers Panel, and click on the bottom-most video frame layer of your image. Then click and and hold the Shift key on your keyboard, scroll to the top of your layers, and click on the top-most video frame layer of your image. Do NOT click on the mask layer. When you’re done, you should have all of the layers selected EXCEPT the mask layer. 

In the main Photoshop tool bar, select the Move Tool. Click and drag on your image to reposition it in relation to the mask. 

Use the Move Tool again, but this time be sure that you have all your frame 
layers selected.​

8. Crop your image. Once you have the mask and your image properly positioned, you can crop your image to fit the frame of the mask. 

 From the Photoshop Toolbar choose the Rectangular Marquee Tool. Place your pointer in the top-left corner of the mask on your image. Click and hold while dragging the selection box to the bottom-right corner of the mask. From the Image menu, choose “Crop.” 

Your final result should be an image with the complete mask filling the image from top to bottom and left to right — with your animated gif portion showing through the empty space in the mask. 

Use the Rectanuglar Marquee Tool to select the area you want to crop your image to​. 
After making your select, choose "Crop" from the Edit menu.

9. Export your file. Now it is time to export the ITCC media wall version of your GIF. From the File menu choose “Save to Web.” 

In the options panel that appears, make sure the Format is set to “GIF.” Once again, you can choose “GIF 128 Dithered” from the Preset option. In the Image Size section, increase the width to “1920.” The height should automatically adjust, and it should be exactly (or close to) 1080. 

When you’re done, click the Save button. 

Give your GIF a file name and save it to somewhere you can find it again. 

Be sure to choose the "GIF 128 Dithered" option as your Preset. Adjust the width of 
your image to 1920 px.​

Animated GIF: Preparing Your GIF for the UMW ITCC Media Wall