Sergio Flores

March 18 2019 | 07:33 PM

From doodle to asset


Let me try visualize a common pattern. You decide to learn art, you download some software, then you open it, and you see all those options, infinite colors and beyond, and you quickly close everything, uninstall the software, take your laptop and throw it out of the window.

Maybe you repeat this again some months later. Sometimes you might draw some lines that look like a kid's crayon drawing or worse and call it quits.

If you identify with this, then this article is for you, please keep reading.

It's pretty common to see indie game developers complaining that they can't do art because they are programmers, and don't have funding to pay artists.
And while learning art might seem like a daunting task, but in reality you can get pretty decent if you put at least one year of pratice into it.
If you go super sayan on it, you can probably even get nice results after a few months.

GET READY FOR PIXEL ART



This article will focus in pixel art. Do you think that pixel art is cliche and overdone?
Well, the truth is that pixel art is the perfect training wheels for becoming an artist. You will find that once you get good enough with pixel art, you can branch to other art types very easily.

Another very good advantage is that you only need a mouse, which you already have, no money necessary for a drawing tablet. In fact, most people that do pixel art prefer using a mouse for extra accuracy.

Another common phrase about about pixel art is "pixel art can look cool, but most indie pixel art looks terrible".
I kinda agree with that, but if you follow the rules in this article, your pixel art will be above average, don't worry.

10 STEPS TO MAKE PIXEL ART


The best way to get good is to first know the rules. The rules can be broken later, but when learning something new, following a set of rules gives you a huge power boost.

In this article I will reveal to you ten steps along with a couple of rules that will help you getting started. You can then repeat those for any pixel art asset you need to create.

The main thing for a game to look good is to have a solid art style, if you follow those steps, you will get that.

Step 1 - Palette


Never choose colors by yourself. Color is an art in itself, but thankfully you can let the pros do that for you. Go here and pick a color palette.
Note that some palettes have more colors, others less. I don't recommend palettes larger than 32 colors, even 16 colors is better for starting.
For this article, I'm going to pick this palette. Could be anything else, I picked one at random from that list for this article.




Step 2 - Resolution


Choose a small resolution to start it. If you are a beginner, go full retro and do sprites with size 16x16 or 32x32, not more than that.
You can use different ratios if you prefer, like 24x32, just don't go much higher than that.




Step 3 - Outlines


When drawing an object, draw it first its outline using a single color, can be black for example. No other colors allowed at this point.
It's recommended to always have a reference pic open at same time. You should be able to look at the reference while drawing, dont alt-tab.

Also make sure that the outline does not have holes, it is the most important thing in this step.





I made this little guy here, at resolution of 32x32. It looks terrible.

At least with this starting point I hope that you won't complain that it not started from the beginning!

Step 4 - Colors


Once you have a outline that is good enough, you can start filling the inside part. Most software has a "Paint Bucket" tool, this is the fastest way to fill the insides areas that need color.


Again, use as less colors as possible, and only colors from the palette you are using. A good character design will have at most 3 different ramps.
A ramp is basically a way of organizing the palette colors into families of shades, from dark to light.

Usually in this stage you will pick a color from the middle of each ramp, meaning not very dark, not very light, unless for some reason you are doing an object or character that requires those.





Here for example are some possible ramps from that palette I've chosen previously. Note that I did not include all colors from the palette, just some, you get the idea.
Also as you see in the picture a color can be shared by multiple ramps, either by sharing the same beginning color or same ending color.





So I picked some colors from that palette and painted the little guy.
Remember when I told you that not having holes was important?

Step 5 - Shading


This is where most get stuck, and in fact you could even make a cool looking game using the previous steps only, without shading, just keep the color palette rule and an consistent art-style and your game will already look better than most.
But to grow as an artist, shading is an essential skill.

There is a single trick to get started, you need to choose the light direction for your game, either left, or right, and then for every sprite, tile and everything else, respect that direction.



The idea behind shading is that parts hit directly by the light get lighter, parts not hit by light are in the shadows, so they get darker. Very simple, right?
But as an art newbie, you probably have no clue how to do this, and most tutorials can't explain it, because it's not something that can be learned by reading words.

So here is a trick. I'm going to choose right side light for now, so keep following.
Now first for each color in the character I pick a lighter color and paint one pixel in each edge facing the right side or the upper side.
Now for each color in the character I pick a darker color and paint one pixel in each edge facing the left side or the bottom side.





I know that it looks a bit terrible but continue with me, there are improvements coming later in the article.
If for some reason this step looks too advanced for you, zoom in and check how I did it, there's 2 extra shades for each of the blue, red and beige colors, all picked from the palette, and applied using that right/top vs left/down rule.

Step 6 - Proportions


This is another point of failure for the newbie artist. Thankfully low resolution pixel art makes this easier than it should.
Here is where things get a bit subjective. Might be a bit suprising, but to be a good artist you don't need to pratice with your hands, but rather with your eyes.


Your main objective is to unlock something called the "artist eye". This is like a special skill that lets you look at something and decompose it in parts, that can then recompose with your hands.
The "artist eye" is unlocked by a combination of doing your own art and looking at others art. Both steps are necessary, if you just keeping doing art without looking at others or just look at others without doing art, the eye won't unlock.

Let's put your own eyes to test, look again at this terrible sprite and tell me what parts are stupid looking.





