Transcripts
1. Class Introduction: I love animated illustrations. The movements of the
otherwise static elements tell much stronger
stories to the viewers. The creative use of time and
space invites viewers to engage and appreciate the
visual impact in a deeper way. Hi everyone, welcome
to the class. My name is Esther
and every O'Shea, I am a US based illustrator and a top teacher
here on Skillshare. My work is seen on
variety of surfaces as well as magazines and
popular design blogs. Today we will be creating
snazzy animations on the iPad. I am fascinated by traditional
frame-by-frame animation. And I am amazed by how much
of the core results can be achieved by using just
one single app on the iPad. This class is designed
for beginners who have little to no experience
drawing or animating. Although the skills you
learn from the class can be applied to complex
illustrations. We are going to tackle only
letters in this class, which are made up of very
basic geometric shapes. If you're older than five, chances are you are already
overqualified for the class. By the end of the class, you will be able to
animate one letter by using any or all of the
techniques we cover in the class. You can upload it to the project gallery
under this class, as well as posterior new
creative chops on social media. Or if you're shy, you can just send it to your
mom and make her proud. I'm excited to show
you how we can turn our hand lettering into
animated illustrations. I'll see you in class.
2. Technique 1 Glitch Effect: When you opened
Procreate on iPad, your screen probably
looks similar to this. You want to come over to the upper right-hand corner
and click on the plus icon to create a canvas which is
equivalent of a new document. You can choose
different sizes if you have a particular
dimension in mind. I am just going to
choose my screen size, which is the top
choice, the list. I can go ahead and just
tap on the screen size. If you want to create a
document of a specific size, you can go ahead and click
on this icon right here. And then put in your size, the dimension of your
Canvas from here. I am just going
to cancel and tap on the screen size
to create my canvas. By default, the canvas is white, so I am going to change
it to a darker color. Just for the sake of recording, it's easier on my eyes. I am going to tap on
the layer site Kong in a corner and tap on
the background color. From there, you can select
the background color. I am going to choose
something like navy blue, ish color, maybe less saturated. Then we're going to create animation on top of
this background layer. Like I said earlier
in the introduction, we're not going to go through very specific illustration
techniques because we want to keep our focus on the
animation side of things. So we are going to use very
simple geometric shapes. In this case, for
our first technique, we're going to
animate a letter 0. I am going to use a brush that is pretty
clean on the edge. I have created this
brush from scratch, which I will also make
it available for you to download in the resources tab. Once I have my brush selected, I'm going to tap on
my canvas to go back to the main drawing area
to test your brush. You can always just
scribble on your screen. For this particular
brush I have created in such a way that will automatically
smooth out your lines. So I am going to
draw a letter 0. So go ahead and draw a
circle on your screen, but delayed the
lifting of your pen. In this way, you can get a
much better circle or oval. With the tip of the pen is
still touching the screen. I can change the
size of my oval. And I'm just going
to let go from here. For all the type
designers out there, you're probably
cringing right now. But for the simplicity
of the class, we're going to draw
an OH, this way. As you can see, there are still some things that needs
to be cleaned up. I am going to use my eraser, maybe make it a little finer to smooth out the
connection point. We're pretty zoomed
in at this point. You can't use your two fingers. Quick pinch on the canvas to fit your canvas
back to screen. This is our letter 0. I am going to at this point to turn on the animation assist, which is under this wrench icon on the upper left-hand corner. Click on it and click on Canvas and turn on
this animation assist. Just toggle. Immediately you will
see the animation assist panel appearing at
the bottom of your screen. This will show you each
frame of your animation. For the sake of simplicity, we're going to only make
five different frames. So I'm just going to
go ahead and click on the Layer icon on the upper right-hand
corner and left swipe the layer to
reveal some options. We're going to click on
Duplicate, left, swipe, duplicate until we have
five layers to work with. So I'm gonna go back to
the first layer here. What I want to do is
to add glitch effect. This letter 0, which
is super simple to do. You want to click on
the adjustment panel on the upper left-hand
corner and down the list, click on the glitch. The percentage of
the fact is zero. That's probably why
nothing changes when you play with the
sliders at the bottom. So what you wanna do is to take your pencil and slide on
screen from left to right. In this way, you will
see the glitch effect. 100% is the strongest. I usually stay maybe
around 30 to 20% Also over here there are four subcategories of
the glitch effect, and you can just tap
on them to toggle. My favorite for this
animation is to artefact. And by the way, don't worry
too much about the colors. We can change the colors
later altogether. So I'm going to just
choose the first effect, which is called artifact, and then play with
the sliders until I'm happy with the size and the
severity of the effect. Maybe here is my happy place. Once you are happy with it, you can just tap on screen
and apply the effect. You can also just
directly tap on your layers panel and
go to the next layer. In this case, when you
click on the next layer, you can still see the shadow of the first layer is
called the onion skin. This is super, super
helpful because you can make mindful decisions based
on previous animations. By default, Procreate will show you all the
previous frames. I think that's a
little too much. So I'm just going to tap
on Settings and then change the onion skin
frames to maybe one or two. In this case, since our
animation is pretty simple, we're going to just keep
the frames count to one. So we can only see previous one frame instead
of all five frames. And then you can also
change the opacity. I think 50% is pretty good. You can also change the colors because we have this navy blue. I'm going to change the colors to maybe a brighter yellow. So we have a bit of contrast. So now we will work
on our second frame. The first frame is
the most bottom frame and the second frame
is the one above it. So just go ahead and click
on the second frame. We're gonna do the
same thing by click on the adjustment panel and go down the list and click
on the glitch effect. Again, we're going to slide our glitch effect percentage
to maybe somewhere 20-30. And then you can
change the block size to something similar
because we have the, let me just zoom in because
we have the onion skin on. So you can see the difference
between your current frame, which is in all full color, and the previous frame. So you can tell how much of the difference
you are making. This looks fine to me. So I'm just going to tap on
screen and click on Apply, and move on to the next layer. It's simple enough. Again, if the primary colors
are driving you crazy, just hung in there. I promise we'll deal
with that at the end. So the third frame, just tap on the frame
and we're going to click on the
adjustment and glitch. Again, we're going to slide our pencil from left to right. To change the severity
of the glitch effect. You can tweak with any of the sliders at the
bottom of your screen. And move on to the next one. When you click on
the next frame, which is the layer above, it will turn the previous layer automatically into onion skin. So adjustment, glitch and a slide on screen
to change the severity. Once you have done
enough of this, all these will become
muscle memory. One last frame. Now we have the glitch effect
applied to all five frames. For the next step, we're
going to change the colors. When you tap on the
adjustments panel. There are four
clusters of effects. So we're looking at the last
one of the first cluster, which is called a gradient map. This is really brilliant for
changing colors all at once. I'm going to just tap
on the gradient map. When you select
the gradient map, you can see a gradient
library available to you. You can go ahead and toggle different options and it will automatically
recolored everything. I noticed that when I toggle
the gradient map color, the onion skin color is
still visible to me. So I am going to tap
on screen to hop off from the gradient
map for a second, to turn off my onion skin. So just tap on screen
and click on Cancel. And go back to my
animation assist. I'm going to tap on Settings and slide the onion
skin frames to zero. In this way we can only
see the current frame. So let's go back to
our gradient map. We can go through all the color options
without interference. I'm really liking
this color option, but I might want to
make some adjustment to make the contrast
a little bit better. So e.g. you can tap one of the colors. Then just play with the
sliders to change the value. If you want certain color
to be more prominent, you can also tap on the square and then
just move it around to make certain color
have more percentage or presence in your current
frame of animation. Once you're happy with it, you can go to the corner
and just click on Done, and it will automatically
update and save your gradient. For the next tab, we can
go through every frame. Just tap on layer and
go to the next frame. Adjustments, gradient, map, and tap on whatever gradient
you have chosen. And go ahead and recolor
the rest of the frame. Adjustment, Gradient Map. Done. And do the same thing
for the last frame. Now we have all the
frames recolored. We're going to take a look at our animation and
take a preview. So we're going to click
on the Play button. It looks, it doesn't
really look like a button, but it is clickable. So go ahead and tap on the Play. And it will show
you the animation. You still have
choice of tweaking your animation by
coming to settings. And you can change how you want your animation
to be played. It can loop from frame one through five and
going back to one. Or you can also
choose ping pong, which works like a ping-pong, or you can have it
played only once. By default, the frame
per second is 15, and you can change it
to a slower number, which has kind of
choppy look and feel. E.g. this is eight
frames per second. Let me just go
back and hit play. And I want to change my looping option
to maybe ping pong. Let's see. Any click on play. This is eight frames per
second, which is pretty cool. So that is our letter 0. Alright, this is our
first animation. I hope you take some time to celebrate and do a little
celebration dance. And we will move on to
the next technique. I will see you in a few.
3. Technique 2 Moving Paths Effect: In the first lesson, we have learned how to use basic glitch effect to
animate our letter 0. In this lesson, we're
going to learn how to animate another letter, but using a slightly complicated
animation technique, I'm going to click on
the plus icon to create a new canvas that
is the screen size. And then click on the
Layers icon to change my background color to something slightly darker. Here you go. Maybe a little happier. This is a little too dark. So bring it back a little bit. This like cold
gray, maybe warmer. Alright, I will, I
will use this one. Alright, let's do this. So the first thing I'm gonna do is to write down my letter e. So I want to make sure I have
the empty layer selected. And using the same pen. I am going to just write
down the letter E. Nothing fancy. Just go ahead and write small e. So this is going to be the
main animation object. So I am maybe I will erase
the tail a little bit. This seems to be a
little bit too tall. Alright, here is my letter E. By the way, anytime
when you want to change the position of the
content of the layer, you can just tap on this little cursor icon
and then just move things. When you want to move things
in a smaller increments, you can just tap on any
side of the bounding box. And it will move maybe about
a one pixel at a time. So there is that little trick. And I am going to use this
as my base of the animation. As you can see,
this is the preview of our letter E animation. Each frame has just a
tiny bit of edge and it's moving along this
letter frame-by-frame. So that's what we're gonna do, is you can see now
it's moving inside. And along the inside counter. We're going to hop back
over to our own file. To get started. We're going to
make a copy first, left swipe on the letter E
icon and click on Duplicate. And then we can just uncheck this little box to
hide this layer. This layer is basically insurance in case that we
lose the original copy. Whatever layer is hidden will
not be shown in animation, so I don't even worry about it. We're going to make four
copies of the first layer. Left swipe, duplicate. Do the same until we have five
visible layers right here. To make things a little
bit more interesting, I am going to make
the older edge, the animation part of
a different color. So say that I want
to use this yellow, this bright yellow color
as part of the animation. At this point, the
layer structure looks very similar to the first one. But for this
particular technique, we're going to create
multiple layers in one frame. Again, we're going to work
from the first layer, which is the second
to last layer. Remember the bottom layer
is dress insurance and they will not show because we have this checkbox unchecked. Maybe you can even lock it. You can do that by left swipe
the bottom layer and lock. For the first step, we're going to create
a brand new layer. For the sake of clarity, I'm going to change my
brush to a different color, which is this bright yellow. I also want to make sure the
onion skin is back to one. So click on settings and use the slider to change
the onion skin count. So I can only see
the previous frame. For the simplicity, I am
going to just animate the outer edge because we only have five frames for
this particular lesson. If you really want, you can create maybe 20 frames to make your animation
more nuanced. Before. Now let me just demonstrate
how the effect was made. As we said earlier, we have already
created a new layer. We're going to hold
this layer and drag it below the first layer. I'm going to draw a new stroke. This blank layer below
the first letter E, with the same brush selected. I'm going to just draw under. At this point, each layer exists independently
and procreate, sees each layer as
one animation frame. So what we're gonna
do next is to group our first letter E and our first yellow stroke
together into one group. With the yellow stroke selected. I am going to write swipe on the first letter E and click
on the corner to group it. In this way, procreate
sees this entire group, however large it is
as one single frame. So that it's really,
really helpful. What I'm gonna do
now is to create another layer and to add another
yellow stroke on screen. And go back to my layer to
group it with the second E. So select our new yellow stroke, right swipe and group it. That's basically
the main technique. Again, I'm going to
click on Plus to create a new layer
under the third ie. And draw this yellow
stroke a little bit further around the
outer edge of the letter E. And group this stroke
with the frame above. Same thing for the letter above. We're going to draw
this yellow stroke. Make it even longer. We want to group this yellow stroke width letter you above. And this is our last one. And draw a stroke on this new layer and group
this stroke width top, ie. Simple enough. Now we have
an animation when you click on the Play button and the
animation assist panel. And you can see how the
animation is played. You can certainly make it
slower by using Settings. And you can change
the frames per second to something smaller. If you want to make it
even more complicated, you can go into any of these groups and to add
a secondary detail, e.g. if I want to add another stroke, and you can just click
on the plus icon to create a new layer. Say I want to add maybe a pink stroke on
top of the letter E. And you move this new layer
on top of the letter E. And then just draw a
simple stroke like that. As far as Procreate sees, this entire group
counts as one layer. I really like it because
it also gives you the flexibility to manipulate
each layer independently. So you have the
benefits of the layers without having to merge them into one single layer
and then have to redraw it 1 million times
when you make a tiny change. Long story short, that
is our second technique.
4. Technique 3 Liquid Wipe Effect: In the previous lesson, we have learned how
Procreate sees a group as one single frame in
terms of animation. So that is really helpful. In this lesson, we're going
to make a more liquidity and organic effect based
on that understanding. So here is another new canvas. I'm going to tap on layer and change the background color. Sometimes when I do
still illustrations, I can just create a layer
and color drop it, e.g. like this, to use
it as a background. But this technique
doesn't work as well for animation
because sometimes, depending on how you
organize your layers, procreate can see this
particular layer as one frame of the animation
which can mess up the project. I'm just going to use the
background color layer that's built-in in procreate
for my background. Although I want to show you if certain element that stays
still on your canvas. You can also set that secondary illustration
as background. E.g. say, I want to add some
textures for my background. I can use one of the texture
brushes, e.g. this one. And just go ahead
and pepper my canvas with this beautiful texture. Kinda feels like snow. But this texture will remain the same
throughout my animation. So what I wanna do is to create a new layer and make sure I have more
than just one layer. And come over to the wrench icon and click
on the animation assist. By default, there
are two layers. The first one has the snow all over in the second one
is just empty layer. What I'm going to
do is to tap on this snowy layer and toggle this option
which says background. This will turn my peppered
layer into background, which means that even if I
add 100 layers after that, the background is
still going to be present for every
single one of them. Which is really nice. And I am going to click on Settings and make sure my
onion frames go back to one. So it's not too cluttered. When you make some
really quick animations, you might want to set your
onion skin to more than one, but our animations in this
class are pretty simple. So I'm going to stay with one. So I can go ahead and start
animating from layer to this. No effect seems a
little bit strong. So I'm going to go back
to layer one and tap on the N on my layer to
change the opacity. So let's go back
to our layer one. If our actual animation, what I'm gonna do is to draw a liquid effect
of the letter I, as I have showed you at the
beginning of this lesson, I'm going to start with
some really bright, energetic green,
greenish, yellow. So I'm gonna go back to
my normal drawing brush. You can use a brush
that has more texture. That makes it more fun. But for now, I'm going to use this particular brush
because it's pretty clear. This is my first frame. Again, I'm going to
make it just a tiny, tiny beginning of the letter I. And it's going to, the liquid
is going to drip down. Maybe one side is slightly
heavier than the other side. And I'm going to create another
layer and drag it under. This is going to be
the blue color that is peeking under the green. These two layers are gonna be seen as one animation frame. So I'm going to write swipe
to group them together, click on Group, and then
work on the second layer. So I'm going to just have
a, let me just zoom in. Just have like tiny, tiny showing of this
blue layer underneath. So that's our very humble
first frame of animation. So that's our group
has the frame one, and I'm going to create two new layers for
the next frame. And then group it together
to tell procreate, this is one single frame. Again, we're going to have. The blue at the bottom. This time the blue is going
to be a little bit bigger. Actually. I'm going
to start with the green because that's
the main driving color. Drips a little bit more. And I'm just going to
drop the color here. And to switch between colors, you can just long press on the color icon to switch back
to their previous color. I'm going to grow this
color a little bit more and then drop it. So basically the green
or yellow is going to drip mainly on the right and the blue is going to
drip mainly on the left. So that's our second frame. And you can click
on the first frame and the second frame to compare. Next step, we're going to tap on the plus icon to
create two new layers. Again, we're going to write
swipe to group them together. So this blue icon is
going to be a little, this blue color is going
to be a little longer. Let's look like a molar tooth. So I'm going to make
it a little bit longer and just use
the color drop. I realized that I have colored
blue on the top layer. So I'm just going to select the bottom layer and
drag it back to the top. And then create my yellow layer. If you want to be like super accurate about this animation, you can search for
videos that has very, very slow motion of
how the water moves. This will make your animation
more more realistic. Before now we're going
for organic and chunky. Maybe it's even dripping
a little bit here. And we can hit the play
to preview it super fast. It's too fast. So I'm going to
change the frame per second to maybe five. Let's see. Okay, better. Again, go to the top group and create two new layers
and group them together. And keep making our letter. I am going to make it
stop maybe around here. So maybe this one
was around here. Then color this one. Feel free to, you. Don't have to add just precisely two colors. You can. Who I lost my blue, but I know that's the
previous color that I used. So I'm just going to long hold my color.it will switch
back to the blue. You can add a third, fourth or however many
colors that you want to add. You don't have to
stick with two colors. I just want to show
you how it works. But you can totally,
totally go crazy. Color my blue. So I'm going to
add my last frame. Hit Plus a couple of times. And group the top
two layers together. This is my final frame. I'm going to just
create this chunky I, the body of the chunky I. Actually this is the
second to last frame, because for the last frame, the yellow will
completely catch up. You won't be able
to see the blue. Switch back to the yellow color. It just, it almost reached the very end except
for a little bit. Any color it for the last frame. I'm just going to
create one frame. And it's going to be this
yellow covering everything. There you go. Let's hit Play
and see how it's looking. Pretty cute. I like it feels like a
popsicle more than the letter. I. I kinda wanna fix that. So I am going to move everything down a little bit and add a dot at the top. So it looks like a
little letter I. So what I'm gonna do is to
write swipe every layer. In this way we can
move everybody down together by the same distance. And I'm going to open up every group individually
to create this dot. So when you expand
the first group, which is the bottom group, and hit Plus to create a new
layer within that group. And maybe this pink color. And I'm just going to
draw circle and color it. And open up another group
and add another layer. And draw a similar dot, but is not identical. So just keep going until
every frame has a dot. And you want to intentionally
misplace the dot a little bit so you can see the shift of position
to see motion. We have three more dots to go. Actually, they look super small. Anyways. I'm just going to
leave it this way. And maybe it's
growing a little bit. So it's getting bigger. And notice our last frame
is just one single eye. We're going to
create another layer and a group with this, I want this yellow line. So we have these
two as one group. If you know a bit of
animation principle, you can even add like the squash and the balance
between each frames. But for now, I'm content with just slight different
displacement. I'm going to go
back to hit play. So, yeah, that is
our third technique. And I will see you
in the next lesson.
5. Technique 4 Morphing Effect: So previously we
have learned how to animate by using
one single effect. And we have also
learned how to make each animation frame more
engaging by using layers. In this lesson, we're going
to continue to build on our previous knowledge and
animate this letter M. I'm just going to play on screen for a little bit so you can get familiar with the look and
feel of this animation. So I'm going to stop at a
middle frame somewhere. In term of those structure, we have this mean reddish
orange stroke going around. And if you look at the
tip of the stroke, we have this little oval with these two wire
looking thing coming out. The purpose of this is to indicate the direction
of the next step. So you kind of build a
bit of anticipation. So I'm just going to play
this animation one more time. In this lesson, we're going to build something very similar. So instead of letter M, which is pretty complicated, we're going to build
a small letter I. I'm gonna go to a new canvas and create a new
background color. So that's our background color. I'm just going to
use our first brush, the clean mono liner, to show you the main direction and the main size
of our letter I. So basically it is going to be something like this,
maybe with a dot. So we're going to
grow our letter from the beginning all the
way till the end. And for the actual letter, I'm going to make it
a little bit thicker. And I will create this dot. And I will erase a bit of the
tail as well as the head, just to make it a
little cleaner. So this is our letter. I, maybe I'll make it
a tiny Ted, smaller. And I'm going to create a copy again for insurance purpose, just to keep it safe. If we mess up, we
can always just delete everything
else and start over. So duplicate and hide
the first layer, which is the bottom one. You can also lock
in if you want. For this particular animation, I am going to a reversed order. So we're going to
basically work backwards. We're going to have
a full letter. And then you raise
it little by little. For the last frame, we're going to have just the
beginning of the letter. In this way, we don't have
to match every frame to draw every frame to create this
unwanted displacement. When we erase our letters
from frame-by-frame, we can make sure
whatever that is left perfectly overlaps with
the previous frame and the frame after. If that confuses, you, just follow what I
do and it will make sense as we work
along the process. So I'm gonna go ahead and
create for other copies. So I'm going to swipe to duplicate four times until
we have five frames. Then we're going to
go over to the wrench and open up our
animation assist. Again, we're going
to click on settings to turn our onion skin
frames back to one. And then we're gonna
go back to our layers. The first frame of
our animation is the second to last
frame, like previously. So we're going to leave
the first frame intact and just erase a little bit
of our second frame. So have your eraser selected. And just erase a bit of the
tail of the second frame. And you raise even more
for the third frame. And then you can keep
going for the frame after. It looks like five frames
may be too little. So I'm going to create maybe
a couple of extra layers. So instead of five frames, we have seven frames. So that's the first 1 s third. Basically, each subsequent
frame has shorter tail. And the very last frame probably only have
the dot at the top. It looks like we need to
create another frame. Oh, actually, this is perfect. This is our last frame and we're going to erase the body of the last frame and only have the dot to left. It looks like we have forgot
a fragment of the letter I. So I'm gonna go back to, because the onion
framings drawing, I'm gonna go back to the
previous frame to fix that. When we hit play. At this moment, it will. Oh man, this is too fast. I'm going to lower
the frame per second, maybe four frames per second. I'm just going to look at the rough timing
of the letter I. And I will also change the
looping option to ping pong. In this way, the eye, the body of the I will
go back and forth. And once it fills all the
way, it bounces back. And at this point
I'm going to go through each frame to make sure I have erased all the
parts that I intend to. Let's see. Okay, this is good enough. So now I'm going to add
some secondary layers, the little around the little
oval cap as well as diffuse. I'm going to find the first layer that has
your raised portion. I'm going to create a new
layer on top of this one. And just group this two
new layers together. In this way, this whole group is going to be
seen as one layer. This new layer I just created
is going to be the cap off my letter I choose. Maybe a brighter yellow. You can see the yellow
peeking behind. This is the onion skin. This shows us what previous
layer it looks like. You can also dim it
to maybe like 25%. So it's not
interfering with the, with the new layer. I'm just going to select the blank layer we just created
on top of this erased I. And I'm going to just
draw oval cap around it. And if you want to be fancy, you can create another
layer to make a fuse. Maybe the red fuse. This doesn't contrast are
very well with the bottom. This peachy color. Technically you can combine
all the content in one layer. But if you have taken any of my digital
illustration classes, you know that I'm a big
fan of layers because it will allow you to change
the properties individually. It gives you a lot more flexibility when you
have multiple layers. So I'm just going to close this group and go
to the next one. And create two new
layers on top. And right swipe to group these three layers
into one frame. So for each frame, we have a cap and a fuse or
a little tail, if you will. So I wanna go back to my yellow. I lost my yellow at this point. So I want to open this yellow and long press
to sample the color again. And long press to sample
the peachy color. In this way, I have the 22 colors as my
most recent colors. So going back to
my layer on top of the eye to draw the cap. Drag and drop to color it. So that's this group. So each group We have
some form of letter I. We have the cap and
the fuse or tail. And you can move on
to the next letter. I. Create two new layers. And group these two new layers with portion of the
eye at the bottom. And just draw the cap. And you can use two fingers
to rotate the canvas. However, that makes
it easier for you to draw and then jump to the top layer
to draw the fuse. Want to change to
a different color? Pretty much. That's how it goes. Two new layers. And group these three layers. This class focuses on the
animation techniques. But if you are
interested in learning more illustration like a traditional still
illustration techniques, you can check out my other
classes on Skillshare, where I teach a variety
of different topics using mostly Procreate as
well as Adobe Illustrator. You can preview the animation
by hitting the play. As you can see, the, it's, it's doing pretty well. So we just go to each letter I to add the other two elements. The yellow cap and the tail groups. Double tap, double finger
tap on screen to undo. I should have probably
explained that earlier. And this is our last frame
and we have just a letter I. It looks like there's a part
that needs some erasing. You can click on each
group to preview. E.g. this one seems like
you need some erasing, so I'm just gonna go in
and erase this pink part. By the way, when
I tap on screen, it shows me the group. This is because I have
the group selected on my layers panel instead
of individually layers. Procreate is asking
which layer of the group do you
want to call upon? So I want to call this pink eye. There's a bit of smudge
that I need to erase. This is another benefit
of using different layers because all my elements are
not along one single layer. I can be more generous
when I erase. I know the pink is on PINKO and the peach tail is
on the pH alone. So why don't you raise it? I don't have to dance around
it to be super careful. I can just go boldly and only
the pink will be erased. The rest of the
frame seems great, so we can go ahead and hit
play and see how you like it. Yeah, this is our
fourth technique. Anytime you want to add
any additional things, you can always just expand your group and add
additional layers. E.g. if I want to add a
highlight to my letter, I, I can just
create a new layer. You expand the group,
create a new layer on top, and pretend the light comes through the upper
right-hand corner. You just add a tiny
bit of highlight. And you can do the same thing at this highlight layer throughout this group, throughout
each frame. And this will add more
character to your animation. And you can purposefully not add the highlight at the
exact same position. So when you preview
the animation, There's a bit of shift
to this one will probably not have highlight
because it's so short. I'm just going to hit play. So this is pretty cute. That's our fourth technique.
6. Technique 5 Shatter Effect: Alright, this is
the last in fact or technique of our
animation class. If we look at this letter S, when I'm sliding the
animation timeline, it's started out as a full
letter S. And slowly it's breaking apart and it's being shattered and the pieces are
flying off of the screen. So that's the fact
that we're going to build in our last lesson. Again, we're going
to create canvas. And we're going to give
it a background color. I'm gonna do maybe you let
her in the script font. I'm going to erase the beginning and the
tail a little bit. Actually, I am going
to change the color of the background because it's
producing a bit of glare. Just for the sake of your eyes, I'm going to make it to
a darker color again. I'm maybe this bluish green, this P Cauchy color
like we did before. We're going to create a copy of our letter n just for safety. Duplicate and uncheck
the visibility. Lock it. And we're going to make this animation and
maybe five frames. It's going to shatter
real quick in comparison to the
example we have. So now we have five
animation layers. We're also going to
turn on the animation assist by clicking
on the wrench icon, canvas and Animation Assist. And also we want to click
on the settings to change the animation skin
frames to maybe three. In this case, we can see
two previous frames, so we can see how fast
the pieces are traveling. Now let's go back to our
first animation layer, which is the bottom layer. This technique uses the selection function
alone pretty much. So. That is this little
ribbon icon at the left-hand corner of the four sub category
under selection tool, you'll want to make sure you
have the free hand selected and you have to add highlighted, but the color fill
is not selected. Otherwise, it will recolor your selection with
the current color. We don't wanna do that. We just want to select
r shattered pieces. So let's go back to our letter
N. For the first frame, we're going to have the
letter N as a whole letter. Nothing needs to be altered. When we move on to
the layer above. For this frame, we want to use the selection tool and
maybe just draw a triangle. Just freehand it. Once you have a closed
shape and click on this little cursor
icon to select it and just nudge it
over a little bit. Any wanna do that for
different parts of the letter? So I have the ribbon selected and draw another larger piece, and click on the cursor
to move it further. And you can grab
the green handle to rotate it as you need. I'm just going to go around and select my little shatter pieces. So this is the first movement. You don't want to be too severe. So it just moves a little bit. Maybe I'm going to select
another one. At the top. There you go. And this is our second piece. When I first created
our document, I've made a mistake of
making too many duplicates of the perfect n. That's not what we want
for this technique. What we want is to build one shatter piece and then
build on top of this one from there instead of the perfect
n. So I'm going to delete my top three perfect ends and make a copy of the
layer that we just created, the one with tiny
shatter pieces. Left swipe to duplicate. What we're gonna do
now is to further move our pieces and create
more shatter pieces. So use this selection
tool, the ribbon. We want to select our existing shattered pieces and move it a
little bit further. And maybe change
the angle by using the green dot and free hand. To use the Lasso tool and a cursor icon
to move it further. And we want every piece to have at least a little
bit of movement. Otherwise, it will appear
stagnant on animation. Once we have every
piece moved further, we can create new
shatter pieces. So we want to select it
and move it further. Just go around our letter n. Maybe move it down like this. So we're going to move
the pieces from center or pretend there is a center
in the center of letter N. And all the pieces are
moving away from it. And then we have
our second layer. We want to create a copy of our second layer and
keep going from there. Now it seems a little
bit cluttered on, I'm going to click
on the settings, on the animation assist to
turn onion skin frames back to one and lasso, or use the selection tool to move things around. So the pieces that are further
moves a little faster. So you can lasso to select
a group of things and then individually move the
altarpiece little bit further. Feels like the altarpiece
goes a little faster. I'm going to move this up. Move this down. I'm going to have this one, move as one big chunk. That's our new layer. And we want to make a copy to keep further
moving our pieces. So basically select and move. Like previously at this point
for the pieces at the edge, it's okay to move it
off of the frame. You don't have to keep
them on there because they should be traveling further
off the screen already. You can further break down
pieces that looks too big. And then don't forget to
use the rotation tool. So they look like they
have been flying. On screen. There you go. Alright. We're going to create
one more frame that has everything further moved away and pretty
much everything almost off the edge
except for a few. And our last frame is
going to be just empty because everything has been flying off of the
screen already. Okay. And for the one last frame, we're going to just
create a blank frame. And now we can hit Play to see, actually, before I do that, I want to turn down
the frames per second to maybe five or six
and then hit play. Now you can see
the shadow effect. This will be more fun if we turn the setting
into ping-pong. Feels like the pieces
we'll come back together to go ahead and hit play and see if we
can go a little faster, maybe eight frames per second. There. That is our last effect.
7. Final Thoughts: Hey guys, congratulations,
you made it. You have watched
all the lessons of this class and maybe practiced
a little along the way. I am super proud of you, if you like my teaching style. I have tons of other
classes on Skillshare. Don't forget to follow me
on Skillshare in this way, you will be notified
the next time I publish a new class,
until next time. Happy creating.
Esther Nariyoshi, Published Illustrator based in the US
