Advanced Motion (Final Project)

Reading & Writing

The final chapter in Liz Blazer’s Animated Storytelling, entitled “Show and Tell,” covers all that it takes to get your project out there. Once your film is complete, it’s time to get it out there! Here, Blazer provides her readers with details and considerations to make surrounding packaging a project, submitting to festivals (or not), networking, and sharing. My favorite tips from this chapter are the ones regarding networking.

Often, upon completing a project, we jump straight into sharing the entire project, expecting that others will see it, engage with it, and, hopefully, share it. Surprisingly, Blazer encourages her readers to first connect with peers. This includes like-minded artists, as well as people that “share a common thread with the story” of your work. Blazer’s next tip is to “Be a Good Audience.” It’s important to be supportive of other peers, as what goes around comes around. Building rapport and relationships with other individuals will likely result in genuine feedback and support when it’s your turn to share. Furthermore, Blazer stresses that self-promotion is successful in moderation and the proper settings. 

Another key part of networking involves splicing up your work, sharing it in bits and pieces. Blazer suggests teasing your work out over time to pique the interest of others so that they are requesting to see it. After sharing bits of the project, share the whole thing and ask for feedback. Finally, networking in person can be highly beneficial. Get comfortable in your own skin and don’t be afraid to put yourself out there. You never know what can happen.

Blazer closes the chapter with one last encouragement, “never stop.” She describes being an artist as a “constant itch” that needs to be scratched. When the itch returns, it’s time to start the process again with a new project and a fresh idea.

Overall, as a creative person, Animated Storytelling has been informative and inspirational from start to finish. I loved Blazer’s writing style and her funny little stories and scenarios. She consistently supported her work with examples and offered great tips and advice along the way. The most important thing I learned through reading this book was to be intentional in practice with all projects. Every step of developing a project involves a tool or practice that will help refine and support the story while keeping things organized. From creating a creative brief to elevator pitches, sketching, storyboarding, selecting audio, you name it, Blazer provided me with a distinct strategy to create a solid project without it feeling overwhelming or intimidating. 

Research

When working with motion and/or animation, the possibilities are endless. Here are some examples of phenomenal uses of motion, effects, and animation.

Between 2020 and the beginning of this year, my husband and I played parts one and two of a video game called The Last of Us. I always wondered how some of the scenes were created, but never took the time to look into it until now. Here’s some paralleled footage of motion-captured scenes used to create scenes from the game. The quality and editing aren’t the best, but, having played the games, I can appreciate the work that goes into creating it.

This Yoplait commercial uses animation to advertise their products creatively and expressively. The ad maintains real representations of the yogurt and gogurt moving through a playful, colorful, paper-like world. The transitions between scenes are quick, yet engaging and well-thought out. 

Adobe is the most recognized creative software company, so it’s only fitting that their advertisements incorporate motion, animation, and special effects all at once. If you happen to catch their latest Premiere Pro ad on YouTube, check it out.

Create

Initially, I had a few ideas floating around for my final project. I settled upon revisiting my onion-skinned animation from Module 1 and revamping it with some of the skills I have acquired throughout this course. I took the first frame of my outlined Instax camera, created in Photoshop, and utilized Procreate to add color and polish it. Next, I challenged myself to use animation assist, a Procreate feature, for the first time to animate a button push, flash, and the film coming out of the camera, frame by frame. In the succeeding frames, I scaled previous frames larger, little by little until they filled the screen, zooming into a photo containing my actual Instax camera. I made sure to line up the real Instax with the illustrated one. This allowed me to fade the real one out to reveal the illustration in the first frame, ending where we started.

Once all my frames were complete and the animation looped, I exported an mp4 and moved to Premiere Pro. Here, I added sound and reworked some of the zooming frames to make the movement smoother. Eventually, I had the bright idea to change the background to embody more of a beach/travel feel and help tie everything together, considering the oceanside soundtrack and the beach photo within the film. Unfortunately, I created my frames in Procreate using solid backgrounds within each frame. Revisiting the background within my animation meant removing the background I had already created. I opted to try it anyway and further familiarize myself with the program. This time around, I moved faster and ended up with two variations of the animation that I appreciate equally.

Working between two programs prompted me to consider all the software I’ve utilized during this course. I find that each program is unique, housing distinct strengths and weaknesses. A zooming effect may appear to be choppy using Procreate’s animation assist. However, zooming using the scale and position keyframes in Premiere Pro would result in a much smoother motion. Due to the various projects I have completed within this course, I now have a better idea of which programs may suit me best for any given project. Furthermore, my skill and knowledge levels have increased alongside my confidence in myself as a creator of motion-related media. I really enjoy animation and motion graphics and, in the future, I look forward to experimenting with more styles and mediums and potentially introducing them into my daily work as a graphic designer.

Module Six: Interface Motion (User Interface Animation)

A gif of my final button animation

Reading and Writing

“Animate!” That’s the title of Liz Blazer’s tenth chapter in Animated Storytelling. In this chapter, we’re finally ready to get the animation show on the road. Blazer offers her readers wisdom and practical tips to ensure that the animation process will be a success. 

We start off with two important steps:

  1. Create a production calendar: Print a blank calendar and fill it in backward, starting with the delivery date and working back to pre-production. Once it’s complete, create a digital version for easy sharing.
  2. Protect ya’ tech: Stay organized by utilizing simple file names and folders. Save versions early and often. Finally, be sure to get a hard drive and back up your files daily.

Next, Blazer provides tips for starting the project. She encourages animators to start with the scenes that are the shortest, easiest, and most fun to animate. Additionally, she suggests breaking up tough scenes into smaller chunks that are easier to tackle. 