(Don't bother looking for differences between this and the previous picture, they are the same, I just put it here again to save you from scrolling.)

The first thing that comes to mind is that this little guy is falling down or something, let's help him.





The only thing I did here was moving lots of pixels horizontally. What matters is that doing art is a very iterative process. You won't get it right at first try, you will have to do tons of editing.
Let's look at this version again and think, what's wrong about him now?
For me, seems like this poor guy is dancing, but he should not be dancing, let's fix that.





Ok, better position now, also gave him some pants.



Step 7 - Cleaning clusters


Notice those ugly large black clusters of pixels?
Let's ride of every single one, and make a rule that a pixel can only touch at max 2 other pixels.





The guy is now less dirty. For some reason, this edit now suggested me that he should have a long nose, let's add that.
Sometimes just the process of editing gives you inspiration.







I added the nose, plus I altered his head a shape a bit to fit the nose better.
I also added outlines to the legs to make it consistent with the rest. All art in the game should be consistent!

Step 8 - Cleaning shades


The trick I gave you before for shading kinda works, but also looks a bit ugly in some parts.
If your artist eye is already activating, you will have preference for removing some of that darker or lighter pixels with their neutral shade.





Here I did a couple things, I replaced all bright and dark pixels that felt out of place, and then removed interior outlines.
Pixel art has so low resolution that outlines in the interior remove space for detail. In some important places you might want them, but not in this case.
I also gave him some arms / hands more consistent with the rest of his style.





A small edit, changed his pants and moved a couple pixels. But something still feels weird, I'm a bit blocked, what to next?
Let's try remove his outlines, replacing them with the nearest pixel colors.





Looking at him now, seems like his legs are weird, like a centaur. And his face is clearly weird too, with his nose going in one direction, and his eyes going in other.
Changing how you view something is a trick that artists do to trick the brain to look for mistakes.
A fresh view allows you to pick up stuff that you missed before, and while here I removed the outlines, could be as simple as looking at it upside down!




So I did remake lots of parts of his head, arms and legs. He already looks completly different, a bit more correct now.
But look, why he does not have ears? And why his hat looks like its floating instead of being connected to his head?




We fixed that, and seriously, he is now starting to look a little more professional. Note the shading in the hat, you understand how it works?
It just follows that same rule, light is on the right side, shadows in the left side. Doing it correctly makes it look almost like 3d.

To make the shading look correctly while you are still unlocking the "artistic eye", you can just keep trying different combinations of dark, neutral and light pixels.
Keep it at 3 shades always like that, and its difficult to get it wrong due to the small number of permutations when doing low resolution sprites.

However a single pixel can sometimes make a huge difference in how the shading looks. This is something you will learn with time and pratice.



Step 9 - Polish


It's already usable, sure, but let's keep improving it.
Another simple trick to make it pop out is knowning that parts of the objects that are more distant should use darker shades.




So I made the one of the arms and one of the legs use darker shades, simple.
Let's continue with yet more improvements!




So here I changed his arms position a bit. It's perfectly fine to keep rewriting parts until you are satisfied with it. The more you pratice, the faster you get satisfied and less rewrites are necessary.

I also added a scarf and hair. Note that if you add different elements that are close to each other and use same or similar colors, it will get confusing visually.
In this case the scarf helps adding some contrast to separate the hair and the shirt.

I also changed the eye color a bit, this one is just a matter of character design, I felt the black eye did not fit the rest.

And why those two single dark pixels there in the middle of his shirt?
It was mostly due to experimentation, I tried it, liked the result. Since pixel art at low resolution requires a bit of imagination, those two pixels can imply some folds in the cloth, or that he is using a turtleneck or that this character is female.





Finally, I added the outline back, one pixel at a time, avoiding creating clusters.
Having outline or no it is mostly a matter of preference. But it helps creating contrast between the characters and the backgrounds.





The outline does not have to be always with black. Here is an alternate way to apply outline, by looking at the pixels adjacent to the outline and picking a shade slighty darker.
Of course, we always use only colors from the initial palette, don't forget that!

This last version might look better, but more colors makes animation more time consuming. So I'm going to revert to the pure black outline for now.



Step 10 - Animation


Animation basically consists of taking your sprite and making slighty different frames in other positions.
The low resolution of pixel art also makes it easier to learn animation. Let's start with an idle animation, the most basic animation possible.






I basically just selected half of the sprite and moved it down. If you are a lazy developer, this might be already good enough, but not for me!






This time I moved some more pixels, this the hair, hat and nose were moved up. That's because as the character moved the head down, everything else get's pushed down, but it is not instantly, so this adds a bit of delay to those parts.
The arms were moved both to the left, to simulate a bit of secondary movement. This is not a fancy word, just means that it is an indenpendent action, completly unrelated to the head bobbing.

Step 10 - Sub-pixel animation


If you reach this far, then you are already entering advanced territory.
While the low resolution helped until now hiding the fact that you are learning art, sometimes it also works against us.

That last frame is a good example of it, the hat and nose movement is a bit too extreme. But we only moved them a single pixel up!
To make the movement more smooth, if we could move it less than a pixel, maybe... But we can't, that's the minimum possible.
So there is a trick, instead of moving the pixels, you move the colors!






So I put the nose and hat back to their original place, and instead changed only the colors, swapping them with their corresponding darker and lighter shaders as I saw fit.
Again, this is a trick that depends on your "artistic eye". Train it a lot, and this gets easier and faster!


Conclusion



I hope you liked to see how I transformed a completly disfigured stick figure into something usable into a game. I tried to show all steps and explain why and how I did it, to avoid making this another "draw the rest of the owl" tutorial.





I have some plans to make similar articles for other stuff like tilesets, low poly or even music, it all depends on my free time and motivation.

Also don't forget to read my article about pixel perfect graphics, which is also very important to get a consistent art style.
 

Tags: #graphics #tutorials #pixelart

Follow me on Twitter for more cool stuff!