The Gift of Gifs

Gifs are a significant part of our culture. They can convey artistic expression, humor, and entertainment in short animated loops. They are fun, amusing, and even a bit hypnotizing! But, what exactly are gifs? And why are they so darn fun?

Gif—which stands for Graphics Interchange Format—is a bitmap file format that’s been around since the late 1980s. This file size is generally small and easily shareable, and gifs provide universal browser support, meaning anyone on any internet browser can enjoy a good gif.

Today, gifs are a fun form of communication that evokes positive emotions. According to an article in Time Magazine, “More than half of people of all ages said they use emojis and GIFs in messages to make people laugh, to lighten the mood and because they “make conversations more fun.” Even my mom has become a master of sharing gifs in our text messages! It feels safe to say that gifs have become another form of language and self-expression that humans just get.

Gifspiration

Here are a few gifs I’ve recently found and personally enjoy.

Chasing Light

There’s some playfulness and mystery to this gif that I really like. Despite only using a handful of colors, there’s a lot of depth and 3-dimensionality to it. The different speeds of motion between the “light bug” and the character evoke excitement and curiosity.

Original can be found here: https://media.giphy.com/media/26uf4J7jVKQIrjHA4/giphy.gif

From a design perspective, I appreciate the concept of mix-matching the lettering to mimic the story of variants and different timelines in the show. The varied pacing in which the letters switch also adds to the disjointed feeling of this gif–which is precisely how it should feel given the context.

2. Loki Typographic Logo

Original can be found here:
https://giphy.com/gifs/marvelstudios-transparent-1J5Ce6euWsIeFnzGL9/links

3. Read between the lines

By reading between the lines, you experience a whole different world. The organic shapes radiating outwards add a sense of energy and excitement to the animation. The fast-paced movement of the forms adds enthusiasm.

Read Between The Lines GIF by A. L. Crego - Find & Share on GIPHY — Original can be found here:
https://giphy.com/gifs/alcrego-loop-eternal-26BkMjqkF4J3onjt6

4. Chanel Collage

I’ve always been a fan of collages and the art of putting familiar objects into a different context. The jolty animation feels light and fun. The use of color to build layers and break up the background and foreground is lovely.

Original can be found here:
https://media.giphy.com/media/1wqowJ3fkG6ZenC3yT/giphy.gif

5. Cultural References

Simple gifs like the ones below reveal some of their fun and relatable qualities. Without using words, you can incorporate gifs like these into a conversation and convey what you’re feeling or thinking in a catchy way.

Original can be found here:
https://media.giphy.com/media/jUwpNzg9IcyrK/giphy.gif

Original can be found here:
https://media.giphy.com/media/OJ8hVSLYbpQ08/giphy.gif

How Gifs Are Made

Gifs can use all sorts of motion graphics techniques. Some of the most common methods include:

Stop Motion

Stop Motion is the process of stitching several slightly different images together to convey motion. Stop motion is used for classic movies like Gumbi or Rudolph the Red Nose Reindeer, to more recent works of art like Wes Anderson’s The Fantastic Mr. Fox and The White Stripe’s music video for “Fell in Love with a Girl.”

Key Framing or Tweening

Deriving from the word “inbetween”, Tweening allows you to define the start and endpoint of a scene’s movement. A program (like Adobe After Effects or Animate) can calculate and create the transition between those two points.

Onion-Skinning

Onion skinning is the act of drawing your new frame over a transparent image of your previous frame. By layering the previous frame with the current frames, you can more accurately draw the transition between movements between each frame. This process is generally used to get a more accurate idea of how motion will change in a sequence.

Creating Gifs of My Own

After some initial research and inspiration, it was time to try making a few gifs of my own. Using the coffee shop theme from the last post, I made these fellas.

In this design, I used a “cutout” technique, where I masked the food items from their original images and positioned them on top of the plate. Using the timeline settings, I gave each of the three bakery items the same amount of time on the dish. I wanted to incorporate a “tropical” element into the design, so I brought in a few palm leaves and a pink background.

For this technique, I focused on the onion skinning technique. I don’t have a tablet for my computer, so I drew the scene using the mouse and keyboard, which I found very challenging. But, the onion skinning features within the timeline made it incredibly quick and easy to start drawing variations of the animations and create this movement. Although I was very apprehensive of trying this technique initially, I found it to be my favorite.

I wanted to show a picture of the coffee shop in one version, so I stopped by Bread and took this photo. Part of the charm of the coffee shop is the combination and nature and traffic that is always present. I masked these images and placed them in the scene to add “life” to the still image. I like that the illustrated bird adds an additional element of surprise to the design, and makes it appear more prominently. I used the the Tweening method to determine their movements throughout the frames.

Overall, I found the exploration into the world of gifs to be inspiring and fun. Gifs easily bring any image to life to tell a unique story and create something engaging.

References

Upono. (2017, September 29). 6 Great Music Videos that Use Stop Motion Animation. https://www.upuno.com/blog/2017/09/6-great-music-videos-use-stop-motion-animation/

Watch Mojo. (2014, April 9). Top 10 Stop-Motion Animation Movies. YouTube. https://www.youtube.com/watch?v=87gSm9HLB_0

Adobe. (n.d.). Creating animated action with tweening.https://www.adobe.com/creativecloud/video/discover/tweening.html

Wikipedia. (n.d.). Gif. https://en.wikipedia.org/wiki/GIF

Hue. (n.d.). What is Onion Skinning?https://huehd.com/ufaqs/onionskinning/?ph=520e08a63daa08ffebfa06f6

Steinmetz, K. (2017, June 27). Forget Words, a Lot of Millennials Say GIFs and Emojis Communicate Their Thoughts Better Than English. Time Magazine. https://time.com/4834112/millennials-gifs-emojis/

Yao, Richard. (2018, April 5). The Surging Popularity of GIFs In Digital Culture. IPG Media Lab. Medium. https://medium.com/ipg-media-lab/the-enduring-popularity-of-gifs-in-digital-culture-54763d7754aa

Caduff, Chantal. (n.d.). Cosmpola. https://cosmopola.de/visual-artists/chantal-caduff/c/overview