As every shot will not be included in the final animation, it is also important to become a brutal editor. This tip is especially relevant for me because I often have a tough time cutting out segments of my work that I have fallen in love with. To address this, Blazer implores the reader to question whether the shot is truly necessary. She states, “if you’re reluctant to edit the sequence because it’s your ‘coolest part,’ then definitely consider cutting it,” because it will likely take the most time and delay the production schedule. This tip was a timely reminder to avoid getting super attached to my creative work and remain flexible. 

Finally, Blazer closes the chapter by providing substantial advice regarding how to remain flexible regarding movement and sound within animation. 

Research

Gif created using animation video found on Career Foundry site

My first UI animation selection comes from Career Foundry. I love that all stages of the animation take place within one shape, yet the user is able to observe the progress and completion of their download. Each stage of the download has a distinct color paired with its own mini animation. The transition between each stage is quick and clean. 

Screenshot of falling stars from Aaron Iker’s rating animation

Aaron Iker has tons of UI animations on Dribbble. This particular animation allows the user to provide their rating, which is indicated by stars and the color yellow. Upon changing their rating, the stars that are removed return to the initial gray color, shatter, and fall off of the screen.

Screenshot of Shivam Kaushik’s upload animations on Dribble

Shivam Kaushik’s animation of an upload button shows us how one action can be animated successfully in multiple ways.

Screenshot of the menu button opening up from Oleg Frolov’s dribbble profile

Here, Oleg Frolov cycles between an open and closed menu with one click. The downward arrow duplicates its stems, rotating them downwards to form an “x.” The “x,” in turn, folds those stems upwards to return to its initial state.

Screenshot of Saavan Ch’s second upload animation on Behance

Finally, moving to Behance, Saavan Ch provides four examples of how an upload can be achieved, using the same base shapes, but different animations. His second upload animation was a source of inspiration for my own creation.

Create

This week, I created a UI animation of my own. In the past few years, dark mode has become a popular feature amongst users of various social media platforms, websites, and even smartphones. Primarily, this feature was created to protect users’ eyes. However, today, many users prefer dark mode for its sleek look and feel. Most of my closet is black and my devices are always the same color: Apple’s “space gray,” so it only makes sense that I prefer dark mode over light. I found it fitting to create a dark and light mode button animation.

Brainstorming sketches of my dark/light mode button animation

I started my process with a pencil and sketchbook, which allowed me to explore multiple button shapes, varied symbol representations for the two modes, and a few ideas surrounding the transitions between modes. After trying a few different approaches, I determined that my button would be a circle that toggles between a moon icon for dark mode and a sun icon for light. When transitioning from light to dark, the button would fill with the dark mode color in a fluid-like manner from bottom to top. When transitioning from dark to light, the button would do the opposite.

Dark and Light Mode Button Animation, created in Adobe After Effects

Sketching my ideas before moving to After Effects helped my animation process progress very smoothly. The only challenges I faced while developing my animation occurred toward the end when I made the decision to mask the moon and sun icons into a flat horizon as they popped up and down between button clicks. With a little research, I learned how to create masks on separate solid layers and apply alpha track mattes to each icon layer. 

My favorite part of creating this button animation was incorporating audio. Finding a mouse click sound effect was straightforward. To take the animation a step further, I wanted to include two additional sound effects to indicate that the user’s request was met. Finding two contrasting notification sound effects that were both positive in nature (for free) was a bit of a challenge. Thankfully, I was able to swing it. In my final animation, I paired the lighter, higher-pitched notification sound effect with the light mode setting, and the deeper sound effect with the dark mode setting. 

Altogether, I really enjoyed this project. I would love to explore alternative dark/light mode switch animations in the future. Additionally, I am open to creating UI animations in other softwares including Adobe XD and Figma.

Module Five: Motion for Promotion (Logo Stinger)

Reading & Writing

Chapter 9 of Animated Storytelling is called “Technique.” In this chapter, Blazer walks her audience through the final step before the animation begins. Animators often use the animation technique they are most familiar with. However, Blazer encourages the reader to step out of their comfort zone and explore all animation techniques, implementing the technique that pairs best with their storyline. 

This is accomplished by considering how the final animation will be viewed, aka the format. The next and most important consideration to take involves translating your story. During this step, it’s important to review your creative brief and consider techniques that embody the overall message and tone of the story. 

Once these considerations have been made, there are several techniques and visual styles to explore. Blazer progresses through the chapter by supplying the reader with descriptions of these techniques and styles. She encourages the reader to research examples of the technique/style they have chosen, seek inspiration, and adapt. 

Finally, we learn to be flexible and find a good workaround to making the animation a success. Here are the workarounds Blazer shared:

Workaround 1: Import Still Images

  • Making use of editing tools while working with still images inside your composition may end up feeling like full-on animation. 

Workaround 2: Shoot Live-Action Footage

  • Sometimes, if still images aren’t working, incorporating live-action footage into the project and processing and editing it in your program can result in a seamless animation.

Workaround 3: Staff Up

  • Outsourcing work can save a lot of time and effort. It’s always a relief to have help with a big project, and the creativity of other individuals can greatly benefit the final animation. 

Research

The following animated scenes utilize some of Frank Thomas and Ollie Johnston’s 12 principles of animation

Staging

This scene from Arthur uses staging to guide the viewer’s attention. The animation incorporates direct cuts from scene to scene to identify the main subject. Furthermore, the animators also intentionally pan from one area of the shot to the next, utilizing the setting, timing, camera position, and even the acting to capture the overall idea.

Squash and Stretch

Demon Slayer’s bouncing ball scene uses squash and stretch. This principle emphasizes the speed, flexibility, and momentum of the balls as they bounce throughout the house. 

Appeal

Foster’s Home for Imaginary Friends is full of appeal. Each character has a distinct appearance and character design that is interesting and intriguing to the audience. Although they are all drastically different, the common use of big, wide eyes makes each character likable. 

Solid Drawing

Sony’s Hair Love makes great use of solid drawing, utilizing weight and volume to bring each object and character to life, even down to Zuri’s hair. As Zuri, her cat, and her dad move throughout the house and are seen from varied angles and perspectives, their movements make you believe they exist within a three-dimensional space. 

