This is it! I’ve learned the basics of motion design, and it’s time to continue advancing with more projects. This week, I’ve decided to experiment with something I haven’t quite tapped into yet. Risky, right? 

Yeah, it is. But there’s only one way to keep building skills – and I decided to challenge myself. Well, let’s take a look at what to do after completing animated projects, some more research, and my final motion project. 

Readings:

Chapter 11: Show & Tell is the last of Animated Storytelling by Liz Blazer. Throughout the book, she went through many how-to’s on effective storytelling elements, and now, presented ways to get your finished story into the world.

The first step is to get your story out there by submitting it to the right people/places. And to do that, you need to make sure your story is packaged in the right way – meaning, give them everything they need to submit your video if it’s selected for a showing. If you submit to a film festival, here are a few assets needed:

1. The title logo and still, which will get presented along with the film, program, advertising, etc. is like the image branding for your piece.
2. An intriguing summary of the film that’s one to two sentences long.
3. A tagline – this usually gets printed in programs or online.
4. Your bio kept short and sweet.
5. The story of the film – which you’ll especially need for interviews or afterward if the film gets selected to show at the festival. This should start with why you made the film/what inspired you, and include mistakes that might’ve happened during development. 

The next step is to determine where to show your film. You need to find the right audience, the ones that will be loyal to your film and films moving forward.

Third, a film festival may not be for you, and that’s fine. Instead of trying to receive awards, getting quick feedback on your work could be more valuable. Post online to get more immediate responses that can help your work, or inspire you for the next project.

Building your network is the fourth step. Connecting with peers and like-minded artists will help build a loyal audience, but in return, you need to be that for them as well. Be supportive towards your peers, tease your work, and continue building your network in person as well.

Finally, share your work, and don’t stop. 

Research:

Because of my interest in 3D capabilities (particularly in After Effects), I focused my research this week on 3D animations. 

This advertisement uses characters that have the effect of 3D with lighting and dimension. I enjoy watching this ad because of the colors, movement, sound effects, and effective story.

Another intriguing animation here uses a mix of 2D and 3D features to show items shredding through a spinning cylinder. I love the mix of the different animation effects, and it’s a great looping animation to add to a website to visually show the viewers what happens.

Lastly, this Sherwin-Williams advertisement uses effective animation with rendered paint chips to create different animals. The effects of the renderings and animations make this a beautiful composition and feels inspiring.

Create:

Something that I haven’t quite covered yet (until this week with advanced motion) is digital character animation. So, I wanted to figure out what it means to develop a 2D illustration of a character and render it to animate in After Effects. 

I decided to make this more advanced by tapping into how to utilize the 3D layer feature in AE. I’d briefly learned how to use 3D last week with my UI animation, and thought that I might be able to take it to the next level this week. 

So, I dove into quite a few tutorials about initiating 3D, lighting, textures, and the camera tool; and with these, I was able to develop my last project of a monster spinning. HOWEVER, I found that 3D characters aren’t typically made in After Effects alone, but use multiple programs. And after many trials and errors at my level of animation expertise, I had to find another direction – a “faux” 3D effect with 2D shape layers. 

In week four, I illustrated a monster for my stop motion animation, and I wanted to use it again for this. I did have to simplify the illustration a bit to keep it mostly symmetrical and so that it didn’t affect the speed quality of AE. 

This short spinning animation was very challenging and took me way longer than I’d intended. I would’ve liked to be able to achieve character feature animations like eyes blinking or the mouth smiling, but the spinning with moving limbs around, lighting elements, and texture features – I’ll just have to come back to that later. 

Overall, I’m really happy with the 3D-like effect I was able to achieve and that I could test my hand at digital characters, which is something I’d like to continue building my skills in. 

Reflect:

After completing the book, I’ve learned a lot about animating and storytelling for animation and film. Especially in the first few chapters where they were all about developing the story concept in pre-production, how to find your story structure, unlocking your potential with the story, and so on – I’ve come a long way in the last seven weeks of motion design just through these readings. 

Then, with each project, I was able to put that knowledge into work. At the beginning of the last seven weeks, I’d only known the basic knowledge of creating a GIF in Photoshop. This was helpful during the first week where I created three different GIFs, but I very quickly started learning programs I’d never used before, like Animate and After Effects. 

