Photoshop Animation Timing


Hello again, Amy here at School of Motion,
and welcome to lesson two of our Cell Animation and Photoshop series. Today we’re covering one of the most important
parts of Animation: Timing. We’re gonna discuss the difference between
one and two frame exposures, and how they affect the overall look and feel of your work. Then we’ll get to the fun stuff, and animate
this infinite looping sprite that you see behind me. Make sure you sign up for a free student account,
so that you can access the project files from this lesson and from other lessons on the
site. Now let’s get started. All right, so let’s get started with our infinite
loop sprite guy here. So what we want to do first is, of course,
create our new document scene. And AnimDessin is automatically going to create
a 1920 by 1080 canvas, and it’s going to bring up our timeline framerate for us. So we’re gonna select 24 frames per second. And we’re gonna save our work really quick. The first thing that we’re gonna do when we’re
creating an animation like this, is we’re actually gonna plan out a guide for ourselves. So this guy’s kind of traveling along this
infinite looping path. That one’s actually really bad. But we could spend all day trying to draw
different variations of paths, and getting this right, or we can go in and create a more
precise guide for ourself using the vector tools here in Photoshop. And if you’ve got a student account, I’ve
already done all of the hard work of laying these guides out for you. All you need to do is download them. So if you already have that stuff downloaded,
you could go up to file, and hit place embedded. And you’re gonna select this infinite loop
sprite guide. And just hit place. And then enter to place it. And you are all set and ready to go onto the
next part. Now we’re not quite completely ready to actually
start animating this. So first we’re actually gonna create some
spacing guides. So if you remember back to the first lesson,
where I had that chart, that was just all these different lines, well, we’re gonna be
doing the same thing here. We’re gonna give ourselves some lines so that
we can line up our spacing, so that we know exactly where the ball needs to be, or our
sprite, in this case, where the sprite needs to be on each frame. So to do that, we’re just gonna come over
here, and we are going to select our line tool. And we are going to just kind of make this
look like spokes on a wheel. So let’s start with our vertical line, and
try and get it kind of centered. You’re gonna hold Shift to constrain, and
you just drag it down like that, and then across like this. Same thing, Shift to constrain. And then we’re going to add two more lines
to divide each of these in half. So we’ll start somewhere kind of in the middle
here. And this time, I’m not actually gonna use
Shift, I’m just going to kind of line it up with that center crosshair, and let go. And then same thing from here to here. So I want to shoot for, probably about where
I was. All right, and there you go. You have your wheel spokes. And I’m gonna change this to like a dark blue
color. That’s just one of my preferences. You can make it whatever color you want. I just like it, because it’s a little bit
easier for me to see and differentiate between the actual spacing and the path. And then I’m just gonna group these off, Control
+ G. And now I have my spacing chart here. So I’m just going to go in and name this spacing. And then I’m actually gonna duplicate this
group, ’cause I’m gonna need it on the other half here too. And we’ll hit Control + T to transform it
over. And you can just hold Shift again to constrain,
kind of line it up in the middle, hit enter when you’re done. And actually, I always overshoot this. Let’s just nudge it back a little bit. Looks a little bit better. All right, so now we have our spacing guides. All right, so now we have all of this planned
out, except we need two more lines in this midsection, otherwise, when we start drawing,
our little sprite guy is gonna jump from this mark, all the way up to here, and that’s a
little bit too far of a distance to cover. So we’re going to draw in just a few more
lines. And actually, this time I’m gonna do it with
the brush tool, because I can just go really quickly with this. So I’m gonna create a new layer. Now, if you notice, my time slider was all
the way over towards this five second mark here. I need to bring this all the way back to the
beginning, because it’s gonna create my layers wherever this time slider is. So I need this to be all the way back here
at the beginning now. And it did the same thing for my spacing layer. So I just need to drag that back. Cool. So now I can go in and just hit B for brush. And I’m gonna go in and pick that blue color
that I liked, and I’m just gonna add those extra marks. So I initially thought that I was going to
put my spacing here based off of an earlier test, but I actually feel like that’s a little
bit less correct this time. Each time you do one of these, they’re gonna
be all a little bit unique. So this is the part where you’re just gonna
have to use your best judgment as to where you want this portion of the frames to be. So you’re gonna kind of look at your spacing
between here and here, and then give it kind of like a relative position between here. It’s okay to stretch this one a bit more,
because he is kind of going to be like zooming up through this part. So let’s say, I think I’m gonna put it in
this middle part, just because that feels a bit better. So this is where I’m going to have these frames
from here, and it’s gonna come up to this position, and then stretch over to this position. Same thing over here. So now that, let’s name this guy, actually,
while we’re thinking about it. And we can throw this in the spacing group. And now that we have these charts drawn out,
and we kind of have a plan as to how our motion’s going to be, we can get into the fun stuff
with this, and actually do some look development. So this is where frame by frame becomes really
cool, because you can do all kinds of stuff in Photoshop. And the brushes are probably the coolest feature
of that, because you can use all of these brushes to create different textures, and
patterns, and things, to really give your sprite your own personality to it. So I did actually pick out a color palette
for myself earlier. So this is the palette that I’m going to be
using. But I’m actually gonna show you guys the brushes
here. So I’m going to setup a background layer. And we’re gonna drop that below my guides. And I want my background to be purple, so
I’m gonna use Alt + Backspace, and that’s going to fill in this entire layer with my
background color. And now I’m going to make a new layer, and
I’m going to call this look development. And now we can just kind of start playing
with these different brushes. So we’re gonna select our brush tool, which
is B, and we’re gonna open up this brush presets panel. So over in this brush presets panel, you can
see all these different brush strokes that we have going on here. And this just the default set that I have
loaded up right now. So if we wanted to look at even more of the
Photoshop brushes, because they’re not all displayed here right away, you can actually
add any of these assorted brushes. I’m a fan of the dry media brushes, so I’m
gonna pick those ones, and I’m gonna grab dry media brushes. And I don’t want to just replace them. Because if you hit okay right now, it’s going
to replace this entire list, and you’ll lose all these default brushes too. I’m actually going to hit append, and that’s
going to drop those dry media brushes into the bottom part of this long list of brushes. So I’m gonna load in my dry media and my wet
media brushes. But again, feel free to play with whichever
ones you want. And now it’s just a matter of grabbing a color,
and just seeing what you like. Just draw a bunch of shapes, bunch of squiggles. If you see a brush like this, where it’s kind
of got these blunted ends, and you want it to have this tapered look, all you have to
do is go into brush, and I’m seeing that tapered look, because I am using shape dynamics, and
I have a pressure sensitive tablet, which the the Cintiq in this case, but any type
of Wacom tablet will work this way, so like an Intuos or an Intuos Pro. And you’re gonna select pen pressure, and
that’s gonna change this shape dynamic now, so that you can get those nice edges and different
strokes based on the pressure sensitivity, and how much you’re pushing here. So you can do the same thing in all of these
different tabs. You can just play around with these different
options, and see what each of them does. Now, because I have that initial shape that
I like picked out, I’m actually turning my guide layers off to continue with developing
this look for my little sprite. Okay, because I kind of altered this brush
in the way it’s behaving a little bit, I’m going to make a new brush preset right now. So to do that, all you do is go up to new
brush preset. And I’m going to rename this to, we’ll just
keep it rough dry brush. And I’m gonna call it 20 pixels, and hit okay. So now at the bottom here, I have this 20
pixel rough dry brush that I can reference very quickly when we come back and actually
have to add these layers of color on at the end. And now I’m gonna save that other brush that
I was using to make the base of the sprite, so that I can get to that really quickly. And then I’m gonna go in and add sort of a
darker, reddish orange shadow to the bottom, and then give him a little bit of a white-orange
highlight. And this will help make him stand up off of
the background a bit more, and give him a little bit more of a 3D look. Okay, so I’m liking the way that looks now. So I’m gonna come in, and I’m gonna clean
up this look dev layer, ’cause I have all these paints splatters kind of on the side. And I’m gonna use my lasso tool, which is
the L key, and then just hit delete, and that’ll delete out everything else. Control + D will deselect it. Now that we’ve done all that cool look development
stuff, before we get into the heavy drawing, let’s take a look at a quick tip, that can
help improve your drawing skills. So if you don’t drawn a lot, you have developed
this bad habit of using too much of your wrist and your hand when you’re trying to capture
broad, curved movements. And you get something that looks kind of like
this, when you’re trying to use your hand a bit too much, or your wrist area too much. What you really want to do, is come in an
lock your wrist up when you’re trying to get a broad sweep like this, and you just guide
it around using your whole arm and your whole shoulder. And that gives you a much better line, and
it’s just a lot easier to capture these curves in your drawings. And it does take a little bit of practice,
but next time that you’re drawing, definitely try to get in there and use more of your arm,
and not so much of your wrist and hand. So let’s get in there and start animating
now. So what we want to do, is we need our new
video group, and that creates this. So our Anim layer. And I’m gonna call this my base. Because we’re not gonna try and go crazy,
and do all of this stuff at once. We’re just gonna do this one layer at a time
now. So we’re gonna start with just this orange
base color here. So let’s go in. And we’re gonna grab that brush that we had
before. Make sure that we’re on the right layer, hit
B for brush. And we’re gonna start with whatever brush
we decided for our base and our color, and we’re just gonna start drawing. Now, if you noticed, I extended this tail
all the way back an extra space, and there’s a reason for that. It’s because we want to create an overlap
as this goes around, to keep it looking nice and smooth, otherwise, our animation will
start to look steppy. So let’s go from one line here, midline, and
then this back line is where you’re going to wanna hit your end of your tail. Now, as you’re drawing this, notice I’m keeping
this ball end, where I drew that circle, I’m keeping that in the middle, and I’m trying
to shoot for this midline using this guide as the middle of my shape, and that will help
me keep consistent and on-track as I’m drawing this. So once you have your first frame done, you’re
gonna make a new one frame exposure. And we are going to turn our onion skins on. I recommend on dark backgrounds that you do
change from a blend mode of multiply, which is the Photoshop default to something like
a normal, and then your max opacity to be around 10%, ’cause otherwise you’re not gonna
be able to see what you’re drawing. So with the 10%, you can see that’s nice and
clear. Well, if I change that to, say, something
like a 75%, notice how faded that is. And that’s almost impossible to see. So we’re gonna stick with a 10%. Min opacity, I have set 50%, because that
works fine. And we’re gonna hit okay. And we’re gonna continue drawing. And remember, this tail needs to stretch all
the way back to this line here. And we’re just gonna continue all the way
around this entire loop now, and just draw this base shape. So this is the part of the project where I
recommend that you go and find a really good music playlist, and just put that on in the
background, and relax while you are drawing all of these frames, because from here out,
all you’re gonna be doing is a whole lot of drawing. So just a quick note here, with these couple
of middle frames, notice how I really stretched this shape out. And that’s gonna change the way that this
looks when it’s going in and out of this loop. But it’ll give it a nice kind of stretching
effect. So I just made sure to thin this tail as I
was getting down to this part, because there is such a big gap here. I didn’t want to leave it too thick. I do want it to have this appearance that
it’s like trailing off when it goes through here. So if we want to take a quick look at where
we’re at with this loop, we’re gonna set our work area. I need to go one more frame forward. And now we can set our work area end here. Oops, I accidentally colorized a frame. So now I’m gonna turn my onion skins off. And let’s play this loop back. And you can already see how that’s looking. It’s gonna like a nice, kind of flow to it,
and with this overlap between the frames it’s not looking really steppy. We are one frame exposure, so that’s why it’s
going so quick also. Now if you’re looking here, you noticed, all
of sudden, “Why is it going really slow?” Well, my computer’s just not keeping up with
this very well right now. So down here at the bottom, where my mouse
pointer, that’s gonna tell you how many frames per second your playback is going at. Sometimes Photoshop does get picky about stuff. So if that does happen to you, what you can
do, is you can come up here and change your quality setting, to say, 50% or 25%, and that
sometimes helps with this playback. You will get a little bit of artifacting,
kind of like as if you were reducing your ram preview quality in After Effects, it’s
gonna do that same sort of thing. So just be aware of that. See, now we’re back at our full 24 frames
per second. And we can continue on, because this is actually
looking pretty good. All right, so let’s take a look at what we’ve
got going on here now that we’ve completed all of our frames. So again, I’m gonna turn off my guides, and
I’m just gonna hit this play button. And you can see, there he goes. So this is very similar to that look, that
animation that I showed you guys earlier. And he just kind of flies around like that. So before we move on to adding all of those
additional colors in, I want to mention something about, you know, how the timing on this is. It’s all ones. So it’s all going at the same rate, and it’s
going really fast. But we can actually tweak this by extending
some frame exposures to give him a little bit of pause at the top of these curves. So, say, when he’s hitting up through this
section here, and in this curve, we can actually change this just slightly. And we’ll start the change with this frame,
and we’ll just increase the frame exposure on just a few of these. So we’ll go with this one, this one, and let’s
try this third one here. And this is going to change the way that the
speed feels as it’s coming up into this top part, and then coming back out again. So let’s hit play, and see how that feels. Do you see the difference? It’s very, very noticeable in how this is
moving now. Now, maybe I don’t want this frame to be a
two, maybe I only want, let’s try with these three frames being a two. I feel like that’s a little too slow at the
end, so maybe we only want a couple frames at twos. And we’ll go back to that first option. And this is the nice thing about working in
this kind of a manner, is that you can tweak the timing even after you’ve drawn things,
just by changing these frame exposure times. So I’m gonna actually change that on both
sides now. Let’s reflect that change over to this side. So that means we’re gonna extend it here,
and on this frame, and then I want my first frame. Let’s see how that looks. There we go. Now he kind of has a little bit of a different
feel to his movement and his speed changes, so he’s not just uniformly, constantly going
at one rate. It feels almost like he’s dipping down with
some force, and coming back up, and slowing a bit. So this is looking really good. Now let’s actually go back to that look development
frame that we had. And now we’re gonna start adding in some of
these paint effect in this tail on him, and that’s gonna get this guy to look really special,
and not just like a flat vector piece of artwork. Because the whole of being in Photoshop to
do this kind of work, is that you get to use these tools like the brushes. So we’re gonna go and add his tail in here
now. And to do that, all we’re gonna do is create
a new video layer, or a new video group, again. Now, see what I did here. This is what always happens. So I can just add a new frame inside of there,
not a big deal. And I’m actually gonna leave this base up
in here, even though I’m gonna close it down here, and this is so I can see my timing,
so I can match this up. So I’m gonna increase my frame exposure. I’m gonna decide, okay, I’m gonna start with
the pink, we’ll say. You know what? Actually, I’m gonna start with this orange
shadow. So I’m gonna pick my dark red color, and I’m
going to turn off my look development after I kind of figure out what this looks like. And I’m just gonna draw this onto our new
frame. So once we’ve done the first frame, that means
we’re just gonna go all the way through the whole animation, and do the same thing over
every single frame again. So about that music playlist, you might want
to make sure that it’s a nice long one, because the whole rest of this tutorial is going to
be just a lot of drawing. Also, don’t forget to stand up every once
in a while. I know your legs can fall asleep if you’re
sitting in a weird position while you’re doing this for too long. So just some practical advice there. Now just sit back, relax, and have some fun. All right, so now we have that second layer
done, and we can go through and rename this layer. We’re gonna name it with its color or what
it’s functioning as. I mean, I guess I can call this dark red,
in this case. And actually, I’m gonna go through and I’m
gonna color these layers. Conveniently, I have an orange and a red,
so now up here, at a glance, I know which one’s which. It’s pretty neat. And the reason that I did this on a separate
layer instead of going back through, and just drawing that color onto these layers, is because
when my friend, or my client, or myself, decides that, “Hey, that red color doesn’t look so
good.” All I have to do is get rid of that whole
group instead of going back through and redrawing all of this other stuff that was on that same
color layer. I like to be able to go back through and do
changes to stuff after I’ve done it, because there’s nothing worse than locking yourself
into a decision, and then not being able to change that later on when you realize that
something didn’t work out, or if a client wants you to do frame by frame animation,
you can’t do that change very easily. So let’s take a look. I mean, it doesn’t look that much different,
but definitely did add something to it. Now, once we start adding these tails in,
that’s what’s gonna really make a different here. So I’m gonna add, first the highlight, and
then I’m gonna go through and brush in the tails. So I may have mentioned that this is a lot
of drawing. And through the wonders of technology, I’m
able to speed all of this up. But to be honest, I think this took me a couple
of hours to do, from the time that I setup of the guides, through the look development
phase, and to the end. And this was actually one of the shorter things
that I’ve done. I’ve definitely worked on projects where I’ve
dumped more than 40 hours into them very easily. So yes, lots of drawing. Now, for this pink tail here, we don’t really
have to be precise every time we go from one frame to the next. We can kind of leave this a little bit like
fast and loose here, and it won’t make any difference when you’re actually watching this
playback through. Definitely scrub back and forth between frames
occasionally, and just kind of check your work and play it back, and make sure that
you’re on the right track. Because sometimes you’ll get so absorbed into
what you’re doing, that you’ll just keep working, and going straight ahead like this, and you’ll
completely forget and get off track, and then when you play it back at the end, you realize,
“Oh crap, I made a huge mistake.” And you’re gonna have to redo a lot of work. So just check every once in a while. All right, so we’ve got our pink tail, and
now we just have to add, lastly, this yellow tail. So one more piece of advice I would give you
guys, is if you think something isn’t looking right, it probably isn’t looking right. So trust your instincts. And if you think something is looking like
a turd, it’s probably looking like a turd. If one frame just kind of looks a little off,
it could affect your whole animation. So go back and fix that frame while you can,
before it kind of propagates through the whole, and you start drawing all of them that way. Just treat every frame as if it’s kind of
its own painting. Don’t spend five years on each frame, but
definitely pay attention to how it’s looking as you’re drawing. And don’t try and cheat too much stuff. All right, so let’s take a look at our completed
animation now. Actually, I’ll make this yellow real quick. That’s an odd yellow. There we go, yellow. And there it is, tail and all. So now we have a really cool infinite looping
animation here. And we can go ahead and export this guy as
a GIF again. So file, export, save for web legacy, and
same options as before, just make sure this always, always does this, no matter how many
times you set it. So for looping option forever, and hit save,
and then you can save it out. And now you’re ready to share it with everyone. That’s all for lesson two. Hopefully you learned a thing or two about
traditional animation. Just like last time, we want to see what you
come up with. Send us a tweet, @schoolofmotion, with the
#SOMLoopy, so we can check out your looping GIF. We’ve covered quite a bit in this lesson,
but we’re still not done yet. We have some more important concepts to cover
in the next few lessons, so stay tuned for those. See ya next time.

