Creating Animated E-Cards in SketchBook Motion

Skip to entry content

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.

SketchBook Motion Animating e-card Tutorial - Birthday

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.

SketchBook Motion Animating E-cards Tutorial Zoey - Grow Path
The pink polka-dot border after the Grow animation but before adding other customizations.

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.

SketchBook Motion Animating E-cards Tutorial Zoey - Basic Controls
Just a bit of a bump up in the Spacing.

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.

SketchBook Motion Animating E-cards Tutorial Zoey - Scale
To make the dots “pulse” you can alter their scale and make them get bigger and smaller.

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.

SketchBook Motion Animating E-cards Tutorial Zoey - Custom Balloon Opacity
Similarly, you can make the opacity alternate to make the dots “blink”.

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.

SketchBook Motion Animating e-card Tutorial Birthday - Balloon Granular
Objects on a path can also seem to “shimmy” by adjusting the Path controls.

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.

SketchBook Motion Animating E-cards Tutorial - Fundraiser

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.

SketchBook Motion Animating E-cards Tutorial Fundraiser - Individual Leg Pivot
You highlight the degree of swing for your pivoting objects.

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.

SketchBook Motion Animating E-cards Tutorial Fundraiser - Custom rain setting Comparison
Your Rain doesn’t have to fall down. It can rain in other directions.

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.

SketchBook Motion Animating E-cards Tutorial Fundraiser - Default vs Custom Scale
Experiment with Scale controls if you want effects to be furious or erratic.

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.

SketchBook Motion Animating E-cards Tutorial Fundraiser - Default vs Custom Opacity
For comparison’s sake, see how differently opacity is handled in the birthday e-card (far right).

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.

SketchBook Motion Animating e-card Tutorial - Engagement

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.

SketchBook Motion Animating e-cards Tutorial Engagement - Pink flower Duplicate
When making an e-card, you’re either drawing on top of graphics or adding graphical elements on new layers.

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.

SketchBook Motion Animating e-cards Tutorial Engagement - Pink Flower Asset & Duplicate Path
All you need is one flower, which you can duplicate along a path.

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.

SketchBook Motion Animating e-cards Tutorial Engagement - White Flower Bend
You can Bend the path so that your object oscillates between two Bend paths.

Flowers as Pinwheels

The secondary animation Kyu put into the blossoms is a Pivot. Turning on this pivot causes the asset to spin. To alter the pivot you can adjust the speed and synchronization sliders. Kyu left the speed at the default setting but lowered the synchronization so each blossom looks like it moves independently.
SketchBook Motion Animating e-cards Tutorial Engagement - Pink Flower Granular
Don’t want your duplicated objects to be too in time? Lower the Synchronization, and they’ll take on lives of their own.

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.

SketchBook Motion Animating E-cards Tutorial Engagement - Rain Effect Particulate and Path
Even their cat is entranced by the Rain animation’s path.

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.

SketchBook Motion Animating e-card Tutorial Engagement - Rain Effect Controls
Slow and low, that is the tempo we want.

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.

Since our confetti is spiraling out from a center point, changing the speed also changes the distribution.

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.

SketchBook Motion Animating e-cards Tutorial Engagement - Rain Scale

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.

SketchBook Motion Animating e-card Tutorial Engagement - Rain Opacity
Tapering off the Opacity helps this confetti fade away.

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.