Anticipation

Finally, anticipation is present throughout many Kim Possible fight scenes. Here, Kim and Shego consistently move into specific positions or stances in preparation to jump, strike or block their opponent. 

Create

Toward the end of 2020, I woke up with a crazy idea (as I often do). My idea was to start a podcast. Long story short, I have been planning, producing, and preparing to launch the first season of my podcast, called Feel My PainFeel My Pain is a podcast dedicated to providing an inside look into the daily experiences of individuals diagnosed with a rare blood disorder called Sickle Cell Disease, which causes chronic pain. I have Sickle Cell, and I am also connected to numerous people directly impacted by this disease. Through the years, I have come to learn that my counterparts have completely different experiences than me. Everyone’s journey is unique. 

As Feel My Pain develops, I hope to invite people with Sickle Cell and those directly connected to individuals with the disease to share their personal stories through an anonymous submission form. These submissions will be transformed into a storytelling experience in which the listener is granted the opportunity to assimilate the world of those with Sickle Cell and feel their pain. My ultimate goal for this podcast is to provide insight, increase understanding, and raise awareness for a medical condition affecting millions of people of color worldwide, including myself and my loved ones. 

Sometime in July, I created the look and feel for the podcast, including sans serif type, blacks, reds, whites, splashes of blood, and a few blood cells. A couple of months later, I created an Instagram page and started working on the website. Although I am starting with a podcast, I hope to branch out and develop a blog and YouTube page, utilizing these platforms to film the podcast and provide resources and educational information for those desiring to learn more about life with Sickle Cell. 

So, this week, when presented with the opportunity to animate a logo, I figured why not animate the Feel My Pain logotype for my future YouTube endeavors? Admittedly, though I am a graphic designer, I’m not a fan of logo creation; I do best with type. As of now, Feel My Pain does not have a logomark, but, being that this is a podcast, I think a logotype serves this purpose well. 

I initially created the podcast graphics in Adobe Illustrator and already had a few designs on artboards sized 1920×1080. After digging up the Illustrator file, I selected the designs I needed for this project and copied them into a new HDV Illustrator template. Next, I sorted the elements into 21 different layers, naming each layer based on its contents. After finalizing my Illustrator file, I imported it into After Effects as a composition, retaining the layer sizes. Next came animation!

My main challenge was finding a way to animate the Feel My Pain text interestingly and appropriately, considering my audience and the podcast topic. I decided to direct the viewer’s attention to the word “pain,” which captivates the podcast’s theme most. Outside of the words “the” and “podcast,” every letter within the design had its own layer, so I manipulated each of them, one by one. For the animated stroke effect, I created shape layers from vector layers, added strokes to each shape layer, and followed this tutorial to apply trim paths to the letters. There was definitely a learning curve concerning creating new shape layers and getting the strokes to move how I envisioned, as it required a lot of research, trial, and error. 

A second challenge arose when masking the blood in the top right and bottom left corners. I intended for the blood to emerge fluidly along the path of the blood’s shape, so I attempted to move the mask points frame by frame. However, my first few sets of masks moved very awkwardly. After a few attempts, I opted to create two large masks and gradually move them onto the screen to reveal the blood. I completed this part of the animation by sliding blood drops and a blood cell into the frame, holding the complete image for about a second, and fading everything to black. 

My initial composition animated each element right after the other with everything timed according to my observations and judgment. I selected a relaxed song with the potential to open up the podcast at full volume and then decrease when the dialogue starts, fading out completely or standing as subtle background music. After adding in my music selection, I moved things around further to time it better with the song. This resulted in the words and strokes moving at a slower pace and the blood animations occurring simultaneously. 

Altogether, I would like to explore more ways to animate type and blood. I think it would be nice to experiment with morphing the text or splattering the blood. I would also like to consider having a different animation and music selection for every season of the podcast. 

Production and Post (Stop Motion II)

A progression of test shots, taken in preparation for production.

Reading & Writing

This week’s reading of Animated Storytelling covered Sound Ideas (chapter 7) and Design Wonderland (chapter 8). Here are some key takeaways from each chapter:

Sound Ideas: Get your audio and story in sync

  • Let Sound Lead the Story: it is important to consider sound before animation. Sound shouldn’t be an afterthought. It should be part of your writing and design. Furthermore, sound should serve as the “primary compass for your storytelling.”
    • Diegetic (literal sound) comes from sound sources that are visible. This sound comes from the physical world within the film. 
    • No-diegetic (non-literal sound) includes sound sources that are not visible and unnatural to objects in the scene. 
    • Sound effects are accomplished best when limited. “Restraint is key.” Overuse of sound effects can result in ineffective sound effects.
    • Channel your poet. Surreal sound effects may capture your message or expression more effectively than literal sound effects.
    • Music can serve as sound effects, providing an “organic feel, while also giving your entire soundtrack the feeling of synthesis.”
    • Music can determine emotion, set the rhythm, and guide the journey within your story. 
      • Score to “theme”
      • Consider the music of “silence” 
      • Score “against”
    • Only include dialogue if it is absolutely necessary. 
      • Match every line of dialogue to the character’s personality.
      • Characters need to speak in a real, relatable, naturalistic way.
      • Have your characters speak in a way that matches the overall mood of the scene. 
  • Narration/Voiceover for Motion Graphics
    • Clarity and brevity are key when scripting for motion graphics. Leave no room for misinterpretation. 
    • “Write brief, and write clear, but also write visual.”
    • Perform and edit your draft multiple times to refine it. 
    • Once the script is recorded, determine where the music comes in.
    • “The pace of the voice drives things, type sits at the center, and design is the spoonful of sugar that helps the medicine go down.”
  • Ready, Set, Go: move onto design and animation
  • A Final Word on Timing: “Timing is everything.” Carefully consider the placement of every cue, dialogue, sound effect, etc.