I’m really glad I was able to keep using After Effects and build my skills with its features. These last seven weeks involved many, many tutorials, and it was worth it! 

As for the next steps on where I hope to go with motion design, I’d like to develop my skills with more advanced digital motion graphics and the use of 3D. I know I will keep working on these, and I’m excited to hopefully help others with animated logos, and create projects for myself as well. 

There are many opportunities to use animations effectively, and one important thing to think about is the user interface and experience. If you’re designing an app or a website, animation can help move the user from one section to another with ease, or help them to complete an action. 

This week, I’ve continued working on animation features for a brand I developed previously, Stitched & Sable Living. I’ve already created a mobile and desktop website layout, so the next step was to figure out some of the functions of going from page to page. Before I did this, I needed to do more reading and research on effective UI animations.

Reading:

Chapter 10: Animate! in Animated Storytelling by Liz Blazer gives the reader helpful tips to stay on track and make sure to prepare effectively for the simplest ways to get started and keep going. 

You have the full-fledged plan for your animation, but when it comes to production, unexpected things might come up or it may be more difficult to stay on track as originally planned. To help with this, Blazer recommends first create a production calendar – fill it in backwards (starting with the finish date), and then make it accessible for you and others to give yourself the incentive you need. Secondly, make sure there’s no room for error in your technology. Everything should be up-to-date, working, and you need to save your work often. Nobody wants to lose all the work done to an unexpected crash. 

When it comes to actually animating – there may be some more daunting scenes than others. Because of this, Blazer advocates starting with the easier, more fun, short sections – which will keep the production moving while also building confidence. Also, the daunting scenes mentioned early may be able to break up into smaller sections, and if that’s possible, make sure to split them up and animate them separately to make it less intimidating.

Finally, there are a few production aspects that you need to think about beforehand, and modify as needed for the best story:

Be strategic about movements. 

• Plan character poses and where they’re going to avoid mistakes or go out of character. 
• Use anticipate & follow-through, i.e. before and after movements to give a more natural feel. 
• Note your directional movements – do the characters move horizontally, vertically, diagonally, or circular? This helps with the intensity of situations or gives the subjects more character. Then, make sure to map these movements on the storyboards.
• Use the rule of thirds – keep your subjects out of the center as much as possible.
• Mix up the shot length. Changing the shot length, and using a wide shot to a medium shot to close up (not particularly in that order) for each scene makes the experience more enticing.
• Mix up the shot timing. Changing the time of each shot will make the story less predictable. 
• Use motion blur. Subjects that move without a blur might look less realistic. Using blur can emphasize parts, and make the moving parts look more natural.

Sound.

• While at this point, you’ve already found the score, ambient sound, and SFX, you still need to remain flexible. Depending on how the story develops, the sound may need to change. 
• The sound should match up with the timing and pacing of the story and subjects.
• You can’t rely on sound too heavily, otherwise, it will end up doing all of the work, which may not be the best for the story. Hit mute every once in a while to make sure the sound isn’t the lead. 

Research:

I enjoy this UI animation because there are so many sequences happening throughout, and they all make sense. My favorite part is when the cyclist shows up as a loading screen between pages (0:19) – it’s representative of what the user selected on the application, and interesting to look at, all while not taking too long for the user to lose interest.

The sound effects with this animation help to enhance what’s happening. I enjoy the movements, renderings, and loop that the creator made with this. While there isn’t an exact indication of a finger or mouse cursor, it’s easy to tell what the user would do to make this animation happen. 

This UI animation is effective because of its smooth and easy transitions for the user. There’s an appropriate amount of information for the user to know what they need to do 

This add-to-cart animation is a simple, but functional and worthwhile piece to include for a user to know that their items were added to their cart. 

Another example of a loading animation – this flying bird with an envelope is perfect for a messenger app. I enjoy the refresh movement on the screen, and the short but fun amount of time to view the bird. 

Create:

Going off of what I did last week – creating an animated logo – I chose to use a previously made website mockup for the user interface animation. So, I brought in the layers from Illustrator as a base, then used After Effects to create the elements of the UI animation. 

