Transcripts
1. Introduction: Procreate Dreams has definitely changed the way
that I illustrate. As in the back of my mind as I'm creating my illustration, I'm thinking of ways that I
can add up motion to this. Procreate Dreams is
such a simple way for illustrators to add some motion to bring their
illustrations to life. Hi, I'm Smitesh Mistry, a multidisciplinary
creative, a videographer, an illustrator, and animator. I like to use all the skills
that I've picked up over the years as tools to help
me with my creative voice. You may have seen my
illustrations on Instagram, also my video content on Tiktok, or even my classes
on Skillshare. In today's class, we're
going to be bringing life into a previous illustration
which we've done, and create a looping animation. In this case, it's going to be a character riding a scooter. We'll be starting in Procreate, while I'll show you how you
can organize your layers. Then we'll be taking
the same illustration into Procreate Dreams, and we'll be starting off
with a rigging work around, getting our character moving. I'll show you some
tips and tricks that I like to use when creating
a looping background. I think this class is
perfect for an illustrator who wants to start learning how to add motion to their work. By the end of this class, you would have
learned how to create a looping animation
within Procreate Dreams. I hope you get a
better understanding of how you can use keyframes, and the easing tool to create looping animations
in the future. Are you ready to
start adding some motion to your illustration? Just grab your iPads
and your stylus, and let's get to it.
2. Prepare Your Procreate Files for Procreate Dreams: Let's begin. To start, I want you to pull up your
illustration in Procreate. Don't worry if you don't
have your illustration, feel free to download mine in the class resources below
so you can follow along. I've loaded up my
illustration in Procreate. This is what I've
done at the moment. As you can see,
there's no texture and it is just the base
of the illustration. This will be clear
later on in the class. Let me just run through
my layers and let me show you how I've constructed
this illustration. First, everything is
on separate layers. I've got the foreground, which is this dark green
which is at the top. I've got the ground itself, which the character's on, I've got the background,
I've got the mountains, and then I've got the sky and clouds I've put the color of the sky on a separate
layer just because background color doesn't get imported into Procreate Dreams. You just want to
make sure you create a layer for your
background color. Then when it comes to
the character itself, I've created each of its
limbs or parts of its limbs, it's upper arm, it's fore arm, it's torso, it's thigh, the lower leg, and the ankle, all on separate
layers just so I can rotate them in Procreate
Dreams when we get to it. Let me show you what
that looks like. On the leg, We've got upper
leg and the lower leg, these are all separate layers. One thing you'll notice is at the top of each part
where they intercept, so say in the knee area, the top is rounded just so when we rotate in
Procreate Dreams, no aspect or no part
of the leg sticks out. It's the same for the
upper leg as well. When you turn them both on, it looks like it's
a rounded joint. I've done the same
for the upper arm. That's the base structure of how I've constructed
this illustration. But before we import it
into Procreate Dreams, there's a few things
we need to do. To do this, first, because we're creating a looping background, we need to extend the
background just so when we are looping it
in Procreate Dreams, we have enough of it to leap. Let me show you how
I like to do that. Firstly, with the canvas, I'm just going to expand
the canvas horizontally. I'm just going to
go over to Actions, Canvas and then Crop and Resize. I'm just going to drag this
out and I press "Done". With this, when you've got depth added to
your illustration, so foreground, midground
and then the background. Because of parallax, you want the foreground to be
moving a lot quicker. Because of this, we want
to extend the foreground two or three times instead
of just dragging it out. Let me show you how
I like to do that. With the dark
foreground layer I'm going to swipe and duplicate. Then with the Select tool, I'm going to make sure
snapping is on just so it stays on the horizontal axis, and I'm just going
to drag that out. I'm just going to
change my brush to a monoline brush and then just erase the
slight bump that's there. Now one trick that I like to do, which will help you in
Procreate Dreams is just to add a little notch to
where the pattern repeats. I'm going to reduce the
opacity of the new layer. Then with the Erase tool, I'm going to add in
just a little not. I'll show you in Procreate
Dreams why that'll be useful. Then we can get rid of
it. We can just draw back over it once the
animation is done. Now I'm going to put
the opacity back to 100 and then merge the layers
just by pinching on the two. Then I'm just going to
duplicate that one more time. Again just repeating
the process. Now for the mid ground. Like I mentioned, we
want the mid ground to go slower than
the foreground. With this, I'm only going
to duplicate it once. I'm just going to
locate the layer. Because I want to move slower, I'm just going to reduce the
width of this a little bit, then duplicate it, then the light before it's
going to reduce the opacity. Then just put in a little notch. Then let's increase the opacity back and then merge the layers. Now finally, let's do the
same for the mountains. Because I want the motion
of the mountains to be less than the foreground
of the midground, I'm going to reduce
the width of this one. I'm just going to
go into free form. Duplicate that, drag it out. I'm reducing the
mountains at the moment. But feel free to either
do the same depending on your illustration or
whatever elements you've got in your background. I'm just going to finish off by merging the mountain
layers again. This is how I like to prepare my Procreate file before dragging it into
Procreate Dreams. Now all we have to do
is hit the Gallery. Let's go over to
Procreate Dreams, and let's create a
new file, widescreen, click on Empty, and then I'm going to go
back to Procreate. I want to hold the file
that I was working on, swiping up from the bottom with a thumb click on
Procreate Dreams. Then I just want to drag in, just wait for the
file to import. Right now it looks
like it's a layer. If we just hold onto it and then click "Convert
layers to tracks". Then if we hold it
and click "Group". There you'll see all
your layers have been employed in order
into Procreate Dreams. The cool thing about this is depending on your illustration, you can go in and animate
each layer separately. Now you can see the canvas
that I was working with in Procreate is different to the stage size in Procreate Dreams. I'm just going to go in
now and rearrange it just so it matches what
it was in Procreate. For this, I'm just
going to regroup everything just so
I can move it to the left, group. Make sure your track's
selected first. Move everything to the left. I'm just going to scale
everything up just a little bit. Perfect. One thing
I did additionally, when constructing
this illustration, was to take into consideration the way I
want to be animating it. Because I want to be creating
a looping animation, there was one frame
that I want to be illustrating which I don't mind being still
in the animation, which is what this
poses at the moment. Because at the moment,
the character riding the scooter has just
pushed off the ground, which I don't mind it
coming to no motion which is why I
chose to illustrate the character in this position. Now that we've imported
our Procreate files into Procreate Dreams, let's move on to a
rigging work round that I've used to get my
character moving.
3. Animate Character Skeleton: Let's start animating
our character in the same order
that we grouped it. Let's start off with
the entire body first. Because I'm doing a
looping animation, I don't want the
timeline to be too long. Firstly, I'm just
going to go in and crop the whole timeline
to about 2-3 seconds. I'm going to use
the timeline edit, select everything, and
then just drag it in. Then going into the movie
title and settings, properties, and then just change the duration
to two seconds. Then let's just drag this
to fit the timeline. Let's start off with
our main character. At the moment we've
grouped our upper body, front leg, and back leg. Let's put all these
into one group as well. Hold, group, still we got tracks. It's going to color
code this red. The way that I
decided to animate this character was I
jumped on YouTube and just watched a few videos
of people riding scooters just to get an idea
of how this motion would be. To move the character,
I'm going to start off by going to the
beginning of the clip, clicking on moving scale. Then because I
want this to loop, I'm going to go to
the end of the track. Click again just to add
a keyframe just to make sure that the character comes back to the position
that we started in. Then in the middle
I'm going to tap to add a key frame and
then drag this up. If you watch this
back, this character is going to go up and down. Now that we've already
done our key frames, we can play around with
the speed a little bit. Hold on the motion of
this to be a lot quicker. Because we've done
this on key frames, we can just drag it. With this I'm just going to drag the key frame by
holding and dragging. Then with the end one,
I'm going to drag that to about one
second just to see what the speed looks
like. That's much better. Coo. I'm going to drag the
entire group to one second. Cool. Now that we've had
it in our key frames, we can play around
with the easing. When I was watching videos
of people riding scooters, they're very quick in
the center and then they'll slow down as it would come to the
end of the movement. We can do this using the easing function
within Procreate Dreams. I'm just going to
hold in between key frames on the
key frame track. I'm going to go and
set all easing and then turn it to ease
in and ease out. Now it'll move
slower around here. It'll quicken up in the middle
and then slow down again. It'll quicken up in the center, and then it'll slow down again. If you watch that back, you can see the difference
compared to before. That's perfect. Now we've
animated the entire body. Let's move on to the torso. Let's make sure we've
selected the right one. Perfect. Then let's expand that. Let's add the animation
to the entire torso. I'm going to click moving scale. Then like before, I'm
going to go to the end of the track and then click to make sure it finishes in
the same position. Then making sure the
center key frames all in the same place
I'm going to tap. Then because we changed
our anchor point, we can now rotate using this little line
outside the red dot. For the top part of the motion, I want the torso to
be more upright. If we change our easing,
let's watch that back. Cool. Now, let's move on
to our upper arm. Let's expand our group. Character. Upper arm is
in the shoulder joint. What we're trying to do is hair. We're trying to rotate
the shoulder and the elbow just so the wrists end up staying
in the same place. Because we moved away
from the handle, let's rotate our
shoulder joint back. Tap to add to move and scale. Then in the center,
let's rotate this back again just a little bit. Now for our fore arm, let's expand the shoulder joint. Then let's select lower arm
and wrist moving scale. Let's tap to the end and
then let's rotate this. With this, we're just
going to be playing around just to make sure we end up hitting the handle. We can either rotate
the arm a bit further. Let's go back to
the shoulder joint. Let's rotate that a bit forward. The lower arm, let's
rotate that down. I think the shoulder joint needs to go a bit more forward. It's just a matter of
just playing around with this to make sure the wrist stays
in the same place. Let's make sure all of our
easing is set in and out. This may take a little fiddling around just to get
this part right, but then the other parts
are a lot quicker to do. Let's fill the timeline with just the character just
to see what that looks like. Perfect. Now with the leg, let's try to anchor
the bottom of this front foot to the scooter. Let's select our lower leg. Perfect. Then just to help us, let's add a track, and let's just draw
where the foot is. Reduce the brush size. Then I'm just going to put
in two little markers. Like we did before, let's work from the higher group
and let's work down. Let's rotate the
whole leg first. We're going to tap moving
scale and drag to the end. Then let's go to the center
and let's add a rotation. The track that we
created as a marker, let's just expand that. The two ways that you can
fill the timeline with this, you can either drag
the outside or you can hold the track and then
click "Fill Duration". Let's drag that out of the group just so no
animation is added to it. Now let's go back
to our lower leg. We want to make sure that the
ankle is in the same place, then we can rotate
from the ankle later. It's going to drag that
a little bit higher. Now let's set all these key
frames to ease in and out. Now we've got our leg
anchored to the scooter. Now let's finish this front
leg off by just adding a slight rotation to the shoe. Let's add a key frame at
the start and at the end. Perfect. Now we just have to move the upper leg just
down ever so slightly. Now we watch that back. Perfect. Now we've got a
bouncing on the scooter. Let's add in that back leg to make it look
like it's pushing. Let's minimize that group. Let's find the back leg. Now let's animate the top group, and then we'll work down to the lower leg and then the ankle. Tap to add a moving scale, let's go to the end, tap again. Then in the center
tap one more time. Then in the center we
want him to be pushing. Let's select the back and shin. Tap again. Add moving scale, tap to the end,
and in the center, let's straighten out his leg. Then finally for the ankle. Let's locate the shoe. Tap moving scale. To the end tap again
and then in the center. We've got his ankle flexed and then on the back,
that's perfect. Then in all the previous ones, we make sure all the easing is set to ease in and ease out. Now that we've added
in all the key frames, we've got a character who's
pushing forward on a scooter. Now we've added some
animation to our character. In the next lesson,
we're going to be adding some texture
to the character, but also the background to add a bit of depth and
interest to our animation.
4. Add Texture: Now that we've added
motion to our character, let's go in and
add some texture. I want to add some
shadows underneath the arm and between the legs
as the legs are moving. Let me show you
how I can do that. I want to locate the upper body and then select the torso, as that's where I
want the shadow to be inside of. I've
got the torso. I'm going to select that, and then I'm going to add
a track above that. Clicking on Add, and then Track, and select the brush
that you like. I'm going to use one
called Blackburn. I'm going to change the
color to a darker green. Don't worry if it's
leaking out right now. We'll be putting this inside the torso using
a clipping mask. I'm going to hold
the clipping mask, then hold it one more time, and then click Fill Duration. This just fills to
the full timeline. What I want to do
is I want to add a rotation keyframe just so it follows the arm as it moves. I'm going to click on
the clipping mask layer, click, move and scale. Like before in the center
where the other keyframes are, we're going to be
adding in the motion. Let's make sure our anchor
point is in the right place. Then in the center,
let's just add a slight rotation to follow the arm just like
that. It's perfect. Now let's do the same
again for the lower leg. Because this is the back leg, the shadow is going
to be underneath the front leg's thigh. We want the shadow to be
inside of the back leg. Perfect. Find the back leg
and then the upper leg. Let's press the plus, new track, and then let's
draw in our shadow. I'm going to go on the
Draw & Paint tool, I'm going to hold to select the color of the
legs at the moment, and then just darken it. I'm going to change
the brush size. Let's just see
where the joint is. That's where you can see
where the upper leg is. I'm just going to follow that
and add a little shadow. Now let's hold, Fill Duration. Then hold one more time, Mask, and then Clipping Mask. Let's see how that performs. As you can see it as top here, we don't want it appearing here, so let's use some
keyframes and adjust that. I'm going to tap Move, and then Move and Scale
at the end keyframe. Let's just play around with
this to see what we can do. When it comes to the front, I want to make sure this
section here has a shadow too, so let's rotate this, then let's scale it and
just bring it forward. Let's just see what this does. I think I want to add
one more keyframe in the center just to move it. Let's see what that looks like. Perfect. I like the
way that looks. Now that we've added a
little bit of shadow, you can go in and add
in some highlights, some shadows, in
your illustration. Or if you're following along, then let's move on
to the next part. What I'm going to do now will be a lot clearer in
the next lesson, but I'm going to
add in a layer mask for each element of
the environment, the foreground and
the background, just to add a bit of
texture whilst it's moving. Let's collapse all of the
character layers and let's open up the background. I'm going to ungroup
the background now. Let's locate the bushes
in the back first. I'm going to select
that on a new track. Then using a brush
of your choice, I'm just going to
add a squiggle. Let's expand that to the
full duration and then hold, Mask, Layer mask. I'm just going to play
around with this. Let's erase what we just drew. Perfect. The
rougher, the better. The reason we're
doing this is when we add motion to the bushes, the texture that we just added will stay in the same place, so whilst the bushes are
moving, it will look like there's some sort
of texture going on. If I show you this, you see the texture says that
stays in the same place. But as the bushes
move, it just adds a little bit of interest
to a simple animation. Let's do the same
for the mountains. I'm going to select
the track, New Track, and then I'm going to go
on the Draw & Paint tool, and again just add a squiggle. Let's hold to fill
duration, and then hold, Mask, and then Layer
Mask. That's perfect. When adding the shadows, you
can consider a light source. In this case, I kind of had the light coming in
from the top right, which is why both shadows
were to the left and just below of the part where
I wanted the shadow to go. Say, for the arm, it was a bit lower and a
bit to the left, and then same for
the leg as well, it was below the thigh and then just off to the
left a little bit. So considering you light source will help your animation
come to light too. Now that we've added in texture to both the character
and the background, let's move on to creating
a looping background.
5. Animate Background and Foreground: Now that we've got our
character moving and we've added texture to the
character in the background, let's go in and start adding some motion to the
background and foreground. Because the timeline that
we made is two seconds long but the looping animation of the character is only one, the character will disappear
for part of this animation. But don't worry, we
will be duplicating the character animation once we've animated the background. The trick that we
did in the prep stage within Procreate, where we added in
the little notch, I'll show you how that
comes in useful now. Let's start off with
our foreground layer. Let's add in our keyframes. Let's click the Playhead,
add Move and Scale, and then let's go to the end of the timeline and then
let's add in one more. Now, with the notch
because we added it to the beginning of where
we duplicated the layer, we can just match that
up with the start of the frame and it should loop. If we just drag this, let's find our notch,
so our notch is here. If we just drag that
to the start of the frame just like that, and then what we want
to do is want to make sure we're only
moving on the x-axis. To do this, let's hold
our keyframe track. Let's expand moving scale. Then if we delete the y, it should just stay
on the x-axis. Then let's change the
easing to linear. What I want to be
looking for here is to make sure in this bottom
corner, there's no jumping. So let's watch that back. You saw there's a
little pause there. What we're going to do now
is just play around with the position of this so we can move this ever slow,
slightly forwards. I'm happy with that and
I'm just going to do the same for the bushes
and the mountains too. Let's locate our mountains
and let's do the same. Let's tap, move, move and scale, strike the Playhead to
the end of the track, and then let's move
it looking out for the little marker we placed
in, it's just there. Let's hold, expand and let's delete our y just so it all
stays on the same axis. Let's hold, then set
the easing to linear. Let's see how that looks. Remember we're watching
out to make sure we see no jump as it loops. If you see it stop
and then carry on, but it stops in the right place, what I'd like to do is just move the last keyframe just
off the timeline. If we expand the content just by one and then if we move
this keyframe just off, then it should prevent the jump. Perfect. Finally, let's do
the same for the bushes. I'll select the bushes, tap, move and then
add move and scale. Then to the end, same again. Let's just find the
notch that we added in. It's just here. Let's
just line that up. Then click on the
keyframe track. Let's expand and delete the y. Then I'm just going to
move this keyframe path. Perfect. Now, we've got
a leaping background. As you can see, the
mountains are moving a lot slower compared
to the foreground, which will help add
to the illusion that the character is
moving forwards. Now that we're happy
with the animation, let's just go in and fill in that little notch
that we added. Here's the notch
of the foreground, so I'm just going to
select that layer. I'm going to go on the
Draw and Paint tool, select the color and then
using a smooth brush, just go in and just fill it in. Perfect. Let's do the same
for the other two layers, so the bushes and then
finally for the mountains. Now, to add a little bit
of depth to the animation, I'm going to add a
blur to the foreground and a little blur to
the background too. To do this, I'm going to locate the foreground layer and then with this, I'm
going to add a filter. I'm going to tap the Playhead, Filter and then Gaussian Blur. I'm just going to see what it
looks like until I'm happy. I'm going to do about 5% and then I'm going to do the same for the
mountains in the back too. Tap the Playhead,
Filter, Gaussian Blur. Let's just add a slight blur. Now, we've got a
leaping background. The character is disappearing, but that's because in
the next lesson we're going to be adding some
effects to the character. I want to make sure
all these effects on before we duplicate it
to fill the timeline.
6. Animate Final Touches: Now that we've created
our looping background, I'm going to go in
and add some little effects to the
T-shirt and the hat, and then make the character
move around the frame, just to bring the whole
animation together. I'm going to be
using the performing tool to animate the clothes, to add a bit more of an
organic feel to the animation. Let's locate our torso. We've got character, upper
body, and then torso. For this I'm going to
click on the Playhead, Move, and then Warp and
you'll see his grid pop up. I'm just going to pop to
the end and then just tap just to make sure that it starts in the same
place that it finishes. Now I'm just going to drag
it back to the beginning, strike it one frame over. Then with the performing tool, as soon as I click
the record button, I'm just going to wave this
bottom section of the torso, but making sure I stop before the playhead gets to the end
just to make sure it loops. We play that back, let's
see what it looks like. this is going to
take a few tries. I'm just going to undo that. With the performing tool, you can adjust how much of your motion is recorded with the modify
button at the top. When you click the performing
tool, click modify, and I'm just going to drop
this all the way down, just so it doesn't filter
any of my movement. The playhead does move quite quickly, so I'm
going to go again. I think I'm happy with that.
Let's play that on loop, see what it looks like. This first keyframe,
making sure you've got the performing
tool deselected. I'm just going to
warp this over so slightly and then let's
fill the timeline. Then let's see what
that looks like. Now, let's add a bit of
motion to the hat as well. Let's do the same. Add a Warp keyframe, and then let's go to the end. Let's just tap to
add a keyframe. Perfect. Now with this, I'm going to do this one without using the performing tool. As this loading for a push, I want the cap to bend forwards. From here, I'm just going to add a slight
bend to the front of it. Then as he's pushing, I want the cap to
go the other way. Let's set this to linear. I don't want the cap to start moving until he's pushed off. I'm going to add in
the keyframe and then just make sure the
cap is straight. I'm going to delete
this last keyframe. Just drag the one that I
just added right to the end. I think the cap goes a
little too far down, so I'm going to go and
tweak that a little bit. Just play around with
these additional bits of animation that
we're adding just to see how it feels when
you're playing it back. We ignore the background at the moment because we are
only on the one second. I'm just watching the
character to see how it feels. I'm happy with that. Now the final bit of animation that I'm
going to be adding is I'm just going to be moving the character back and forth. With this character layer, let's tap the playhead, click on Move, and let's start
him in the center, and then let's move him back. I'm going to expand
the moving scale, and then I want to make sure
I'm just on the x-axis. I'm going to be moving him
back just a little bit and then getting ready
for him to push. Then as he pushes off, I
want him to move forwards. The good thing is we can go
in and dial the exact number. If we tap that and then we
should just round this up, so we say 4963. Cool. Then if we make sure the one at the end
is set the same too, 4963, now it looks
like he's floating. Let's move the whole
character down a bit. Let's play that back
to see what we've got. Let's just fill the timeline. Ignore the background right now, we're just looking
at the character. Let's make sure the
loop looks smooth, the cloths are moving
nicely, and the cap to. I'm happy with that,
so let's collapse the moving scale keyframes and let's duplicate the
character layer. I'm going to hold the
content and duplicate. Let's just make sure our
keyframes are set to ease in, ease out to match the
motion of the character. Now that we're happy
with the motion of the scooter and
the character, let's just finalize by
rotating the wheels. Let's find the scooter
layer, character, scooter, and then we've got
back wheel and front wheel. Let's tap Move and Scale. Let's make sure our
anchor points are in the center. That's perfect. Then let's go to the end, the first one, and then
let's just add a rotation. I'm just looking at the wheels just to
add a little bit of motion so it doesn't like he's
gliding along the ground. Let's do the same
to the front wheel. Tap to add the keyframe, let's check the anchor point, perfect, and then let's
just add the rotation. Let's collapse that group and let's delete the previous
duplicate that we did, because we've added it
in the wheel rotation. Let's minimize the
character group. Let's just hold that
content, duplicate. Now if we watch that through. There it is. You've animated your first looping animation.
7. Final Thoughts: Congratulations, you made
it to the end of the class. You made your first leaping animation from an
illustration that you either previously created or for the one that you
followed along in the class. You learned a lot in this
class from importing your files from Procreate
into Procreate Dreams, how to group your content. Then we went on to a rigging workaround where we played with the anchor points and the moving scale to add a
rotation to each limb. Then we finished off by adding some texture, animating
the background. Then we animated some
extra elements like the clothes and the hat to tie the whole
animation together. I can't wait to see which illustrations you bring to life. Do you share them below
in the project gallery? That's all for this class, I'll see in the next one. Bye bye.
Smitesh Mistry, Illustrator & Designer