Design Wonderland: World building and environmental design

  • “Animation allows you to create any chaos you want.” Once your world is introduced, you must commit to it. If you do not commit to the world you have created, you’ll lose your audience.
  • Continuity is key. If you go against your world’s logic, you’ll face continuity issues. 
  • But First (Again): Be Influenced
    • Have influences that inspire you. “Borrow ideas and inspiration from the stories that you love most.”
  • Designing the Rules
    • Establish your world’s time and place. Past, present, or future?
    • Define the physical order
    • Define the social order
    • Define the visual order
    • Look around! Our world is inspiring.
  • On Motion Graphics & Branding
    • Study the core values of the brand and establish visual rules around it.

Research

Effective Audio

Pixar’s Wind is an animated short that tells the story of a grandmother and her grandson who are trapped together in a barren land. Although there are no audible words spoken between the two, the animation’s music, ambient audio, and sound effects all work together to effectively capture and support the events taking place within the short. This clip starts with music and progresses with sound effects, followed by subtle ambient audio outside of the house and, finally, more effects that are loud and impactful.

Spiderman: Into the Spider-Verse, created by Sony, is one of my favorite animated films. Throughout the movie, you can hear conversations between the characters, overlapping ambient audio between the city, Miles’ school, and other settings, sound effects that align with the action-packed fight scenes, and so much more. This particular scene transitions back and forth between dialogue, sound effects specific to each character, the audio of the cafeteria, and the thrilling music seamlessly. There’s even quick text animations thrown into the mix while Miles and Peter swing from the trees. 

Effective Text Animation

Speaking of text animation, the opening logos for Into the Spider-Verse, are animated repetitively to mimic a glitching effect seen throughout the movie. From the start of the movie, this is an effective way to hint at a common theme within the storyline. 

Animated lyric videos have become popular throughout the years. Often times they consist of looping footage and words thrown on the screen. Every once in a while, however, artists use this opportunity to animate the text, which makes the lyric video an enjoyable experience for their audience.

Finally, you may not have noticed, but Apple uses text animation in a lot of their videos. Sometimes it is subtle and uniform, and, at other times, it is colorful and dynamic. Across all of their videos, you’ll find that the footage and the text do not compete with each other. Within each video, all elements coexist peacefully. 

Create: Better Together

An encouraging stop motion of two friendly mugs on a journey, facing challenges together.
Shot on Sony a6400, Edited using Adobe Premiere Pro & After Effects.
Soundtrack downloaded from Bensound, edited by me: https://www.bensound.com/royalty-free…
All other sound effects created by me and/or sourced from the following sites:
https://www.fesliyanstudios.com/ https://freesound.org/ https://www.freesfx.co.uk/

This week, I utilized stop motion to bring my linear story idea from my last blog post to life. Initially, I wanted to focus on my nonlinear storyline which involved filling a barren greenhouse with plants shelf by shelf. I felt that my nonlinear storyline would be active, colorful, interesting, and enjoyable to create. However, upon reviewing my two storylines, I decided to challenge myself to incorporate more color and activity into my linear storyline. I experimented with and built upon my storyline, in these ways:

  • Numerous household objects scuttling across the ground (tabletop) and toward the mugs with varied speeds and motion patterns
  • Clouds cycling through the sky (wall)
  • Sound elements including a soundtrack and multiple sound effects to drive the action within the animation

These amendments surely brightened up my piece, however, they presented additional challenges. For example, many objects within a stop motion means many focal points for the camera. It also means there will be many items to account for and manipulate. Additionally, the clouds were a last-minute improvisation, created using polyfill stuffing from a hole in my dog’s pillow, and blue painter’s tape. Over time, while shooting the stop motion and relocating the clouds between each shot, the painter’s tape did not stick to the wall well and became more exposed. 

Although I truly enjoyed creating this stop motion, I did encounter a few more complications along the way. For one, I attempted to capture a second shot to incorporate into the final animation, but unfortunately, using a scissor arm phone holder, coupled with my iPhone resulted in unstable shots and choppy footage, because I used my iPhone’s volume control buttons to capture the shots and the phone holder covered the majority of the screen, so I couldn’t quite see what I was capturing. My phone also died unexpectedly, leaving me with incomplete footage. 

Better Together iPhone Outtakes

For my main shots, I used my Sony a400 and a Meike battery grip and remote. Although I have had the grip and remote for a while, this was my first time making use of the remote. I quickly realized that it isn’t really intuitive. After watching various Youtube videos and practicing with the remote, I still struggled with shots because the remote would refocus the lens with every shot. My camera would also sleep and the lens would retract as I was moving objects around between shots. Therefore, my stop motion contains 2-3 shots that are out of focus and the lighting is slightly different between shots. This intercepted some masking I intended to do in post production. I wanted the clouds to stay in place from the start of the breaking scene to the completion of the mug’s mending. Instead, I inserted two frame holds to highlight those moments. 

Finally, my greatest challenge in post was sourcing sound effects. Finding the right sounds to pair with the movement of the mugs, or the items shuffling across the table, or the impact of the hammer hitting the mug required a lot of time and patience. In some cases, there were too many options to choose from. In others, there were too few, so I created my own. Despite all of this, including sound effects was not necessary, but it made the stop motion more realistic and engaging.

One of my favorite parts of post prouction was the music. I included a sountrack, entitled “Once Again,” from Bensound to drive my stop motion. This particular soundtrack builds upon itself, adding in layers of musical instruments with each go-round. With only 30 seconds to work with, I used this building and repetition to my advantage and moved parts of the song around to match the soundtrack’s escalation with my storyline.

Altogether, learning about stop motion and then creating my own was fun and fulfilling. From pre-production to production to post, each stage helped me practice intentionality and consider all aspects of my work. With time, I hope to grow my stop motion experience and perfect this animation style. I look forward to creating a stop motion animation for my nonlinear storyline very soon!