For the UI animation specifically, I rendered up a mouse cursor, which moved to the top menu for “SHOP.” When the cursor hovered over “SHOP” I made the letters animate larger, and with a fade-in. Once “SHOP” is clicked by the cursor, a new rectangular menu animates as a pop-up, where the letters then turn into a back arrow key. Within the new menu, the cursor hovers over different main categories, which then reveal more specific categories. Eventually, the cursor hovers and clicks the back arrow key, and returns to the main page, with the animation repeating itself at the beginning, but just in reverse order. 

When I started this week’s project, I thought I’d create something much simpler. But it really made the most sense to me to show the website home page as I’d imagine it, then to show a series of directions that the user could go. It was a lot of fun, but definitely took some practicing to get everything right!

If you’ve been following my blog, you know it’s no secret that I love my pets and focus a lot of my projects on them. 

A few months ago, I designed a logo for a brand that I developed, along with its web presence. This week, I had the chance to animate a logo – and what a great way to utilize a project I’ve already done, and to make it better. 

The logo is for a brand called Stitched & Sable Living – a home and living product store for those looking for practical items that style their home. With an added benefit of having access to items for their pets! Pets are, of course, part of the family. 

Readings:

Chapter nine: Technique in Animated Storytelling by Liz Blazer describes the different techniques and styles that accompany your animation. 

She goes into detail about experimenting with techniques whether they’re your typical go-to or not. This isn’t to simply expand your skills, but to have the best technique for what your project is. 

Different techniques include:

• Hand drawn
• 2D Stop motion
• 3D stop motion
• 2D CGI
• 3D CGI

And different styles include:

• Fluid transitions
• 2D/vector
• Hand made
• Collage
• Film & type
• 3D

Overall, the point is to find the technique and style that works best for your animation, then to try and find a hybrid of it with your comfort technique.

And if you can’t find a hybrid, there are workarounds:

1. Import still images – you may find what you need by simply searching for it.
2. Shoot live-action footage – to get the image you need.
3. Staff up – it may be more efficient to hire the talent than to spend the time on it yourself.

Research:

Ollie Johnston and Frank Thomas developed the 12 principles of animation for creating a better, more realistic animation. These are a great base to start from when animating, or preparing to animate. One of the best ways to fully understand the principles is to see them in action – so, I’ve found a few videos that show great examples of some of the principles.

Tom & Jerry is a fun, exaggerated cartoon about a cat and mouse rivalry, and shows tons of these principles within each episode. In this clip, between 0:29 & 0:41 shows principle 9. Timing, principle 5. Follow through & overlapping action, and principle 1. Squash and stretch. Timing represents the number of frames between each action – right at 0:29, Jerry’s legs move very quickly from being down to moving up. This depicts the feeling of surprise and severity of Jerry’s movements. After the mouse is back up, he turns into a ball and shoots around to different areas of the frame which shows follow through & overlapping action, specifically for the drag that happens between his fast movements. Finally, when his body is rolled into a ball, he hits the ground and bounces back up, showing squash and stretch.

This clip of The Road Runner shows an easier-to-follow representation of principle 5. Follow through & overlapping action than the previous research example. At 0:13 the road running stops running and shows the follow through action by moving back and forth from the fast movement to now being stopped.

This episode of the Pink Panther uses principle 10. Arc. From 0:42 to 0:47 the Pink Panther and a caveman move a rectangular stone on the long ends. The way that the stone moves when falling or being pulled up is in the shape of an arc to more realistically look as if it’s being moved – where if it were to follow a straight line down to the ground, the rock would look like it shrinks during movement. 

Who doesn’t love the squirrel from Ice Age? He’s well known for the quirky and exaggerated adventures that always seem to end badly for him. This animation of the squirrel uses principle 10. Exaggeration, and principle 12. Appeal. All of his actions result in some exaggerated outcome and facial expression – for example, from 0:14 to 0:18 he has several reactions that perfectly depict what’s happening – really satisfied to really confused, to really scared. Also, the character himself is appealing to look at – he has interesting features and was created with dynamic design in mind.

Finally, this clip from How to Train Your Dragon uses principle 8. Secondary action starting just after Toothless eats the fish, at 0:48 where he licks his lips. This gesture supports the main action of eating by being satisfied with what he ate afterward. 

Create:

The idea behind the brand’s logo and presence includes “mascots.” These are different drawn characters or features that are recognizable towards the brand because of their similar style and colors associated with the brand as a whole. 

