PIXEL ART

Purpose: This tutorial is designed to explain what pixel art is, what pixel art isn't, how to get started making pixel art and how to make your pixel art better. It is an attempt to consolidate the information scattered throughout the "noobtorials" thread and elsewhere. For more advanced information on what makes pixel art tick, the reader is advised to read the less general tutorials found elsewhere, as well as the http://www.wayofthepixel.net/pixelation/index.php?topic=8110.0 Ramblethread! found over at Pixelation, which offers a more in-depth analysis of pixel clusters, banding, and anti-aliasing, and is the source of much of the information found in this tutorial.

Table of contents: - - II. Where do I start? 1. Tips 2. Programs 3. File type 4. Beginning the image - - IV. Things to avoid 1. Bad AA 2. Jaggies 3. Bad dithering 4. Banding 5. Pillow-shading 6. Noise 7. Sel-out

I. What is Pixel art? Judging by the name, we might assume that pixel art is any art that's made up of pixels. But not every digital image is pixel art. This photograph is made from pixels, but is not pixel art:

Alright, so no photographs. But if I make my art on the computer, then it's pixel art, right? No. Pixel art is a very specific sub-category of digital art. It isn't what it's made of so much as how it's made. For example, this digital painting is art made on the computer, and it is made of pixels, but it is not pixel art:

If the pixel art loses the sense of the importance of the pixels which construct it, then I don't think it can be called pixel art. It is when the pixels hold importance to the nature of the work which defines it as pixelart. - Alex HW

Why not all digital art is pixel art Pixel art is set apart from other digital art forms by its focus on control and precision. The artist has to be in control of the image at the level of the single pixel, and every pixel should be purposefully placed.

When pixel art is done purposefully, offsetting just a few pixels can have a dramatic effect on the image:

The features of this parrot change drastically, but only a few pixels are different.

Other digital art forms use many tools you won't find in pixel art. The reason pixel artists don't use these tools is because they place pixels in a manner that the artist can't predict. These automatic tools blur, smudge, smear or blend the pixels. Any tool that places pixels automatically (which means the computer makes decisions about the placement of pixels rather than the artist), is generally frowned upon in pixel art. Remember, pixel art is all about control.

An automatic tool has been used to blur the edges of this grey blob

You'll often hear people complaining "This isn't pixel art, it has too many colors!" This isn't because there's some unwritten rule in pixel art that says "It's only pixel art if it has [X] number of colors", you're allowed to use as many colors as you want. The main reason that people complain about color count is that a high amount of colors can indicate the use of dirty tools. Dirty tools create a lot of new colors in order to achieve their blurring, smudging, or transparency effects. People also mention high color counts because larger palettes are more difficult to control, but we'll get to that later.

Why it's not just about the tools So if I don't use any blur effects or filters or fancy tools, it's pixel art, right? Anything made in MS Paint will be pixel art? No. It's not the program that determines whether or not it's pixel art, it's how it is made. For example, this image was made in MS Paint, without any fancy tools:

But it isn't pixel art. This is what we call oekaki. If you can create the image without zooming in, chances are it isn't pixel art. If you're using the line tool and flood-fill most of the time, you're not paying attention to the individual pixels, just the lines and shapes that the pixels make up. The same goes for rough sketches made with the pencil or brush tools. These methods ignore the importance of careful, deliberate placement of the individual pixels. While the most common misconceptions about pixel art are due to too loose of an interpretation of the medium, there are some who have too strict a definition of what makes pixel art. Every pixel does not literally need to be placed by hand The job of the pixel artist is not to manually place each and every pixel. You aren't expected to behave like a robot, filling in large areas with thousands of single-clicks of the pencil tool. Thebucket tool is fine. The line tool is fine. What's important is that the artist has control of the image at the level of the single pixel, not that you create the image one pixel at a time.

II. Where do I start? Pixel art is about the pixels- that's as simple as it gets. These tips share a common goal: to make sure your focus is on the pixels. Start small- The larger the image you're trying to make, the more time and work it's going to take to complete it. Don't make this tough on yourself, use a small canvas. Pixel art can convey a lot of information for its size, you'd be surprised how little room you need if you control the pixels properly. Use a limited palette- If you can't make a good sprite in 4 colors, using 40 colors isn't going to help. Using a small palette is especially good for beginners because it forces you to focus on pixel placement and the relationships between groups of pixels. The original, 4-color GameBoy palette is a good choice for beginners, as you'll only have to worry about value, and not hue or saturation. Programs There are plenty of good programs out there for pixel art, many of which are free. I use Grafx2, but GraphicsGale, Pro Motion, Photoshop, Pixen, and MS Paint are all common choices. Some are more user friendly than others, which is why I choose something with keyboard shortcuts like Grafx2 over MS Paint, it has saved me many trips to the toolbar (and makes for much easier palette management). File type A common mistake that new pixel artists make is saving their art as a JPEG/JPG. While this file type might be fine for other types of images, it causes compression, which destroys the quality of a piece of pixel art.

Never, ever save as JPG. Instead, save as PNG or GIF. Be careful though, as some programs (such as MS Paint) don't properly support the GIF format, and will ruin your image. In these instances, you'll need a file converter (such as Giffy) if you want to save your image as a GIF. But how do I start the image? It's completely up to you. Some artists prefer to create the line art first, then go in and add color:

Other artist prefer to 'block-in' the major forms with a larger brush, then continue by refining the image until it has a pixel-level polish:

Both methods are fine, it all depends on what you're comfortable with, or the specifics of the project. Line work might be a good method if you're tracing a scanned image (such was the case for the sea monster example above). If you're beginning the image in your pixelling program, and it isn't a tiny sprite, blocking in the forms with a larger brush may prove more useful.