Module Three: Pre-Production in Action (Stop Motion I)

Reading & Writing

So far, while reading Liz Blazer’s Animated Storytelling, I have learned the various steps and practices that make up Pre-Production, Storytelling, Unlocking Your Story, and Storyboarding. This week’s chapter readings covered Color Sense and Weird Science.

Color Sense

Enhance your story with the right palette

In chapter 5, Blazer shares that color is a significant and powerful component of animation, housing the capability to “express emotion, clarify motivation, and enhance the entire meaning of your piece.” She opens the chapter by clarifying a few color-related vocabulary words that we are all familiar with but may use interchangeably. Here are Blazer’s definitions:

  • Hue: the common color name in the spectrum, like red, blue, or orange.
  • Saturation: the intensity or purity of a color. 
  • Value: the relative lightness or darkness of a color. How much light the color is exposed to determines its value. High value color is closer to white, while low value is closer to black. 
  • Tone: reflects the overall brightness or darkness of an entire shot or scene, regardless of the colors used.

Blazer continues by guiding the reader through creating a color script and a pre-color script. 

  • Color script: a sequential visual outline of how you intend to use color in your animated film.
  • Pre-color script: your storyboard represented by a series of rectangular color bars that match your most essential story beats.

Once the hue, saturation, and value throughout the storyline have been identified, the rest of the color palette can be determined. While determining the color palette, it is imperative to never let the color of the surrounding scenery outshine the characters. After finalizing the pre-color script, the selected colors can be integrated into the entire storyboard. Finally, colors are selected for supporting characters, backgrounds, and props within every shot. 

In the final section of this chapter, Blazer shares some of her most important tips regarding utilizing color within animation:

  • Design for Movement
  • Limit Your Palette
  • Use Saturation Mindfully
  • Support (Don’t Upstage) Your Subject
  • Use Surprise Color for Punctuation
  • Select One Thematic and One Accent Color
  • Make Your Own Rules

Weird Science

Experiment with animation

To start off this chapter, Blazer reminds us that, by nature, animation is one of the most experimental film mediums. She explains that “experimentation is an essential step in getting the most out of the animated process and may even help you to discover the defining moment in your story. Sometimes stories are even born from the process of animation itself.” Blazer encourages her audience to find their own weird science by creating “bad” art and working on the edge of their skill set. 

Next, Blazer shares two scenarios in which experimentation can be beneficial in the long run.

  • Making the Work You Want to Be Hired to Do: To avoid being pigeonholed within the industry, animators can experiment with creating work that interests them. Displaying this work alongside the work they are recognized for could open the door to new work opportunities involving the animation style they desire to be hired to create. 
  • Working on Personal Projects Pays Off in Unexpected Ways: Challenging yourself to experiment in your craft can get you further than you think. Not only will you learn new techniques and grow in your skillset, but your personal work may also be recognized and appreciated by others too!

In the last section of this chapter, Blazer encourages her audience to create an experimentation list by supplying her audience with different areas to experiment with within each storyboard scene. Some of these areas include technique, design, movement transitions, sources, and sound. She concludes the chapter by highlighting two areas of experimentation that animators must explore: transitions and movement.

Research to Inform

This week, I gained more exposure to stop motion. Stop motion is an animation filmmaking technique involving photographed frames. Within each frame, objects are manipulated in small increments. The frames are pieced together in video format to create the illusion that the objects are exhibiting independent motion. 

Since the 1840s, stop motion has been used to create groundbreaking films and animations. To this day, stop motion is seen in music videos, advertisements, movies, independent animations, and more.

Music Videos

Music videos contain some of the most engaging stop motion work I have come across. A number of the songs I have grown to love throughout the years incorporate stop motion to convey a story in an impactful way.

Lettuce With a Perm

This stop motion creator utilizes audio to bring their work to life. Although the animation is distinct and intriguing when watched without audio, the audio serves as a huge cherry on top, captivating the viewer all the more.

Coco Peri

Coco Peri is a multi-disciplinary creator, widely recognized for her stop-motion animations. She creates vibrant and colorful ads for various brands we all know and love. You can find some of her work on her website or in her reel below. 

Short Films

Stop motion films astound me. I can’t imagine the amount of time and patience required to create a stop motion film, especially the ones that contain hand-crafted and manipulated materials. Although they may be a pain to create, these films are impressive works of art, containing multiples scenes and highly detailed elements.

Expedia Commercials

Finally, Expedia’s recent trip commercials combine playful music and whimsical movement across a large set that continuously catches my eye during commercial breaks. These stop motion ads make everything look fun and simple. However, working with multiple scenes and animate and inanimate objects all at once is no small feat.

Create

In preparation for creating my own stop-motion animation, this week I worked through pre-production for two stop-motion storylines. Each pre-production summary includes a general idea, creative brief, and storyboard.

Non-Linear Storyline: The Greenhouse Cabinet

My first storyline involves a barren greenhouse cabinet. The goal is to use The Beaded Necklace storyline format to animate the process of the greenhouse cabinet becoming the home of various plants to the beat/tune of an uplifting soundtrack. 

Although this storyline is my top choice, my cabinet contains a lot of plants which means there will be tons of moving elements within this stop motion. This may present a challenge, as well as keeping the soundtrack in mind while shooting and timing the stop motion to the music. 

To view the details of this storyline including my inspiration, creative brief, and storyboard, check out the pdf below.

Linear Storyline: Mug Buddies

This storyline contains a beginning middle and end:

  • Beginning / Exposition: Two mugs (friends) journey side by side across the dining table
  • Middle / Complication: The black mug collides with a spoon and cracks into pieces
  • End / Resolution: The white mug moves the spoon away and circles around the black mug to mend it. Once the black mug is restored, the two mugs continue their journey across the dining table.

