ICM 504-Module One: Basic Motion – Animated GIFs

 

 

READING & WRITING

 

Summary of Introduction and Chapter One – Pre-Production from Animated Storytelling by Liz Blazer

Liz Blazer’s simple, effective, and informative style is true to the namesake of her Animated Storytelling book’s subtitle: Simple Steps for Creating Animation and Motion Graphics. Based on her introduction and chapter one I look forward to her relevant, sage advice in her signature and digestible stye.

Sneak Preview?: Animation and motion graphics skills are in high demand, and I sense that I have found a handy, overall guide for making engaging stories which, importantly, seems to be tool agnostic.

I was initially challenged to make the distinction between animation and motion graphics. Not to worry though. She met me where I am. Ms. Blazer quickly rewarded my patience and desire to grasp such concepts. She suggests that animation is more typically associated with filmmaking while motion graphics meanwhile has been part of graphic design. Think advertisements, broadcast graphics, film titles, and so on.

Further along her introduction Liz Blazer informs that being intentional about story telling is key to one’s success, which certainly rings central and true. Promising ten easy steps she alludes to the quintessential tools of pre-production tools and storyboarding. In Chapter 1 she elaborates on pre-production, and I was re-exposed to the merits of the creative brief. I took in some tidbits on how to summon the muse and capturing the “Big Idea”. This experienced filmmaker, art director and designer then sprinkles in related nuggets about narrative and creative processes, while also offering short exercises. In Chapter 1 is where I also learned how to clarify the tone and objective of my story. Good stuff! Finally in Chapter 1 this educator delightfully reminds and enlightens me on the important pre-production step of previsualization. This activity can help me visually define the look and feel of my production. After a final smattering of how to experiment with design, and some comments on asset building, I was educated about the “roughing out a style” technique when producing a film, which involves capturing a single image that nails the films overall look and feel.

RESEARCH TO INFORM

 

As a pretty consistent dreamer I had few preconceived animated gifs that I wanted to create already in mind. I used an internet research opportunity, however, to further warm up my mind and see what other fun, creative possibilities spatter the digital landscape . . .  See what you think!  

Animated Gifs 1 & 2 — “The So U Think U Can Dance? Gifs”

 

I started with just one animated gif but couldn’t resist adding the second dancing gif because they both effectively and visually evoked a “don’t worry be happy” emotion in me. These dancing gifs work for me because they epitomize what can be done to accentuate movement in a fun, silly, and creative way.

Of course, dancing is, by definition movement. The bright green second animated gift continues to work for me because it illustrates how you can add cleaver text to underscore the movement without negatively affecting its integrity.

Animated Gifs 3 & 4 “Date Nite Troubles” Gifs”

A woman scorned? These fine ladies evoked something visceral in me. All I can say is it was on the creepy, eerie side . . . Something engaging worked. It clicked. These animated gifs work for me because, somehow, I like their in-your-face style. Both of these animated gifts keep coming at me, nonstop like the old ever ready battery commercial.   How could I not react!

This style of animated gif demonstrates for me how you can effectively literally combine motion and graphics to imaginatively create anything — in this case crazy human anatomy distortions – to achieve rather bizarre effects. I appreciate how the animated gif on the left cleverly leads with the color. My how those red eyes and other red elements pop! I am able to less tolerate how the other animated wonder, however, leads more with movement itself to bring my attention to the women’s eyes and especially their distorted mouths! Then again, isn’t that the point – to evoke a reaction?   BTW my son is dating now, and I think I will finally invest in the Ring doorbell app to check all crazies at the door!

Safety is the number value at our regional electric utility. Getting it wrong could lead to serious injury over even worse. Although the creators of each of these animated gifs take a different approach to safety messaging (one alarmingly silly and one suggestive of human warmth and love) they both arouse emotions that are literally cartoonish but could be effective in different messaging situations. The absolute foolishness of the cartoon-like gif on the left is what works for me. It is unlike some of the “standard”, necessary-but-less imaginative safety graphics and messaging that I have seen. Although I could integrate it, as is, into our utilities’ safety messaging, for me the skeleton gif is better suited to inspire me to do a more customized utility gif. Oh well, at least the skeleton has on his safety goggles!

