Sketch into an animation tutorial

Ad

With mobile devices and tablets at our disposal we now have pretty much an arsenal of tools that in the past would be almost unthinkable. I remember using a scanner to scan photos from magazines or that I took for textures and references for vector. Adobe has been present during my almost 20 year design career and with the Capture app we can literally collect resources anywhere, anytime. This tutorial showcases how Alex Fleisig's use Adobe Capture CC and Adobe Animate CC to create a really cool animation. Check it out.

Step 1

Copy Alex Fleisig's sketch to your Creative Cloud library. To use Alex's sketch, click the . Click Save to Creative Cloud to copy the asset to your Creative Cloud Library.

Note: You need to be signed in to your Creative Cloud account to save the library.

Step 2

Capture a shape

Launch Capture CC. Select Shapes (1) and tap the + icon. Tap the Capture From icon (2) at the bottom of the screen to browse to your images. Select Creative Cloud (3), tap the down arrow to the right of My Assets (4), to get to My Libraries > Capture + Animate (5).

Select the koala_sketch photo, then tap the blue Open button.

Note: The screenshots and instructions in this tutorial show Capture on an Android phone. The user interface may vary between iPad, iPad Pro, iPhone, and Android device

Step 3

Convert the sketch to a vector shape.

Capture CC transforms Alex’s pencil drawing to a vector shape that maintains its sharpness at any size. Drag the slider handle left or right, to capture more or less detail in the shape. Tap the Capture button (camera icon) to capture the image and turn it into a vector shape. If necessary, refine the shape by selecting Remove from Shape or Keep in Shape. Drag your finger over the details you want to remove or keep in the vectorized graphic. Tap the arrow. Capture converts your shape into a vector. When complete, Capture guides you to the next screen to name and save the koala shape (we named it koala_A, in the Capture + Animate Library).

Step 4

Capture a color theme. Tap Colors, then tap the + icon. Point your camera at a colorful scene. Interactive color circles will appear on top of the image. Tap the screen to freeze it so you can move individual color circles to adjust the theme. Tap the Capture button checkmark to capture a theme of 5 colors.

Step 5

Save your color theme. Type a name for your color theme. Choose the appropriate Creative Cloud Library, then tap the checkmark to save. You will use this theme in Animate CC to color your animated koala.

Step 6

Animate your character. Watch this video to see Joseph Labrecque retrieve the koala and color theme from Creative Cloud Libraries in Animate CC, and bring the character to life with some fun animation.

For more information about Adobe Animate CC visit https://www.adobe.com/go/learn_animate_download_en. And for Adobe Capture CC, check out http://www.adobe.com/products/capture.html

Also make sure you check out Alex's work at http://alexfleisig.blogspot.com/

Written by

Fabio Sasso

I'm a Brazilian product designer based in Oakland, California currently working for Google as a Staff Designer. I am also the founder of Abduzeedo, an award-winning digital publication about design and a personal project that has become the source of inspiration for millions of designers and enthusiasts.

Ad

Ad