III. Terms to know Anti-aliasing (AA): [In addition to the information found in this section, check out

Anti-aliasing is the method of making jagged edges look smooth. You may be familiar with anti-aliasing already, because a lot of programs and tools do this automatically. When we're talking about pixel art, however, anti-aliasing means manual anti-aliasing. Manual AA means smoothing the jagged areas by hand-placing pixels of a different color to ease the transition. Here's an example:

without AA

with AA added

There are several pitfalls often encountered when applying anti-aliasing, which are discussed in the "Things to avoid" section.

Dithering:

Dithering consists of different patterns of pixels. It's typically used to ease the transition between two colors, without adding any new colors to the palette. It's also used for creating texture. In the days of CRT monitors, dithering was especially useful as the screen would actually blur the dithered area and obscure the pattern. Now that crisp LCD monitors are the norm, the patterns are no longer as easy to hide, meaning dithering is not as versatile as it once was. Even so, dithering still has its uses. The most common form of dithering you'll see is a 50/50 dither, also known as a 50% dither or a checkerboard pattern.

As shown in the example above, you can create various other patterns to further buffer between a full color and a 50% dithering pattern. These patterns are often easier to spot than a 50% dither though, so be careful! Stylized dithering is another technique, and is characterized by the addition of small shapes in the pattern.

Interlaced dithering allows for two dither regions to hug each other. It is called interlaced dithering because the two dithers weave together at the borders. This type of dithering allows you to blend dithers together to form gradients.

Random dithering is a less-common form of dithering, and isn't generally advised, as it adds a lot of single-pixel noise to the image. While it has some usage in very small doses, random dithering is something you'll often want to avoid.

As useful as dithering is, it's often misused by inexperienced artists. Bad dithering is discussed further in the Things to avoid section.

Pixel Clusters: The cluster of pixels is made from single pixels. However, a single pixel is most of the time near-useless and meaningless if not touching pixels of the same color. The pixel artist is concerned with the shapes that occur when pixels of similar color touch each other and convey an opaque, flat, shape. Most of the defeats and possible triumphs of pixel art occur in that exact moment where the artist makes a cluster of pixels. - Pixel Clusters Let's look at this sprite from a NES game from 1992, Little Samson:

In the loop I show the clusters that make up his face, headband and hair. A cluster of pixels of the same color here, exactly because the NES could allow only 3 colors (plus one for transparency) for the sprite, becomes extremely important. The headband is just one, the hair is just one, the shape of the face is one. The eye is one, and the other eye is another. This is a very pure example. If we change a single pixel of these important clusters, what they signify changes, along with their relationship with the clusters around them. Here's what happens when we move a single pixel around on each frame in various places. Note how the balances and relationships between elements change

NES art is a very useful step in learning to do pixel art because it forces the beginner pixel artist to realize the power of pixel clusters and finding ideal shapes for them to work in unison to convey the intended characterization, without getting bogged down in dozens of colors and a huge resolution. Let's look at something a bit more complicated:

This is a piece by the lovely Kenneth Fejer. You can see his work here. Let's look at a detail of the piece up close:

The cluster of pixels outlined in red is where we aim our attention. Around it there is another color tone that is halfway between the bright green and the dark green. Single pixels smooth out the pixel cluster we're looking at. That is called buffering or manual anti-aliasing. I will not go into detail as to what antialiasing is here, more capable artists/german-aamachines are working on texts to fulfill this purpose. Let's for now assume you are well aware of how anti-aliasing works. The reason I am showing you this piece in particular is because if you look at the buffer shade there between the two main colors, you'd think 'well... these pixels aren't a pixel cluster, are they'. They do not touch, they are - mostly single pixels, so what are they exactly? They are part of the meta-cluster that they are buffering towards, or from. For reasons of simplicity, it is best to think of them as always belonging to the smaller cluster that is touching the bigger cluster, but this doesn't really matter in applicative terms. Once the artist realizes that the anti-aliasing around a cluster is nothing more than part of that cluster and its main purpose is to define that shape better, they stand to expel a lot of the anxiety and confusion that usually occurs to the beginner when they're faced with the near-infinite options of pixel placement that are available when they start a new piece. The artist can stop concerning themselves with just placing single pixels willy-nilly and replacing them and rearranging them by trial and error "until something looks right" and can instead apply a functional, progressive way in which to build their art. Pixel clusters are the tool that the pixel artist uses to convey 99% of the render of their object, not pixels themselves. The beginning artist should start a piece with a single pixel cluster shaped as the silluette of what they're trying to convey. Let's say, for example that I want to draw a face.

This is what I start with. Then the silhouette should be segmented to temporary planes. The experienced artist, once comfortable with visualizing his model might not have to do this stage and go directly to the next one, but for the purposes of this tutorial I'll go ahead and do it:

This is more or less a simplified 3d wireframe, with the planes of the face. This isn't lit yet, it just shows me a selection of shapes from which on the very next step I shall pick to make my pixel clusters. Naturally the smaller the piece the more difficult to actually pixel this stage, but it's not difficult to imagine it, and the artist should always imagine the factual planes of what they're attempting to render.

This is really the most important level in establishing ones pixel clusters. I have chosen a light-source and lit some of the planes. They have created pixel clusters of different colors that are competing in the small space for definition and information. Please note that I have not anti-aliased consciously, nor have I removed much of the apparent banding yet. If your pixel art doesn't look solid in this stage, no amount of pixel polish and tricks later on will save it. This is where your traditional skills come into play. Note also that the palette I'm using isn't very contrasted yet, this doesn't matter. If you light the planes correctly, you can then adjust the contrast as much as you want the the piece will still stand. Here for example is a drastic contrast adjustment via fast remapping:

"The horror... The horror." Look at the planes in this stage before we move on. Isn't it easy to tell where buffering should be applied? It's a matter of common sense. The sharper the edge, the less anti-alias needed. The smoother the transition, the more anti-aliasing will be needed. The buffer pixels should never overpower the cluster they belong to.

Here I have refined and antialiased the clusters into metaclusters. Keep in mind that Antialiasing can create banding! Look below:

If the buffering pixels line up with an edge below they will band. This is an extremely common error with anti-alias-happy artists and they can spot that something looks 'off' but can't put their finger on what it is exactly. Well, now you know. This is where a pixel artist expert in anti-aliasing shows their true skill. This is the thick of the fray, as it were. Adjusting single buffer pixels until they don't band, but yet represent the intended shapes.

Here I do more and introduce dithering. Not a lot of it is needed in most pieces of pixel art. Dithering isn't a mystery of any sort, think of it as the tapered, fading edge of a brush stroke... the dither belongs to a parent cluster. The places where one needs to dither following this methodology are self-evident, it's where I didn't have enough colors to make a transition smoother. Again this creates banding (dither-aa-clash) and it renegotiates some unclaimed space from the flat pixel clusters. Solving these problems elegantly is what pixel artistry is about.

Though color is beyond the scope of this tutorial, here's the final piece with a palette. It's very easy to colorize a solid grayscale construction. Then bits of banding around the outline were removed and a final refinement and it's done. - Ramblethread

I stress the importance of placing individual pixels, but these are rarely independent pixels. A single pixel, isolated, is a speck on a screen- it’s noise. But pixels aren’t usually found alone, instead they exist as part of pixel clustersgroups of pixels of the same color that together produce a solid color field. While the single pixel is our basic building block and smallest unit, the pixel cluster is the unit on which much of our decisions about pixel-placement will be based. And while it’s important to realize individual pixels aren’t independent, it’s just as important to realize pixel clusters aren’t independent. Like puzzle pieces, the borders of a pixel cluster determine the shape of the pixel clusters it borders. Here is an example of how rearranging the shape of a pixel cluster can have dramatic effects on its neighbor clusters:

While lone pixels often read as noise, a lone pixel of a color different than the field it touches, if used as a buffer (AA), reads as part of that cluster, and is thus unproblematic:

IV. Things to avoid Bad AA: Too much AA (over-anti-aliasing)- You only want to use as much AA as is necessary to smooth the edge. If you use too much, the edges can look blurry, and you lose the crispness of the line.

Too little AA- Here the artist has used single pixels to ease the transition, but he has only succeeded in blunting the jagged edge a bit. He could have made a much smoother transition by using longer lines of pixels to show a more gradual transition:

AA banding- When segments of AA line up with the lines they're buffering, AA banding occurs. For a better understanding of AA banding, be sure to read the section on banding.

Jaggies:

Jaggies occur when a pixel or group of pixels are out of place, interrupting the flow of a line. Jaggies can also occur when a line lacks anti-aliasing. Jaggies get their name from the jagged lines that they create. More broadly, jaggies are the result of any bad pixel technique, but they are most often discussed in reference to line work, so that is the context in which they will be discussed here. How to fix jaggies: Changing the length of the lines

often times the problem is just that a segment of the line is too short or too long, and it creates an awkward jump. Using a more uniform length of pixels to smooth the transition is the solution here. Anti-aliasing Unless your line is perfectly horizontal, perfectly vertical, or at 45 degrees, the edges of your line segments are naturally going to be a little jagged.

This is because the square nature of the pixel and the grid pattern we're restricted to makes angled lines and curves difficult to portray. AA is the correct countermeasure in these situations.

Bad dithering: There are several common ways dithering is misused. The most common mistake is simply using too much dithering. If dithering is covering half your sprite, it'd probably just be better if you added a new color to the palette. Dithering should ideally be used to taper the ends and edges of an opaque field of pixels. When too much dithering is used, the dithered area turns into a field itself:

At this point dithering is no longer serving as a buffer between colors, but creating unwanted texture. Creating texture can be a useful aspect of dithering, but only when used correctly. If you're trying to buffer and are instead adding texture, then dithering isn't working out.

So how much dithering should you use? Well, it depends on how big your palette is really- or more precisely, the contrast between the two colors you're trying to dither with. The lower the contrast is between the two (in hue or in value), the less harsh the dithering will be:

Banding: Banding, most simply, is when pixels line up. When neighbor pixels end at the same x or y coordinate on the underlying grid, the grid immediately becomes more evident, the pixels are exposed, and the apparent resolution becomes less fine. Here are several instances of banding, all of which occur because the pixels have lined up. These names aren't common lingo, but will work for the purposes of this tutorial: Hugging: Here an opaque field of color has been outlined by a row of pixels. It's fine to use outlines, but make sure the outline and the shape it contains don't line up and reveal the grid.

Fat pixels:

Fat pixels can occur alone in small squares, together as fat lines, or multiplied as large bands (staircase banding). Skip-one banding:

Even if there is a negative space between two bands, the mind will fill in the gap and banding will remain.

45 degree banding:

Though the rows of pixels lining up are only 1 pixel thick, banding is still present.

Pillow-shading: Shading by surrounding a central area with increasingly darker bands. Pillowshading is bad because it pays no attention to the light source, and conforms to the shape of the area rather than the form it represents of how light affects it. Pillow shading is often, but not always, combined with banding. The way to fix pillowshading is simply to pay attention to the direction light is coming from:

The reason pillow-shading is wrong is not because the light source is frontal (from the viewer's direction). You don't have to place the light source in the corner. The reason pillow-shading is incorrect is because it follows flat shapes rather than focuses on how the three-dimensional forms are lit. So, it is possible to use a frontal light source, so long as you pay attention to the forms:

Noise: Much of the time, independent pixels (pixels that do not belong to a pixel cluster) are unable to convey sufficient information by themselves, and their inclusion usually only creates noise. Noiseis any sort of information that does not contribute to the piece and serves only to interrupt the area it inhabits and distract the viewer. In pixel art, noise is often composed of independent pixels. For the purposes of this tutorial, single-pixel noise will be what I’m referring to when I use the term “noise”. The reason one must be careful when using a 25% dither (or any dithering, really) is because of the noise all the independent pixels create. Single pixels expose the underlying grid by revealing the resolution of the image. Remember, in the wild, pixels travel in packs. It’s the nature of a pixel to long for a place in a pixel cluster. For this reason, independent pixels should only be used for very specific and purposeful reasons. Justifiable instances of independent pixels include: Use as specular highlights Independent details call a lot of attention to themselves, but sometimes this is precisely what you want. For bright specular highlights, single pixels will often work just fine. For an example, see the white pixel used on the monster's nose below. Portraying small but essential details

Usually this will only matter for details on very small images, like the eyes on a small sprite, or the beak of a tiny bird. Or stars, or little bubbles.

Sel-out (broken outlines) Sel-out (short for selective outlining, also known as broken outlines) is antialiasing an outline to a background color. This means sel-out is really a type of bad AA, but the term has become popular enough to warrant its own section.

The idea is usually to darken the outline at the contours to approach a darker color, so that the sprite will read well on any background, instead of melting into a similarly-colored background. Sel-out is not shading an outline according to a light source. A full outline with light variation won’t create jaggies as badly as a broken outline will:

Perhaps this is a simpler example. The half-circle on the left is shaded according to a light source (again, coming from the top left corner). The top of the half-circle on the right has sel-out applied:

Sel-out works if it is created for specific scenarios, such as in a game where you know the background will be consistently dark.

V. Creating a palette: When should I worry about colors? Well essentially what it comes down to is, what colors does the piece need to have? then, as I go, how far can I get with those (until of course I need to add more shades). That's when the mixing occurs. -Adarias This is a common method of creating a palette for a piece. Here's an example of what he's talking about:

As the piece gets more complex, it becomes necessary to create additional colors to achieve more advanced shading, or to color new image elements or details. Another method is to create the piece in shades of grey, then add color later. This is possible because relative value is a greater concern than hue, because hue can be more easily altered later on, after value relationships have been established.

Personally I find it easier to keep up with colors as the piece progresses, so I prefer the first method.

Color count You may find that pixel artists often advocate a low color count. You might assume that this is just a tradition leftover from the olden days of pixel art, back when video game consoles could only display a certain amount of colors.

If modern computers can easily display hundreds of colors, why shouldn't you use them all? In truth, using small palettes isn't an outdated tradition of pixel art, and there are very logical reasons behind this practice. Cohesion- When you're using less colors, the same colors will reappear throughout the piece more frequently. Since the different areas of the work share the same colors, the palette ties the piece together, unifying the work. Control- The smaller the palette, the easier it is to manage. You may, and probably will, want to change adjust a color later on. If you've got 200 colors, it's going to take you a lot longer to make the adjustments, because by changing one color you've thrown off its relationship with the colors neighboring it on its color ramps, and adjusting them means changing the relationships between those colors and their neighbors! You can see how this quickly adds up to a lot of work. With a smaller palette, the effect of changing a single color is more substantial, and there are less micro-relationships to worry about.

Hue, Saturation, and Luminescence Hue:

Hue refers to the identity of a color. Whether a color is defined as blue, red, orange, etc. depends on its hue:

In the above picture, hue is represented along the x-axis.

Just as you can change how bright or dark a color appears by surrounding it with lighter or darker pixels, the perceived hue of a color depends on its environment. Here we have a completely neutral, medium grey:

In this picture the green in the trees is actually not green at all, but the same grey as the previous picture:

Because the background is so purple, the grey looks greener than it actually is. Hue will be an important concept later when we discuss hue shifting.

Saturation:

Saturation is the intensity of a color. The lower the saturation of a color, the closer the color gets to grey:

The most common problem new artists encounter is regards to saturation is using colors with too high of a saturation. When this happens, the colors start to burn the eyes. This can be a problem in any media, but because the colors in pixel art are made up of light, instead of pigment as in paint, the potential for colors being too bright or irritating is much

higher. Notice how the colors in the second image are much easier on the eyes:

Luminescence (brightness):

Luminescence (also known as brightness or value) is how dark or light a color is. The higher the luminescence, the closer the color gets to white. If the luminescence is 0, then the color is black. Here's a palette arranged as a luminescence scale for you visual learners:

low luminescence (darker colors) on the left, high luminescence (brighter colors) on the right

In a given palette, you'll want to have a wide range of values. If you only have colors in the same range of luminescence, then you won't be able to create good contrast- a full range of values allows you to use highlights, mid-tones, and shadows. The difference between the brightness of two colors is known as contrast. A common problem newer artists exhibit is not having enough contrast. Here's an example of an image for which the contrast is too low:

And that same image, adjusted so the values are spread out more evenly from light to dark:

The value of a color is a set number, but colors can appear lighter or darker depending on their background. For this reason, you won't always want to use your brightest color for every highlight. A color that makes a good highlight on one object might be too bright to use on a darker object. Luminescence is especially relevant to pixel art: The brightness of a pixel or line determines how thick it appears:

The first example is a simple black line. The width of the line looks consistent. Below that is a line with pixels that vary in brightness. Notice how the line appears thinner toward the center at 1x.

Color Ramps A color ramp is a group of colors that can be used together, arranged according to luminosity. A palette can consist of a single ramp of many different ramps. Here's a palette:

And here's that same palette, arranged according to its color ramps (of which there are two):

It isn’t necessary that you actually create a model like the one above (though some artists find it useful). What is important is that you understand what your color relationships arethat is, what your ramps are. It isn't necessary that a color be restricted to a single ramp. Often, ramps will share colors. Frequently, the darkest or lightest color will belong to most or all of the palette's ramps, as in the example above, in which both ramps share the same darkest and lightest shades. It’s also possible for mid-tones to work in multiple ramps. In these cases, the versatile color takes the place of two or more separate colors, aiding in palette conservation. In the case of multi-ramp shadows and highlights, the extremes in luminescence allow the color to be flexible (because they approach black or white). Since mid-tones are not afforded this advantage, they are often more neutral colors, meaning they are closer to brown or grey. Here is a palette that uses one shade of grey to bridge the gaps in several ramps:

You also have to be careful about having colors in a ramp that don't fit. If a color doesn't belong in the ramp, then it has the potential of punching through the image, which is a priority issue in which the color, rather than work as part of the image, seems separate from it, and looks almost like it is sitting on top of the image. This is usually due to the saturation being too high, or because the hue clashes with the neighboring hues, and thus creates eyeburn.

The above image shows eyeburn created by a color with too much saturation.

...and in this image, eyeburn is created by the green clashing with the purple. The hue should logically follow its neighbors in the ramp.

Hue shifting Hue-shifting refers to having a transition of hues in a color ramp. A color ramp without hue-shifting is known as a straight ramp. In straight ramps, only the luminescence changes, while in hue-shifted ramps both hue and luminescence will (usually) change.

The first color ramp is a straight green ramp. The second image is a green ramp with hueshifting applied. When using hue shifting, bend your highlights toward a certain color (yellow, in the example above), and move the darker colors toward a second color (I chose blue in the above example). Hue-shifting is used because straight ramps are usually boring and don't reflect the variety of hues we see in reality, and hue shifting can add subtle color contrast within a ramp.

Thinking in Color I spend a lot of time on a number of RPG Maker forums and a lot of that time is spent giving people feedback on their sprites. The most common criticism of mine has become something of a catchphrase and could even be thought of as a thesis to this entire tutorial series: your colors need more contrast. Color choice makes or breaks a sprite. Colors—and the contrast between them—are the basis of every sprite. That’s exactly what pixels are: little blocks of color. Spriting isn’t like sketching or coloring in the lines; it’s about putting colors in the right places to create the illusion of form. I’ve seen a lot of tutorials that talk at length about lines and technique and shading and blah blah blah but pay very little attention to the absolute most important part of pixel art: color, and everything that comes with it. Take a look at this sprite—it was posted in a critique thread on HBGames.org by a member named Norton.

Structurally, it’s not bad at all. It’s based on a character from Mass Effect and that’s immediately obvious—and I’ve never even played the game, so job well done there. On the other hand, the colors are very flat because they lack significant contrast. (Update: I have now played the Mass Effect games, and I love them.)

This is what I did with it—I changed very little of the sprite itself, but the updated colors make a huge difference. It pops—it looks like it has real depth to it. It’s the colors that bring a sprite to life.

Color Words Worth Knowing While there are more than enough resources online that go over the following terms and concepts, I might as well write up my own. Note that most of the time these words really don’t factor into pixel art—or rather; they do, but knowing the exact terminology isn’t really necessary. The biggest one to think about when it comes to spriting is contrast, and I’m going to be devoting a whole section to that soon enough. But it’s still useful to have an understanding of these basic color concepts. Color The word “color” is really vague. When light is reflected off of any surface, your eyes recognize the color. From an early age, we learn that “red”, “blue”, and “yellow” are colors. Today, lots of people think of colors as “#FF0033”, “#003399”, or “#FFFF00”. But simply put, a “color” is a chunk of visual information that encompasses all of the following definitions. Hue When little kids are taught their colors, they’re really being taught hues. Hues are easy: red, blue, green, etc. A color’s name is generally referring to its hue. It’s possible to think about hues as categories of colors. Take a look:

This line of colors all share the same hue: green.

These colors, on the other hand, provide a range of different hues.

Brightness/Luminosity/Value On a technical level, these terms have slightly different meanings (so slight that it’s not really worth caring about; it has do with the mathematics of making colors, but on a practical level they have the same function). The brightness of a color is just that: whether it’s bright or dark. A color’s proximity to either white or black determines its brightness.

Pretty much explains itself, right? Saturation A color’s saturation is very similar to its brightness, but instead of light versus dark, saturation is strong versus weak. A color with high saturation will really pop, while a color with low saturation will seem faded. For example, a highly-saturated blue will shout “I’m blue!” but the same blue with a low saturation would mope “I’m feeling a bit blue today”.

These three blues have the same hue and brightness, but drastically different levels of saturation. The left-most color is so desaturated that it’s almost gray. Trainer Tips! A lot of people go overboard when it comes to saturation—in either direction. While a desaturated sepia-style color scheme can be really appealing, if it isn’t used properly it can kill readability and make the entire piece look flat. On the other hand, if something is too saturated it can literally be painful to look at. Keep a nice balance and remember that contrast is key. Contrast This one’s my favorite, because when it comes to pixel art, everything is about contrast. While the definitions above can be applied to a single color, contrast can’t exist without two or more colors. Contrast is the difference between colors. Colors can have contrast among their hue, brightness, saturation, or all of the above. The important thing to remember is that colors with high contrast really stand out from each other while colors with low contrast will blur together.

The contrast between the blue and the yellow is really high so it looks sharp, but the lower contrast between the yellow and tan makes for a smoother transition. In pixel art, I would say that contrast is one of the most important of these terms. So much, in fact, that the next article is all about contrast.

It’s time to talk a little more in-depth about my buddy contrast. Yup, we’re going to have a whole section on contrast. It might seem a little boring, but pay attention: everything else in this tutorial series is going to hinge off of the concept that I present to you here. I say that I want to get you to think in terms of color and contrast— what does that mean? When you’re creating a sprite, you have a limited amount of colors to work with (these days, you might not have a limit on a technical level, but for the sake of consistency you want to conserve colors where you can. this is why people create palettes, which I’ll be covering soon). You also have limited space—extremely limited. The entire purpose of pixel art is to create small images (typically sprites and tiles for games with tiny resolutions). Small enough that each and every pixel—that means each and every color—will affect the look of the piece. The goal of a great pixel artist is to get the most out of each individual pixel. This is achieved by using the right color on the right pixel—that’s easy enough to grasp. But more importantly, every pixel needs to work for the image as a whole. When you’re working on a sprite, you want to zoom out constantly (or, if your art program of choice allows, have a little preview window that shows what the sprite looks like at 100% or 200%). Keep the big picture in mind—and a great trick to making sure it all works together is to look at the invisible space between the pixels. When two colors are directly next to each other, the human eye naturally builds a bridge between them: it creates an invisible color that isn’t seen or even processed consciously. That’s how contrast exists in the first place; in fact I would argue that contrast itself is an invisible color. And that’s the key to this section, and the big idea for you to take away from this section: contrast itself is an extra color.

Here’s a visual: imagine that each pixel is a brick. The lines between them are visible, but are formed by the contrast between the pixels. Trainer Tips! The idea of representing the colors between pixels—when applied to animation—is a pretty advanced technique known as subpixeling. But for the time being put that our of your mind: this is about getting the most out of your colors by using contrast.

The yellow on the end has two functions: it’s the brightest red as well as the brightest green. The only reason that this works is because of the contrast with the color that it’s next to. The contrast between the yellow and the mid-red is very close to the contrast between the yellow and the mid-green. When the yellow is placed next to the green, the eye creates a bridge between the two colors that allows the yellow to function as a green itself (in other words, the yellow takes on an invisible green hue). Likewise, it becomes red when next to the other reds. Let’s take a look at how this works in practice. Here are a couple of sprites.

Aren’t they adorable? The same yellow is used on both of them, but on the boy it functions as the brightest color in the skin tone. On the frog, it completes the green as a highlight and also works as a light color for the belly. Now to drive the point home, we need to take it further. Look what happens when we put that same yellow right up against the red or green without the middle tone as a buffer.

The contrast between the yellow and the other colors is much greater than it was when the yellow brushed up against the middle color. The eyes don’t have an easy time making a natural bridge between the colors, and as a result the colors stand on their own.

The contrast between Link’s hair and his hat is much sharper without the lighter green color as a buffer—notice that the green is still used as a highlight on the top of his head but isn’t touching the yellow. So what’s the lesson of this section? I’ve got to repeat it again: the contrast between colors becomes a color itself. I know that I haven’t gotten much into implementing the idea yet: like I said before, the purpose of this was to get you thinking and seeing your pixels as more than the bricks, but the stuff between them too.

While we’re at it, notice that the skin of his face is the same color as the middle tome that we used above between blend the red and yellow. But because it’s used in a big flat area, the contrast between it and the yellow is sharper than it was before—an idea that leads very nicely into the next section.

Using and Choosing colors

Before I dive into the creation of color palettes, I want to explain how to maximize each color, to get the most out of every color in your palette. Here’s an example color ramp:

Nothing about it seems particularly special. But notice that some of the colors are arranged in very thin bands while others are in larger blocks. I’ve arranged it this way to show how some colors are used as larger colors (“cluster” colors, to be used as a base shade for a surface), while others are in-betweens (“buffer” colors, to help blend the clusters together). What happens if we change the ratios a little bit?

This ramp uses the same colors, but as a whole it looks lighter because of the way the colors are used—the relative amounts of each color are different, the clusters and buffers have been reversed. The result is a shift in the entire ramp’s saturation and brightness. The contrast, however, stays at at the same level of pleasant readability. What’s the point of this example? To show that you can push your colors to work for you, rather than be confined by them. I’ve seen a lot of people trap themselves in with their palettes because they were too afraid to push their colors. It leads to another point of contrast—one that you will constantly be using as a good pixel artist: a color looks different depending on the colors around it, and how much of those colors are used. Trainer Tips! Why conserve colors? In the old days, hardware was a lot simpler and games had very specific limits about how many colors they could use. Getting the most out of each color was perhaps the most important aspect of pixel art back then, and the idea has carried over to today. Modern games don’t have those kinds of limits, but it’s still good practice to keep your palettes as small as possible. Not only is it much easier to manage your art’s colors with a tighter palette, but it will create visual consistency that will hold everything together. So it’s time to make a palette. There are a lot of ways to go about choosing your colors. A lot of people will try to hammer out a “definitive” palette before they even start working—I’m

guilty of that myself. It’s not the best approach, though. The best palettes are tweaked as they are being used. Don’t feel the need to trap yourself into something. But where to start? Usually with some basic color ramps. A color ramp is a grouping of colors that give you a range of shades to work with, usually arranged from darkest to brightest. This is a color ramp:

It’s not a particularly good one, though. It’s what we call a “straight ramp”—because it goes straight from dark to light. In other words, the only thing that changes is the brightness or luminosity, but not the hue or saturation. In a good ramp, the hue will change—because that’s how light works in real life.

In this example, the darkest shade hints towards a purple or red hue, while the lightest shade is green (on its way towards yellow). As long as the colors in the middle are recognizable, the overall huge of the ramp will be preserved. And don’t forget to always keep contrast in mind. This is called hue-shifting. Trainer Tips! Typically, darker shades will have less saturation and be skewed towards blue or purple, while lighter shades will be more saturated and skewed towards yellow. But while that’s a good starting point, don’t feel the need to confine yourself to those rules. Once you’re comfortable with making strong color ramps, be adventurous! A color palette is a collection of your color ramps, and its what you would use to keep your colors organized. There are lots to talk about with palettes, so I’m going to start by showing you an example of what not to do.

I see this a lot. And when I say “a lot”, I mean I see this constantly. Everywhere. It seems to be the first thing a new pixel artist will make when trying to come up with their own colors.

So why is it bad? Aside from the immediate problem that the ramps are “straight ramps”. The big problem is that this isn’t a unified palette, but a collection of individual ramps. It doesn’t appear to be created with the big picture in mind—each color was built individually, and as a result the palette has a disconnected feel. The reds were created darkest to lightest, and then the yellows, and then the greens, etc etc. There’s no overlap between the colors; they don’t mix together at all. This is how I build a palette:

Sure looks different, doesn’t it? When I create a color palette, I’m not afraid to make a mess. I treat it like a real painter’s palette (remember that pixel art is much closer to painting than drawing). The idea is in the unity of the colors. Each ramp branches away from the same darkest shade and eventually reach the same lightest shade (notice that the light yellows in the opposite corners are in fact the same color). As a result, the entire palette is cohesive. I suggest that you take a similar approach—don’t feel the need to arrange your ramps into neat little lines just because you’ve seen them organized that way before. The colors need to flow into each other, so keep it organic. You can always rearrange them afterwards. Before we move on to the next section, here’s a scary evil alien:

The sprite on the left is made with the first palette (the bad one with the straight ramps). The obvious problem is that the saturation is way too bright—it’s an eyesore. More relevant, the blue and the green don’t mesh together very well at all—the contrast is so high that the

sprite doesn’t feel cohesive. At the same time, the contrast within the color ramps (particularly the green), is too low. The result is an awkward mess: the green areas look very flat, but the blue is so different that is stands out too much. The guy on the right uses colors from my more organic palette, and it’s obvious that the colors blend together in a natural way—if you look at his legs, you can see that the darkest shade of blue works overtime as the darkest shade of green. That should cover colors and palettes, at least the important stuff. In the next section we’ll start putting this into use and making some sprites from scratch.

If you’ve been following from the beginning, now you understand the importance of colors, and just how crucial contrast is. You’ve even developed a color palette of your own. It’s finally time to put that knowledge to use. We’re going to start off by covering the basics (more basics?): form and light. In my introduction, I stated that my goal with this series isn’t to create a “how-to” guide, but to help educate and train your mind so that you have the knowledge and skills to become a good pixel artist. The most aspect of that method of teaching is that it’s important to get you thinking about your pixels in the right way. So here’s something that’s important to remember: When you create something with pixel art, you want to thinkthree-dimensionally. This is true of any kind of art, not just pixel art. The trick to thinking three-dimensionally is in the approach. I’ve seen hundreds of pixel art tutorials and so many of them teach you a simple step-by-step process: make an outline, fill it in, then shade. In my opinion, that approach is absolutely incorrect. Sure—there are a lot of tremendous pixel artists (certainly some are better than me) who take the outline-first approach. But the important thing to take from this is the mindset—the way to think about your pixels and your art. So let’s dive right into it. Light Creates Form The key to thinking three-dimensionally is about thinking in terms of form rather than shapes. The world that we live in isn’t made up of shapes, it’s made up of forms. The difficulty in creating pixel art comes from rendering those three-dimensional forms on a twodimensional plane (the computer monitor). Fortunately, the human eye naturally looks for things in three-dimensional space, so it isn’t too difficult to create the illusion of depth. This is a shape:

And this is a form:

Simple, right? A shape is two-dimensional: it’s a line drawing on paper. A form is threedimensional and has depth. The difference between a square and a cube is that one is a shape and one is a form. That’s not a particularly hard concept to grasp. The next idea is important to keep in mind when representing forms: light. A form is only as good as the light source (or sources) that defines it. Lets look at some slimes:

Aren’t they adorable? :) Each slime has the same form—if you take away the lighting, all three of them use the exact same silhouette. I started these by creating the silhouette and let the light tell me how to color them and fill them out. You can clearly see the forms because of the light—the light creates depth, and depth is required for three-dimensional readability. Trainer Tips! Your light source is more than just direction—it affects your colors, too. When you spend more time working with colored light sources, you’ll be able to take advantage of colored highlights and shadows for a really cool effect. But for the time being, your palette should already be taking light into account— that’s why we talked about hue-shifting in the previous section when we chose our colors.

When you’re just starting out, I suggest that you use an arrow to indicate light source like in my example above. After you make a few sprites, keeping light source in mind should become second nature. That’s the purpose of this section of the tutorial: constantly thinking about every sprite you create in terms of its forms and light source will help you create sprites with more depth. Sculpting with Form What’s important to think about is how it will affect your art. Let’s look at it in a more practical example. I managed to dig up an old sprite that I made (around 2007).

I’m almost embarrassed putting this on the internet today. Why? It’s really flat—when I made this I paid little to no attention to thinking about the character in terms of threedimensional forms (and because the colors have pretty poor contrast and no hue-shifting, among other problems). When I made this sprite, I started with an outline of what I thought was a standard RPG character, and then filled it in. The problem was that I wasn’t thinking about how an actual human would be rendered in three dimensions: instead of thinking about the individual forms that make up a human, I was thinking about coloring in my outline. The next sprite is more recent—I made it in early 2011.

Huge difference, right? Ignoring the colors and the hair, the biggest fundamental difference in these sprites is the attention to form. What changed between 2007 and 2011? I realized the importance of spriting forms-first. When I created the newer sprite, I didn’t start with an outline: I started with a silhouette and some highlights, and worked at sculpting and refining. On top of that, I thought more about the human body and modeled the sprite on an actual person’s anatomy, rather than basing it on a general idea of “RPG sprite”. What is the big idea of this tutorial? Unlike most other pixel tutorials out there, I urge you: Do not start with an outline but start with a silhouette.

Starting with an outline will change the way you think about your sprite: it will naturally put you in a “coloring book” mentality, which will inevitably make the entire sprite look flat. If you think about the multiple forms in three-dimensional space—and how they would be rendered when they are lit up by your light source—everything will come together in a natural way that conveys depth. Trainer Tips! A lot of great pixel artists start with the outline first—I’m not saying that it’s the wrong way to make a sprite. There is no wrong way. But the great artists who take that route have experience thinking in terms of forms and light to begin with—the process that I’m teaching you will help you visualize those forms as you create them. Once you get the hang of doing things this way, you should feel free to experiment with other methods. This is why pixel art is more like painting or sculpting: you’re working with a MATERIAL— pixels. Pixel art isn’t about your strokes: it’s about building. Sculpting with Form So let’s put it together and make something new. Open up your art program of choice and follow along—you don’t have to create the exact same object, but I’d like for you to take a stab at making something similar. Make an object with a relatively simple form, choose a light source and go to town bringing it to life.

In my example I made a barrel object for an RPG. In most RPGs, the light source will be pretty easy: a straight top-down that allows for easy mirroring. Start with your basic silhouette and sculpt your form until you have something that looks like the object, and then add the details to give it some personality. Leave a comment and show me what you’ve got so far. In the next section we’ll use what we’ve learned to start putting together an RPG character.

LINE ART Once you have a firm concept of what you want to draw in your mind, the formation of a piece of pixel art invariably begins with its outline. BLACK is the colour traditionally used for lineart. You might like to try experimenting with other colours. For smaller game sprites, this lineart is often most easily produced using the single-pixel-width, free draw tool (with help from line and other shape tools), often placing down a single pixel at a time. For larger backgrounds, sprites or set-pieces, you may find it easier to scan hand-drawn art, or use a tablet. In the case of backgrounds, it is often easier to build them up piece by piece, layer than layer, rather than as one combined piece. Breaking down the problem simplifies things, and editing object position is much simpler.

At first glance these outlines appear harsh and jagged, due to the square nature of pixels and their dark colour. Don't worry about this - things will get better later. For game sprites, I find it preferrable to build them bulky, firmly packed and purposeful. Don't do any pose by halves - exagerate movements and don't let characters stand around limply. Keep your sprites interesting and energetic. Remember, it will rarely look right first time round! Figure out where your lineart is flawed, and fix it until you are happy with it. Take your time to get it right at this stage - mistakes will be harder to correct once you have started shading.

It is strongly advised that you edit every line down to a single pixel thickness, like so :

This is a boring chore at times, but it does improve the appearance of your sprite. Failure to put in this effort shows in the reduced quality of the final piece.

COLORS AND RGB VALUES Once you are happy with your lineart, you need to decide how best to colour it. Good selection of colours not only takes your art closer to looking like a real object, but can add personality and mood to it. Conversely inappropriate use of or mixing of colour is instantly noticeable and most distracting.

RGB VALUES Computers use a combination of three different colours to create a single pixel : Red, Green and Blue (RGB) Inside a computer, each of these three colours is given a value from 0 to 255, where 0 means 'none' and 255 means 'a lot of' These colours can be mixed in varying amounts to generate different single colours on a pixel, like paint. However some of the colours generated are not what you would expect from mixing paints. 255 , 0 , 0 gives a very bright red. 1 , 1 , 1 gives black. 255 , 255 , 255 gives pure white. 140 , 140 , 140 gives a medium grey. NOTE - 0 , 0 , 0 is often reserved for a special case - transparency Preset palettes may come with some nice colours, but an understanding of how to create new colours, and find new shades of existing ones with RGB values is helpful. Many modern art packages have windows like that shown below on the left, allowing you to pick colours from a vertiable rainbow. Graphics Gale which I recommended earlier also lets you load your own custom palettes, but creating new ones requires double clicking on a colour before selecting from this range, or manual use of the RGB sliders. The sliders may initially seem cumbersome and confusing, but you quickly get used to them and as they reside in the same window, they actually end up faster to use. Use of them can give you a good understanding of colour via RGB values.

For art in general, I find it preferrable to use 'softer', pastel colours and avoid strong, neon colours (ones with a very high value in one or two RGB values, and a very low value in the others ) They have their place, but they are very garish and I would advise against using them often. Here are a few examples of colours that I personally think work well, and colours I don't :

As mentioned at the top, use of colour can be very important in creating mood. Light, pastel tones - close to grey (almost equal RGB values) create a soft, carefree atmosphere. Dark colours, with low RGB values create an oppressive, brooding atmosphere. Using a restricted palette with variations on a single colour can produce some interesting results. A Grey palette is often used for flashback scenes. Brown palettes look like parchment or old photos. A blue palette can be used to evoke everything from an ocean vibe to deep sadness.

Finding the right colour(s) for your piece isn't always easy. Some experimentation may be required, so don't be afraid to use those RGB sliders. It took a few false starts to find a suitably vibrant, non-clashing set of colours for this superhero:

The initial colours I chose for this column failed to fit with the mood of the scene they were to be inserted into. The top is too dark and gloomy, the blue on the bottom too obtrusive. Some edits used a lighter yellowy-grey for the top (all RGB values increased), and a cooler glacial blue for the bottom (all RGB values increased. Red value then raised even higher, closer to the Blue value)

Photographs and other people's pixel art can be a great source of colour inspiration if you find yourself stuck for ideas.

SHADING All objects have prescense in three dimensions. Their form becomes powerfully defined under a light source. Planes facing towards the source are illuminated. Planes facing away are starved of light and remain dim. On a two-dimensional computer screen, it is the job of this shading to convey a sense of form and depth. Now that we have shape from our lineart, and the foundations of colour, we can variate that colour to really bring our piece to life.

Establishing Light Sources In order to begin shading an object, it is important to first establish where light falling upon it is coming from. For outdoor settings, or indoor areas with consistent overhead lighting, it helps to pick a constant direction for light to fall from. Some people like their light to fall from the upper left corner of their image - I prefer the upper right and will use this for the rest of this tutorial. This common kind of light all strikes your object at the same angle.

Areas with one or more lightsources illuminating shapes all around them are a special case and requires a little more work and attention. Good use of alternate light sources helps create mood and atmosphere in a scene. It is a rather obvious point, but important to note that in these cases, light noticeably decreases in intensity the further from the source you are.

The Shading With our light source firmly established, we can finally shade our object, starting with the simple example of a sphere. But first, an example of what not to do :

This called 'pillow shading', a great evil spoken of by pixel artists in hushed tones. It is the work of the devil, and appears to assume a single point light source hanging directly between us and our object. Do not, under any circumstances, shade a shape this - it looks rubbish. This sort of radial tone gradient is suitable only for a surface lit by a very close light source - like the burning torches above.

As stated above, however, our light falls uniformly from the top-right corner of our image. Bearing this in mind, I like to start shading an area with two new tones - one darker than the base tone (lower RGB values) and one brighter (higher RGB values) The lighter tone should be applied to surfaces facing towards the light source The darker tone should be applied to surfaces facing away from the light source

Our sphere immediately gains form and depth. We can enhance this effect by adding even more tones, above and below our two new ones.

A this point you may find your object appears to light or too dark and need to correct the tones you are using. This is not uncommon. These principles apply even more simply to a flat-sided shape.

A sphere is a rather boring and sterile object though. The same principles can be applying to a more interesting, less uniform object like this fat little creature :

Note how planes facing towards the light source are brightened, and those facing away dimmed. A good understanding of the three dimensional form of your piece is vital for shading, so that you can identify the amount of light these surfaces receive and shade appropriately. In this example I have used a darker base colour and worked more toward the lighter end of the spectrum. The darker shadows are still there, but the overall effect is the lightening of the flesh to a tone I felt was more appropriate.

In some cases (faces, smooth machinery) detailed, careful shading is necessary. In others don't worry about it too much. I find that messy shading often improves the texture of a surface. As the flat-sided shape above showed, the distance between different shades is by no means constant. For more cuboid shapes, the top and bottom surfaces are best implied by a narrow area of shading. Observe the example of this slab of rock.

Note again that on natural surfaces like this, rough shading can help. Varying the colour as well as the brightness of new shades can also produce some interesting results ( increasing or decreasing one or more of the RGB values more than the others ). You will need to do this for non-white lighting as well.

SOFTENING OUTLINES Now that your sprite is almost looking like the finished product, one problem may remain - those dark, monotone outlines that we started with. In some parts they are fine, but in others, especially areas where colours are primarily pale, they appear harsh and innapropriate. The obvious solution is to lighten them up a bit. I'll split this down into three sections:

SOFTENING OUTLINES In most cases the most appropriate action is to replace the black outline with a colour somewhat closer to its surrounding shades. Light is an important consideration here. Lines under direct light should be lightened more. Lines in shadow should be lightened less, if at all.

Take the extreme case of this mummy - before and after its outlines have been lightened.

If you want to do this really seriously, you might also want to gradiate lightened lines, using even more shades between their lightest tone and the original black. This ball example shows the basic principle.:

BRIGHTENING OUTLINES Sometimes the shade you want to replace the lineart with is lighter than line 'and' its surrounding shades. I find this useful along the non-outline edges of a shape where edges meet. This simple box example says it better :

REMOVING OUTLINES In some cases the sprite will look better if certain outlines are removed entirely, and replaced by an adjacent colour. This includes instances such as edges between flesh and clothes, and colours painted on a surface. Take this example of a shirt sleeve hanging on an arm - before and after.

ANTI-ALIASING

Anti-aliasing is the process of 'smoothing out' the colours of an image - in its simplest form, taking two pixels and moving the RGB values of each closer to the other. The 'Blur' tool of many more comprehensive art programs performs this function, although it is a very blunt instrument. A more refined approach is required with pixel art, where the aim is to reduce the 'jaggedness' of the lines where two shades meet. NOTE - Anti-aliasing is not a holy grail of pixel art. You may not even need it. There are many situations however, where smoothing out jagged edges with a pixel gradient improves the appearance of a sprite.

METHOD 1

This method first lightens the colour of the line, then shade away from each 'step' in shades, getting gradually closer to the background colour. This method is most useful for shading towards the outlines of sprites, though it need not use as many shades as this example.

NOTE - Do not anti-alias outside the outline of a sprite (ie - in the transparent bit) unless you anticipate placing it against an unvaried background.

METHOD 2

This is an alternate, slightly different method. The RGB value of the line remains unchanged, but smoothing of tone is focused more at the 'joints' or 'steps' of the edge. I prefer this for drawing lines on a surface - tattoos or paint lines for example.

LINES AND CURVES If you're not already an accomplished artist, the best way for you to start a drawing is to do it in pencil, the ink once you are satisfied, then color it. The same goes for the pixel-art: the first step in am image is the delimitation of its contours -- this step is called the "Lineart". Lineart is a very important step to achieve a good piece of pixel-art. A few pixels of your image can make up a large percentage of your image (as opposed to a drawing, where the scale allows for greater tolerance) so that an error of one or two pixels can give a make your character look really deformed. To be clear, lineart accuracy is C-R-U-C-I-A-L to the success of a pixel art.

1. Straight

Lineart is composed mainly of lines and curves, and we'll start by talking about straight lines. Those of you who were listening in math class know that a line is characterized by its slope. It is the ratio of "change in y" to "change in x". For the purpose of this tutorial, we will represent this ratio as y:x. Thus, a perfect diagonal "bottom left" to "top right" line is a straight 1:1. Here are some simple guidelines and their coefficients to illustrate the idea.

In pixel-art, the lines that use these simple coefficients (0:1, 1:2, 1:1, 2:1 and 1:0), are called "perfect lines". They make your image look good because the eye can follow them without difficulty. They are not the only ones you can draw, you can for example make "intermediate" lines by alternating segments of length two with segments of length one (to simulate segments of length 1.5 -- see example image). The result is much less aesthetic (especially since the image is enlarged 4 times so you can see what happens) and shows why it's so important to use these kinds of lines sparingly. They still have their usefulness, though, and you will learn to embellish in a more advanced section of the course. 2. Curves Well, now you know how to draw lines, but you won't get far with just straight lines. Let us therefore look at curves, which are a more complex matter. Unlike a line, a curve can be

good or bad. There is only one rule to follow to achieve a smooth curve: the length of the segments will vary in a progressive manner, and you should avoid right angles. Well okay, that's two rules, but in fact the second is included in the first. For example: In Green, a you can see a nice curve that follows this rule perfectly. (From left to right, the lengths are 5 4 3 2 2 1 1 1 2 3 3 3 2 1 1 2 2 1 2 1 2 1 1). The red curve, on the other hand, is flouting it shamelessly (note the right angle that appears in the curve). In the end, a good technique

to draw a curve is to draw the curve by hand (we get something like the red curve) and then go back and the change it until it meets "the rule". This ensures in advance that the curve will have the look you want. Well, that's it for curves. In conclusion, I leave you with some small examples of this course. The first is a dragon with curves illustrating the principles of outlined above; the second is a sword that shows that sometimes more angular lines (look at the tip and the pommel) can also be useful in some circumstances.

I strongly recommend you practice some Lineart before you continue reading -- you'll need it to complete the rest of the course (as I will use the dragon above). If you have trouble, you can always use a scanned drawing.

PERSPECTIVES The issue of perspective in 2D games is a question that comes up frequently, and this is probably why so many amateur games have a lot of inconsistencies in this area. In particular, this chapter addresses typical RPG perspectives, so if you're looking for information about side views or first person, you'll want to check elsewhere. It's important to remember that perspective is "the art of representing three dimensional objects on a flat surface (in this case, your screen) as they would appear to the eye of an observer." Before starting, I would like to thank Lunn, without whom this section would not be what it is today; it is actually an edited version of a conversation I had with him on the subject. 1. Perspectives -- and why the plural? Because there are several different kinds! If you've read art books or taken classes, you are probably aware that there are 1, 2, and 3 point perspectives. This is not what we're talking about here, so you can forget it for now. =) In 2D video games, the the simplest perspective used is called 'axonometric'. What is this beast, exactly? In an axonometric representation of space, an object is represented with 3 coordinates (X, Y and Z) which each increase steadily in a particular direction. In particular, this means that two parallel lines in reality are also in axonometric perspective, and an object's size doesn't change no matter how far it is from the observer. Finally, there are an infinite number of axonometric perspectives, since the artist is completely free to place the 3 directional axes in the directions of his choice. We will look at the 3 most commonly used axonometric projections (see image).

This is called the isometric perspective: the Y axis should be tilted 30° to match the definition of the isometric view, but since it is not possible with a simple pixel art, it is represented by a 1:2 line (see previous chapter) and the angle is only 26.5651 ° (I will spare you the calculation that leads to this conclusion). This view is particularly suitable for tactical RPGs, because it can represent a convincing depth and altitude. It is not suitable maps in traditional RPG creation programs (like RPG Maker) because of the shape of tiles.

This is the planometric perspective. This time, the Y axis is tilted 45 degrees from the horizontal and is a straight 1:1. Very few games use this (the best known of these is Boktai), yet it can be interesting and rich in volume. This perspective should be more widespread, and it is up to you to use it!

Finally, the last (and least attractive too) is the famous 3/4 perspective: the Y-axis has turned to the left, confusing it with the Z axis. This is the view that most RPGs use, and we will discuss it in greater detail.

2. Everything about the 3/4 view

In theory I could stop here, but I will assume that you're not very smart and will show you some examples to go with the words. Let's start with a simple example: a barrel (this element in any city tileset / town / abandoned mine / home / etc.). What is interesting about it? THE COVER IS A CIRCLE. Not an ellipse, as seen more often. It is like this for two reasons: - It is a circle in the real game (the cover is round, what). - It is parallel to the ground and thus viewed from above. From above, there is no bias. You must apply this to all horizontal planes that are seen from above if you want to do 3/4 consisently.

We'll continue with a more comprehensive example, generously provided by Ody. Above all else, notice that the top of the tower is circular. Also, look at the door, walls and windows. They are, they are ... I'll give you a second ... they are? (No they're not ugly) They're 1 to 1. Again the magic of our 3-axis is at work: the vertical planes are represented as seen from the front, the same way the horizontal ones are.

But then, what happens when we want to represent the vertical plane and horizontal planes? Nothing special. The interaction of the two poses no particular problem. Look at the stone walls by Ody, or the stairs (or the cabinet, or walls) and the superb screenshot Bahamut Lagoon on your left to be convinced. To be brief: the horizontal planes are seen from above the vertical planes are seen from the front.

3. Extension possible vanishing points underground

Well, I hope you have understood so far, because this will complicate things a bit. I told you in opening this chapter would not consider point perspectives. Well, now we're going to mix it up a little. One small visual reminder (see left) is probably sufficient for you to put ideas in place with regard to one point perspective. As you can see, there is a point somewhere (not in picture) that all horizontal lines in a region point to (as long as the picture is taken on flat land, from the ground) -- this is called a vanishing point. You do not need to know more than this for the purpose of this article, but if the topic interests you, I advise you to read this course on perspective drawing). Let us return to our tutorial -- how will we use these vanishing points? To improve our perspectives! In contrast to the image showing a the château de Versailles (did you recognize it?), the vanishing point will attract vertical lines. Ideally, we would like to fix the point somewhere and draw on top of our map, but this is not really compatible with systems used by tile-based RPGs. The solution is to assign an individual vanishing point to each object of our tileset. It's a bit less elegant, but the result is nice! Here are two screenshots of Golden Sun and Golden Sun 2, which are the only two games using this technique that I know. Shin kindly highlighted some vanishing points of these images.

Note that the vanishing points are all located under the objects (since the camera is facing down from above) and all at about the same "depth" (to keep things consistent). A final brief comment for the road: the further down your vanishing points are, the the closer you get to the standard 3/4 perspective, so that placing your vanishing point to "infinity", the closer you get to pure 3/4 (it's magic, huh?). Now that you know a bit about perspective, you have no excuse to make mistakes, especially since errors aren't too difficult to correct, and you can draw lines (and vanishing points if you try the Golden Sun method) to help you.

SHADOW AND LIGHT Today we go from 2D to 3D while remaining in 2D. You will see (or not). With what we have discussed so far, you should be able to make pretty Lineart and draw things with correct perspective. It is a good start but it's not enough to make pixel art. In this chapter we'll take a look at shading. It's a set of techniques that will allow us to sculpt our scenery and our characters to represent volume (and I will spare you my long-winded speech on the traditional importance of this chapter, IT'S JUST SUPER IMPORTANT). 1. Why shade at all? In fact, you probably already know the answer to this question. So that your brain can interprest the volume of objects, it we vary the colors on the surface, which result from differences in lighting between the parts of your object. You don't need a halogen spotlight

to see this effect in real life; the slightest reflection defines a volume, look around you!

This sketch illustrates the concept simply: an object (a sphere) is illuminated by a light source (indicated by arrow) and this affects its color. The colors are more clear where the sphere is directly exposed to light and darker in the shade. Note: I speak here as light and dark colors, the next chapter will tell you more about how to choose them.

What is important to remember is that I chose a light source and I put the shadows and light (the highlights) as a function thereof. If my design were more complicated, I would have to pay attention to light source on the set so that everything remains consistent. Of course, you don't have to place the light source in the upper right; you can put it anywhere. That said, things are not always as simple as this sphere, for several reasons: - objects can be in the shadow of each other. - objects can have more complex shapes, and it's difficult it is to show their volumes accurately (especially in pixel art) - light has an unfortunate tendency to bounce back (!) onto the objects, walls and floors. In the end, the bottom of the sphere should look a little like this. 2. And how do I do it? Ah, what a good question! As I'm nice, I'll even help you a bit. The first thing to do is to position your light source (this is most often at the top right or top left, as your light source is most often the sun)

From there, you must consider the volume of your object in 3 dimensions (as opposed to just a flat space on your screen) to successfully identify the areas "affected" by the light (and how intensely the light affects them), and then color them given that information. To simplify somewhat the problem you can think like a good old Playstation (Poupi, thank you for the image of a sphere in 3D on your right) and mentally divide the object in different polygons and look at the lighting of each of them. Broadly speaking, you must determine areas to be "generally in the shadows" and "generally bright" rather than directly addressing details (bad idea). Along the way, it's good to gradually replace your black lineart contours with with useful colors, and leave space to add more details (a pixel can be priceless!).

For example, note the dragon back in Chapter 1 (and you will see him again later). I have applied the techniques of shading as described in this chapter to give him volume. My source of light is to the right and not very high; the entire left of the dragon is in shadow, except for the hand that is closest to you and part of the gray area created by the body. Not much else to report; this is just an upgrade of the line art. 3. Two mistakes to avoid a. Pillow Shading

There is only one excuse to make the pillow shading: never having read all these theories about the shadows and lights. This is the approach used by people who have noticed that other designs use light and dark colors, but don't really understand how or why. Instinctively, they begin to put the bright colors in the middle and dark colors on the edges. The result is

totally inconsistent and ugly.

The problem is obvious on simple shapes like a sphere or a cube, but be careful of what you do with more complicated images. If you are not accustomed to drawing shadows, you may have a natural tendency to do pillow shade without realizing it! b. Understood without understanding

The second mistake to avoid is for people who read such articles (so you for example). The reasoning that leads people to make this error is: "Well, I put my light source at the bottom right. That's done. Now the color is clearer at the bottom right and darker in top left and everything will be peachy."

FAIL. In doing this, the result is disastrous (see picture below) and has no volume. Why? Because in three dimensions, flat surfaces are lit uniformly, unless it's a very dim light close up (such as a street lantern). Under normal circumstances, you'll be dealing with a far away light source, like the sun, which illuminates flat surfaces evenly. 4. Ambient Lighting We'll conclude our tour with a nice technique. Now you are supposed to be able to handle a source of light. Well, ambient lighting is to add a second light source to give your object or character more color. It is preferable that the second light source is not in the same direction as the first, for two reasons: * it would be "drowned" in the first source, and frankly would not be visible * the charm of the second light comes from the fact that it illuminates the shadows and gives a very dramatic tone to the scene.

Caution, however: lightening the shadows does not mean that the shadows are more clear. For best results, just highlight the edges of the shadowed areas and leave the rest of the shadow dark.

That is what happens in the face of our dragon, lit by the flames (rawr rawr!), and back-lit by a mysterious blue glow. Of course, this technique should be used sparingly. Don't overcomplicate your first renders by introducing too many light sources all at once. Instead, add them after you've done your initial shading with the main light source.

Finally, as a small example of what technology can achieve on larger scale, here is a screenshot of Tales of Phantasia on the Super NES, in which the walls and columns lit by torches provide a beautiful demonstration of ambient lighting (the sky is the "main" light source). And we're already (well "already" is for you, it took me ages) at the end of this chapter. As with previous entries, if some of this seems unclear, it's because I'm not going into great detail about art in general, and instead I'm focusing specifically on pixel art. If you want to learn about light and you can speak English (which is likely, since you're reading the English version of this tutorial), you can read this page for further details.

COLOR PALETTES 1. WHEN AND WHY TO CHOOSE A PALETTE? Good question, after all why I bowl with that? Simply because the palette is 50% of the quality of your work. Throughout a game, it is important to have consistent palettes, because they contribute greatly to the overall atmosphere. In general, what makes the difference between fine art and graphics failures is largely the palette. "Okay it is important to have a nice range, I'll do it at the end." Tut tut tut, certainly not! The palette works from start to finish when you're designing pixel art. For me, this is the first and the last thing I do: I start by making a starting palette in the corner of my image, then I tweak as I advance, and then, once everything is finished, I spend time improving it. The improvements are mainly due to "feeling", what you will learn here can be challenged: it is just a starting point. 2. The Magic of HSL a. Overview

In a computer, all colors are represented by a hexadecimal code (ie which uses the characters 0 1 2 3 4 5 6 7 8 9 ABCDEF) 6 characters. For example, the code #000000 is black, white is #FFFFFF, and #FF0000 is pure red. Nothing very complicated so far. This code can be divided into three segments of two digits (the # is just decoration): the first two digits correspond to the red component of color, the next two are green and last two are last blue. By combining these three values, you get any color. For example, #FF0000 is pure red because the red part is maximized (FF) and the green and blue parts are both zero (00). Hexadecimal codes can be converted to decimal to facilitate more discussion (not everyone enjoys reading hexadecimal like you and me) -- each doublet between 00 and FF is a number between 0 and 255. Now I chose a color that I use in my pixel art, for example purple # 6A146A (Red 106 - Green 20 - Blue 106). Okay, this color is not bad but it does not suit me very well ... I want something more lively, more intense. I tell myself that to make it more intense, I just increase the 3 components ... pfff you speak, it's only make it more white and pale. Too bad, I will darken a little while, I will reduce each component of 10 ... missed again! I darkened my color but I don't want gray ... ouch ouch. It's difficult to choose colors with precision this way. But then comes Zorro to the rescue! (In this case, Zorro is the HSL palette). As you surely understand, it's not natural for your brain or mine to break color down into three color components (RGB -- Red Green Blue). The HSL palette is simply another way to identify a color: it no longer uses the RGB components, but three components visible and recognizable to the naked eye, the Hue, Saturation, and Brightness. Hue, between 0 and 360 is simply the color itself: red (0), yellow (60), green (120), cyan (180), blue (240), pink (300) and Red (360). If you are an observer, you will have noticed that the two extremes come together (as in politics). Of course, all the intermediate colors between the colors that I mentioned, do exist. The saturation, between 0 and 100, is the vibrancy of color. More color is saturated, it is more intense. A saturation of 0 corresponds to a gray. Finally, the brightness, between 0 and 100, is the simplest to understand: it determines if the color tends towards white or black. In all the pixel art programs presented in Chapter 1, you can choose your colors with HSL, so you have no reason not to use it. With a little practice, you can easily obtain a color that you imagine, while it would have taken hours using the RGB system. b. Ramps and hues

Now that you know the tools at your disposal to choose a color, enter the heart of the matter: the creation of a palette. A palette consists of multiple "ramps": ramp is a group of colors whose hues are adjacent. For example, a pallet may contain a red ramp, a green ramp, and a brown ramp. Let's take a look at an example.

Here is a bearded pixel art dwarf, and below is the palette that has been used to achieve it. This palette contains three ramps: one blue, one red, and one orange. (Small note in passing, it is not necessary to stage your palette as I did. Usually it's a lot more messy than that). In each ramp, I ranked the colors from darker (left) to lighter (right). Note that the pure white and pure black (large rectangles) are part of two of my ramps: Because these two colors have a saturation of 0 (white and black are pure gray), they can belong to any ramp, and this is the same for all other grays as well. The oldest of you may have already seen images of C64 games. The color palette displayed on this machine contained numerous grays to enable artists to create a variety of ramps. -- Now that we know the essentials, we;re interested in the concept of FUNDAMENTAL hue-shift. We tend to believe that all colors have the same hue and saturation, and only the brightness changes depending on whether you're in light or shadow. But that's not actually the case! What I didn't say in the previous chapter, is that your objects are lit up by a blue sky and a yellow sun, which means that your hue varies a bit over your ramps. Most often the reality of things is very complex and requires knowledge of lighting that I have not mentioned, but in pixel art, you're safe with the following rules: - The darker it gets, the greater the saturation - The lighter it gets, the less the saturation - The darker it gets, the more blue your hue becomes The lighter it gets, the more yellow your hue becomes

if you look in detail at the red ramp of the dwarf palette, we find these trends. The figures (see left) speak for themselves, you can check that everything is consistent with the principles above. You can reverse the rules concerning saturation for a more mild look.

We'll with a small example of our friends, the professionals: the classic "tree of Seiken Densetsu 3" which contains a huge palette of colors shifted from yellow to purple. The image below does not show the whole range, only the lightest color and the two darker. c. Xenodrogen's Method

The Xenodrogen method, named after its inventor, is a method to choose the exact color of your ramp and without (too much) going wrong. This method is not an absolute rule to respect but if you have sense of color, it will allow you to make pretty ramps. This method is

based on a complicated rule to make but easy to follow: "In a ramp, hue, saturation and brightness vary in a single direction. Their changes (second derivative, mathematically speaking) also vary in one direction." We have already discussed the first sentence, and we even said what direction the hue and saturation should vary in. The second sentence will allow us to quantify these changes: in a ramp, each component (hue, saturation and brightness) change must be more and more or less across the ramp. Imagine a 5-color palette, which we will refer to as A, B, C, D, and E. I can, for example, vary the saturation by 1 between A and B, and by 5 between B and C, by 5 again between C and D, and by 12 between D and E. On the other hand, it would be incorrect to do something like 2 3 2 1 4, which would result in kind of a "yoyo" effect. To summarize, I can change the rate at which I vary the hue or saturation, but I must change the rate in the same direction.

Let's take the green ramp to the left as for example: Here, the color decreases by increasing the saturation increases less and less, and the brightness increases more and more. Note that as described in the previous paragraph, we can reverse the relationship between brightness and saturation for a softer (more pastel) rendering: on this ramp, it is the clearest colors that are more saturated. One last detail on the Xenodrogen method: the more colors you have in your ramp, the more you should make small changes. The green ramp above had 5 colors, so we made small changes. If we had only three colors, there would have been variations in the range of 15-20 units. 3. Good taste a. Black and white

The problem with the use of black and white deserves a paragraph to itself. Generally, the use of these two colors in a pure state (#000000 and #FFFFFF) is discouraged. However, there are two exceptions (one for each color) and the dwarf at the beginning of this tutorial is concerned with these two exceptions. We can use pure white (# FFFFFF) on very bright surfaces (effects and magic spells) or highly reflective (metal, precious stones). This is the case of the dwarf and his metal armor. The case of pure black (#000000) is more subtle: It can't be used for shadows, because in reality nothing is every completely black; there is usually a very subtle color there (sometimes purple). It shouldn't be used for decorations or contours. The only appropriate place to use it is as an outline to make characters more visible in a game, highlighting them above their surroundings. However, we strongly caution against using black "inside", as the black separates details inside the sprite, and makes it look like a rough draft. Pitfalls

Beginners have two tendencies aside as soon as possible, namely: - Using over-saturated colors - Using colors based on assumptions instead of observation Remember that grass is not always green, water and sky are not always blue, and character color can vary depending on skin tone and light. Broadly speaking, the time of day and ambient light alter the color; look around you and learn accordingly. (Translator's note: If you look at your colors in RGB, your grass color (for instance) shouldn't have 00's for the red and blue components. By the same token, your sea and sky shouldn't be pure blue, and even stones, which we think of as grey, should have some variation in color, following the rules above. Using HSL can help you avoid falling into this trap.) -- I decided to conclude this tutorial as I started, and remind you that the rules set here are by no means set in stone, but rather simple advice. This chapter gives you many rules for making good color palettes, but the

most important things are good taste and practice. Also, if you think you can improve your palette beyond the rules, do not hesitate to do so. Ultimately, it's the result that counts.

ANTI-ALIASING Where all your pixel art becomes beautiful. Or Not. Really, it depends how ugly it was before. 1. Plan of attack

If you have the courage to read today's specialist video game news, you've probably already seen journalists complaining about aliasing in some games. Aliasing is the phenomenon that occurs when an object in the foreground is in front of a background color, and the border between the object and the background comes out as an ugly, sharp edge. 3D games are the main victims of the phenomenon (see left: Meremanoid, a Playstation game which neither you nor I have ever heard of.), as automatic smoothing algorithms are expensive in terms of performance (for the original Playstation it was totally out of the question). 2D games are affected quite so badly because there is always good old pixel art anti aliasing to smooth out all those ugly contours and smooth transitions between objects and background. Indeed, here, no algorithm is required. You just have to think about it in advance. Think a little if you wish. We can distinguish three situations in which the aliasing phenomenon can occur, and we will take action accordingly. First case: I have two different colors on my sprite and the transition between the two colors is dramatic. In this case, we will be able to apply anti-aliasing at our leisure to soften the transition. Second case: the transition between one of my characters and the scenery behind him is all aliased (help!). Things can be complicated here, so we'll divide this into two cases: If I'm lucky: in fact "I'm lucky" means "I know the color of the background which will be shown on my sprite". In this case, you can anti-alias the edges of your sprite to make sure the transition with the scenery isn't too harsh. If I'm not so lucky: sometimes it's impossible to predict the color of the background on which your sprite will be displayed (eg, if the hero of your game goes through a variety of backgrounds). In these cases, DO NOTHING. That's all there is to it. It would be silly to change the edges of your sprite to smooth a transition, as you do not know what color you're transitioning to. Well, now you know why and when to use Anti-Aliasing ... all that remains is to find out how! 2. The attack! Well. How do you make those famous smooth transitions between two colors? The answer is rather obvious, just use one or more intermediate colors (eg, gray to go between white and black), known as buffer shades. All the subtlety lies in how you use them. Indeed, if you're devoid of artistic sense, you'll probably want to do something like this:

Damn, that's just ugly. I hope that you remember as well as I do, not only does this but socalled "method" takes a long time to implement (the pixel art is quite tedious to do this) but it also does not solve our problem of transition. In short, it is not enough to do just anything with the buffer shades for anti-aliasing. Anti-aliasing is an UNASSUMING technique, keep that in mind. Now that you know what you must not do (in terms of these infamous contours), see what is actually done. First pictures, then words.

Let's take a look at a small arc of orange clashing violently with its dark gray background. On the left, the beast in its natural state. At right, the successive stages of the process of anti-aliasing. We begin by noting that the edge of the arc of a circle is a series of segments, they are one of length 1, there are then two of length 2 and two of length 3 (this should just remind you of the chapter on curves). We will take each segment separately, considering the lines of the image one after the other. In the case of vertical segments (ie not here), we consider the columns of the image one after the other. On each line, soften the transition on both sides of the border, BUT /!\ ATTENTION /!\: If you deviate past the "border" of your two colors, you will destroy the original form (and get closer to the example of what one should not do). Your buffer shades should not extend beyond the ends of segments of lines above and below, this seems very complicated but in fact not at all, look at the drawings at the last step, the segments of 1 pixel can receive only two pixels of AA because if they spill over to neighboring segments and create a very unpleasant effect called "banding" (and quite close to the example not to follow above). Do not make a "contour" around your shape. If necessary, we can make some adjustments if despite all the precautions taken by the AA slightly distorts the shape of the object but it was not the case here. Also, be aware that it is not necessary to anti-alias segments of length 1 (45°) which do fairly well on their own.

3. Total victory! The results are immediately visible (or you immediately need a pair of glasses). Here's how this changes our orange circle, and also our good old friend the dragon.

Also note that I have calmed down a bit on the ambient lighting on the dragon. As previously announced, ambient lighting is a technique to be used sparingly. I'll finish with a small technical note for the most resourceful among you that I was not sure where to put: your shades buffers need not be the colors hue, saturation and brightness are between those of color smoothing. If you just want to optimize your pallet, you can try to exploit grays because they have the ability to be used in ramps of different colors and do wonders for anti-aliasing.

This piece of pixel art was generously provided by Panda, who controls anti-aliasing much better than me (and you too). Click on the image to view a larger version, and do not forget to wipe the drool off of your keyboard after observing the details.

TEXTURES AND DITHERING Except that in fact we speak of dithering before talking about textures. But it sounded better in the other direction. After stepping into the land of soft and sensual with anti-aliasing, we will now tackle techniques for creating areas that are wild and full of pixels - namely, textures and dithering. 1. Dithering Dithering is an old technique invented in Malthusian times, when machines were too primitive to display more than a few colors at a time and where pixel artists had time to

waste. Dithering is a technique that aims to achieve a gradient using a minimum of intermediate colors (ironic, yes, but not absurd.).

Specifically, how does it work? The human eye is imperfect and can only distinguish the colors of pixels with questionable accuracy, so it tends to mix the color of a pixel with its neighbors. The green square to the left of this paragraph consists only of yellow and blue pixels interlaced, and your eye makes the mixture to give it its green color. Wonderful is not it? We will use this property to create color gradients (eg, from yellow to blue, using the above Interleaving to create green between the two). There are 3 good reasons to do so rather than using a gradient, as a Photoshop user might suggest: the first is that by using few colors, you hold to the "pixel art" style of the rest of your game (as long as you do pixel art), the second is that it allows for more intelligent management of your palette; you can reuse some of your color palette in the gradient to make the image consistent. Finally, the 3rd and probably the best is that unlike a gradient automatically making a seamless but monotonous transition between 2 colors, you can choose intermediate colors (a little more saturation over the middle for example) to make things more interesting for the imperfect eye. Note however that the heyday of this technique has been over for a long time and, misused, it is more likely to ruin your masterpieces instead of embellishing them. Furthermore, this technique requires a lot of space to be applied and it is completely unnecessary in the creation of a sprite. It's been used well to make the images of the demoscene or background of the sky in some games.

The image to the left is an example of a gradient made with 3 colors using dithering. It's easier to look at it than it is for me to describe it. The general trend is to increasingly use a particular color as you approach one side or the other. You shouldn't put two separate patterns to close to one another, or else when you zoom out, your patterns won't appear to follow any sense of logic.

Of course, there are many different patterns you can use to dither, some of which are more difficult than others. Here are some popular ones, although there's nothing preventing you from creating your own. You're not even obliged to create any pattern at all; sometimes a chaotic dither can work if you want to create a rough and dirty surface. 2. Lighting and materials Achieving textures in pixel-art means knowing how to represent different materials regardless of their form. This allows your player to think "I'm crossing the little wooden bridge" rather than "I'm crossing the little plastic bridge". Indeed, all materials have a texture of their own, which helps to distinguish them. Two criteria are decisive in achieving a texture: the first is the pattern that covers your material. It is usually bumps on its surface (nodes on the tree, small scratches on the stone) to be represented by performing shading on a very small scale. The second criterion is how the material reacts to light (whether that material is bright, how it reflects, light, etc). Let's look at this small set of textures as an example:

Wood: For wood, everything depends on the surface pattern, which is a network of lines which are sometimes cut to form knots. It is insensitive to light, unless it was varnished (this is not the case here). Granite: The granite surface has much larger irregularities than wood, and a ball of granite doesn't act exactly like a sphere. To represent granite, you must add shadows to the surface -- small touches of color used to represent isolated holes and bumps on the stone: it is actually shading very small scale. Its reaction to light is a little less shy than the wood, but still very dull. Marble: The technique for marble is virtually the same as granite. The main difference is that the marble is generally smooth (use more colors and more antialiasing). Furthermore, it tends to receive brighter highlights than granite. The water (or glass): These two subjects are semi-transparent and thus tend to reflect the light within themselves, where the second highlight comes from the bottom left. In addition, a large part of the received light is returned and that is why the main highlight (top left) is very big and bright. Finally, water and glass are very smooth materials that require a lot of antialiasing. Clay: Clay is one of the most simple to represent. It requires few colors just because it is rough and un-detailed. The ball was made entirely with a size 2x2 pencil (ie, the details are unimportant). Copper: Copper, like all metals, strongly reflects light in the highlights and quickly becomes very dark in shaded areas. Do not be afraid to use a wide range of colors, not only to reflect the contrast, but also to give a smooth surface (antialiasing is the key). Please note, the shadows on copper tend to go in the green (yes, green. Do not ask me why, look at pictures to convince yourself of this). Metal (steel): As stated just above, metals explore the full range of values from black to white ... but without the gray. It is common for beginners to represent metals as grey, but it is a mistake. Metals are always colored, either intrinsically or by the ambient lighting, but it is never simply gray. Watermelon: Actually, watermelon reacts almost like plastic but I found it more fun to make a watermelon than a piece of plastic. The highlights are very plastic and quickly desaturate towards white, while the shadows are not very pronounced. Of course, there is are neither patterns nor bumps on the plastic. But for watermelons ... 3. HAIR! Hair, and fur are a special case and particularly difficult to treat (3D artists have at least as much trouble with this as we do, if reassures you). The problem is that hair is finer than a pixel and therefore

is very difficult to represent. Sad, huh? I guess we'll have to give up. Or not. -- The solution is not to draw hairs individually, but to focus on highlights (and hair looks prettier with highlights anyway, so it's for the best). Each highlight can be represented by a line or triangle whose thickness depends on the length of hair (more hair give you longer ones, but most highlights are small), and whose orientation is used to define the volume underlying the hair is in the direction of the surface they cover, or perpendicular to that direction (whichever is closest to the vertical / what you think is the most logical). The solution is not to cover the hair or hair, but wicks (and there's more pretty than that wicks of hair, so it's all benefit). Each bit can be represented by a line or a triangle whose thickness depends on the length of hair (more hair is long, more bits are fine) and whose orientation is used to define the volume underlying the hair, either in the direction of the surface they cover, or perpendicular to that direction (whichever is closest to the vertical, or whichever way you think is the most logical). For example, the hairs on the back of an animal are horizontal, while they fall more vertically (but not entirely) along its flanks.

Finally, the hair texture is smooth (think cozy: 3) and this must be reflected in your choice of color for the drawing. The transitions between colors must be hidden as much as possible. Consider the fur coat layer that covers your creature: some hair falls lower than others and is thus in the shadows. You can use these shadows to allow you to transition between colors without having any sharp boundaries, and while maintaining the texture of the coat. This is precisely what I tried to do in the example of the lion on the left.

Finally, I leave you again with some pixel art to admire. Thank Ahruon, who generously provided "Moonlight Parade" to illustrate this section. I advise you to zoom in and take a close look. In conclusion, restraint must be demonstrated with dithering and textures. It is often preferable to keep certain areas or objects in the dark or light enough that their texture is indistinguishable. This strengthens the depth of your image, it makes you work less, and it serves to define areas of emphasis (which are thus the most detailed). Note that the left rear paw of the lion is almost a solid color. Pessimistic note: If you're planning to animate, think twice before you add too much detail, or you'll be pulling your hair out.

A WORLD OF TILES If you have read this far, your theoretical knowledge in Pixel-Art is now almost complete. However, you are probably disappointed that I did not answer your most pressing concerns, such as "How do I make a grass tile", "How do I make my hero?", "How do I avoid making my trees ugly?", or "Where can I find a new girlfriend? " . In fact, you already know enough

to do all this (except for the girlfriend, and in that case you're probably better off without my advice, I suspect). Without practice, we never get anywhere, and if you're asking these questions, you need to practice. But for now, we'll go through a graphical history of RPG pixel art and review some of the basic elements that aspiring pixel artists have trouble with. 1. The fear of Pixel-artist: the GRASS TILE (* cries and cries *) a. Like the pros!

The problem with representing grass is the same as for fur in the previous chapter: the grass is too fine to be represented individually in Pixel-Art. We'll need to use a strategy similar to that of the tufts of hair ... I call this strategy tufts of grass. What follows is in no way encouragement to copy; it is a collection of screenshots containing grass tiles that I suggest you observe closely (save and zoom as much as possible) by asking technical questions: how many colors are used? what patterns shape the colors? which way are the clumps oriented? The results here are very convincing. Without further delay, This is the collection in question:

These images are screenshots of the following games: Alcahest, Bahamut Lagoon, Chrono trigger, Rudora no Hihou, Seiken Densetsu 3, Sword of Mana, Terranigma, Star Ocean --

Since I'm nice, I'll stop for a bit and work with you to dissect the tile grass Rudora no Hihou. This is the grass tile in question. It is imperative to note that tile is not created "randomly" by placing random pixels of the 4 colors (remember how we do our textures!). The blocks of the same color are mostly vertical or slightly inclined, and that is roughly the direction of the tufts of grass. In addition, there is virtually no anti-aliasing (only a few highlights below) because there is not really a place or a need to do (the colors are similar enough not to clash violently). Just look at the palette -- a little history to know what you're talking about: the artist has used 4 shades of green to create the tile of grass, namely one for the highlights, one for the

shadows, and two shades close to the median as a basis. The highlights are used to represent the tops of the tufts of grass, while the shadows are the most depressed and close to the ground. The management of contrast is essential to make a tile of grass: the less contrast you use, the flatter your tile will look; conversely, the more contrast you use, the more more tile will show the volume and richness of local flora (thick layer of grass). We must strike a balance between a pattern of flat ground and "volume", because it can complicate the readability of the screen and draw unnecessary attention. Your grass tile shouldn't drown out more important things like houses, trees, and characters. For example, compare the original screenshot of Rudora no Hihou (left) with a modified version (with darker shadows and brighter highlights). On the right, there is more volume but less readability.

b. Tips and Tricks

Here are two tips to help you better your grass tile (the latter also applies to non-grass tiles as well): -First, it is very advantageous not to use just one grass tile, but rather several grass tiles! If you examine the screenshots provided above you, probably noticed that every game uses several different tiles in order to have variations in soil texture. This allows you to limit the effect of the grid repeating the same pattern over large surface. Most games use 4 tiles of grass (a square 32 * 32), and variety of tall grass and flowers of different tiles. In addition, developers in general try not to have large grassy fields (even full of variation) and fill their maps with cliffs and trees to get rid of the problem once and for all. --

Secondly, it is possible to eliminate the grid effect by correcting small, repetitive details by hand. Consider if you will the tile (32 * 32 pixels, therefore 4 tiles) to your left (made specifically for this tutorial). It's not too bad, but I highlighted some obviously repetitive areas between some red lines. By addressing these areas, I can make my tiles a bit more uniform.

The diagonal problem tufts lie in the upper right of the tile, so it is enough to adjust some of the tufts to correct the problem. On the other hand, the horizontal lines are straddling the top and bottom of my tile (which loop and are therefore therefore evil) and it requires a small trick to fix them. The trick is to glue together a second tile using the top and bottom halves of your tile (with the top on the bottom, and the bottom on the top) so you can see the seam. Then, correct the seam, and put the top and bottom pieces back in their original positions. Now you have a tile that patterns correctly. The result isn't perfect, but it's already a lot more convincing. 2. Trees Well, now that you have the grass, it's time to make a tree. I am not going to insult you by explaining that a tree consists of branches and leaves, and these are usually green. I begin by letting you watch a parade of successful tree screenshots (or not! Chrono Trigger is not an example to follow in this case) to observe, the explanations are below. As before, it would be very good for you to spend time to analyze and dissect these screenshots in detail.

The games are represented here: Alcahest, Bahamut Lagoon, Chrono Trigger, Chrono Trigger encore, Rudora No Hihou, Seiken Densetsu 3, Sword of Mana, Tales of Phantasia --

As you can see, there are many ways to represent trees, from the very realistic Tales of Phantasia to the exotic and stylized Sword of Mana. Here are some important tips to help you create a good tree: The first is that the roots of a tree are embedded in the ground and we tend to forget this and make endless filaments running between the twigs. Trees are planted in the ground; take a walk outside and observe this. As long as you are outside, take the opportunity to take a look at the foliage around you -that's what is most important on a tree. There are two mistakes to be avoided on the leaves: the first is making a leaf flat, like a slice of cardboard. One should bear in mind that the foliage is an object in 3 dimensions, which means it is subject to the rules on light and shadow that have been mentioned previously. The second trap is to think about this too much and reduce the tree to an illumated sphere. We must not forget that the foliage is made up of branches and leaves, which do not form a perfect sphere, but more often a pile of twisted or incomplete areas on which the leaves are fighting to receive the light passing one before the other. Look at the tree of Seiken Densetsu 3: it consists of 4 levels which are drawn on the leaves. -Let's look at a small example:

I begin by roughly drawing the shape of leaves (stage 1), before devoting 5 steps to creating the volumes of foliage. My source of light is to the left, and I add color after color of shadows and lights. Step 3 is where the process appears most clearly. With this done, I draw an outline of the trunk and found that my tree too much like a giant mushroom. I decide to cut some foliage off the top (and yes, a bit of work was done for nothing). I detailed the trunk and many leaves (that is VERY VERY VERY VERY long and boring. Be patient and concentrate) for the second to last stage. Finally, I cut off the trunk to avoid the problem of "root tentacles" and plant my tree into the ground, and I adjust form of the foliage that the tree is less deformed (but not perfectly symmetrical so far), I change the palette of the trunk into something darker and more green (to fit better with the foliage), and I don't forget the foliage because of the shade to the trunk. I pasted one of my tiles herbs below to test how the colors work together, but I was too lazy to make the shadow of leaves on the grass (look at the screenshot Rudora no Hihou, they do it better than me anyway). A final remark: here I am allowed work separately on the foliage and trunk because I had a very dense foliage that completely obscured the branges. Logic would dictate that you first draw on all the branches of a tree (its "skeleton") before adding the leaves, and this is what to do if your trees are bare. 3. Going to the beach! Let's look now at some sunny tiles, starting with a sand tile. Keep the same approach as before look closely at the images below:

The games present this time are: Alcahest, Bahamut Lagoon, Rudora No Hihou, Seiken densetsu 3, Star Ocean, Sword of Mana -If your observations were successful, you will have noticed that the sand tile is much easier to achieve than the previous ones, and that most of the tips given for the tile of grass are also valid here (use multiple tiles, be careful to break the grid, and find a compromise between size and readability). Most of the tiles (especially the most successful, particularly those of Seiken Densetsu 3 and Sword of Mana) are mostly made of a solid one color, with small undulating dunes. Also note that small dithering patterns are fashionable for sand tiles to give a grainy texture. As for palette, we must be careful to avoid retina-wrenching yellow, and not hesitate to use tons of creams (Seiken Densetsu 3) or brown (Rudora no Hihou). If you soften the reds in your paletter, you get a nice sand lit by the sun. 4. Sea, Sex And Sun! We'll conclude our short list with water tiles. There are lots of ways to deal with them (well, more than grass anyway) so you'll have a big job if you want to analyze them all. For me, I'll try and touch on the important parts. These are the images:

The games are represented here: Alcahest, Bahamut Lagoon, Chrono Trigger, Rudora no Hihou (2 times), Terranigma, Star Ocean, Sword of Mana, Tales of Phantasia.

-The tiles and Sword of Mana Tales of Phantasia are the most minimalist of the lot. They make little use of color, and illustrate perfectly the first point I want you to notice: water almost transparent, generally the same color as the other objects in the scene. Let me explain: look at this picture

Pixel Art Tutorial Note: This tutorial was created in 2007 for my personal website. Some small tweaks have been made since then, but nothing too significant. In this 10-step tutorial, I’ll teach you how to create a “sprite”, which is a standalone two-dimensional character or object. The term comes from video games, of course. Creating pixel art is a skill I picked up because I needed graphics for my games. After a lot of practice, I became kinda handy with it, and started to see it more as actual art rather than just a tool. These days, pixel art is quite popular in game development and illustration. This pixel tutorial was created many years ago to teach people the basic concepts behind pixel art, but I’ve streamlined it a lot since its first incarnation. There are other pixel tutorials around, but I find them to be overly-complicated and too wordy. Pixel art is not a science. You should never have to calculate a vector when doing pixel art.

1. TOOLS One of the nice things about pixel art is that you don’t really need any fancy tools – your computer’s built-in paint program is probably good enough! That said, there are programs made specifically for pixel pushing, like Pro Motion, or, for Mac users, Pixen. Can’t say I’ve actually tried them, but I’ve heard good things. For this tutorial, I’m going to use Photoshop, which is an expensive beast, but it’s good for all kinds of art and it’s numerous features are pretty useful for pixelling. USING PHOTOSHOP FOR PIXEL ART When using Photoshop, your main weapon is going to be the pencil tool (shortcut “B”), which is the alternate for the brush tool. The pencil lets you color individual pixels, without any anti-aliasing.

Two other tools that will come in handy are the marquee tool (shortcut “M”) and the magic wand (shortcut “W”) for selecting and dragging or copying and pasting. Remember that by holding “Shift” or “Alt” while you make your selection you can add or subtract from your current selection. This comes in handy when trying to grab areas that aren’t perfectly square. You’ll also use the eyedropper (shortcut “I”) to grab colors. Color conservation is important in pixel art for a number of reasons, so you will want to grab the same colors and reuse them. Finally, make sure you learn the shortcuts. They can save you a lot of time and energy. A good one to know is “X”, which switches your primary and secondary colors.

2. LINES Pixels are essentially little blocks of color. The first thing you need to learn is how to use these blocks effectively to make any kind of line that you want. We’ll discuss the two most basic types of lines, straight and curved.

STRAIGHT LINES I know what you’re thinking – this seems too easy to even bother with! But with pixels, even straight lines can be problematic. What we want to avoid are “jaggies” – little breaks in the line that make the line look uneven. Jaggies crop up when one piece of the line is larger or smaller than the surrounding pieces.

CURVED LINES For curvature, make sure that the decline or incline is consistent all the way through. In this next example, the clean-looking curve goes 6 > 3 > 2 > 1, whereas the curve with the jaggy goes 3 > 1 < 3.

CONCLUSION Being comfortable making any line in pixels is crucial to doing pixel art. Later on, we’ll learn how to use anti-aliasing to make our lines look really smooth.

3. CONCEPTUALIZING The first thing you need is a good idea! Try to visualize what you want to pixel, either in your head or on paper. A little work in the pre-planning department can let you concentrate on the actual pixelling.

THINGS TO THINK ABOUT 1. What will the sprite be used for? Is this for a website, or a game? Will I have to animate this later, or is this it? If the sprite will be animated later on, you may want to keep it smaller and less detailed. Conversely, you can pack as much detail into a static sprite that you will never have to deal with again. But think about where the sprite is going to go, and what will work best. 2. What constraints are being placed on me? Earlier, I had said that color conservation is important. One of the reasons is that your palette of colors may be limited, either by hardware (less likely these days) or for coherency. Or accuracy, if you are emulating a specific style (C64, NES, etc.) Also, consider the dimensions of your sprite and how it will fit with its surroundings. LET’S WRASSLE!

For this tutorial, I didn’t really have any constraints, but I wanted to make sure the sprite was large so that you could clearly see what was happening with each step. To that end, I decided to use the Lucha Lawyer, the ass-kickin’est wrestling attorney around, as my model! He could be in a fighting game, or something, with moves like the “Habeus Corpse Blaster”.

4. THE OUTLINE A black outline will provide a good, basic structure to your sprite, so it’s the perfect place to start. The reason we choose black is that it’s nice and dark. Later on, I’ll show you how you can change the color of the outline for more realism. TWO APPROACHES There are two ways to approach the outline. You can draw the outline freehand and then clean it up, or you can start by placing the pixels as you want them from the start. You know, like, “click, click, click”. I think which approach you should use depends on the size of the sprite and your skill at pixelling. If a sprite is very large, it’s much easier to sketch the outline freehand to get the general shape and then clean it up later than to try and get it right the first time through. In this tutorial, we’re creating a fairly large sprite, so I’ll demonstrate the first method. It’s also easier to illustrate with text and pictures. STEP 1: CRUDE OUTLINE Using your mouse or tablet, sketch out a crude outline for your sprite. Make sure it’s not TOO crude, though – it should resemble more or less the final product that you want.

In this case, I’m basing my outline almost entirely on my sketch. STEP 2: CLEAN UP THE OUTLINE First, crank up the zoom to around 6x or 8x magnification so that we can see each pixel clearly. Then clean up that outline! In particular, you want to trim away stray pixels (the outline should only be one pixel thick all the way through), get rid of any jaggies, and add any small details that were passed over in Step 1.

Even large sprites never usually exceed 200 by 200 pixels. The phrase “doing more with less” never rings more true than when pixelling. And you will soon find that one pixel can make all the difference. Keep your outline simple. The details will emerge later on, but for now, concentrate on defining the “big pieces”, like muscle segmentation, for instance. It may not look like much now, but be patient.

5. COLOR With the outline done, we have a coloring book of sorts that we can fill in. Paint buckets and other fill tools will make it even easier for us. Picking colors can be a little more difficult, however, and color theory is a topic that is beyond the scope of the tutorial. However, here are a few basic concepts that are good to know.

HSB COLOR MODEL

HSB stands for (H)ue, (S)aturation, and (B)rightness. It’s one of a number of computer color models (i.e. numerical representations of color). Other examples are RGB and CMYK, which you have probably heard of. Most paint programs use HSB for color-picking, so let’s break it down: Hue – What you understand “color” to be. You know, like “red”, “orange”, “blue”, etc. Saturation – How intense the color is, or how intense the color is. 100% saturation gives you the brightest color, and as saturation decreases, the color becomes more gray. Brightness (or “luminosity”) – Lightness of a color. 0% brightness is black. CHOOSING COLORS What colors you choose is ultimately up to you, but here are a few things to keep in mind: 1. Less saturated and less bright colors tend to look more “earthy” and less cartoony. 2. Think about the color wheel – the further away two colors are from one another, the more they will separate. On the other hand, colors like red and orange, which have close proximity on the color wheel, look good together.

3. The more colors you use, the more distracted your sprite will look. To make a sprite stand out, use only two or three main colors. (Think about what just red and brown did for Super Mario back in the day!) APPLYING COLORS The actual application of color is pretty easy. If you’re using Photoshop, you want to first select the area you’re going to fill with the magic wand (shortcut “W”) and then fill by pressing “Alt-F” (primary color) or “Ctrl-F” (secondary color).

6. SHADING Shading is a crucial step on our quest for pixel demi-god status. Here’s where the sprite either gets some pop, or it devolves into a horrible mess. Heed my words, however, and you’re sure to succeed.

STEP 1: CHOOSING A LIGHT SOURCE First, we have to pick a light source. If your sprite is part of a larger scene, there might be all kinds of local light sources (like lamps, fire, lamps on fire, etc.) shining on it. These can mix in very complex ways on the sprite. For most cases, however, picking a distant light source (like the sun) is a better idea. For games, you will want to create a sprite that is as generally lit as possible so that it can be used anywhere. I usually choose a distant light source that is somewhere above the sprite and slightly in front of it, so that anything that is on top or in front is well-lit and the rest is shaded. This lighting looks the most natural for a sprite.

STEP 2: SHADING Once we have defined a light source, we start shading areas that are farthest from the light source with a darker color. Our “up and to the front” lighting model dictates that the undersides of the head, the arms, the legs, etc., should be shaded. Remember that the play between light and shadow defines things that are not flat. Crumple up a piece of white paper into a ball and then unroll it and lay it on a table – how can you tell that it’s not flat anymore? It’s because you can see the little shadows around the crinkles. Use shading to bring out the folds in clothing, and to define musculature, hair, fur, cracks, etc.

STEP 3: SOFT SHADOWS A second shade, lighter than the first, should be used for soft shadows. These are areas that are indirectly lit. It can also be used to transition from the dark to the light, especially on curved surfaces.

STEP 4: HIGHLIGHTS Places that are being hit directly by the light source can have highlights applied onto them. Highlights should be used in moderation (much less than shadows), because they are distracting.

Always apply highlights after shadows, and you will save yourself some headache. Without the shadows already in place, you will be inclined to make the highlights too large.

DO’S AND DON’T’S Shading is where most beginners get tripped up. Here are some rules you should always follow when shading: 1. Don’t use gradients. The ultimate newb shading mistake. Gradients look dreadful, and don’t even begin to approximate the way light really plays off a surface. 2. Don’t use “pillow-shading”. Pillow shading is when one shades from the outline inward. It’s called “pillow-shading” because it looks pillowy and undefined. 3. Don’t use too many shades. It’s easy to think that “more colors equals more realistic”. In the real world, however, we tend to see things in big patches of light and dark – our brains filter out everything in between. Use at most two shades of dark (dark and really dark), and two shades of light (light and really light) on top of your foundation color.

4. Don’t use colors that are too similar. There’s no reason to use two colors that are very similar to one another. Unless you want really blurrylooking sprites!

7. DITHERING Color conservation is something that pixel artists have to worry about a lot. One way to get more shades without using more colors is to use a technique called “dithering”. Similar to “cross-hatching” or “stippling” in the traditional art world, you take two colors and interlace them to get, for all intents and purposes, an average of the two colors. SIMPLE EXAMPLE Here’s a simple example of using two colors to create four different shades using dithering:

ADVANCED EXAMPLE

Compare the top picture, which was made using the Photoshop gradient tool, and the bottom, which was created with just three colors using dithering. Notice the different patterns that were used to create the intermediary colors. Try experimenting with different patterns to create new textures.

APPLICATION Dithering can give your sprite that nice retro feel, since a lot of old video games relied heavily on dithering to get the most out of their limited palettes (look to the Sega Genesis for lots of examples of dithering). It’s not something that I use very often, but for learning’s sake, here it is applied (possibly over-applied) to our sprite.

You can use dithering as much or as little as you want. Honestly, it’s a technique that I’ve only seen a few people use really well.

8. SELECTIVE OUTLINING Selective outlining, or “selout”, is kind of like shading the outline. Rather than using black all the way around, we apply a color that is closer to the color of the sprite itself. Also, we vary the brightness of this outline along the edge of the sprite, letting the light source dictate which colors we apply. Up until this point, we’ve kept the outline black. And there’s nothing wrong with that, really, since it looks pretty good and it keeps the sprite well-separated from its surroundings. But by using black, we are sacrificing more realism than we might like to, since it gives the sprite a “cartoony” look. Selout is a great way to get around that:

You’ll notice I also used selout to soften the folds of his muscles. Finally, the sprite begins to look like a coherent whole rather than a whole bunch of separate pieces. Compare this to the original:

9. ANTI-ALIASING Anti-aliasing works under a simple premise: add intermediary colors to the kinks of the line to smooth them out. For example, if you have a black line on a white background, then you would add gray pixels to the edge of the line to smooth it out.

TECHNIQUE 1: SMOOTHING CURVES Generally, you want to add your intermediary colors at the kinks, since that’s where the line breaks and looks uneven. If it still looks too uneven, add another, lighter layer of pixels. Have your intermediary layers flow in the direction of the curve. I don’t think I can explain it any better than that without complicating things. Just look at the pictures, and I think you will understand what I mean:

TECHNIQUE 2: ROUNDING OUT HUMPS

TECHNIQUE 3: FADING THE ENDS OF LINES

APPLICATION Now let’s anti-alias our sprite. Keep in mind that if you want your sprite to look good on any color background, do not anti-alias on its outer edge. Otherwise, you will see an unfortunate-looking “halo” of your in-between colors around your sprite and it will look nasty as hell.

The effect, as you can see, is subtle, but it makes a big difference. WHY DO IT BY HAND? You may ask why we don’t just apply a filter from our paint program to the sprite if we want to make it look smoother? The answer is that no filter is going to make your sprite as clean-looking as if you did it by hand. You have total control, not only over the number of colors you use, but where they get used. And you know better than any filter what areas need to be smoothed out and what areas are going to lose their pixelly quality if you anti-alias them.