“Mug Buddies,” as I’ve dubbed it for now, will tell a story of help and companionship. The goal is to illustrate the value of friendship, even amongst contrasting individuals, in a unique and creative way. 

Should I chose to pursue this storyline, I am excited to experiment with the breaking and mending of the black mug. I have two identical black mugs that I glazed at a pottery shop. One is broken and one is not. My main concern with this storyline is creating a mending scene that is seamless. The broken mug may require some sort of adhesive to hold some pieces in place.

Find out more about this storyline below.

Experimenting with Uno

Recently, my husband and I have started playing Uno together during our downtime. To get my feet wet, we worked together to shoot a quick stop motion using the Uno cards spread out across our old coffee table. Using a scissor arm phone holder to assist with sustaining our shots, I moved the cards while my husband snapped the photos. 

It’s not my best work, (as my tripod has recently been occupied while I shoot a timelapse of a new leaf unfurling on a plant) but this was a great opportunity to experiment with a new form of animation and manipulate various objects within one scene. Additionally, this was my first time utilizing premiere pro to convert images into a sequence. 

Moving forward, I am excited to be intentional about the staging and framing of the objects within my final stop motion. No matter which storyline I decide to bring to life, I hope to cover all aspects, areas, and details within the piece, including the objects, movements, lighting, sounds, angles, etc.

Module Two: Mixing Motion (Cinemagraphs)

Reading & Writing

Storytelling

Chapter 2 of Animated Storytelling begins with Liz Blazer’s emphasis that, in the world of animation, the possibilities are endless. She shares, “there are no limitations.” Blazer introduces two approaches to storytelling she later discusses: the standard storytelling model and non-narrative storytelling. She goes on to informs us that, after a narrative idea is established, the next step is to plot it out and find the beats,” also known as the active steps that move the story along. She offers tips on how to find the beats and solidify them. Once the beats are narrowed down and concrete, you can move on to choosing a suitable storytelling model. Using a plethora of examples and references, Blazer goes into detail by breaking down the two storytelling models as follows:

Three-Act Structure: Problems Solved

  • “a linear story with three basic steps or acts”
  1. Creat the beats.
  2. Build the story’s arc.
  • Act 1: Problem
  • Act 2: Attempt to solve it
  • Act 3: Resolution

Nonlinear Structure 

  • “A story should have a beginning, middle and end, but not necessarily in that order.” Jean-Luc Godard
  1. Build around an inspiration.
  2. Build a structure.
  3. Use a known structure.
  • Book Ending
  • The Beaded Necklace
  • The Countdown
  • The Puzzle
  • High Concept

Unlocking Your Story

Chapter 3 is a prerequisite for storyboarding, which comes in the following chapter. Here, Blazer makes it clear that the basic elements of your story need to be finalized in order to progress with the next chapter. She then provides four unique narrative exercises to help make the reader’s storyline more clear. These exercises include:

  1. Clear Conflict, Reveal it Early
  2. Start Later
  3. Biggest Secret
  4. Get Graph-y

Not everyone’s story will be narrative, therefore, the second half of the chapter introduces the reader to the experimental form. Blazer asks the following questions to help the reader determine if they would rather explore the experimental approach. 

  • When you think about the story you want to tell, do the images in your head veer toward dream-like, abstract, or surreal?
  • Does your need to experiment with forms and materials seem to be ruling your storytelling process?
  • Do you find the prospect of exploring new territory in terms of story structure especially exciting when it comes to your story?

If any of these questions are answered with, “yes,” the reader has permission to explore the following experimental exercises:

  1. Visual Music
  2. Pure Poetry
  3. Repetition/Evolution
  4. Continuity/Diversity
  5. Anthology
  6. Cut it Out & Play!

Storyboarding

Chapter 4 covers storyboarding, starting out by introducing the reader to Walt Disney. Blazer explains that one of Disney’s most successful innovations occurred “when he decided to pin up a series of his rough sketches in sequence to help explain a story idea to his team.” Since then, storyboarding has become a cost-effective way to flesh out the details of a story before animating. 

Blazer continues by dissecting various approaches to working out visual elements within a piece such as thumbnailing and storyboarding. She goes on to discuss storyboarding hints, offering tips and suggestions that will help iron out details and help the reader craft strong depictions within their storyline. Blazer covers shot composition, framing, and staging. Next, she addresses continuity, including spatial continuity, temporal continuity, and directional continuity. Finally, Blazer discusses the importance of timing and animatics. 

These three chapters were highly informative, detailing the ins and outs of creating and solidifying a storyline. Blazer provided names and backstories for a number of animations to reference. She also included various storyboards to display what makes a storyboard a success. Blazer committed time to ensure that her readers have a step-by-step guide to keep them from getting lost on the road to animating. As a visual person, her tips and supporting examples benefit me greatly. Additionally, as a person who consistently questions their work, Blazer dissects everything in such a way that makes taking on a large creative project feel achieveable.

Research to Inform 

You have probably seen a cinemagraph in action and passed it up as a GIF. Although they are closely related, GIFs and cinemagraphs have distinct characteristics. So what exactly is a cinemagraph?

A cinemagraph is an animation majorly comprised of a still photograph. At first glance, cinemagraphs may appear to be completely static. At a second glance, you’ll notice that cinemagraphs contain subtle motion that is often repetitive. A portion of the image in the foreground, background, or in one specific area is isolated from the rest of the photograph, containing ever so slight motion. This motion plays in a short, creating a loop.

Cinemagraphs exist where photography and videography merge. Well-crafted cinemagraphs are often identified as seamless, blending the active video into the still image and looping the video so that where it starts and ends go unnoticed.

Common cinemagraphs you may come across may study motion within the context of food and/or beverages.

