Interaction Designer, Red Hat
Hackademic & Storyteller
(a non-exhaustive list)
Probably the most common form of animated GIF. Frames are captured frame-by-frame and reconstructed as frames in an animated GIF.
Citation: chrono1465 on Reddit https://www.reddit.com/r/gifs/comments/1l9rwt/a_perfect_loop_in_more_ways_than_one/
This image started with a single static image, on top of which various effects created in either an image editing or animation program were layered on top.
Citation: Earthquake in San Francisco, 1906 GIF IT UP 2015 entry from François Dejardin in Liège, Belgium. https://imgur.com/gallery/qTJ7J
Using graphic program tools to deform / warp a single static image to create an animation.
Citation: Gunknot GIF IT UP 2015 entry from Anneliese Dehner of Portland, Oregon.https://imgur.com/gallery/qTJ7J
Often source is a single static image. Technique involves cutting sprites out of their original image or another image and creating simple animation by moving them around on the screen.
Citation: GIF IT UP 2015 entry from Nono Burling in Olympia, Washington. CC-BY-SA https://imgur.com/gallery/qTJ7J
This is also sprite-based.
Small, subtle movements with long pauses and an infinite loop. Tends to be very minimalistic.
Often used for environmental compositions (falling snow, smoke coming out of a chimney, etc.) Also used for eyes blinking, lights blinking, clouds moving, steam coming off of food or drinks, etc.
Citation: Harper's May GIF IT UP 2015 entry by Sara Levine of
Forest Hills, New York. https://imgur.com/gallery/qTJ7J
This kind of image starts with a single static image. A transparent "window" is created and a second image layered beneath the first is animated with a simple scrolling motion.
Citation: Anthony Antonellis, http://giphy.com/gifs/trump-26gYSPA8fSFPmuSsg
Sometimes these are looped, sometimes they aren’t. They usually try to fake the appearance of a static image and after a relatively long period of time the animation becomes apparent.
Citation: crudelegend on Reddit https://www.reddit.com/r/gifs/comments/y3s74/wait_for_it/
Avoiding gradients, using as few colors as possible, or even working in grayscale can make this limitation less apparent.
The more colors your image needs, the more likely colors will get dropped and it can have an unnatural-looking, posterized effect if you aren't careful about the color palette.
CC-BY 2.5 by Diliff on Wikimedia Commons
Boundary around the edge of the
transparency can be jagged depending
on the background color that was cut
from the image.
The timing between
frames can be
Chainmail_Danno on Reddit https://www.reddit.com/r/NoLoop/comments/vtkek/lets_do_this/
Animated GIFs can get large quickly, particularly as you add additional frames.
Watch your filesize :)
(This one is 3.8 MB, about the size of a typical mp3 song.)
Sometimes creating your own source material is the easiest and quickest way to get what you need.
You can use your cell phone camera, webcam on your laptop, or simple drawings (flip-book style) to create a video or frames that can be used to create an animated GIF.
Stop-motion photography using props like toys and other items works too.
Progress of a digital painting I did of a Malagasy beekeeper's daughter after a harvest. by Micklevandickle1
Here are some pretty good sources for openly-licensed video materials.
General Electric Refrigerator Commercial (1952)
Public Domain. https://archive.org/details/GE_Commercial
Here are some pretty good sources for openly-licensed images. Licenses may vary so take care to note them.
(Your first animated GIF!)
We'll use GIPHY's GIF Maker. It will convert a video to GIF. Link straight to the video file (e.g., ends in a file extension like MP4) to do non-YouTube / Vimeo / Vine conversions. It supports MP4 and MOV only.
This makes it easy, but it's possible without this tool using basic open source software tools such as ffmpeg and imagemagick. There are many scripts on github if you need to automate or would like another tool, e.g.:
Copy the download link and paste into Giphy's video URL box:
Next, you move the top (purple) slider to indicate where the GIF should start, and the bottom (blue) slider to indicate where the GIF should end and how long the GIF should be.
Finally, download the GIF, and open it up in the GIMP!
Some tips you'll need to know as you start playing around with your video GIF....
Why are there holes in the image? Try Filters > Animation > Unoptimize.
Image has holes, each frame has "(combine)" note on each.
Each frame is a full image, has "(replace)" note on each.
Each layer in Gimp is a different frame of the animation. The first frame is at the bottom of the stack; the last at the top.
Frames play in order from the bottom to the top.
If you add another layer of text or with some drawings in it, you need to merge it down to the frame of the animation you want it in, or it will become a separate frame in the animation.
Remember, GIF is a limited palette. Convert to RGB color for full access to all colors:
Image > Mode > RGB.
When you save out later, a new 256-color palette will be generated.
Click on the 'eye' icon to the left of a layer to hide that layer. Hide all the way down the stack to see the bottom-most layer.
Some layer controls you'll need to know about:
Create a new
Duplicate selected layer
Delete selected layer
Anchor floating layer
Expanded Layer Group
Collapsed Layer Group
Move selected layer up
In case you make mistakes, it's a good idea to draw on a new layer on top of the frame you're drawing on (then merge down when ready.) You can also use this technique to copy the same item to multiple frames.
By modifying the text in parentheses in the layer name (double-click to edit) you can manipulate the length of time certain frames are displayed as well as how they are displayed.
Frame delay: In milliseconds. In the format (80ms). (Want to make a peek-a-boo? Make this value very long for the first frame.)
Frame mode: (replace) or (combine).
You can preview how the animation will look so far by opening up the playback window in Filters > Animation > Playback...
Create animations like this using a single static image!
We'll create sprites from this image using masking and stamping/healing techniques, then animate using the sprites.
"Magee furances" Boston Public Library
The best way to mask fine details:
This takes a bit of finesse. You'll use the cloning tool:
You'll use layer groups as your animation frames this time.
Create a layer group with the background and sprite inside of it.
Duplicate the group, animate the sprite, duplicate the latest group, repeat!