Ashbad's Pixel Art Tutorial

[Ashbad 969]

Since I've seen a lot of pixel art tutorials, and noticed their style of teaching is flawed (in my opinion), focusing on some things in too much detail, while leaving out things that I find extremely important, I've decided to fix that by writing a tutorial myself, that teaches newbies to pixel art in the way I find would be best. I am posting parts 1 and 2 right now, and I plan for the next week to add an additional lesson each night, for a week; therefore, I shall have 10 lessons total. Please add any input you have as I go along with these, once I'm done I'm probably going to put it up on a Pixel Art site somewhere

 

 

 

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.

 

 

Tile 1:

 

 

Tile 2:

 

 

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 April 29, 2012 by Ashbad

[MVC NVMXD JVRXD 2,406]

Cliffhanger? Nice tutorial.

[Ashbad 969]

Cliffhanger? Nice tutorial.

 

Thanks guys, and sorry I didn't post part three yesterday. I guess I can be somewhat redeemed since I posted two parts on a single day before that. Anyways, here's part three:

 

 

 

 

Part III -- The rough draft, beacon towards the future

 

 

Now that we have an understanding of colors, we can now move into the actual pixel art design process. For this part of the tutorial, I won't be teaching you "how to draw a human sprite", "how to draw an isometric tree", "how to draw a pony". I WILL be going over things like that later, but for now I'm just using a large sprite and showing the process of perfecting it to teach something more important -- technique. Perhaps you think that you just need to know how to shape a human, and from there you'll be fine. You're dead wrong. You can draw the best outline of a human made to date in raster art history, but if you color it all yellow, use think black outlines, make it look all blocky, you can guess what the outcome will be: absolute crap. I'll teach you things to keep in the back of your mind when you do learn later on how to draw certain subjects, so that your rough drafts won't stay rough.

 

That being said, we can move on and start with a very rough draft, black and white scribbles. What will I be using for my example? Ponies! Specifically, Pinkie Pie using Twlight Sparkle as a large magic machine gun, with her tail as the trigger. Hmm, you don't like ponies? Too bad, my tutorial, I'll use what I want. Feel free to find another tutorial if using ponies makes you too butthurt.

 

Here's a first rendition I scribbled into MS Paint with the pencil tool in a few minutes or so:

 

 

First thing you'll think about it is, "wow, it looks like the ponies and all are correct, but there's something about it that makes it look really messy." That's because there IS something messy about it! A really huge thing! The outline, as you see, isn't super clean. There's one thing that's incredibly important no matter the style of pixel art you're working with; all outlines need to be exactly one pixel thick, with no joints at curves. What do I mean at that? Sulu, raise magnification to 8x! (cue Sulu to say "raising bridge view magnification")

 

This is currently what the outline kind of looks like:

 

 

What we need to do is make that outline as thin as possible yet still a closed shape, while retaining how it generally looked before. Some consider it the most boring thing to do; personally, I don't care. I love making pixel art enough that my dream come true would be if I could do it as an actual full time job. I love all of it enough that even the more "tedious" parts are fun to me, it beats studying for subjects like Chemistry and English any day of the week

 

With all of the nuances picked off, this is ideally what it should look like (again, zoomed in):

 

 

Except of course, with the entire picture. Once you have the edges cleaned off, it's easier to add mid-level details (in this case, long eyelashes, extra outlines in hair for the highlights Twilight has, etc. that we couldn't cleanly do before). Jot in the details roughly, then clean them off as well. This is what we're currently up to:

 

 