Coffee GIF - Find & Share on GIPHY
Food Porn GIF - Find & Share on GIPHY
Hawaii Shrimp GIF - Find & Share on GIPHY
David Andrés Tangarife Carpio GIF - Find & Share on GIPHY
Lemonade Satisfying GIF - Find & Share on GIPHY
Ice Cream GIF - Find & Share on GIPHY

Others may manipulate the land, the sea, the skies, and the elements.

Daan Roosegaarde Clouds GIF by Living Stills - Find & Share on GIPHY
Water Photography GIF by Living Stills - Find & Share on GIPHY
Sea Clouds GIF - Find & Share on GIPHY
Cinemagraph GIF - Find & Share on GIPHY
Perfect Loop GIF - Find & Share on GIPHY

Some may explore lighting or lights.

Perfect Loop GIF - Find & Share on GIPHY
Watching The Wolfpack GIF by Tech Noir - Find & Share on GIPHY
Altered Carbon GIF - Find & Share on GIPHY
Robert De Niro Art GIF by Tech Noir - Find & Share on GIPHY

While others may contain motion that is very discrete.

Fire Burning GIF - Find & Share on GIPHY
Keys GIF - Find & Share on GIPHY

Some cinemagraphs feature physical movement.

Photography GIF by Photojojo - Find & Share on GIPHY
American Staffordshire Terrier Pitbull GIF - Find & Share on GIPHY
zuparino GIF - Find & Share on GIPHY
River Island Fashion GIF - Find & Share on GIPHY
Sarcastic Oc GIF - Find & Share on GIPHY
San Francisco Taxi GIF - Find & Share on GIPHY

Other motion may exist in the background, foreground, or off to the side.

Kumiko The Treasure Hunter Film GIF by Tech Noir - Find & Share on GIPHY
Train Nyc GIF - Find & Share on GIPHY
Michael Fassbender Waiting GIF by Tech Noir - Find & Share on GIPHY

And surprisingly, cinemagraphs can be illustrative and mixed media too!

Cinemagraph GIF - Find & Share on GIPHY
Hotel Budapest GIF - Find & Share on GIPHY
Gris GIF - Find & Share on GIPHY
Cinemagraph GIF - Find & Share on GIPHY
Pixel Art GIF - Find & Share on GIPHY
GIF by DP Animation Maker - Find & Share on GIPHY
Haha Hariz GIF - Find & Share on GIPHY

Create

Although I have stumbled across a number of cinemagraphs in my day, I never realized that they were a recognized form of animation. I’ve seen others utilize apps to make clouds move through the sky or waters ripple in their images, but I have never tried it myself.

This week I was able to do just that. While learning how to create my own cinemagraphs, I decided to explore some of the subtle movements that often take place within and around my household. To capture these shots, I utilized my iPhone, set to 4K, a tripod, and a ring light. The first two pieces were created in Photoshop. For the remaining cinemagraphs, I used After Effects.

The candle, created in Photoshop

My first cinemagraph featured a candle placed next to a bouquet. I wanted to explore the movement of a lit candle in contrast to a static bouquet. I experimented with different types of movement, including the lit candle wicks encompassed by dancing fire, sliding the lighter into the frame to the left of the candle, and smoke rising from the candle after blowing it out. After testing out all types of movement within my masked still, I found that the most continuous and nearly seamless motion occurred within my first movement type, the lit candle. The other motion options gave me the impression that I was creating a GIF. 

Relax, created in Photoshop

This piece was fun to create and resulted in an almost seamless cinemagraph. To create movement while shooting, I started up the diffuser on the right and continuously tapped on the leaf to the left. I love the bobbing motion of the leaf. However, I found that a heavier bounce produced a more evident transition. I attempted to cut out the footage with distinct bouncing motions and maintain the slight bobs, but there’s still a little bounce in there. Additionally, this cinemagraph taught me to be more intentional with my lighting. Although I utilized a ring light to brighten up the space, it may have been too bright, resulting in shadows surrounding the elements in the shot. It feels as though you can see the line between the still and the video, but these shadows actually exist in the raw footage. Finally, I would have loved for the diffuser’s mist to be more prominent and noticeable. A closer shot may have made this possible.

Guttation, created in After Effects

I call this cinemagraph “Guttation.” Guttation is a process in which water droplets (xylem sap, to be exact) secrete from a plant’s pores. The goal of this cinemagraph was to capture a droplet falling from the plant’s little leaf. Unfortunately, since it’s sap and not pure water, the sap would not budge, no matter how hard I tapped or shook the table. To get it to fall, I pushed the leaf, a little too hard, which resulted in me dedicating time to masking my fingers out of the cinemagraph. After Effects was useful for creating this piece because I could manipulate the mask frame by frame, using keyframes. Although the droplet eventually fell, creating a looping effect was a challenge. I ended up with a reversing effect. The movement within this cinemagraph is comprised of my constant table-bumping. 

Next, I experimented with masking the top half of the window and capturing the motion of the clouds and trees. This didn’t quite work out how I wanted it to either. Furthermore, my multiple exports of the second approach resulted in a static cinemagraph, possibly because I utilized the time stretch feature in After Effects a lot to make the clouds move faster. Although this cinemagraph is not my favorite, I learned about the pros and cons that exist between. Photoshop and After Effects. I also understand the importance of being intentional regarding looping when creating cinemagraphs. Next time, I’ll go for a tighter shot of just a portion of the window.

My final cinemagraph was somewhat of a fail. I started out with the intention of catching the movement of light in my living room caused by the trees waving in front of the sun. Once I started filming, the leaves were not moving as much. Then, a neighbor walked through the frame while walking her dogs. I figured I could use that movement instead, but, I found that looping this kind of movement would be very difficult without my piece resembling a GIF. 

Module One: Basic Motion (Animated GIFs)

Reading & Writing

Introduction

