Transcripts
1. Intoduction: Hello. My name is
Mustafa Nassar, an engineer artist who creates videos about the
creative process, art, and game development. I've been creating digital
art for the past 20 years, and lately, I've
been doing a lot of work with game development. As a self taught artist, I learned so many
valuable lessons that I'm so excited to
share that with you. The last four years, I've been focused on specifically
game development. And in this course,
we're going to dive into animation
created from scratch. Whether you're
looking to enhance your project with
dynamic visuals or simply exploring animation
as a creative outlet. I'll guide you through my whole process from start to finish. I'll show you practical
ways to bring your ideas to life and help you
launch your next project. This course is designed to
give you the fundamentals you need to start animating
with no experience. So let's begin this
creative journey together.
2. Animations explained: Animation as a core is
an optical illusion. Let's take a look at
the flipbook example. Basically, you draw every motion on a separate piece of paper, and by moving between the
pictures fast enough, you can see the
illusion of animation. And this is how
old Disney movies were made back in the day. Now they rely on digital form, which makes it a lot more
forgiving and allow duplicate, undoing and adjust the
colors on the fly. Some example of clever
techniques is how you can seamlessly create an animation
and reduce your work. Some animated series
use some easy to replicate techniques that can
make you look like a pro. We can apply similar
principles by identifying which elements
truly need to move frame by frame and
which can remain static or use
simpler transitions. This approach of
animating smarter, not harder allow you to
create impressive results, even with limited resources, whether you're
working on a game, short film, or just
a personal project.
3. Top Tools: So there are many tools
to use in the market, and I want to go through three of my top use software
for pixel art. First is Photoshop. It's been on the market
for more than 20 years and considered as the industry
standard for digital art. It has capabilities to create pixel art and it has a
very robust layer system, and it makes it very easy to organize different elements
of your animation. And it has also a
timeline feature and allow you to create
frame by frame animation. So if you're looking to create other stuff than pixel art, this tool has, like,
customizable brushes. You can edit photos in it. It has so many
different capabilities. The only downfall is the price, which is very steep,
in my opinion. Second is pixel edit. It's a very inexpensive tool and I use Mini to
create pixel art, and it has very good
tools for creating tiles. It was very good tool for me when I started Pixel
art, but sadly, the updates are slow and the dev haven't
posted anything on Twitter or any updates
that I've seen since 2023. But what makes it shine
is the simplicity and just the main focus on
pixel perfect precision. But I think the third option is way better, which is a sprite. It's a very lightweight
tool that can do so much when it comes to
pushing the pixel around. And the reason why it's
become my daily driver is the way the
interface is built. There are so many good
features that solve many problems like shading,
adding highlights. One thing that
makes it stand out is the animation timeline. Find it very intuitive and
very incredible to use. Using the onion skin
on it is very easy. It basically let you see the previous and the
next frames while you're working and has
specialized tools like Pixel Perfect mode, so your lines are always clean. And one thing that I really
enjoy is the tagging system, which allow you to organize different animations
on the same timeline, which is very, very useful. And lastly, you can export
to sprite sheets, to gifts. You can do so many things
with so obviously, each of these two have
specific strength, but I still absolutely enjoy a Sprite for
everything pixel art. But taking that aside,
the best software is ultimately the one that feels
comfortable in your hands. So if you're comfortable with something else, go use that. It doesn't matter. They're
all doing the same thing. What matters is the outcome
at the end of the day.
4. Aseprite Crash Course: To So now we're going to go through a quick
crash course about Asprite. And as you can see,
it's very similar to any of the
software out there. And if you compare
it to Photoshop, you'll notice that
everything is flipped. So all of the tools is on the right side and the
colors on the left side. One of the thing that
I really like about it is it has all of
the color palettes. And if you wanted to
add your own color, you can just click here and you can add
your own color palette. And also, you can have different presets that's
already pre done for you. Like, they have
Pico, they have NES. They even have minecraft. And also, this is my
absolute favorite is AAP 64, which I use for
Duc Norris tails. Right off the bat, you can press the middle bounce button
to move the canvas around. Same thing with
the space button. And you will notice
that it's very, very simple and very
straightforward. I normally just use
the round brush, and I don't pretty much use
much the other than that. If you right click
on the layers, you can create a new
layer or alternatively, you can use the shift N, which is the shortcuts. And you'll see me using the shortcuts
throughout the course, and I highly recommend that you get used
to those as well. This little round
shape is the frames. And this is how you can start adding
different animations. So for example, if I click on here and add a new
frame or press Alt N, I can create new frames. So I'm just going to create
different frames here. I'm just going to go and
draw different dots. And if I press play, you'll see that the dots
are moving around. And that's almost like
one frame per second. Now, let's go through all of
the tools on the right side. So you have the magic wand, and if you click on
it, you also get a little different extension. So you have the rectangle, you have the round marquee, and also you have the Lasso
then you have your pencil, and then you also can spray, but I hardly ever use that. I just always keep
it to the defaults. Pencil, you have
the eraser tool. Now you have the eye drop, and this is the move button.
And then you have the Zoom. I highly recommend that you alternate between pressing space and Z. I think this by
default is set to M, I changed the shortcuts to
Z because I'm used to that. And we can go and
change that into Edit, go to keyboard shortcuts, and you can change everything that you want from
menus, commands, tools. So adjust that to your
own personal preference. Use it as much as
you can because it will make your workflow
so much faster. Next is the gradient tool
and the paint bucket tool. Then we have the line tool, and also we have the shape tool. Then you have the
rectangle ellipse, and then you have
the polygon contour, and lastly, you have the blur
tool and the jumble tool.
5. Dust Animation: So now we're going
to go through and create a very simple animation. So let's work with
the background first. So I'm going to click the
bucket tool or PressG, select the color, and make sure you're selecting
the right layer. And now I'm going to
create a new layer. Let's try and do
something very simple. We want to move a speck of
dust across the screen. I'm going to select
a bright color. Make sure I have the
pencil tool selected, and let's zoom in a little bit. I want to move this
dot from here to here. What I'm going to do is
going to add a new frame. Basically, what I'm going
to do is I'm going to press Control and move the
dot from here to there. And if you use your arrow
keys back and forth, you get to see that this
is the first frame, and this is the second frame. And if you press play animation, is basically moving from
one side to the other. But this is not a
smooth animation. Pretty much you want
to have a twin in between those two dots
to make it very smooth. What you can do is
you can start to add in between animations. And so let's try and do that. So we're going to do new frame, going to move
something like that, add a new frame in here. I'm just going to
keep pressing to end and just keep doing those. Any food play, see it started
to do something like that. I'm just going to
delete those for a second, and let's start over. Now that you understand they can draw something on the canvas on the same layer by just
creating a new frame. Now let's do something
that makes it a little bit more visible
for you because you can't just go back and
forth between frames and try and guess where
was the dot before. There's something
called onion skin. When you activate it normally
and create a new frame, let's just say I want to
move this to here to here. You get to see something on that basically is the
onion skin reference. If I remove this layer
and just zoom in, you get to see that this
was the frame number one, and this is frame number two. Let's just add more
frames for clarity. So now I'm going to move this to here and I'm going to
make this one here. So now we have four frames. And basically, say, if I'm
selecting frame three, I have an option to select the frame forward and
the frame before. And I can do that
as many as I want, so you get to see
the whole thing. But for the purposes of this, I want to only view
the frames before. So this makes it a
lot easier for me to know what happened in
the previous frame, and I can build on the next one. But this is not very clear because that means that if
you enable the background, you cannot really
see what's going on. So one way you can do that
if you click on here, current layer only and make
it in front of the sprite. You get to see exactly
what's going on. And also one extra step is to do the red and blue tint to give you just a color cue of what is happening
before and after. And it's actually very,
very useful to have. So even if I move this up, so now you get to see that the forward animation
is in blue, and the previous
animation is in red. But for now, let's just
keep it like that. Okay? I'm just going to
keep adding more animation. And just going to move that. Let's just create eight
different All right. So let's play this around. So we're moving the circle
from here to there. Let's just turn off
the onion skin. That's not bad, but it's
still not smooth enough. What we can do is
we can start to flush that animation out a little bit and make
it look way better. What we can do is just
turn on the onion skin. We're going to go
in here and I'm going to add make this 13, and I'm going to be
using my tablet, I just want to draw
something like this. I'm using my arrow keys to
move forward in the animation. Basically, I'm doing a trail
effect to all of these. For this one because
it's moving this way, so I'm just going to
do a trail that way. I see this one is
supposed to be in here, so I'm just going to
move it here, adjust it. Using all that with the
shortcuts I'm pressing Control and just with the mouse. Lastly, you know what? We can just keep this here, just make it have a swooping effect. Now let's play that see
it looks very smooth. It doesn't seem
like it's jagged. It's just like having
that smear effect. And this is very useful, especially when you're doing
animation in pixel art. Gives the illusion
that you're having a blur effect and if
something is moving fast. So right now, this is moving
in a very uniform speed. But what if you wanted to add a little bit more speed to your frames and your animation? One way you can do is you can increase the gap
between each frame. So let's do that. But
because we're also doing something that's
a little bit longer, I wanted to swoop in. So let's just say
the animation start from here, is going this way, and I basically wanted to swoop out of the
screen from here. But because this is to kind
of like a a longer animation. I want to have a guideline. So I'm going to do is
I'm going to select a new frame and create
a new layer here. And I want to draw a guideline for my next
frames of animation, and I wanted to
keep it consistent. So I'm going to do
is I'm going to click here and continue. Basically, I'm linking
all the frames that's coming up together, and I'll always stay the
same no matter what. For this, I'm going to
select the red color, and I'm just going to
draw something like this. And every time I draw a
new frame is going to keep the same line
consistently throughout. And I don't have
to worry about it as long as I just all
I need to do is just, like, make it invisible
when I'm done or delete it. So now let's just turn
on the onion skin, and let's continue
with the animation. So basically, I'm just going
to do something like this. Basically, we're
just going to try and simulate that
it's going faster. I'm going to start to add
a little bit more gaps in between and also going to make the tail longer
to simulate that. Move this one up to
here, just delete those. Move this here. Just
going to delete it. And make sure when you're
creating a cane frame, make sure you're either moving the pre frame
or deleting it. But it also depends
on what you're drawing because of
this one we have to basically move
that speck of dust from one position to another. Let's just make sure that
work very consistent. And lastly, I'm just going
to do something like this. All right. Now let's
turn off the onion skin, disable this frame, and
let's see how it looks like. So it starts very slow and then picks up speed right away. And then it looks
very, very cool. One thing you can also do is actually you can duplicate
that whole layer, and you can just make sure that you're
selecting everything. You have to select all of the animation and
you can move that. And then when you press play, Now you have copied the whole frames of
animation together. And that's basically a very
quick and dirty way to make a speck of dust
move in a Sprite and how to basically animate
something so simple as a simple dot across
the screen and make it look unique and
also give it some life. Next, we're going to go
through how to animate a whole scene with
foreground and background.
6. Grass Part 1: Great. So now that you know how to create basic animations, we're going to try and do
something a little bit bigger. Let's just say we wanted to draw a grass in a field
somewhere in Central Asia. And basically, we're trying
to make something that's more picturesque with a
little bit more wind. So we'll take everything
that we learned from the past module and try and
elevate it a little bit more. So on top of doing
the wind animation, we're also going to add
grass animation in between. So let's start with that. First of all, I'll start
with another canvas, 800 by 400 again, and I'm going to try to
break down my layers. First, I wanted to create
a background layer, which will make it more bluish. I'm going to add a new layer, and this layer is going to
be let's just basically, let's make it as that green. Okay. Basically, this is how
we're going to start it, and I wanted to add a little
bit more depth to the scene. So I'm going to go ahead and
select the gradient tool. I'm selecting this one. And I wanted to make it a
little bit more brighter. So let's just do something that Actually maybe
the other way around. And I'm just going to
do something like this. I'm going to do the same
thing for the grass, and I'm going to
select these two. Maybe do something
like this, perhaps. This one we're going to call
grass and this one is sky. In between, let's just do something let's
play a little bit. Let's add some clouds. I'm just going to
add some clouds here and just do
something like this. Okay. And we can just do some. If you wanted to animate the
clouds, that's up to us. But for now, all I care about
is I just wanted to create some little cool
looking dust animations and we're just
going to do grass. So before we even start, it's just going to create a new layer here and I'm going to call this one is the leaves, okay? So there are so many
ways you can draw it. So I'm going ahead with, let's just say if you wanted
to draw a leaf, okay? Let's just say this is
one speck of leaf, okay? And you want it to animate it. There are different
ways you can do it. Let's just say if I wanted
to animate it this way. Okay, so I'm just adding
each animation together. Okay. And that's it. So let's play it. That's not bad, right? And
then you can just copy and paste that 1 million times and you can create a so this is one way
to animate it, but what if you wanted to
add a little bit more drama? By drama, I mean, they
just delete these. I'm going to create
a new leaf. Okay? And I'm going to call
it leaf too. Okay. So by drama, I mean, like, Okay, so you have
the leaf, okay? So this one was drawn just
swaying left to right. But what if I wanted
to do something a little bit more dramatic? So I'm just going
to draw this one in here and show you what I mean. So I'm going to draw the
leaf tilted, 45 degrees. And I'm just going to
turn on this one again. When you activate
the onion skin, make sure you have the
same selection as before. Make sure you have the
red and blue tint or passeri a little
high current layer, and in front of the sprite. And now we're just going to go ahead and do something here, where basically because we know that the grass always
have the same root, so it's going to stay
the same all the time, which makes it a lot
easier to be honest. So I'm just going to
copy paste this one. I just want to delete this
frame and add something here. Just turn this off and
say where we're at. Basically, I just trying to exaggerate some of
these movements. I want to make sure that it has this effect that the leaf is going to the right and the
wind is very, very strong. And I can even copy frames in between. Take a look at this. What we can do also
is we can even remove the first frame and just
have something in between, and it will look
something like this. Now, if you copy and duplicate this multiple times across, it'll show a very,
very neat effect. So now we created something
that's very simple and the grass is
moving to the right.
7. Animating a whole scene: Doing each leaf at the time
is very time consuming. So what we can do is we can do something very,
very different now. I'm going to just delete all of these frames and
we'll start over. And I don't want these. So let's just start over, create a new one and this one is going to be
a little bit different. So I'm going to go with some do something like this. Okay. And it's just going to have
something like this in here. Okay. Just want to do something that's maybe like that. Let's just add a
little bit more. I'm going to select this and
I want to have a little bit of I would say soil in between. And I will create something that's a little bit more yellow. Just create this, select
that and go with the yellow and maybe showcase something
like a field in here. Just make it a little
bit more orange. So, something like that. Maybe I remove this
one I don't need it, but I'm just going to keep
adding more and flushing it to make it look a lot better. So we're creating
a different hill. So now, when we wanted to oh, let me just do one here. And I'm just going
to do something like So I want to add a little
bit more detail to this just by making it look like it's
moving towards the right. So what I'm going to do is
I'm going to add a new layer. So this one called
this one grass, and I'm going to
add a new frame. And with this frame, I'm going to select the colors
and just make it just start adding a little bit more to it
towards the right. And with this, you don't
have to be perfect. We just have to be consistent with the direction and
what you're doing. Because, believe it or not, sometimes the chaos creates
a very beautiful effect, and this is what we're
trying to go with here. And less is more,
trust me with this. I want to add some
little droplets in here here and there. Okay. I'm going to add a new layer. But I'm going to
copy the first layer in here because I don't want to really do any
more motion to this. I want it to look almost
like a painterly effect. So I'm just going to just do something like this,
very, very simple. Make sure that you're picking the right color and just
do something like this. And I always find
it a good habit to pick the color under anyways, even though you
know it's the same. But just to keep yourself
consistent with how you do your work because sometimes you might
pick a different color, and you're always zoomed out, it's not going to you're
not going to see it. And I'm going to create
like eight animations, so I'm not going to do too much, but I just want to show
you how this will look. Or almost there almost there. And as we know, the more frames, the smoother the animation. So it's maybe a little
bit extra work, but the end result
will thank you for it. And see, I'm very lousy. There's almost like no
rules of how I'm working. But basically, this is how
it was gonna look like now. Look at this. So you
can start to clean up. You see, like, Oh, maybe I need to add more
animations here. Animations there to
make it all consistent. So I'm going to do
that right now. And this is the final one. Just do something
super, super simple. See, I didn't even
stress about it. J doing something super random. But as long as you keep all of the sides and the
direction consistent, it will look very
coherent to the eye. This is how the final will look like so next we're going to start adding the
dust particles and clean up the clouds in the back. So I picture how the dust
will look like here. I can make it either look white, which is going to blend
in the background, or I can make it a little bit more make it more bold,
so it can go red. So how that going
look like in here? Let's just do something that's
more brighter. Let's see. Just trying to see what
color would look like. Oh, maybe the orange
will look nice in here, especially with the
complimentary colors. So just do that. I'm going to do something very, very simple like what
we did last time. But this time
around, I'm going to create something
and I'll trace it. So I'm going to call this
one, I'll call it the guide. And what I'm going to do is I'm going to show you
something in here. I want to draw
different particles, and I'm going to one particle
that goes like this. I want to do one like this, and I'll do one that goes
something like this. And lastly, just going
to do one that just kind of hangs around
and goes this way. So I'm going to
do four different particles and maybe I can copy paste them in a way that
it just looks very good. Well, one thing you notice is
now that I have this guide, when you move to the next
frame, the guide is gone. So what you can do is you can copy and paste these frames, or we should have done when we started is to have that
guide in the beginning. And every time you
create a new frame, it just, like, stays the same. And basically, this one says, this is a continuous frame. So basically, it just doesn't change no matter what you do. And always tastes consistent,
which I want it to be. And now I'm going to start
drawing my dust particles. Okay. So now let's
go with the dust, and we're just going
to do it very, very lousy like we did before. But this time around, I'm going to animate
all the dusts at once. So I'm going to have one that starts from the first frame, which is going to
be like this one. I just realize I have it at 27. Let's just change
it back to six. So I'm going to
have one in here. And then when I go here, I'm just going to do
it in here, three, four, five, six, seven, and now at eight. For this one, I'm
just going to make this one show up late, but I'm going to make
this one a little faster. You notice these guides
make life so much easier. I'm going to start again. But this time around, I'm
going to start this one at the second one, so
it's coming in here. It's going to do
something like this. Make them almost
intersect in a way. Okay. And I have the last one, which I'm going to make
it show up pretty late. Something like that. So now let's play it around and
see how that look like. It's pretty fast, right? So this one definitely
doesn't work. And that's part of the process. Let's just take a look again
how we can improve it. So I think maybe it
starts too late. So I'm just going to start over. And this one I'm going to
start it from the second. And we just send it delete
Okay everything after that. So we also learned
something from this that it's a lot easier to have separate layers for
all the animation because now if you
screw up something, I cannot risk deleting this whole frame because I
already have other stuff. So it's always a
good idea to have different frames for
each of the animation. It's just cleaner,
it's easier to manage, and it'll give you a
lot more flexibility. I know this could be faster, but it's definitely a lot. And I did this just to show you what is the ramifications of it. But since this is a
very simple animation, we don't need to worry
too much about it. Now let's try and see
how this one looks like. Yeah, definitely
looks way better. And I'm just going to
go ahead and clean it. So what we're going
to do is going to taper the back and also do this and make sure that
we have this done. I want to Good. I'm just going to
reduce my paint. I'm just going to taper this. Just open our guide to. Basically it's coming from here, I wanted to have
this like that and this one is strong
and taper the back give us some more particles. Now we go to the
next one, this one. Paper the front, give
it a little bit more. These guidelines,
they come in handy. They don't need to have
to worry too much, they don't need to
think too hard. They're there for
you. Like this, the Now, the last one
is the one on top. We're just going to
do it the same way. And I think after that, what is left for us is
to clean up the clouds, make it look nice and
we have a painting Now, let's turn off the dust. Sorry, the guides and play. Oh. Pretty nice, huh? It's a little bit too much. I wouldn't want to
have the top one, so unless we just want to double down and create something
just like that. But that's how you
can play around with different animations. And lastly, I'm just going
to do something with clouds. You can do the same
thing with the clouds where you want it to show
that it's moving this way, so you can have just some hints. But you notice something
here because the clouds, I've only selected one frame, so I want to do the
same thing with here and copy paste
all of these frames. And yeah. And lastly, I'm going to create
something here too. Ada.
8. Creating Sprites: [No Speech]
9. Outro: Made it this far
congratulations. You successfully
finished the course. And I hope you enjoyed it as much as I enjoyed creating it. And if you want to contact me
if you have any questions, I have created a
discourse server, and you can find it
in the links below. Just remember, take
it one day at a time, and I'll see you on YouTube.
Mostafa Nassar, One step at a time