7 Comments

  1. Ahmed Naeem January 2, 2018 at 7:33 am

    Hi! love the videos! One thing though is there anyway you can export as a video file and not as a gif from photoshop? so to add audio to it later?

  2. Diogo Matias February 27, 2018 at 3:31 pm

    This taught me so much! Thank you for making it!
    I was not sure how to move from static images in Photoshop to animation in Adobe Animate (it was quite scary).

    This way I can keep having fun in Photoshop, this time with movement πŸ™‚

  3. Oyster Smiling April 29, 2018 at 2:19 am

    i have an older version of ps and i dont have an increase frame exposure button.i cant understand how to do it any other way, can you please help me with this? its driving me nuts and i want to have one still frame that lasts for a few seconds without moving but i cant figure out how to do it! please help!

  4. bros before orange chicken May 8, 2018 at 2:03 am

    This was amazing… I have did it! I wish there was a way to share my own little version, it’s so adorable πŸ˜‚ I loved the feeling when I conquered this tutorial!! And so helpful for other uses in animation too not just in this specific pattern, as long as you follow your guides.. thank you!

  5. Yvoni M. September 24, 2018 at 2:22 pm

    super helpful Amy!!

  6. Coral GR January 3, 2019 at 7:25 pm

    Thank you πŸ˜€

  7. Dublin Photo Art September 6, 2019 at 2:30 pm

    Amy is awesome πŸ˜‹

Leave a Comment

Your email address will not be published. Required fields are marked *