• 

• 

• 

• 

Because of the hand-drawn look, I thought it would make sense for the animation to feel as if it’s being drawn directly onto the screen. So, I started with this for the dog in the main logo. As the dog becomes more prevalent, the word “Living” begins to animate in, along with the arched border and ending with the text features. 

I originally created this logo in Adobe Illustrator, then brought the layers into Adobe After Effects to begin the animation. I’m still new to After Effects, so I had to watch a few tutorials on how to get the lines to draw in. Instead of using some of the original AI elements of the logo, I re-drew the lines with the pen tool in AE to get the animated effects that I wanted. 

Finally, I added a sound effect of a pencil drawing on paper to begin the animation, with a fade-in of some music that accompanies the mood well. 

See my finished logo below!

I had a ton of fun working on this animated logo! The result has the look and feel that I was going for, and I’m happy with the outcome. With a little bit more time and practice in the program and animation as a whole, I think I’d like to add a little ear twitch or tail wag to the dog for a little bit more character. Overall, I’m looking forward to working on more digital animation projects in the future!

Here goes nothing… Here went nothing? No… Actually, I did something!

This week, I’ve created my stop motion animation, titled “I Won’t Eat You Cause You’re Too Tough.” It was a full-on process, just like any project that requires a ton of planning, prep, and simply put – just to do it. Let me just say – it was so worth it!

Below I go into detail about readings and research that helped me bring my final stop motion animation to its fulfillment.

Readings:

Before getting into the production of my stop motion animation, there was still quite a bit I needed to know beforehand. Chapters seven and eight of Animated Storytelling by Liz Blazer are all about sound and designing the world that your characters are set in. 

Chapter seven: Sound Ideas, starts by telling the reader that sound should lead the story. Oftentimes, sound may come as an afterthought. But, the sound is truly what pulls the needle through the thread. Your storyline could become impaired if there’s no prep work on what sounds are used during the animation. Blazer starts by identifying different types of sound:

Diegetic sound – a sound that’s typically visible on screen, and comes from the physical world, i.e. baby crying.

Non-diegetic sound – a sound that isn’t implied by an action, and enriches what’s happening in the story, i.e. 

Then, there are different sound features that are typical when producing a film or animation. 

Sound Effects:

Sound effects are artificial – they’re not music or dialogue, but a sound used to emphasize what’s happening – like footsteps, or a “ding” when someone has an idea. Blazer recommends identifying where you might want to add sound effects in your story, then trimming the list in half – because it is possible to overdo it. 

Music can also be used as a sound effect rather than a score. This would be an example of non-diegetic sound – like a “wah, wah, wah” for emphasis on a disappointing situation. 

Music:

The music that belongs with the story should be well thought out. It should match the theme and personality of the characters.

There are a few other things to consider when scoring your animation. Silence may help the story just as much as music can, as long as it’s used in the right way. Additionally, scoring against the scene could be something that’s useful – like an ominous character using upbeat music to accomplish their task. 

Dialogue:

Blazer lists out a few steps that are helpful when matching dialogue to a story and character:

1. Lines should match the personality of the character.
2. The characters’ should speak in a natural way – instead of writing the script out in the most straightforward (and obvious) way, using subtext can help the dialogue flow.
3. Dialogue should set the mood of the scenes. 

The ending of the chapter reminds the reader that these steps are just as important if the animation has only an internal monologue. 

Chapter eight: Design Wonderland is solely to find the setting of the animation, which the author calls the “world.” 

Just like the standard “yes, and…” practice used in improv, going along with anything that helps bring the story to life is a great practice for finding the story’s world. Once again in this chapter, Blazer lays out steps to follow to help identify what this world is, and how it works.

1. Be influenced – look at other stories whether they’re movies, shows, books, short films, etc., and see if you can’t find a spark of inspiration. Also, looking at our natural world is a great source as well – like religions or animals.
2. Time & place – identify what time (past, present, future) and place (providing obstacles for the characters). 
3. Physical order – earth has gravity and a sense of time, so maybe your world should go against those if it makes sense for the story. Although, “don’t just do it because it seems cool, do it because it’s meaningful to telling the story.”
4. Social order – what are the social laws in this world? Maybe everyone is nocturnal and so it makes more sense for the characters to begin their day at 8 PM. 
5. Visual order – after determining the above, the world needs to visually represent it. Think about the lines, shapes, and colors of this world.

