Pixel Art: Basics & Tips

Hey there! In this post, I’ll be sharing some pixel art tips that will help beginners get better.

I myself am not a pixel art pro, but I have been doing this a lot lately, and have learnt quite a few things that I would like to share with y’all.


Color Components (HSV)


First, you should know about the three color components: hue, saturation, and value.


♦ Hue ♦


This is what we generally refer to as “color”; it is the property that tells whether something is blue, green, red, etc.

It is the spectrum of colors that starts from red, goes through green & blue, then comes back to red.

Related image


♦ Saturation ♦


Saturation determines the intensity of the hue. For example, this GDPALACE3.png is a color at full saturation, this one GDPALACE5.png is at half saturation, and this one GDPALACE4.png is at zero saturation.


♦ Value ♦


Also known as intensity, lightness or luminosity, this property indicates how light a color is – that is, how “white” or “black” it is.

Full value: GDPALACE6.png
Half value: GDPALACE7.png
Zero value: GDPALACE8.png

The color at full value doesn’t appear white because the saturation needs to be zero for it to be white.


Color Choice


When choosing a colors, you have to make sure to select colors that are not too saturated; having a balance is important.

For example, if you want green, don’t take GDPALACE1.png, instead take something more tolerable on the eyes, like GDPALACE2.png.

So, don’t use full saturation. And don’t use zero saturation as well.

For example; if you want a gray color, don’t choose this GDPALACE9.png, but this GDPALACE10.png. The first one is a gray color whose saturation is 0. But the second one’s is a bit saturated, with a blue hue. That gives a better feel.

Similarly, if you want black, don’t use this GDPALACE11.png, but this GDPALACE12.png. The second one is a bit lighter (higher value) so that the hue can be seen, and a bit saturated as well. It has a blue/purple hue.


Color Shades


This is something that most beginners doing pixel art don’t know about, but is very simple and makes any sprite look better.

Let’s say I am told to make a simple ball, light on one side and dark on the other, and I make this:

GDPALACE1.png

Look at the colors. What is wrong?

To make the color darker, I reduced its value, and to make it lighter, I increased it. Simple, right? That’s how most of the beginners do it, but there is a better way to make colors lighter or darker.

Look at this:

GDPALACE2.png

The shadows are colder (more blue), and the highlights are warmer (yellower).

When we make a color lighter or darker, we just change its value and saturation, to move it towards white or black. But, we must move the hue as well.

There is a simple rule for this: when making it darker, let it fall a bit towards blue, making it colder. When making it lighter, let it rise towards yellow, making it warmer.

When you’re choosing the shades for green, it will fall towards blue (through aqua) when getting darker, and rise towards yellow when getting lighter:

GDPALACE_OK.png

At the bottom of the colors, you can see their hue values.

When making orange/red darker, go through red/magenta as that is the shortest path towards blue. So, darker red will have a bit of magenta in it.

GDPALACE_OK2.png
Orange
GDPALACE_OK3.png
Red

Palettes


If you are just beginning with pixel art, I suggest you use pre-made palettes, instead of attempting to make your own colors.


Drawing & Lighting


When you begin drawing an object/character, start by making it with basic shapes & colors, or in other words, a silhouette.

As an example, I’ll draw a quick, basic guy:

GDPALACE_Move_0.png

You can see how I have started with making simple shapes, coloring different parts of the body differently.

The silhouette should be easily recognizable. This is where you should make the basic pose/design before filling in the details.

Then I can start filling in the details:

GDPALACE14.png

Then, the lighting:

GDPALACE15.png

When you’re drawing something, you need to know where the light source is, and draw the highlights/shadows accordingly. In the sprite above, the light source is the sun, so the light is coming from above the character and is spread a lot.

GDPALACE16.png

In this example, the light source is directly above the character, like a light bulb. Much closer than before; so, the highlights are bigger, and the shadows are more prominent.

So in short, you need to think about how a certain material would behave under a certain light source in real life, and replicate the behavior in pixel art.

Tip: When drawing anything, if you are new to it, make sure to look at examples & others’ work using Google Images. Look at how they have done certain things and learn. Try to copy a style you like.

You’ll also notice that the guy has no eyes, or any other details on his face (nose/mouth). That is what you should do at low resolutions. It is better to keep the face empty rather than try to fit the details in such a low space.


Animation


When animating, you should make sure to replicate how something would move in real life.

First, make the key-frames. The key frames are the pivotal parts of an animation that you should visualize first to understand how the overall animation will work. In other words, you should make only a few frames first, then fill in the space between them by creating more frames.

For example, I made this simple 2-frame animation with only the key-frames:

GDPALACE_Move_0.png
Sheet
GDPALACE_Move_0.gif
Animation

As you can see, I have made two frames, one for each leg going out. Now, I can smooth it by creating frames between them for the legs changing places:

GDPALACE_Move_1.png
Sheet
GDPALACE_Move_1.gif
Animation

You will notice that the character is bobbing. When making walking movement like this, it is very important to make the character bob up & down to make it feel more realistic. This happens because when you walk, you push yourself upwards. Without bobbing, it would just look like sliding, wouldn’t it?

Now I can smooth it even more by adding one frame between each pair, to increase the frame count from 4 to 8:

GDPALACE_Move_2.png
Sheet
GDPALACE_Move_2.gif
Animation

 


Don’t be afraid to retry


When creating a sprite or animating it, most of the times, your first attempt will not be the best. Don’t be afraid to delete it and create it again; doing that is completely worth it, because the new result will of course be better, and you will learn a few things about pixel art.


Conclusion


Hope this post helped! If you have any tips to give, don’t hesitate to post in the comments below.

If you need free GML help or want to provide GML help to those who need it, join our Discord server! We have a fun little community there (and a fun bot); it’ll be good to have you too!


I would like to give special thanks to my friend BumiBomber who helped me with this post.

I would also like to thank Pudarida, for giving helpful tips.

They’re both great pixel artists, so make sure you check out their stuff!


See ya later, and till then, happy dev’ing!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s