Looking quite a lot better now, huh? Now that we have this done enough, we can add a touch of color! The colors required for this job are a bit easy to pick, because the ponies actually have given colors. Of course, it's up to us to pick them as close to their actual colors as possible. For the most part, I'm just using the paint can tool to fill in the shapes, since the outlines generally are in shapes that contain a single color (only exception is Twlight's highlights.)

 

 

It's starting to look half-decent now! But, we're actually not that far into the pixel art creation process. We haven't learned many techniques yet, and trust me, there's loads of them to still learn that we'll apply to this example. By the end, it should be glimmeringly beautiful.

 

Now, let us move onto part IV, where we'll start to learn about the concept of shading and managing light sources, and how we can use those techniques to give this large sprite a kick into the realistic world!

[Laydee Kaze 399]

This is honestly amazing.

 

I don't think I've been doing pixel art as long as you have, and I dived straight into the moving pony pixel bases in photoshop.

I just wanna say thanks for the tutorial so far, because I've already learnt alot in just the first post... I had no idea about the coloring stuff that you explained x3 I'll have to take that into consideration.

 

Cheers once again, and I really can't wait to read through this tutorial :3

[Ashbad 969]

This is honestly amazing.

 

I don't think I've been doing pixel art as long as you have, and I dived straight into the moving pony pixel bases in photoshop.

I just wanna say thanks for the tutorial so far, because I've already learnt alot in just the first post... I had no idea about the coloring stuff that you explained x3 I'll have to take that into consideration.

 

Cheers once again, and I really can't wait to read through this tutorial :3

 

Thanks! This is still only a small taste of what you'll get to learn, we shall make a master pixel artist out of you yet!

 

Part IV -- I see the light!

 

Now that we have a prelimary, colored in Pinkie + Twilight sprite, we can start applying some new, cool techniques to make it look better. For starters, while it does look like two ponies, they look completely flat and boring. We need to breath into it the illusion of dimension! In addition, we need to emphasize certain parts of the figure! Parts I'm thinking of are Twilight's forehead, pinkie's hair, and Twilight's underside.

 

But how are we going to be able to do this? The simple answer is, "shading". If you're into other forms of art, especially using crayons/pencils, you'll realize pretty quickly what I'm talking about. We use the illusion of shading to make it seem as if the object is getting hit by light in a 3D space, and is casting shadows as a result. This is definitely one of the most important techniques to learn, yet it's not terribly hard to master. What makes it difficult is that you have to stop thinking of the subject in a 2D sense, but rather in a 3D one. Here is what our example currently looks like:

How about we add some shading!

 

 

This type of shading is only half the big deal, since we're not casting light onto the subject; we're actually in a sense draining it. This is "shadow shading", which is step one of the shading process where we'll pretend that a light source is already present, and cast shadows accordingly. Here's a closeup of how shadowing would work:

 

 

As you can see, we used a slightly darker shade of the color being "shadowed" as the shadow color. Using something like grey, or dithering in a few black pixels generally looks awful. We use a darker color shade instead because a lack of light would mean that the color would stay the same, but wouldn't be as bright. Shadowing lets us accomplish what normal outlining wouldn't, so we can get some smaller details in there that a normal outline would make a mess of doing.

 

Now, onto the second part of shading, "glare shading", or as I call it, "glaring". It's the exact opposite of shadowing. Instead of casting shadows onto parts of objects, we actually add a small glare to the side of the object receiving the direct light. Generally these two forms of shading coexist very well, as long as you don't overdo on them. Usually, you'll have one a bit more dominant than the other; in this, we'll actually be using less glaring than shadowing:

 

 

Here's a closup of what I did with the glare in most places:

 

 

As you can see, in this sprite I decided to put more emphasis on the shadow instead of the glare, simply because I personally find shadow effects to be more expressive of body parts and adds more character. It's all personal preference, though testing it with both is always a good idea. In fact, sometimes you'll only have one or the other at a time on a sprite.

 

You may have also noticed that the wacky hair of Pinkie Pie is a bit different in the glaring style. Unlike the shadow, it's really thick, has neutral-colored pixels strewn throughout it, and has little extra clumps of glare all over the place. This uses the technique of "dithering" to give the hair a bit more character; essentially, we're trying to cast the list onto it so that the texture of the hair is more scraggly and wild looking:

 

 

Here's what it would look like without the dithering applied:

 

 

As you can see, it has a lot less character, and in fact makes the hair look very fake. It ruins the 3D effect, since the hair then has the same "apparent texture" (the texture of the material that the viewer perceives it as) as the skin of the ponies. As you can see, while dithering doesn't need to be used often, it's a technique you need to know. Basically, all dithering entails is making a pattern of two colors by mixing pixel of each color together in some sort of pattern. It's used a lot in low-color palettes, but also in high-color ones as well to avoid a "gradient effect", which can be ugly (basically, instead of dithering, you use tons of shades of colors between the two colors you want to interweave.)

 

Now that we know that, we can move onto outlining and related topics in Part V!

[StarStep 42]

Thanks for making this. Though I knew the basics of dithering, I never knew that exact technique to get the hair looking so awesome.

 

Also glad you mentioned the color palate as well since it seems to be one of the most noticeable mistakes I see made when people sprite their OC's

 

Well keep up the good work and I can't wait to see what tidbits I can pick up from your next part.

[Ashbad 969]

Thanks for making this. Though I knew the basics of dithering, I never knew that exact technique to get the hair looking so awesome.

 

Also glad you mentioned the color palate as well since it seems to be one of the most noticeable mistakes I see made when people sprite their OC's

 

Well keep up the good work and I can't wait to see what tidbits I can pick up from your next part.

 

Thanks! This next part isn't as big as the other ones, since it's a controversial topic (the topic of why pure-black outlines are bad), so I'm covering over it lightly now and then dedicating a whole lesson to different styles of outlining.

 

 

Part V -- On the Border

 

 

This part of the tutorial will be short, since I'll be explaining the different styles of how to do outlining in a later installment.

 

One of the most important parts of pixel art besides shading and coloring is proper outlining. If your pixel art does not have a good outline around it, it won't look nearly as good as it could be with one. Since this section can be a bit arguable, I'm going to teach it using the style of outlining I usually use, which I call "Selective Containment Outlining", or "SCO" (not to be confused with the other SCO, tech guys.) The reason I call it this is because this style of outlining goes for the purpose of making all outlines non-black, giving them glare/shadow, and making them the same species of color as the color they contain. It's not a terribly great style for detailed video game sprites, but it's wonderful for static or animated sprites that aren't being rendered over other sprites or a background. Plus, I think it looks good.

 

Here's what our sprite looks like right now, without any SCO:

 

 

Here's it with SCO:

 

 

Basically, SCO provides a bit more color to the whole image. It creates a feeling of "softness", which, when used correctly can really make a pixel art look a lot better than using black. Of course, this is just my style; I'm devious for being a pure-color phobe, meaning I don't like raw colors like saturated red, pure black, pure white, etc. I usually encourage newbies in pixel art to stick clear of them too, because if you use them and you don't know what you're doing, you're gonna have a bad time.

 

Again, I just needed to introduce this concept of outlining early on, we'll touch upon it in a huge amount of detail later; on to part VI, where we'll go over the concept of anti-aliasing!

[ScottishUnicorn 284]

Interesting read, I've done some pixel artwork before...but it sucks. Whatever though y'know, practice makes perfect. I'll read it rather than skim and take a shot at some pixel art.

[Ashbad 969]

Well, this tutorial is on hold for now, in fact, possibly forever. I've come to the conclusion that once you know your basic techniques, no pixel art tutorial can pound into your head what you need to become a better artist -- experience. My next lesson was going to be on anti-aliasing, but I'll just point you all to this great explanation here: http://www.natomic.com/hosted/marks/mpat/aa.html

 

Instead, I'll open this thread up to a new purpose. Share some pixel art you've got that you want me to critique! Any at all! I learn when I critique art and make it better, and of course you will too. I feel I've grown substantially better at pixel art in the past few days after looking through and studying over 2000 different pixel arts at high magnification.

 

Share them up, time to critique for both of our benefits!

Edited May 8, 2012 by Ashbad

[StarStep 42]

I was really looking forward to seeing what the intermediate tutorials would hold. While I agree that experience is the best teacher, being taught can help open you up to trying things a different way or to not make mistakes that others have made before you. I've made a decent amount of sprites this past year but I know there is tons I could learn. Seeing your techniques may make me conscious of things that I would never consider while just spriting away. Anyway thank you for the parts you did post and I hope you reconsider about the remaining parts.

 

Also I may put up some works in progress later this week for you to take a look at.

[Ashbad 969]

Also I may put up some works in progress later this week for you to take a look at.

 

I'd more than love to C+C and make edits to what you post

[AnonyPoni 564]

I played your Rainbowdash attack game on the Casio Prizm and really liked it. Did you make the Rainbowdash sprite the same way?