Research:

Audio:

Talk about the use of ambient audio, sound effects, and music. This UFO story begins with a man walking outside, where the setting’s audio shows through along with sound effects of the man’s confusion – then comes the UFO. Not long after this, the background music becomes more prevalent and follows through with the rest of the story. 

This animation includes great sound effects along with background music. The background music stays constant, while the sound effects for each separate animated story change to match them perfectly – cow’s mooing, to milk pouring, then a hockey game. Not to mention there’s some intriguing text animation using the milk!

Text:

This text animation is effective because it has smooth motions – the lines that create the word “lines” are bright, shining, and come from different directions. I love how when the lines move in and out of the frame, their old – now implied lines resonate for a little while longer before disappearing. 

I really enjoy this text animation as it has a story with it. The letters are balloons, beginning flat on the ground, then blowing up and coming together to form “love & peace.” The colors used in this animation are wonderful as well – the whole animation feels whimsical and peaceful. 

Production & Post-Production:

Last week, I did the pre-production of this stop motion animation. With that, I created a pre-final storyboard with colors, characters, and the theme. 

This week, when prepping for production, I needed to create my characters, setting/backdrop, and ambiance. Because I chose to use paper cutouts of my characters, I created them digitally to get a really nice amount of detail – which I would then print, cut, and put together. I was at the point where I had the base of my characters and props but needed to solidify the sound before printing them out in case the storyline was going to be missing anything.

Through my readings, as stated above, sounds should help lead the story – and you can’t think about it afterward. Let me just say, I’m so glad I found the right sounds beforehand. Finding my ambient sound, music, and sound effects helped me to recognize certain facial expressions or props for emphasis that were necessary for the story. It was at this point, I could finish digitizing the details, and begin the nitty-gritty before “filming.”

Getting into the production, I got everything set up, and I knew exactly what I needed to do because of all of the prep work. This made me confident to do what needed to be done. Stop motion is challenging not only because of the time needed to create them but because it’s difficult to tell if the subjects are moving consistently. I noticed that there were a few choppy areas and my camera moved once or twice, which I didn’t realize until post-production and brought the image sequences into Premiere Pro. 

While those pieces of the animation weren’t intended, I feel great about the outcome! Post-production editing went smoothly for the most part – and I just had a few hiccups when some of the sound effects didn’t quite match with the actions happening in the animation. 

Just like I stated in my blog post last week, this is now my second time creating a stop motion animation. And I must say, all of the processes for pre-production, production, and post-production helped me to form a much more successful story than I ever previously thought I could create using stop motion. 

See my finished video below – enjoy!

Stop motion animation is one of the earliest, if not the earliest ways to animate. It’s tedious, as the process involves taking incremental photos of a subject so closely that when played in order, it looks like a moving video. Today, stop motion is still widely used because it’s so effective when done the right way. 

I’ve made one stop motion animation before, and it was made the right way, but it’s not something you can learn and be good at overnight. So, my point is – it was crap. BUT there were so many things I didn’t know about how to make a successful stop motion, like how many frames per second to make, or storytelling with objects, colors, and cohesivity. Now, I’ve been able to do more readings and research to help me out again as I make the journey to creating more stop motion animations. 

Readings:

Chapters five and six of Animated Storytelling by Liz Blazer continue to go into depth about the pre-production process of creating animations. 

Chapter five: Color Sense describes the basics of color: hue, saturation, and value. If you don’t already know, here’s a brief description:

Hue – the color name

Saturation – intensity of the color

Value – the lightness or darkness of the color

In the previous chapter, Chapter four: Storyboarding, Blazer explained what it is to create a storyboard, and what it should look like. Now, with colors – the author recommends making a color script to understand what direction to go with the color story of your animation. Color is essential for the story to tell the audience exactly what it’s meant to. And, it can be tricky. 

There are a few steps that can help identify what colors to use, and when within an animation. 

1. What color would work best in the animation, if only using one color? 
2. Experiment with that one color in a color script, then find an accent color that supports it.

After identifying the color palette, there are other things to keep in mind. Here’s a list of particular things to look out for when working on the color script:

• Design for movement – make sure that what’s intended to be the focus, is. 
• Limit the palette – makes it easier for viewers to process.
• Be careful with saturation – use this for more important aspects of the story, like the emphasis pieces.
• Support the subjects – use white space in the scenes, they shouldn’t be too busy and take away from the focus. 

Chapter six: Weird Science is a fun chapter telling the readers how to find their “weird science” – which is creative experimentation. By doing this, it’s a great way to see if the story you’ve already laid out needs any more tweaking to make it more compelling. 

To first find what your weird science is, there are a few ways that can push your creative brain. Blazer recommends these experiments:

• Make bad art – change things around how you normally wouldn’t, like making subjects the wrong colors, or move really fast and see what the outcomes are. 
• Use the edge of your skillset – work in your expertise, but just far enough out that it makes you uncomfortable. It could help you find a new way to work and fill in gaps within your skills.
• Then, make the work you’d want to do for a living – refine it enough so you’re still challenging yourself, but it should be what you want.

Using these experiments and then applying them to your current animation project could help to make it that much more compelling for viewers. A good way to see if your animation needs working on before production is to take another look at your completed storyboard, make a table, and list where you could experiment with each scene. Then, if you find that any of the ideas are worth a shot, try it out and see if it helps the story. 

Research:

With stop motion, there seems to be endless possibilities. You can truly use just about anything to make one – inanimate objects, yourself or others. To gain a bit more perspective on stop motion, and what can be done to create these animations, I did some research and found a few examples that helped me in my process of creating my own. 

This stop motion video is extremely detailed, with so much going on. I enjoy how the fruit and vegetables are utilized as the subjects for this animation – with carvings or slices, etc. The transitions are also very notable between shots – like the zooming in and fading out at 0:25, or the colored backgrounds moving in/out of frames. 

This animation uses paper cut outs to create scenes of a dog, Coco. It’s a longer stop motion video, so I know that a ton of time and detail went into it – which isn’t surprising as that’s part of the stop motion process. 

Here’s another creative stop motion animation that uses fruits and vegetables (watch until 2:18). The sound effects and visuals of the foods getting shaved once hitting the edge of the pink background is satisfying to watch, making the video very effective.

Claymation is another technique typically used with stop motion. This animation is extremely smooth between each frame, and I like that the creator used different shot angles and perspectives to get the right layout. 

Finally, I really enjoy this stop motion animation not only because it’s colorful and creative, but because it’s animated in a loop. This animation also moves along perfectly with the background music and sound effects, so it was some great planning on the creator’s part. 

Create: Pre-Production:

This week, I created two options of stop motion animations. One of these two will go into production next week. For both of my stop motion ideas, I put together a storyboard and pre-production planning document to help me solidify my plans. 

Stop Motion Animation 1 – Linear: I Won’t Eat You Cause You’re Too Tough

I decided to focus on Halloween themes as the American Holiday is soon approaching, and it’s on my mind, as I’m sure it’s on a few others’. Halloween is such a fun time of the year, it can be colorful, spooky, cute, funny, and brings a lot of creative energy!

This stop motion animation is inspired by lyrics from “Purple People Eater” by Sheb Wooley, which say “I wouldn’t eat you cause you’re so tough.” The story I put together has a traditional linear storyline of character, character conflict, and resolution. 

In my [colored] storyboarding, you can see that I would create some paper cut outs of my own version of a halloween monster, and a few skeleton extras. Throughout the animation, the monster – with it’s stomach growling – walks towards a few scared-looking skeletons. At which point, the monster reassures them by saying “I won’t eat you cause you’re too tough” (note that I changed the line slightly from the famous Halloween song).

I used color for my storyboard – while most are simply black and white – to get a better understanding of the colors to use for this animation. Yellow-green and red-purple are complimentary colors, and also work perfectly for a Halloween themed story.

This is my favorite option of the two, but I also know that it will be more time consuming and complicated as there are many movements to consider. For that reason, I’m still unsure if this will be the animation I decide to produce! I guess we’ll see this time next week.

Click below for the full pre-production planning document I made:

Stop Motion Animation 2 – Non-Linear: What is That Sound?

For my non-linear animation option, I decided to go with the beaded necklace version – which is a story solely influenced by sound. 

Inspired by the last stop motion animation I found through my research, I want to make my non-linear story piece a loop. 

