Ashbad's Pixel Art Tutorial
Part I -- Why do it? What does it entail? What tools do I need?
Well well well, if you're reading this right now, I can only assume that you want to learn about how to draw pixel art; either that, or someone threw you a link to this tutorial, disguising it as a link to a free online pizza coupon or something. Sorry, this isn't exactly the place for you to download a delicious pizza, but I welcome you to keep reading anyways. So, this is a tutorial about how to draw pixel art. Might as well start by giving reasons why you want to learn how to draw some!
Reasons to draw pixel art:
- It's an excellent visual art form to dabble with, and it requires the least amount of tools to generate
- You can create beautiful, original sprites for use in video games (a major reason I do it!)
- It helps discipline you to pay attention to little details; in pixel art, every single pixel can make the difference in outcome!
It's also quite different than many other art forms; you'll probably have to learn completely new art techniques to make decent works, even if you're already a great artist in other forms of visual expression. One thing that's essential to making pixel art is loads of practice, being exposed to lots of other pixel art to learn new techniques from, and most important, the revision process. Most of the time you'll be making many passes over a single sprite to make it high quality, and something as small as 16x16 pixels may take you hours to perfect, and that's fine. The more practice you have, the less you'll have to go through revision and it'll take less time to recieve the same result. Of course with every pass you take, no matter where the quality was before, you'll always find something to improve upon.
If you're coming into this thinking that pixel art is an easy form of art to create, I'll say up front that you're in for a nasty surprise. In fact, I would call it a pretty challenging art form to master. It's all about detail, more so than many other forms of expression. You also don't need to come into this with $500 Photoshop or Adobe junk software to work with; all you'll need is something very simple, I cling close to Microsoft Paint. Paint.net and the GiMP are also overboard for pixel art, generally, but if you can't use MS Paint then they're fine alternatives indeed.
I'm teaching this tutorial using nothing but MS Paint as the tool, so if you're using something else, keep that in mind. Most of the additions in those fancy editors really aren't helpful for pixel art anyways, so we won't be needing them. With that being said, let us move onto Part II!
Part II -- Let us paint with the colors of the rainbow... and then some
Many pixel art tutorials leave this lesson out until later in the tutorial, keep it as a small little sidenote, or ignore it completely. But, I disagree with this notion; you can have the greatest-looking sprite in the world, but if the colors hurt your eyes or take away from the details, then it'll just look crappy. Many beginners use supersaturated colors for their sprites and tiles from the outset, and the result are generally horrifying. For example, which tile of the two below looks better? They're both supposed to be of grass, but the colors can make it or break it.
I think for the most part everyone can agree that Tile 2 is superior. Disagree? Check your monitor's brightness and saturation, it's probably down to 5 or 10% right now. Fix it, and look again. Tile 1 is hideously bright, isn't it? Generally, newbies' grass tiles look at least that bright before they've had a color 101 lesson or two. The grass tile is actually quite decent for the effect it's trying to transpose (it's using only 3 shades of color to give a retro feel to it) when proper colors are used. But, how do you know what colors are good, and what colors are bad? Sometimes, a super bright green might be needed in small amounts; how do you know when to use it properly?
Learning how to pick a good palette is an important skill to learn, and it is one that improves over time, if one is given enough good and bad examples to learn from. It's hard to generalize what's a good and a bad color, most have their specific or general uses in pixel art. But some can be generalized. Here's a set of colors to almost always avoid using:
All of these colors have one thing in common; they all have RGB value components that are either zero or maxed out at 255. What do I mean by that? Well, colors in pixel art generally follow the RGB color coding scheme. The most common encoding these days is RGB 8-8-8, which simply means that each pixel's encoding takes 8 bits for the red component, 8 bits for the green and 8 bits for the blue. That's 24 bits total; BMP and DIB raster image (pixel-based) formats usually pad them to 32 bits though, using an extra, wasted 8 bits that have no use in order to keep the image file more uniform and provide faster access to the pixel data.
Each component in an RGB 8-8-8 color can take the value of anywhere between 0 and 255, 0 being the lack of that component's color and 255 meaning that it is maxed out entirely. That means that we can have a total of 2^24 different colors, which is about 16 billion or so. We can make just about any color imaginable with RGB 8-8-8, save a few imaginary, impossible, and super colors (which we wouldn't ever use in pixel art anyways!) Mixing colors with RGB is different than mixing them like paint colors. Mixing red and green with RGB yields a yellow equally as bright as the red's and green's levels, while with paint it would be some ugly brown color. With MS paint, you won't have to worry about experimenting with RGB values directly most of the time, since there's a convenient (and powerful) color picking tool already provided. However, you should know how they work, so in later sections I'll cover such as selective outlining and antialiasing, you can efficiently pick colors suited best for the job given two sets of RGB values.
Since you'll be working mostly with the color picker, it's a good idea to make sure you can pick colors quickly by knowing where different colors would be located on it. For example, here's a few common colors you will need to know the general locations of by heart:
A blue marine color, great for representing water or the sky
A nice starting brown color, for all your flesh-color and dirt-color needs
A green decent pastelish enough for general plant-life use
A nice pastel pink, that isn't very harsh
Colors like these you should familiarize yourself with the best you can, and keep in mind their general RGB values. There are all sort of colors you need to know the location of by heart, way too many for me to point out; it's up to you to find them and make use of them.
Now that you're educated in the sense of colors, let us move onto part III.
Edited by Ashbad, 29 April 2012 - 03:28 PM.