Animated Storytelling with GIFs (Module One)

You’re having a text conversation with your best friend, and they ask, “do you want to go to the state fair today?” and there’s no better way to respond to that question but with a GIF.

Yes GIF by Brittany Broski - Find & Share on GIPHY

Particularly in the world of instant messaging, GIFs help to show a certain thought, feeling, or emotion that you might not get from text alone. With their short, silent, looping animation, they quickly tell a story and are popular for those reasons. 

With GIFs comes animated storytelling. Animation and digital motion designers may create GIFs to share their ideal story using images, sketching, rendered characters, and so on. 


Animated storytelling by Liz Blazer lays out steps to create animation and motion graphics. In Chapter One: Pre-Production, the author states three questions that you need to know when beginning a project:

  • What is it?
  • What does it look like?
  • What is it made of?

If those questions are unanswered, there are a few steps to help:

  1. Concept development – use this step to make a creative brief, which identifies objectives, audience, deadline; then, brainstorm the concept’s elevator pitch and tagline. 
  2. Previsualization – this step is to find the overall look and feel of the project. 
  3. Asset building – the last step involves gathering all of the assets which are the pieces needed to begin animating the story. 

The three steps break down everything you need to help bring the idea to fruition. It’s a very detailed process as the thought really needs to be nailed down before executing – BUT it’s also OK if you do this process, then when designing, the concept changes. That’s when it’s important to go back a few steps to refine the new direction. 

One last thing that’s helpful at the end of the pre-production process is to create a style frame. This is a single image – that would be incorporated into the animation – which ties down the overall look and feel. They’re full-color visualizations of a character, background, or similar that would be part of the planned production. This helps to know if the concept aligns with all goals and concepts before beginning production. 


Before creating my own GIFs using the steps that Blazer lays out in her first chapter of Animated Storytelling, I need to do some research – what makes a good GIF?

Queue De Poisson Black And White GIF - Find & Share on GIPHY

This GIF has a fun style and a cute little story about a mermaid, who looks happy to see – and waves to whoever is in front of her then goes back to her home underwater. The GIFs creator likely used an onion skin technique to complete it.

Work From Home Art GIF by Joan Kamberaj - Find & Share on GIPHY

Using another approach, this GIF creator likely made a quick video of someone painting a pink brushstroke, then looped it. I think it’s effective because the colors are bold, and it implies crafting or DIYing adventures.

Animation Design GIF by Borrachas - Find & Share on GIPHY

I enjoy this GIF, as it doesn’t so much tell a story, but it’s enjoyable to watch. I have a hard time understanding how this GIF loops, which entices me to think about it more. 

Stop Motion Cat GIF by Mochimochiland - Find & Share on GIPHY

This GIF appears to have originated using stop motion. While stop motion is a whole other type of animation, this one loops to make a GIF. I like it (not only because it’s Halloween-themed, and the Holiday is approaching) because this one does tell a quick story about a cat and a jack-o-lantern. It’s another way to get creative when thinking about making GIFs. 

See Ya Lettering GIF by Denyse® - Find & Share on GIPHY

Lastly, I like this GIF because it uses text as the figure of the composition. It’s something to remember when telling stories or using tones – it can be done with words too. 

Overall, from this research, I found that GIFs might not need to have as much of a story as they do thoughts/feelings, or emotions. 


GIF 1: Rainbow Pinwheel

Pinwheels are meant to spin. I’ve had this rainbow pinwheel for a while now, and haven’t yet put it outside for its purpose. Instead, it’s been sitting as a static decoration inside my home. 

My thought behind this GIF is that the pinwheel comes alive, sort of like a Toy Story situation. Using one of the aspects from the concept development step in Blazer’s Animated Storytelling, here is a full sentence, known as the elevator pitch that includes the tone, plot, and theme of the GIF: 

Happy rainbow pinwheel begins to spin inside, being its true self. 

I took a photo of the pinwheel, then used Photoshop to create this GIF, starting with that one single image. Working off of one image – and in my case, attempting to move the pinwheel to look like it’s spinning – can be tricky. Perspective comes into play, so unless you have multiple images to work off of, creating a photographed GIF may take some practice. I used cut out images in Photoshop, and managed to change the colors of the pinwheels to make it have the spinning effect for one fluid looping animation.


Who doesn’t love the retro look of light-up billboards? Well, I enjoy it and thought it’d be great to create a GIF with this style. 

Inspired by the GIF I found through my research that uses a word as the subject, I decided to create one of my own. This uses the onion skin technique in Photoshop – where I drew the same image (rectangle billboard) over and over in different frames, with the word “SHINE” motioning in throughout. 

One sentence elevator pitch: Bold billboard spells “SHINE” for people to see.

GIF 3: The Ezzy Dance

One of my dogs does this cute little paw dance when she’s about to get a treat or go outside to show her excitement. It’s an adorable personality trait of hers so I thought it would be perfect to capture using a quick, short-framed GIF. 

Using the same sentence structure as the above GIF, here’s the elevator pitch for this GIF: Excited dog, about to get a treat because she’s been a good girl. 

To create this GIF, I used Photoshop. I enjoy line-drawn art styles, so reverted to this look for the GIF. The original plan was to use the same onion skins as the above GIF, but more detailed. As I drew it up, I realized this doesn’t need many frames to get the simple dance across, so I changed my direction to use frame animation instead of video animation. 

There are many different GIF styles, and I think I nailed the traditional choppy look with this one. But If I were to try this again, I would like to grow my skills using the onion skin effect with video animation so it could look more like fluid movements! To be continued on my end.

Ultimately, GIFs can have a lot of storytelling power. You can create a GIF that doesn’t have an obvious story, but it should have a tone that provokes its essence. 

One thought on “Animated Storytelling with GIFs (Module One)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s