I found some great, creepy royalty free music that made me think immediately of eyes of a character popping dramatically up away from its head. It’s harder to explain with words than it is with the visual storyboard – so below for the visuals.

From this storyboard, you can see that this monster-type character appears to be sleeping, then hears a sound, making its eyes move along with the “dings.” This goes on for a few seconds, seemingly getting a bit more dramatic before calming down when the music slows down. Then it repeats, forever. 

Again, this storyboard uses color. This time, I thought the yellow and blue color combination would work well in this story’s favor, so I wanted to make the storyboard reflect the overall ideas before going into production.

For this, I would either use clay or paper cutouts as my medium.

I enjoy this option because it will be fun seeing how the animation comes to life through the music. Although, I’m positive that making the eyes move perfectly to the music will be a challenge, and it’s something I’ll need to actively work through if I decide to make this one in production.  

Click below for the full pre-production planning document I made:

Create: Test Animation:

Jack-O 

Before getting started on production of one of my two stop motion ideas, I created a short test animation to get in the right headspace. Of course, I stuck with the Halloween theme for this as well!

This animation shows a pumpkin, with little black clay pieces rolling in to create a face on the pumpkin. To best form the face, I ended up taking photos for this stop motion video in reverse, starting with the face on the pumpkin, then having them ball up and roll away. At the end, I wanted the music to continue and fade out, but I didn’t like just having a blank black screen, so I also animated a “HAPPY HALLOWEEN” for a good closure. 

I really enjoyed using the sculpy clay that I’ve had forever, and have never used until now. But it was difficult when the colors started mixing together. Also, the pieces kept sticking to my fingers when I tried to move them, which I now know to prepare for. 

After all of my readings, research, and my test animation, I have a feeling that when it comes to my production of one of my two ideas above, I’ll have to modify certain things as I go just out of complexity. Stop motion is not a simple task, so thinking through as much as possible beforehand is definitely necessary. We’ll see what ends up being my final stop motion piece next week!

I asked my other half if he knew what cinemagraphs were, and he responded with, “are those like the moving paintings in Harry Potter?”

Well, not quite, but it was a good guess. Cinemagraphs are a moving picture, but a hybrid between photo and video – typically most of the image is static, while one part of it moves in a continuous loop. 

To be honest, cinemagraphs are a really cool way to show audiences an image that exposes more – the moving element brings the photo to life. So, this week, I was on a journey to create my own cinemagraphs while using knowledge I found through readings, research, and tutorials. 

Readings:

Throughout Chapters two, three, and four of Animated Storytelling, author Liz Blazer describes how to effectively realize a story topic, lay it out, find the narrative, and storyboarding it for pre-production. 

Chapter two: Storytelling, is all about using a story structure. There are classic story structures, and there are non-linear story structures. Either one is fine to use, it depends on the story, and how you want it to be told. 

Classic Story Structure:

1. The character has a problem
2. The character works towards the solution
3. The character solves the problem, typically in a surprising way

Non-liner Story Structure:

This way is to essentially build around your inspiration, and then to build a structure around it. There are many ways this can be done – including beginning the story at the end, or to make it like an interactive puzzle.

Chapter three: Unlocking Your Story, goes into more depth about how to bring the story to its overall fruition by finding the narrative or experimental form. During this chapter, Blazer explains that overall, the goal is to have a clear and prominent topic, the story begins at the right place, and features characters with interesting secrets that motivate them. 

Chapter four: Storyboarding, tells the reader all about what storyboarding is – which finds the visual elements that suit the story in the most effective way, and how to do that. To first begin with the storyboarding, you need to create thumbnails, which are the very roughly sketched visuals that accompany the story. Once these thumbnails are arranged in the order desired, they should be refined as much as needed. Then, the storyboarding continues by adding the dialogue to the thumbnails. 

During the storyboarding stage, composition elements, framing, and staging need to be thoroughly looked at. Is the shot going to be a close up, wide shot, medium shot, other? Always use the rule of thirds to make the framing more interesting. And, staging need to be clear so the audience can truly understand the depth of what’s happening in the story. 

Cinemagraphs aren’t quite the type of storytelling that Liz Blazer’s talking about, as they may not always give the audience a detailed plot, but they can lay out a visual that’s open to interpretation for the audience to see a story.