Liz Blazer starts off Animated Storytelling by highlighting the relevance of animated storytelling in our society. Today, storytelling is meaningful, significant, and powerful for a plethora of individuals, audiences, and platforms. Successful animated storytellers are in high demand, yet few and far between. Blazer emphasizes that, no matter what form or method of animated storytelling you utilize, it is imperative to be mindful of the story you are telling. She states, “being intentional about storytelling is the key to success.” Blazer shares ten steps throughout her book to be a successful animated storyteller, starting with the first chapter: Pre-Production.

Pre-Production

Chapter 1 of Animated Storytelling discusses the significance of pre-production. Before jumping right into animation, it is important to plan and prepare for the animation you want to create. This is achieved through Concept development, previsualization, and asset building. If the animated work is a building, these three stages of pre-production are the foundational blocks needed to start constructing. Furthermore, once these stages are complete, you’re off to a great start at developing a solid animation.

This chapter reminded me that every creative piece requires intentionality, even from the start. Without a vision, research, and a plan, you are likely to get lost in your work. Blazer writes, “jumping right into animation before completing the stages of pre-production is kind of like climbing into the ring with a prizefighter without having had a single boxing lesson. You might get a lucky jab in here or there, but after that it’s going to be a bloodbath.” If you’re not intentional about establishing a concept, determining the look and feel, and gathering the assets needed to start producing, your journey into production will get messy.

Although Blazer walks the reader through each stage step-by-step, here’s her quick guide on how to get started with pre-production:

  1. Write a creative brief.
  2. Identify your big idea and create a storyline.
  3. Be open, follow the Yes, and… rule.
  4. Clarify tone and story o objectives by writing an elevator pitch, six-word story, and tag line.
  5. Determine your project’s look and feel with influences and by experimenting with design direction.
  6. Make changes to your story based on design decisions.
  7. Begin building and organizing your assets.
  8. Rough out a style frame.

Research to Inform

GIF-Sharing Today

These days, animated GIFs are popular, effective, and timeless because of how relatable they can be. GIF-sharing is a quick way for people to express their thoughts and feelings without using words at all. There’s a GIF out there for any and everyone. 

Furthermore, GIFs can capture complicated thoughts and concepts and transform them, making them simple and palatable. Generally, GIFs are received well and are easy to understand. 

Here’s a look at some of my favorite GIFs:

Homer

Even if you haven’t watched The Simpsons, you will surely be able to relate to GIFs that originate from this show. Jokes from The Simpsons are classic and have stood the test of time.

Although my favorite Homer GIF shows him vanishing into a hedge, this GIF of him falling down the stairs is not only hilarious but clever. It goes beyond traditional looping identified amongst animated GIFs. It’s seamless, meaning you can not tell where it ends or begins, so Homer keeps falling down a never-ending staircase. It’s simple, yet brilliant. 

Homer Falling GIF - Find & Share on GIPHY
Homer Falling

Homer Vanishing into the Bushes

Sometimes people make amendments to existing GIF animations to make things even more relevant. Recently, Homer’s vanishing GIF was used to make a funny meme in which he is holding a houseplant. In the plant community, this houseplant is often labeled as “rare” and “expensive.” There are long-running jokes about plant-lovers sneaking their latest plant purchases into their house in hopes of hiding it from a roommate or loved one. The caption on this modified GIF was “trying to sneak another monstera into my flat without my roommates noticing.” Added layers and nuances within GIFs make them even more fun.

Homer Hiding Monstera Albo. GIF found on Instagram

Real Life

I call the following GIFs “Real Life GIFs,” because they display the realities we all face at one point or another regarding our circumstances and emotions. We have all said “I’m fine” at some point in life when we were likely anything else but “fine.” Therefore, We can laugh at relatable GIFs, knowing that we are not alone in what we experience.

Storytelling 

Finally, GIFs that display a story are effective because they easily explain a process or journey within seconds. Whether making coffee, growing a plant, baking cookies, or slicing fruit, these GIFs allow you to observe how something is accomplished without it being over-produced or over-explained.

Grow Plant Growth GIF by tarninabarn - Find & Share on GIPHY
How To Wow GIF by JustViral.Net - Find & Share on GIPHY

Create: GIFs of Three Things I Love

Plants

In the past year, I have become a plant enthusiast. I started taking photos to document the progress of each of my plants and eventually created an Instagram page to further document my journey, learn more plant-related things, and connect with other plant-lovers. Created using three video layers in Photoshop, the GIF below pictures a cut-out leaf from my current favorite plant moving back and forth as the background alternates between three textured images.

Textured Monstera GIF. Background images from pexels

Creating each layer within this GIF required me to remove the Monstera leaf from its background, rotate and place it where desired on the canvas, and add in a textured background overlaid with a gray-colored layer set to multiply. The three layers were then merged to create one layer. I repeated this process two more times and converted all layers to video layers to develop the final product.

Original monstera photo

Capturing Memories 

Onio-skinned GIF of my polaroid camera in action

I love capturing memorable life moments via photos, videos, and, oftentimes, polaroids. This GIF is an onion skin animation of my Instax Mini camera, snapping a photo. After the camera flashes, the film emerges from the top of the camera and floats through the frame. This GIF was created in Photoshop using a video layer. Although the camera was stagnant, the flash and the film were active. The file GIF was created using 33 separate drawings. 

My Instax mini camera

My Husband

This final GIF alternates through several images I recently captured featuring my husband. To celebrate hitting 500k followers on TikTok we staged an in-home photoshoot for use on his social media platforms. These close-ups are some of my favorite shots from the mini shoot. 

This GIF was also created in Photoshop. However, this time I created a frame animation instead of creating a video timeline. Using eight frames, I alternated between each photo at five frames per second and set the GIF to loop. 

My husband in action
One of the photos used for the 500k post

Final Thoughts

GIFs are fun, interactive, informative, and relatable. Whether created using existing footage, photos, illustrations, or more, GIFs are useful in many ways. They are fairly simple to create and functional for any experience level. Whether making them or sharing them, GIFs are engaging and enjoyable for all audiences.