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.
Use MPEG Streamclip to trim the exact portion of the video you want to use.
Photoshop makes it easy to import your short clip and automatically turn every frame into a layer.
When you're ready, Photoshop makes it easy to export your GIF and tweak settings to get it to the optimal size.
If you'd like us to display your GIF on UMW's ITCC Media Wall, we have a handy image mask you can use.
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??
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 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.
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.
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.
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.
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.
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.
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.
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.”
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.”
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
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!
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.
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!
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.
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.
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.
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.