Research:

To first begin my own attempts at creating cinemagraphs, I needed to do some research and find inspiration. Below are a few cinemagraphs that I find very noteworthy!

This Cinemagraph is appealing to me because the liquid in the glass not only glistens, but so does its reflection on the table. The ambiance is also very telling – to me, it looks like the story involves a business man who’s taking a needed break from work, or just finishing up his work day with a drink. 

There are quite a few moving parts in this cinemagraph, which is interesting because it makes me see more the longer I look at it. With two parts, the outside rain and leaves on bushes, to the candles on the inside, again, this cinemagraph sets a distinctive mood that almost feels like I’m in the photo.

I enjoy this cinemagraph because the moving parts are reflections rather than the actual subject itself. The lighting feels like it fits the ambiance of the city with how it’s depicted. It almost feels ironic to what appears to be a quiet street with nopeople, but the reflection is of a taxi. 

This cinemagraph pulled me in because, to me, it looks very complicated. The globe and the womans arm are moving both directly, and in the reflection; then there’s also the curtain blowing in the wind. It kind of astonishes me, it’s intriguing and balanced.

This is one of the first cinemagraphs I saw during my research, and it’s one of my favorites. It’s similar to the look and feel of the taxi’s reflection, but there’s no reflection. Instead, the image is looking into a barber shop. What I really love is that there’s the spinning knob on the outside of the shop on the right side of the photo, and another one inside the shop on the left side of the photo. 

From this research, I learned that all cinemagraphs tend to have a mood or a theme, which is its story. They make the viewer almost feel like they’re there, inside the image. So from this, I knew that I wanted to follow the same thoughts in preparation for my cinemagraphs.

Create:

Cinemagraph 1: Wine By Candle

Red wine sets a mood. It’s often drank during romantic evenings or celebrations – in movies, there’s typically candles and a nicely prepared dinner along with it. So, I wanted to portray a similar feeling of the drinks standardization. 

For this cinemagraph, I used photoshop which helped me to modify the lighting and colors to get the darker ambiance that I wasn’t quite able to get in the video alone. 

Cinemagraph 2: Nilla’s Ears

Of course I had to make a cinemagraph of my pup! Last week, I created a GIF of my other dog, Ezzy, so it was only fair that I make a cinemagraph of Nilla this week.

When I began shooting for this cinemagraph, finding my shot composition wasn’t the easiest. I had to retake the video a few times to get the most interesting and best shot – using the rule of thirds, finding an interesting angle, and so on. And of course, with a puppy, I had to stay patient. So, what I found to be better than waiting for Nilla to sit still and do something, I used a fan to make her ears move. 

Because of the fan, I think the overall look is a bit choppy, BUT it does look like her ear is blowing in wind, so I think I got the point across with this.

For this cinemagraph, I used Adobe After Effects – a program completely new to me. But it was the right program for this cinemagraph! The thing I found when using After Effects is that it seems to have fewer steps than making a cinemagraph in Photoshop, but I also needed to make sure that my video shot was as clear as I wanted it to be as I knew I couldn’t edit elements out or in like I could with Photoshop. It just made me think more like a photographer and videographer when getting my shot!

Cinemagraph 3: Mug Reflection

I was inspired by the cinemagraphs that used reflections, so I decided to make one of my own showing a spoon stirring tea directly, and the hand that moves the spoon is seen in the reflection. It’s interesting because with the reflection, the spoon stirring motion and hand moving motion almost looks like they move in an opposite direction!?

For this cinemagraph, I used Photoshop again. I wanted to add a few features to it like the “To Do List” which worked well for me when using this program. 

Something that was challenging about this was the string of the tea bag getting in the way of the spoon, making the transition between frames a little bit more noticeable. It’s not something I would’ve thought of while shooting the video as this is my first time creating cinemagraphs, but now I know to look out for those types of things. If I were to do it again, I’d re-shoot and completely avoid the tea bag string. Learning lessons!

---

I thoroughly enjoyed making these cinemagraphs! It was a lot of fun, and they’ve helped me on my journey to understand animation, and telling stories/setting themes.

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.

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. 

Readings:

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. 

Research:

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?

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.

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.

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. 

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. 

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. 

Create:

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.

GIF 2: SHINE

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.