In this module, we learned the skills and techniques needed to create basic motion designs. From “cut out” images to hand-drawn illustrations or tweening of elements, we created at least three of our own animated GIFs to demonstrate the basic animation concepts we learned.
Reading and Writing
In the first chapter of Animated Storytelling by Liz Blazer, the essential role of pre-production in the animation process is emphasized along with a structured approach of concept development, previsualization, and asset building.
Concept Development
The chapter highlights the importance of answering three fundamental questions about any project: what is it, what does it look like, and what is it made of? To address these questions effectively, the author introduces a three-step process. First, create a creative brief that outlines the aims, objectives, target audience, and milestone deadlines. It is also encouraged for creators to step away from the computer and jot down critical information like the purpose, audience, duration, and deadline. Furthermore, the concept development process involves generating a big idea and creating the storyline. Creators are urged to embrace a “yes, and…” approach to help during this phase. The author reminds us that the first draft will likely be imperfect but advises creators to persist in refining their ideas.
Previsualization
The chapter defines previsualization as a crucial stage that determines the visual aspects of the production before the animating begins. It ranges from simple sketches to fully rendered characters and backgrounds to reinforce design directions, establish animation techniques, and allow us to experiment with visual elements. The author recommends seeking inspiration, experimenting with design, and understanding the impact of design on storytelling.
Asset Building
The concept of asset building is introduced to address the question of what the project is made of, including various elements such as logos, character designs, props, backgrounds, and more. The chapter ends by talking about the need to rough out a style frame—an image capturing the overall look and feel of the project. Unlike a finalized storyboard, a style frame doesn’t require polish but aids in explaining how stylistic choices contribute to the storytelling. To sum up, this brings attention to the diverse elements that make up the assets and their importance in laying the foundation for the animation process.
Research to Inform
In the digital space, the creativity of animated GIFs knows no bounds. Despite the ubiquity of these animated wonders, narrowing down the choices proved to be a delightful yet challenging task. To provide a comprehensive glimpse into the diverse landscape, I categorized the selected GIFs into three distinct groups: video-based GIFs, animation-based GIFs, and sticker GIFs. Each selected GIF shows a unique facet of the animated GIF world.
I picked these six GIFs because they’re simple and super cute. The happy dog wagging its tail and the hedgehog bowling video-based GIFs are a few of my go-to choices.
Pusheen, a cat sticker character, and Chibird’s uplifting or motivational animated GIFs were chosen for their adorable appeal and messages.
The sticker GIFs featuring a cute corgi with an ok sign and a cute blue creature holding a heart sign have added a sweet touch to messages I’ve sent to friends. Overall, I chose a selection of GIFs that are simple, cute, and brings joy to my digital conversations.
Create
In the end, this animated GIFs project was both fun and challenging given the multitude of creative possibilities. I drew inspiration from interests like gaming and the exploration of free resources. Overall, the varying techniques showcased the versatility of Adobe tools and provided valuable insights into the connection between animation and motion design.
“Cut Out” Images GIF: PS5 Controller Colors
For my “cut out” images GIF, I drew inspiration from my love for video games, particularly on the PlayStation 5. I decided to showcase the vibrant colors of the PS5 controllers in a dynamic sequence. The animation process involved carefully isolating images of each controller color, arranging them in a visually pleasing sequence, and animating it. Although the animation was straightforward, ensuring a seamless and engaging loop was still tedious.
Hand-Drawn Animation GIF: Cyndaquil
For my hand-drawn animated GIF, I decided to create a cute and very simple animation that would endlessly loop. This technique was definitely the most difficult as it was very time-consuming but was still both challenging and fun. Because I wanted to keep a game theme for my GIFs, I decided to draw a cute Pokémon named Cyndaquil who protects itself with flames on its back, which was the part that I animated through the onion-skinning technique.
Free Vectors: Space Game User Interface
For my final animated GIF, I wanted to create a smoothly looping GIF that resembled an endless loop, so I decided to use the “cut out” images technique. I found an interesting group of pixelated vectors known as “space game user interface template” on Freepik. From here, I invested time in trying my best to perfect the transitions and ensure a clean aesthetic. While the animation process was meticulous and time-consuming due to my emphasis on a polished look, the result justified the effort, achieving the desired seamless loop and visual appeal.
