Photoshop Animation Series Part 3: Eases

  • Share

Similar lessons

Photoshop Animation Series Part 3: Eases

Everything eases… Well, unless that thing is some super crazy stiff robot chances are it moves with an ease. Maybe you're familiar with eases from hitting the F9 key in After Effects or from using a script to control them.

Of course with traditional animation things aren't that simple. In this lesson we're going to learn how to draw the three basic types of eases. Then we'll see how to apply them to our animations to really give them a sense of life.

And of course we'll make another really cool GIF!

I also show you a Photoshop action in this lesson that I got from a great tutorial that Alex Grigg made some time ago. This is the tutorial that got me started in Photoshop animation, it even looks like he's updated it since then. Here's the link so you can check out his tutorial too:

In all of the lessons in this series I use an extension called AnimDessin. It's a game changer if you're into doing traditional animation in Photoshop. If you want to check out more info on AnimDessin you can find that here:

And the creator of AnimDessin, Stephane Baril, has a whole blog dedicated to people who do Photoshop Animation that you can find here:

Once again a huge thank you to Wacom for being amazing supporters of School of Motion.

If you have any questions, click over to the Q&A tab to post them. Other students can answer you, and we'll put our team on the case to try and get you a solution ASAP.

Have fun!

Download Project File
    00:00:03,512(explosion of music)
    00:00:11,561- Hello, everyone, Amy here at School of Motion
    00:00:13,959and welcome to Lesson 3 of our Cel Animation
    00:00:16,281and Photoshop series.
    00:00:17,830Today we're gonna cover the next
    00:00:19,361super important principle of animation: easing.
    00:00:22,695Eases are the key to bringing your animation to life.
    00:00:25,231Some of you may be familiar with eases
    00:00:27,113from using the Easy Ease button in AfterEffects.
    00:00:29,782Now we're gonna learn how to actually draw an ease,
    00:00:32,526frame by frame.
    00:00:34,262Thanks one more time for our friends at Wacom,
    00:00:36,041who saved us from hitting undo a million times
    00:00:38,931when we draw, by creating the Cintiq.
    00:00:42,534We have a lot of groeund to cover in this lesson,
    00:00:44,509so let's get started.
    00:00:46,721Alright, so welcome to Part 3 of our
    00:00:48,819Frame by Frame and Photoshop series.
    00:00:51,919Today we're gonna take a look at something
    00:00:53,649called eases, to start out with.
    00:00:55,731Now some of you may actually be familiar with ease
    00:00:58,778from your time in After Effects,
    00:01:01,180but when you're actually drawing them,
    00:01:03,121it kinda looks a little bit different
    00:01:05,729than what you're used to in, say, the curve editor.
    00:01:09,748Let's take a look at this really quick.
    00:01:12,026We're gonna play this animation back.
    00:01:14,547If you look, we have these four different balls
    00:01:16,961and they're all moving a bit differently.
    00:01:19,395Even though all of them are on 2's up here.
    00:01:24,135Why is that?
    00:01:25,641If we take a look at this spacing chart,
    00:01:28,999like we had in our lesson for our 1's and 2's demonstration,
    00:01:34,046you can see that each of these
    00:01:35,831has a different sort of spacing on them.
    00:01:40,419Let's take a look at each one individually.
    00:01:43,903This first one up here,
    00:01:45,445this one is going to be called Linear spacing.
    00:01:49,931On linear spacing, everything is completely uniform
    00:01:53,982and it just moves at a consistent rate the whole time.
    00:01:57,359This is the kind of spacing that we were using last time,
    00:02:00,188with our little sprite guy
    00:02:01,962that was going on that infinity path.
    00:02:05,297We did change the way that he feels
    00:02:08,437by manipulating the timing,
    00:02:11,163but now we're going to learn how to change the way
    00:02:12,902your animation feels by manipulating the spacing instead.
    00:02:18,811The next type of ease that we have
    00:02:20,835is going to be called the Easy Ease,
    00:02:23,715or Slow-Out and Slow-In.
    00:02:27,230This one you might be familiar with from After Effects
    00:02:29,750by hitting that F9 key.
    00:02:32,222Let's take a look at this one.
    00:02:33,761If you look, it's going slower at the very beginning
    00:02:36,751and the very end and it's speeding up through this mid part.
    00:02:40,097That's because the more overlap,
    00:02:42,158or the closer together your spacing's going to be,
    00:02:44,756the slower an object is going to appear to be moving.
    00:02:48,736Our next type of spacing that we're gonna look at
    00:02:51,355is the Ease In.
    00:02:54,195Easing in, or sometimes this is called Cushioning In,
    00:02:58,117is going to be where you start out really fast
    00:03:01,858and you slow into the motion.
    00:03:06,204Then the inverse of that is going to be the Ease Out,
    00:03:10,114where it starting off slow, so it's easing out,
    00:03:14,484and going faster at the end.
    00:03:16,808So these are the four different kinds of spacing
    00:03:18,983that we're going to use as we're doing our animations.
    00:03:22,214Of course, you can always play with these
    00:03:24,710and experiment with different kinds of spacing,
    00:03:27,539adding more frames at the end to even ease it in
    00:03:30,138even stronger or manipulate different things,
    00:03:33,451but by adding easing to our animation,
    00:03:35,392we can really bring life into it
    00:03:37,453and give it a more realistic feel
    00:03:39,339and nicer motion than using these linear sort of movements.
    00:03:43,916Now that we have this newfound knowledge of eases,
    00:03:46,893we can move on and do some really cool stuff with it
    00:03:49,680in the next part of our tutorial.
    00:03:52,440In this lesson,
    00:03:53,273we're gonna jump into drawing pretty quickly.
    00:03:55,634Let's take a look at a quick tip to get you going.
    00:03:59,453It may not be something that you think about all the time,
    00:04:01,833but it's actually very important to warm up
    00:04:04,304when you're drawing.
    00:04:05,409A lot of illustrators out there do this,
    00:04:07,377they'll do warm-up sketches,
    00:04:08,815and everybody's got their own routine,
    00:04:11,115but here's what mine is.
    00:04:13,323I'll go in and I'll start drawing shapes
    00:04:16,046and then I just keep adding onto those.
    00:04:23,223And it doesn't have to be anything that really makes sense.
    00:04:26,108It's just something fun to get yourself going.
    00:04:35,367I think the reason that I end up doing round shapes
    00:04:37,426is more because, in nature,
    00:04:40,393you're going to see a lot more organic stuff
    00:04:43,632and it's more interesting
    00:04:44,887and kind of more fun to just get in there
    00:04:47,520and like capture all these different organic curves
    00:04:50,810and stuff and I read,
    00:04:52,835I think it was in the Animator's Survival Kit,
    00:04:55,285that animators just seem to like circles
    00:04:58,504and round things and it probably has more to do with,
    00:05:01,574y'know, you're capturing flow and movement
    00:05:03,504when you're doing this stuff.
    00:05:06,383This is nothing special that I just did here,
    00:05:09,235but this is just my warmup routine.
    00:05:10,823Try and develop a routine of your own.
    00:05:14,549Alright, so let's take a look at this artwork.
    00:05:17,009If you have a student account,
    00:05:18,239you'll be able to download this artwork for free
    00:05:20,757to use along with today's lesson.
    00:05:24,461Let's take a quick look at what we've got here.
    00:05:26,736The object of today's lesson is we're going to get
    00:05:29,223this eye to actually blink
    00:05:31,606and then after we get it blinking,
    00:05:33,342we're gonna add a tear falling out of it.
    00:05:35,998Let's take a look at how I set up this file.
    00:05:38,574What I did was I've separated all of
    00:05:41,620these different components out,
    00:05:43,918so that I have my line work isolated onto one layer.
    00:05:47,992I have my coloring work on another layer.
    00:05:51,845And then I have this pupil
    00:05:54,031and this little piece of the eye on another layer.
    00:05:56,929And lastly, the actual iris color is separated out also.
    00:06:01,723Now the reason that I did this is because
    00:06:03,725when we actually animate this,
    00:06:05,505we really only need to focus on moving just this line work
    00:06:10,036on this layer and then adding the color fill underneath it.
    00:06:13,946There's no need for us to draw this pupil
    00:06:15,705and this iris over and over again
    00:06:17,981if we're just getting an eye to open and close.
    00:06:20,903Let's actually work on getting this eye
    00:06:23,731to open and close now.
    00:06:25,779What we wanna do is we'll isolate this line work
    00:06:28,782so we don't have a lot of distractions behind here.
    00:06:33,083This is all we're going to be working with right now.
    00:06:36,625The first thing we're gonna wanna do
    00:06:37,913is we're going to figure out,
    00:06:39,615we're gonna work in a more pose to pose
    00:06:41,779sort of way this time.
    00:06:43,745Now in the last lesson, we were just going straight ahead,
    00:06:47,230which means that we weren't really planning what our other
    00:06:51,684positions looked like and then were filling them in.
    00:06:54,398We were going and we animating, doing that sprite.
    00:06:59,989We were just drawing a frame and then adding a frame
    00:07:03,371and then drawing again and then adding another frame.
    00:07:05,956We weren't really planning things out.
    00:07:07,879Now with pose to pose, what we're going to be doing
    00:07:10,765is we're going to actually draw a couple of key frames
    00:07:14,626which, in this case, our first frame the eye being open
    00:07:18,097and then another frame with the eye being closed.
    00:07:20,781And then we're gonna go back
    00:07:22,161and we're actually going to add more information
    00:07:24,114in-between those frames,
    00:07:25,853so we're going to tween them,
    00:07:27,748after we set those two keys, or extreme positions.
    00:07:32,489Since we already have the first position drawn,
    00:07:34,545let's go a head and draw that second key position
    00:07:37,181of the eye being closed.
    00:07:38,963First, we want this shortened down to one frame exposure
    00:07:44,116and you can do that by dragging this.
    00:07:48,338We're going to be working on 1's this time
    00:07:50,328because eye blinks are pretty quick,
    00:07:53,027and we are going to take this line work
    00:07:56,339and we're going to go in,
    00:07:57,937and instead of adding a new frame exposure
    00:08:00,491and trying to trace all of this.
    00:08:02,385I wanna keep this line work on the outside consistent.
    00:08:05,822So what I'm going do is I'm actually going
    00:08:08,350to duplicate this frame and to make our video layer,
    00:08:10,735we're just going to drop it in like that.
    00:08:14,010Now we have an exact duplicate of our previous line work.
    00:08:18,150Now we can just take our eraser
    00:08:20,487and we can just erase out the parts
    00:08:22,786that we don't want anymore.
    00:08:25,246I'm gonna erase this top line
    00:08:29,282and I'm also going to end up erasing this bottom line
    00:08:32,478because this is going to rise up
    00:08:34,538to meet this top lid in the middle.
    00:08:39,099The reason I'm doing that is,
    00:08:40,713because if we just have this lid closing down,
    00:08:43,382it actually doesn't look quite correct,
    00:08:45,958even though, in a technical sense,
    00:08:48,522if you blink and you really observe it,
    00:08:50,478it's only your top eyelid moving.
    00:08:52,950In this cartoon world sense,
    00:08:54,882we want both of these lids moving for our blink.
    00:08:59,734We can't really see what our first position looked like,
    00:09:02,576so we're just going to hit our onion skin button
    00:09:05,576and there it is again and we can see our original artwork.
    00:09:09,762Let me just clean that up a bit more.
    00:09:13,064Now I'm just going to grab my brush as usual,
    00:09:15,374make sure I have the color that I want selected,
    00:09:18,971and I'm going do draw this final
    00:09:21,464resting closed position here.
    00:09:28,849A couple things to keep in mind when you're drawing
    00:09:31,885this final closed position.
    00:09:33,986You want to remember that eyeballs are curved,
    00:09:36,242so you're going to dip this curve down.
    00:09:39,061You're not going to want to go straight across like that,
    00:09:43,164cuz it doesn't look correct.
    00:09:46,097The other thing is,
    00:09:47,028if you have to undo like a million times,
    00:09:49,386that's totally okay.
    00:09:50,619Frame by frame animation is really just like anything else.
    00:09:53,768It takes a lot of practice.
    00:09:55,468The more that you do this stuff,
    00:09:56,583the better that you're going to get at it
    00:09:58,138and the faster you're going to get at doing it.
    00:10:01,990Now that we've got our first and last frames worked out,
    00:10:04,278we're gonna go in and we're going to do something
    00:10:06,804called tweening, or adding in-between frames,
    00:10:10,334between these two extreme positions of movement here.
    00:10:15,170What we're going to want to do is
    00:10:17,449we're going to actually create ourselves
    00:10:19,310a spacing chart once again,
    00:10:21,070like we did in that other lesson with our infinite sprite.
    00:10:25,959We're going to click somewhere else that's not in there
    00:10:28,593and we're going to make a new layer
    00:10:30,712and we're gonna make a spacing layer.
    00:10:34,654I'm going to grab my obnoxious pink color
    00:10:37,435and we are going to make a chart.
    00:10:40,840What we're going to do,
    00:10:42,371since we want these two lids to meet up,
    00:10:44,972we are going to draw a line down here
    00:10:50,630and this will be our topmost position for that
    00:10:53,123and bottommost position for that.
    00:10:55,804Here's the actual midline.
    00:10:58,585Now we want to work our way out on opposite ends here.
    00:11:03,150The movement that I want to create on this is
    00:11:05,037I'm actually going to ease in to this.
    00:11:08,635My spacing is going to start off close together
    00:11:12,756and then it's going to get farther apart
    00:11:14,697as we're going up this way.
    00:11:17,113That will create the effect of
    00:11:19,217this is going to be slowing down as
    00:11:21,240this eyelid is closing together.
    00:11:23,428Instead of it snapping shut, it's slowing in to the shut.
    00:11:27,936We'll add a frame here and a frame here.
    00:11:32,582We'll add another frame just a wee bit
    00:11:35,523further apart here and I'll add one here.
    00:11:39,098Then I'm gonna add one that's a lot closer to the top,
    00:11:42,356almost in this midline here.
    00:11:45,460And same thing on the bottom.
    00:11:48,186This will create a nice ease in to this eye close here.
    00:11:53,362Now I wanna actually animate this.
    00:11:55,190What we're gonna do is we're gonna do that same
    00:11:57,960duplication method that we did before.
    00:12:00,501So we're going to go back here
    00:12:02,296and we are going to hit duplicate frame
    00:12:07,104and that's going to make another copy
    00:12:08,748right in-between these two, conveniently.
    00:12:11,750We're going to erase out that line work
    00:12:14,176that we no longer need.
    00:12:15,717Then we're going to draw in our new line work,
    00:12:18,742so that we're going to line it up right here
    00:12:21,495with these next positions.
    00:12:36,518Now that we've got that all drawn out,
    00:12:38,164we can take a look at what's going on here and it's quick,
    00:12:42,880but you can see we've got our eye closing down now.
    00:12:47,559Actually it's very quick because we're on 1's like this.
    00:12:50,723Really quick, I went in and I doubled the frame exposure,
    00:12:53,855so you guys can actually feel how that ease works
    00:12:57,946and how it's slowing in to this close here.
    00:13:02,822I'm sure that gives you a little bit better of an idea
    00:13:04,901and now it's going really slow at 12 frames per second.
    00:13:08,431Oh well, anyway, moving along now.
    00:13:10,986I'm going to change this back to 1's
    00:13:12,879and then I'm going to go in
    00:13:13,847and clean up a couple of little areas
    00:13:15,745that I'm seeing that I'm not liking.
    00:13:17,217Like I have a little bit of a pit there
    00:13:19,633and a couple other little things,
    00:13:21,563a little bit of ick there.
    00:13:23,222So I'll take this time now to clean that up really quick
    00:13:26,463and then we'll move on to opening the eye up.
    00:13:34,317Now that we've got that eye closing,
    00:13:36,546we wanna do the inverse and make it open back up.
    00:13:40,101But we don't wanna use this same sort of ease here.
    00:13:43,712We want to do the opposite
    00:13:45,597where we're gonna have it speeding up into the open
    00:13:49,012and then easing in to this last bit here.
    00:13:53,126So we're going to make a new spacing chart now.
    00:13:56,959We will turn that one off
    00:13:58,673and we're going to go in and make our new spacing chart.
    00:14:02,558I'm actually going to line those up at the very beginning.
    00:14:05,778We're gonna call this Spacing Open.
    00:14:09,149Let's grab our obnoxious pink color.
    00:14:12,930I'm going to draw my line here.
    00:14:19,198I know my last position is going to be here,
    00:14:23,303so I'm going to mark it.
    00:14:24,441Technically this will be my first position this time.
    00:14:28,833I'll mark that out and now I want to go in
    00:14:33,412and I want this to be somewhere around here
    00:14:42,085and a little farther up on this guy
    00:14:45,222and I want two more here,
    00:14:47,660so we'll do one that's a little bit farther out
    00:14:51,872and one there.
    00:14:53,734And same thing up here.
    00:14:55,599This is our end point.
    00:14:57,715Put one there and we'll put one there.
    00:15:02,279Now we're going to repeat that same process
    00:15:05,443of drawing these again,
    00:15:07,259only we're going to grab Frame 1 here
    00:15:09,915and this is our end point.
    00:15:11,558We're going to duplicate this one
    00:15:13,720and we're going to stick it right at the top of the stack
    00:15:16,616cuz this is our end goal.
    00:15:19,369We will start off all the way back here
    00:15:23,368and we're just going to work our way back
    00:15:25,671to this open position.
    00:15:35,546One trick that I'll do sometimes is I'll colorize a frame
    00:15:38,343so that it's very obviously different
    00:15:40,873from whatever else I'm working on.
    00:15:43,427That's just one of those things I do to keep my own sanity
    00:15:46,495when I start zoning out a bit when I'm drawing
    00:15:49,808and getting lost in the line work.
    00:15:52,661I'm one of the people that's prone to zone into something
    00:15:56,249and then realize, oh, I screwed up.
    00:15:58,282So I try and prevent that as best as I can
    00:16:00,283by using these little tricks like colorized frames.
    00:16:07,369Again, I'm just going to go back through
    00:16:09,045and clean up these areas that need a little touching up
    00:16:13,014cuz they have little weird spots and whatnot.
    00:16:16,786I'm gonna take this, un-colorize it
    00:16:19,718and we can turn off our spacing layer
    00:16:22,063and let's check out what we've got now.
    00:16:25,502There you go, we have our blinking eye
    00:16:28,332and it's easing in to the close
    00:16:30,172and it's easing in to that open.
    00:16:33,610That's looking pretty good.
    00:16:36,625Now that we've gotten that line work done,
    00:16:38,728we can add some color to this now
    00:16:40,687because clearly this doesn't look right yet.
    00:16:43,895To add the color, we're going to again turn off
    00:16:45,708that stuff that we don't need right now.
    00:16:48,106We're just going to need our line work
    00:16:49,946and this color layer.
    00:16:51,740The first thing we're gonna wanna do is
    00:16:53,512the same ting we did with the eye line work,
    00:16:55,628where we're going to get this down
    00:16:57,008to a one frame exposure just by dragging it.
    00:17:00,013That's taken care of.
    00:17:02,047Now we can start adding frames.
    00:17:03,794We're not going to be duplicating these ones,
    00:17:05,324we're just going to add a frame
    00:17:07,695and drag it into Make a New Video Group and name this.
    00:17:13,030Now what we can do is,
    00:17:14,268instead of going through and picking this color
    00:17:19,550and then hitting the brush tool
    00:17:21,917and trying to fill it in like that,
    00:17:24,205we are actually going to fill this in
    00:17:27,140using an action that we'll set up.
    00:17:30,084First, we'll look at one way you can do this,
    00:17:32,269where you're going to select your magic wand tool,
    00:17:34,674which is w, and the hold Shift to add on to that selection.
    00:17:40,078If you hit Alt Backspace,
    00:17:43,129you'll notice that this will just fill in.
    00:17:46,165Let's deselect it.
    00:17:47,762The problem with this method of doing it is,
    00:17:51,476you don't have to do this part that I'm doing right now,
    00:17:53,467this is just an example,
    00:17:56,028you're going to get these weird edges.
    00:17:58,956See this kind of border here in the pixels?
    00:18:02,233That's where it's not quite passing underneath
    00:18:05,209this line work so it's creating this weird gap.
    00:18:08,207Sometimes it's more noticeable than others,
    00:18:10,956so we want to try and prevent this.
    00:18:13,680The way we can do that is by using an expand fill.
    00:18:18,204This expand fill action is something that I got
    00:18:21,280from another artist's tutorial, Alex Gray.
    00:18:25,865He did a wonderful frame by frame
    00:18:27,987in Photoshop tutorial a while ago,
    00:18:29,788and that's the one that go me started in doing this,
    00:18:33,126so I totally recommend that you guys
    00:18:34,854check that tutorial out, too, when you have some time.
    00:18:37,974I will link it in the show notes at the bottom,
    00:18:40,326but moving now now, let's actually set up that action.
    00:18:44,419I'm going to get rid of this layer really quick
    00:18:47,894and I will make my new one frame exposure.
    00:18:52,435We're still going to make that selection first.
    00:18:56,382Then we're going to go up to Window and Actions.
    00:19:00,571You can see I have a Frame By Frame folder already set up.
    00:19:04,017So what I'm going to do is
    00:19:05,313I'm going to make a new action first.
    00:19:08,983We'll call this Expand Fill
    00:19:11,250and it's under the Frame by Frame set
    00:19:12,930and I'm going to give it a function key.
    00:19:14,946I'm going to pick F3.
    00:19:16,975That's the one that I ended up using.
    00:19:19,637You can use whatever function key you want.
    00:19:22,106We'll give it a color for fun and hit record.
    00:19:25,236Now what we're going to do is go up to Select, Modify,
    00:19:31,249Expand, and then we'll do three pixels.
    00:19:35,025Sometimes you're going to need a little more,
    00:19:36,512sometimes you're going to need a little less.
    00:19:39,255Three's kind of a good middle ground for this.
    00:19:41,956We'll hit okay; that just expanded our selection
    00:19:45,614and now we're going to hit Alt and Backspace
    00:19:48,605and that will fill it with our foreground color
    00:19:51,329and then you're going to hit Control D
    00:19:54,452and that will deselect this.
    00:19:57,005Or if you're on a Mac, it'd be Command D.
    00:20:00,125Once we've done all that we can stop recording that action
    00:20:03,210and now this is all automated,
    00:20:05,501so any time we hit F3 after we've done a selection,
    00:20:09,031it will go in and just expand it and fill it in for us.
    00:20:12,520Let's make new frames
    00:20:14,119and do that for the rest of these color layers.
    00:20:22,529Now we've got this all colored in.
    00:20:24,679It was super quick and easy
    00:20:26,084because we automated this using Photoshop actions.
    00:20:29,191We can close our actions pallet down
    00:20:33,925and turn everything back on.
    00:20:36,452Let's take a look at where we're at.
    00:20:38,752If you notice, this is going pretty quick right now,
    00:20:41,274so I actually want to make this loop
    00:20:43,983to be a full one second.
    00:20:46,375All we have to do to do that is move my range slider
    00:20:51,210and this guy all the way over
    00:20:52,794and we just need to grab these last layers
    00:20:54,880and drag them over.
    00:20:57,629So we did that one and we did this one.
    00:21:02,455It's our line work and our color work.
    00:21:06,303Now when I play this back,
    00:21:08,608you notice it blinks and then it loops back.
    00:21:12,784We have a nice pause in there.
    00:21:16,505Now that we have this looping,
    00:21:18,391we were going to add a tear falling out of the eye.
    00:21:22,528To do that now, we're going to have to think ahead a bit
    00:21:25,124of how do we want this to look?
    00:21:27,690Now I know that I want my tear
    00:21:30,449to start out over in this section,
    00:21:33,440and I want it to spread across
    00:21:36,167when we get to this final closing,
    00:21:37,748and I want it to drop while the eye is still closed,
    00:21:41,204or at least start dropping while the eye is still closed.
    00:21:45,716This is set on 1's right now.
    00:21:47,872So this frame right here, I know,
    00:21:49,782is not going to hold long enough already.
    00:21:52,746I'm going to extend this middle closed part
    00:21:56,397to be about six frames long
    00:21:58,544because I feel like that's going to be enough of a pause.
    00:22:02,762To extend this, we're going to hit Increase Frame Exposure
    00:22:06,150a few times, five times to be exact,
    00:22:10,876and that will give us six frames.
    00:22:13,901We'll do the same thing for this one also.
    00:22:19,651Now I'm going to go in
    00:22:20,970and I'm going to rename these right now,
    00:22:24,630just because it helps me keep my sanity,
    00:22:26,874cuz if you look up here, this is Frame 5,
    00:22:29,430but this is saying Layer 4.
    00:22:32,467Sometimes it helps if you have these
    00:22:34,554so that they correspond with one another
    00:22:36,246when you've got a lot of these layers going.
    00:22:38,406Especially if you had, for example, a layer that's line work
    00:22:42,522and then a layer that's your base color
    00:22:44,778and then a layer that's your highlight color
    00:22:46,854and then another layer that's your shadow color.
    00:22:49,984You can see where, if you just have Layer 27 and Layer 16
    00:22:54,666and whatever, and then these are unevenly spaced,
    00:22:58,026it might get a little confusing.
    00:22:59,560That's why I choose to number my frames.
    00:23:02,967Now both Frame 5's are extended out long enough
    00:23:06,870to where I get a nice pause in here when the eye closes.
    00:23:11,958It's much more time for us to work with
    00:23:14,550when we're trying to get that tear to fall.
    00:23:17,274Now that we've done that,
    00:23:18,137we have a rough plan for how this is going to work out,
    00:23:23,104as far as timing goes.
    00:23:25,133Let's start drawing this tear.
    00:23:27,053We're going to do this by starting straight ahead,
    00:23:28,493like we did in that previous lesson
    00:23:30,352with the infinite sprite.
    00:23:32,595We will clean this up a little bit for a second.
    00:23:37,660We're going to make a new one frame exposure.
    00:23:40,554Let's pick a color that we like.
    00:23:46,218I think I'm going to go with that color right there.
    00:23:50,381What I'm going to do is I'm going to come in
    00:23:52,697and I'm going to draw this beginning part of my tear.
    00:23:56,131I just want a little bit of watery stuff
    00:23:59,789over in this side corner.
    00:24:04,134I'm going to add a new frame exposure
    00:24:07,350and we'll drop it in.
    00:24:14,482Sometimes, if you're not zoomed in far enough,
    00:24:15,965you'll accidentally grab that edge and drag it out.
    00:24:19,578You'll have to fix that if you do it.
    00:24:21,930Now we're going to turn on our onion skins
    00:24:25,661and we need to draw this next one.
    00:24:27,306Now if you notice, this is a little bit chaotic to look at,
    00:24:29,811so we're going to turn this stuff off.
    00:24:32,896We're also going to turn down the opacity
    00:24:36,461on this eye line and, to make it even easier on me,
    00:24:41,146I'm going to colorize this to this green color.
    00:24:45,043See how much more that already stands out?
    00:24:48,554The last thing I can do is I can go in
    00:24:50,333and mess around with these onion skin settings
    00:24:54,253and I can change this minimum opacity to something like 30.
    00:24:58,141Now it's really obvious as to which frame I'm on
    00:25:01,405and which frames are the ones that are before or after.
    00:25:06,321Now that I've done that, I can continue drawing.
    00:25:09,731Which we're on the right layer.
    00:25:13,728We're going to add a little bit more each time.
    00:25:18,048We're going to add another frame here.
    00:25:20,784We know once we get to this point,
    00:25:22,525this is where we have to worry about that tear
    00:25:24,794welling up and really starting to drip and fall.
    00:25:31,836We're going to keep in mind that we only have
    00:25:33,277two more frames to get this built up.
    00:25:40,894On this frame is where I really want to start to get this
    00:25:44,314to drop down and it's going to go across a bit like that.
    00:25:51,203We can scrub back through our work
    00:25:53,040and see how things are looking.
    00:25:56,435Here you can see me scrubbing back
    00:25:58,304and forth between frames.
    00:25:59,718I'm just doing a quick frame check,
    00:26:01,302to make sure that everything's looking the way I want it to,
    00:26:03,798before I get too far along with this animation
    00:26:06,270and realize that something isn't working out.
    00:26:09,460Definitely take the time, every so often,
    00:26:11,957and scrub back through
    00:26:13,081and make sure everything looks the way you want it to.
    00:26:16,674I'm going to go in
    00:26:17,507and do a little bit of clean up when I'm done,
    00:26:19,706but I'm just going to keep working
    00:26:21,244on it straight ahead right now.
    00:26:23,298Turn my onion skins back on.
    00:26:28,386Let's draw another one
    00:26:29,887and I want to really get this tear
    00:26:32,283to start forming up down here
    00:26:35,368and as it's forming over here,
    00:26:36,818I want to take away from this side.
    00:26:40,216So each time I add more to this bulb area,
    00:26:46,334I want to take a little bit off of that side.
    00:26:55,995We'll add another frame.
    00:26:59,222I want to make sure that I have this tear nice
    00:27:01,680and stretched out and about to release,
    00:27:04,838right at this last frame here.
    00:27:08,113So we can really keep growing this
    00:27:09,998for another four frames it looks like.
    00:27:14,666Yes, we're going to do another four frames.
    00:27:17,438I can count. (laugh)
    00:27:19,164I'm not a genius, but I at least have that going for me.
    00:27:22,679Now I don't like how much difference there is
    00:27:26,145between this frame and this frame.
    00:27:28,859I like these frames, the way that they're drawn,
    00:27:31,390but I'm going to come in
    00:27:32,682and I'm going to insert an in-between here.
    00:27:35,552To do that, I'm going to select this frame right here,
    00:27:39,065and I'm going to hit this Create New In-Between button.
    00:27:42,522And that's going to make a blank frame
    00:27:45,099between this frame right here, which is 8,
    00:27:50,186and this frame right here, 9.
    00:27:53,933I can go into this one now
    00:27:55,831and draw something that's somewhere in-between these two.
    00:28:05,610And that just gave your eye a little bit more information,
    00:28:09,389to smooth this transition out to where it's really turning
    00:28:12,940into more of a drop-type shape.
    00:28:16,637Let's take a look at where we're at now.
    00:28:20,176I'm going move this playback area over
    00:28:23,382and I'll turn my onion skins off.
    00:28:28,637It's quick, but I like the way that it's moving.
    00:28:31,735That's what's important right now.
    00:28:34,672So now that we've gotten to this point,
    00:28:38,017where this tear's hanging on
    00:28:40,033and it's right about to drop off,
    00:28:42,555we need to figure out how quickly we want this to fall
    00:28:46,251and we're actually going to make another one of those
    00:28:47,931spacing charts, like we did before.
    00:28:50,641We're going to come up to one of these layers
    00:28:52,548outside of our group,
    00:28:54,792and we're going to make a new layer
    00:28:56,242and move it over to the beginning
    00:28:58,753and we will call this Tear Spacing.
    00:29:01,246I'm going to pick my obnoxious pink color that I like.
    00:29:05,928The way that I want this tear to work
    00:29:08,368is I want it to be slow at the beginning,
    00:29:11,399so it's going to ease out.
    00:29:15,720It's going to start nice and tight together up here
    00:29:19,080and then it'll get quicker as it falls
    00:29:21,262because it's going to be gaining speed as it's falling down.
    00:29:25,966I'm going to pick the bottom of my tear
    00:29:29,400as my reference point,
    00:29:31,547so I'm going to put my first space right here.
    00:29:34,918I'm going to make a line that goes down
    00:29:37,451and then I'm going to figure out how far
    00:29:39,214do I want it falling on each frame.
    00:29:41,064I also need to know how many frames I have left
    00:29:44,014to make this fall.
    00:29:45,525We have to do a little bit of simple math.
    00:29:48,923I'm actually going to, again, renumber these frames
    00:29:51,443so I can see exactly how many frames I've already used.
    00:29:54,888You can see that I have 10 frames left,
    00:29:56,721so that means that I have 14 frames left
    00:29:59,710in our 24 frames per second.
    00:30:02,616I'm going to figure out how long do I want this
    00:30:05,038drop to fall.
    00:30:06,059I think I want to do this over about 10 frames.
    00:30:09,336To do that we will start adding some spacing here.
    00:30:14,158It looks like we're going to do eight frames
    00:30:16,139because I like the spacing on that
    00:30:18,456and that should give the eye enough information.
    00:30:20,904If it doesn't, we can always come back
    00:30:23,147and tween it again.
    00:30:26,001Let's start drawing this teardrop falling down.
    00:30:34,737I actually moved my tear spacing chart
    00:30:36,862down below all of this other stuff,
    00:30:39,141so it makes it a little bit easier
    00:30:40,906for me to see what I'm drawing.
    00:30:43,080I'm going to continue adding on to this teardrop.
    00:30:47,327I'm going to draw this guy in.
    00:30:53,234I'm going to draw this separated off right here.
    00:30:59,064Now what I'm going to do is
    00:30:59,963I'm going to focus on getting this tear to fall
    00:31:03,205and then I'll worry about coming up
    00:31:04,955and doing this part here,
    00:31:06,997so that I'm not trying to split my attention
    00:31:10,680between two different things that are going on.
    00:31:13,883I wanna focus on one action right now.
    00:31:17,509I'm going to keep adding frames
    00:31:18,841and focusing on getting this tear to fall.
    00:31:26,521As this tear is falling,
    00:31:28,408you can give it a little bit of a stretch to it, too,
    00:31:31,733and that will help overlap
    00:31:32,907some of these frames a bit more,
    00:31:34,778and it will give it more of a sense of speed.
    00:31:36,926Kind of like what we did on that other exercise
    00:31:39,181with the infinity loop,
    00:31:40,946where we stretched that guy out between that midpoint,
    00:31:44,283when he was crossing through the downs
    00:31:48,219and the ups on that x point going here.
    00:31:51,452That's basically the same thing
    00:31:53,029that I'm going to be doing
    00:31:54,059with this teardrop when I'm stretching it out.
    00:32:03,418Let's check out what our teardrop falling looks like now.
    00:32:07,691I'm going to turn our onion skins off
    00:32:09,538and just hit play.
    00:32:12,050There we go!
    00:32:13,010You can see it looks like it's speeding right off
    00:32:15,517and down.
    00:32:17,726I might actually want to add
    00:32:19,755just a teeny bit of the tail on this frame.
    00:32:24,795Let's see how that looks,
    00:32:26,760if we add just a hint of blue
    00:32:29,211to give you a sense that it's gone off into nowhere.
    00:32:34,155I'm going to turn my spacing chart off now.
    00:32:38,606So I can really see what's going on here.
    00:32:40,552That looks good.
    00:32:44,091Let's see it without that last frame.
    00:32:49,598Yes, I definitely like it better with that last frame
    00:32:52,059cuz it just gives your eyes that little bit
    00:32:54,050of bonus information so that it knows
    00:32:56,463where that tear went instead of being like,
    00:32:58,873oh, did it go into oblivion?
    00:33:01,321Sometimes a teeny bit of extra information
    00:33:04,117really helps out.
    00:33:06,805Now that we've got our tear falling,
    00:33:08,991we want to come back up here
    00:33:10,501and we want to get this kind of
    00:33:13,119little residual bit of tear liquid
    00:33:17,555to go back to its original position,
    00:33:19,596so that we can get that seamless loop again.
    00:33:22,475So we're going to come back to this frame right here.
    00:33:28,348We are going to go in and turn our onion skins on again.
    00:33:32,223Then just go straight ahead and continue drawing this.
    00:33:35,846You can go back and look at that first frame.
    00:33:37,836We know it's just this little line here.
    00:33:40,789We want to keep working our way back towards
    00:33:43,259something that looks like that.
    00:33:45,122We have quite a bit of time to do that in.
    00:33:56,882Just so I get a sense of where I'm going with this,
    00:33:58,729I'm going to copy frame one.
    00:34:00,264I'm going to drag it up to the top.
    00:34:03,135Now I'll be able to see when I get closer to this frame
    00:34:06,098exactly what position I need to be in.
    00:34:09,986I'm actually really darn close right now.
    00:34:11,952I'm going to continue going straight ahead.
    00:34:19,333Now that I'm back at this point,
    00:34:20,629close to Frame 1, I've run out of frames.
    00:34:24,434What I need to do is I need to go in
    00:34:27,003and add more frames to this.
    00:34:30,420The reason I'm doing that
    00:34:31,956and not just letting this sit is
    00:34:33,445because you don't want your animation
    00:34:35,065to fall completely still at this point.
    00:34:38,418We want this to continue having
    00:34:41,001this fluid, moving look to it.
    00:34:44,051Let's go in and add those frames.
    00:34:46,892We can do this by doing New 1 Frame Exposures.
    00:34:52,076We don't want to get too crazy
    00:34:53,276with our line work at this point.
    00:34:54,885We can also hit New In-Between,
    00:34:57,538and that'll add in frames
    00:34:58,741and leave your timeline marker in the right spot,
    00:35:02,953instead of advancing this onward.
    00:35:04,886That's the big difference there.
    00:35:07,551I'm going to continue doing this by adding in-betweens.
    00:35:11,756You wouldn't think that there's a big difference, y'know,
    00:35:14,473in this slight amount of difference in how my lines look,
    00:35:19,404but it's enough to keep it moving.
    00:35:21,503If you look at how that looks,
    00:35:22,790even with he onion skins on,
    00:35:24,265you can see it gives a nice, little fluidy look to it.
    00:35:32,329Now we've got our full 24 frames per second.
    00:35:38,364We can turn off our onion skins
    00:35:40,755and we can take a look at this.
    00:35:44,390There we go!
    00:35:46,729If I don't like the way that this is moving
    00:35:48,831that quickly towards the end after this tear falls,
    00:35:53,513you can always go back and remove some frames
    00:35:58,179and change these to 2's
    00:35:59,801and that will give this a completely different feel
    00:36:02,633to the way that this fluid is moving.
    00:36:05,683That's always an option.
    00:36:07,350I'm going to go in
    00:36:08,214and I'm going to number my frames really quick.
    00:36:12,026This 25th frame is really the first frame,
    00:36:13,961so I can get rid of that.
    00:36:17,849We can go in and turn on our line work.
    00:36:21,734We can remove this color overlay.
    00:36:25,408We can turn our pupil back on
    00:36:27,155and our iris back on
    00:36:29,187and we can check out our work.
    00:36:31,498It's always best to do one more pass over
    00:36:35,280and check to make sure there's nothing that you
    00:36:37,657absolutely don't like.
    00:36:39,062Like, I'll go in and clean up a little bit,
    00:36:40,559that brush there,
    00:36:41,807and some of this white that's peeking through.
    00:36:47,808Now when I'm doing this kind of cleanup work,
    00:36:49,884I usually leave my onion skins off,
    00:36:51,996so that I don't have that distraction of
    00:36:54,419the frame before and the frame after
    00:36:56,147and I can focus on the frame that I'm actually working on.
    00:36:59,649That makes it easier to see all those little spots
    00:37:01,820that are not quite the way that I want them to be.
    00:37:04,867So you don't have to turn your onion skins on
    00:37:07,004when you're doing your cleanup work like this.
    00:37:10,185I did end up coming in and changing this to 2's,
    00:37:13,427after that tear falls off of the screen,
    00:37:16,400cuz I liked the way that it looked,
    00:37:17,638just a little bit better.
    00:37:18,992It's a little bit calmer of a feel
    00:37:21,369than having 1's over there.
    00:37:24,809The last thing that I did here was I came in
    00:37:27,824and I gave this guy a little bit of a tail,
    00:37:30,271just to give that animation a little bit of extra.
    00:37:32,751Because I gave him that tail,
    00:37:33,888I did have to go in and change the last couple of frames.
    00:37:38,339I tweaked them a bit, cuz otherwise it looked like
    00:37:40,682it was sticking at that very last point.
    00:37:43,728So sometimes adding those little details can change
    00:37:46,361the way that your animation feels and looks, also.
    00:37:50,057You might have to change a little bit of a couple frames
    00:37:52,891here and there to get the timing to work out again.
    00:37:56,981Adding this tail in last is totally okay.
    00:38:00,293We did this deliberately because really,
    00:38:02,296when you're working in frame by frame animation,
    00:38:04,955or any animation, you kind of want to do things in stages.
    00:38:08,333And adding these little accents last,
    00:38:10,433after you get that main body of animation fleshed out,
    00:38:14,203is the way that you want to work on things.
    00:38:17,646That way you don't go in and add all this detail
    00:38:20,142and then realize you have to redraw a ton of stuff.
    00:38:23,275So it's okay that we had to tweak
    00:38:24,837those last couple of frames at the very bottom
    00:38:27,388of the page to make it look a little bit better
    00:38:29,816so that it wasn't sticking,
    00:38:31,614but it was only a couple-frame tweak that we had to do,
    00:38:34,568because we had that main body fleshed out the way
    00:38:36,840that we wanted it to be before we added these accents.
    00:38:43,381That's it for Lesson 3.
    00:38:45,253We've covered a lot of important foundations
    00:38:47,281in the last three lessons.
    00:38:48,849We've gone from baby steps, learning to use AnimDessin,
    00:38:51,947to toddling around using timing and spacing.
    00:38:54,491Next up, we'll be doing something much harder and cooler.
    00:38:57,910Make sure you sign up for a free student account,
    00:39:00,133so that you can access the project files
    00:39:01,707from this lesson and from other lessons on the site.
    00:39:04,622Coming up, we've got two more lessons
    00:39:06,219with very important stuff for you to learn,
    00:39:08,309so I'll see you next time.
    00:39:13,347(explosion of music)

    Similar lessons