Our iPad App SketchBook Motion is a great way to add movement to drawings. It has a loyal fan base and even won App of the Year from Apple last year, and we continually see great work being made with it and posted on Instagram with the tag #SketchBookMotion. While usually used for drawing, Motion can also shine in the graphic design department. We asked animator Kyu Choi to walk us through the process of animating graphics in Motion to make e-cards and announcement GIFs.
The Case for a Better E-Card
Unlike their 90’s antecedents, these e-cards have more range for customizing since you are animating a sketch in pieces instead of building it whole, and you can show much more emotion with movement. These cards Kyu has created — an upbeat first birthday message, a peppy fundraising advertisement, and a romantic engagement announcement — all could be used in social media posts, as e-mail announcements, or on a website. (Pro tip: You can’t embed video in an e-mail, but you usually can include a GIF.) In this tutorial we will show how adjustments to the speed, frequency, opacity, and direction of an animation can affect the emotional message the card conveys. Kyu has used similar types of movements in each e-card, but she has adjusted them differently to account for the message and the subject matter.
It’s Zoey’s Very First Birthday
For this birthday announcement the portrait is static, which allows for customization by the designer. Kyu has animated the background and the cloud’s polka-dot border. First, she used the Rain animation option in the Motion app on the balloon assets, directing them to float up vertically. She also added three Grow animation paths for the polka-dot border to set them bending and swaying. We’ll show you how she did it.
Grow Animation: Polka Dot Border
A uniform border of petite polka dots was used to add definition to the main cloud. This was achieved using the Grow animation command which multiplies the single hand-drawn dot asset and creates a chain of them across the drawn path. This Grow animation can be adjusted to create an effect that melds well with the subject matter, be it a baby girl or an energetic teenager. Here’s how Kyu adjusted the animation.
Controlling Speed and Spacing
SketchBook Motion’s Controls menu allows you to adjust the speed the animation moves at, the orientation of the asset on the path, and the spacing between multiplied assets. For this e-card Kyu pushed the polka dots apart with the spacing slider so the composition was a bit less crowded and left the others at their default settings.
Making Polka Dots Bigger and Smaller
Kyu reduced the Scale of the polka dots across the grow path to ~40% of the default setting. This means the dot’s size was reduced from how it was drawn across the time of the animation. If you want to convey a more dynamic effect the path could have a varying scale, causing the graph to look like a mountain range. This would make the dots pulse in the animation.
Fade In and Fade Out the Dots
In a similar way, Kyu designed a path for the polka-dots’ opacity. This gentle curve along the path allows the dots to gently fade in opacity and adds to the sense of movement.
Making It Rain Up Instead of Down
The balloon asset will be multiplied by the Rain animation so it floats up behind the child. Kyu has left the balloon’s granular settings almost default but has set a simple path for it to float on. Adding a Pivot to it would send it spinning toward the edge like a ninja star. Increasing the Synchronization would cause all the assets to move together. Synchronization only affects the animation if a Path or Pivot is also used on the asset.
Movement for a Good Cause
This animated charity walk e-card has the animation bracketing above and below the static banner text. This way, you can easily update the event details if the walk is an annual event. The runners’ movement effect is created with multiple Pivot animations, and the effect of speed is added in with a horizontal Rain animation. Little windy details fly past the runners while the background travels along a slower Beeline.
Pivot Animation: Arms and Legs
To mimic the movement of the runners, Kyu set all the figures’ hips and shoulders with points for Pivot animations. Pivot animations can swing 360-degrees around the centre point, and you can set how far along the path it swings by highlighting the beginning and the end.
Adding Speed Indicators and Floating Balloons
The Rain animation is a very versatile way to add consistent effects emanating out along a path. The path can be curved or straight, with the particles having directional options. You control this by toggling the blue arrows pointing out from the path. Notice how the birthday e-card has the balloon particles rising vertically from a horizontal path, while this fundraiser’s e-card has the speed indicators moving left-to-right on a vertical path.
Making Details Flit In and Out
In the same way Kyu used Scale settings on the Grow animation of the birthday e-card, scale is used in this fundraising card to vary the lengths of the speed indicators — the little dashes that zoom past in the background. This makes the animation more dynamic and the indicator dashes fluctuate as they travel instead of maintaining the same size all along the path.
You can see here how Kyu fluctuates the speed indicators’ opacity more dramatically for this e-card than she did for the polka dots of the birthday card. This means that the fundraiser’s speed indicators fade in and out with an uneven pattern along their path. Which adds to the feeling of the runners moving quickly.
Somebody’s Getting Married
This engagement card has custom caricatures of the couple (and their cat) that can be swapped out and customized. It has a spiral central rain animation that spins glowing confetti in the background and garlands of waving blossoms on two Grow paths circling the subjects. There’s a lot going on here.
Like the other two e-cards Kyu, the animation is not the focus. The motion is there to enhance the central focus of the couple. The garlands, with their simple swaying motion, help focus the viewer on the couple by encircling the figures.
One Flower Becomes Many
The asset for the garland of pink flowers is a stylized clematis, a more detailed, pink version of the white flower. Using the Grow option, the pink clematis can propagate along a drawn line, and you can fine-tune the details. As with the polka dots, Kyu altered the scale and spacing of the flowers, which seemingly doubled the number of blossoms. Then, she created the “swaying” flower animation using the Bend option.
Bend Can Make It Oscillate Wildly
The Bend option allows you to set two paths (note the dotted lines) that act as boundaries for the asset to move between. In this case the white flowers bend their path between their original location on the blue line to a similar locations in between the red and orange.
Flowers as Pinwheels
Making Confetti Out of Rain
Kyu has used the Rain animation in all three of these e-cards to different effect. It’s a versatile way to add atmospheric backgrounds. Unlike the linear Rain animations used in the birthday and fundraiser e-cards, Kyu set this one in a spiral to get this snow-like confetti to “rain” all over the featured couple.
Controlling Your Confetti
These are the customizations Kyu made to the controls of the confetti. She turned the speed down to create a soft, floating effect. She also turned the rate of Emission down to half the default which helps add to the romantic feeling. We want confetti, not a snowstorm.
Making It Less Uniform
Because the path of animation is in a spiral there is a greater concentration of particles in the centre of the image and fewer by the edges, especially if the speed is kept at the default 100%. To balance that Kyu tapered the speed as the confetti travels out, clearing out the centre more quickly and letting it hang around the edges a bit longer. SketchBook Motion is pretty flexible and organic in this way; some controls can work in tandem or against each other in creative ways.
When 100% Isn’t Enough, Go Higher
This is this first e-card that Kyu takes the scale above 100% at times, which causes the confetti to have a larger total change over the course of its animation. Each particle of confetti swells and shrinks gently (see the soft curve in the graph) but with a scale that makes a difference to the viewer’s eye.
Fade to White
When comparing these three charts you will see that Kyu set them to all taper their values to near 0% at the end of the confetti’s path. This allows the animation to be come across even more soft and romantic. The confetti actually diffuses as it expands. The opacity lowers from 25% to 0% in the last quarter of the path.
As you can see, there are a lot of controls in SketchBook Motion and lots of ways to make different layers of content play together or against each other to create cute and sometimes mesmerizing effects. We hope you found some tips in this guide to animating e-cards that you can use to make something completely unique, whether you like to draw or just use existing graphic design assets.
More on SketchBook Motion
Never used SketchBook Motion before? A great start is our introductory post that lays out the basic functions of the animation options of Beeline, Particle, and Grow. If you like the idea of using this for graphic design, check out David Thorp’s Animated Logo Tutorial and his more detailed tutorials on Syncing Animated Layers and Animated Infographics. If you haven’t tried SketchBook Motion (or even heard of it), it’s free for download in the Apple App Store. Head on over there and get it. If you already have a SketchBook subscription, you already have full access to all of the features Motion has to offer.