The “Stay Safe” animated gif works for me because of its simplicity, and also its clean, clear, and rather progressive colors.  It reminds me of the safety of Michelin tire man commercials where they actually invoke images of babies sitting on them as I recall, to make their tire commercials effective.

Also, the clear but subtle implication to me, as I imaginatively think about the “Stay Safe” gif further is that my “mama bear” figure is imploring me to be on my guard. Isn’t that typically what moms do? Simultaneously, I feel that she also actually giving me a big ole hug! Visually and symbolically, I am made feel safe and protected and I won’t scarf at that!

Animated Gifs 7 & 8 “A Bite Out at Sea”

If you haven’t picked up on it yet I have an affinity with strong creative pieces or genres that are either in-your-face, compelling, fun or even scary in some way. Think the original Poseidon Adventure, starring Ernest Borgnine and Shelly Winters, the Terminator, or even The Exorcist.

Relatedly, these two deep sea-based animated gifs are no different. Like all of the other animated gifs that I chose above, they work for me because they emotionally affect me on some level. In this case these two animated gifs resonate with my cautious affinity with scary deep waters and the sometimes-unknown creatures and unpredictable situations thereof. The consistent motion of each help reinforce the nature of what could be going on at any scary moment above, or below the seas.

CREATE

In producing creative artifacts I often get inspired by other’s works or from any number of day-to-day, or even older sources: Now where is that damn swipe file?!  As creatives isn’t getting inspired by other’s works one of our best kept secrets? When creating the three Gifs below, my inspirational or “swipe file” approach was no different.

Also I love “two-fors”. This means that if I can do a school assignment or project that can also benefit me at work in some way, I will try to do it! I also try to consider projects that are topical or appropriate for the season.

In creating all three of my animated gifs I began by using M.S. Publisher which I’m much more familiar with, to place my assets on a concept page. This was my previsualization step, which is recommended by design experts such as Liz Blazer in her Animated Story Telling book. Even for these relatively small tasks committing my ideas to a typed, visual form helped a lot! Once I had all of my concepts separately firmed up electronically, I switched programs to Photoshop for final execution.

Using a cut out image technique

For my FIRST animated gif, “Dragon Boat Festival”, I used a “cut out” technique. I placed all of the fire png images in front of each dragon I wanted to breathe fire. I also wanted it to look like there was a large foreboding dragon in front of the camera, so I included a large fire png at the bottom of the page for emphasis while virtually at the time introducing, through continued movement, the information about the festival in May. 

In the spirit of it being a “two-for” I chose to do the “Dragon Boat Festival” gift because it should allow me to leverage some previous unpublished work that I completed for last year’s festival. In addition to my local utility company, I plan to actually see if this year’s overall dragon boat organizer would be interested levering this proposed gif.

Using a key-frame technique

For my SECOND animated gif, “Snowflakes”, I used a key-frame technique. Here I duplicated a bunch of snowflake pngs and pressed Photoshop’s clock button to change the position and size of the snowflakes. I also added fading by using Photoshop’s opacity keyframes.

I chose the snowflake subject matter because it recently snowed in the DC area making my choice topical. Importantly, my snow topic is also an appropriate awareness topic for my job this time of year in that mostly everyone at my utility has a second role when snow, storms, or otherwise bad weather might affect our multi-state operations. I experimented with adding various design elements, such as adding my company’s logo, and a short message of “Be Aware of Your Second Role” to this animated gif but I was sensitive to not making the piece too busy with elements such that it diminished or distracted from the merits or functioning of the animation itself.

Using a computer-based “onion-skin” technique

This being the end of January, Valentine’s day is right around the corner and will therefore be very topical. Therefore, for my THIRD animated gif, “Happy Valentine’s Day”, I used the onion-skinning technique. I was able to see what frame came last in Photoshop with each new piece of the drawings. The long balloon line string coming from the top was done by seeing where each last frame had the line stop.

I then redrew each part to show a finished cartoon of a heart balloon coming from above. I also did the onion-skin on the heart that appears in the middle, creating it with the Photoshop brush tool as well.

Not necessarily planning to try to leverage this for my work, I will get this handcrafted, timely Valentine’s message out to the key sweethearts in my life, starting first and foremost to my dear wifee!

Facebook
Twitter
LinkedIn
Pinterest
Scroll to Top