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.

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-aa-machines 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 Anti-aliasing 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 clusters- groups 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

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:

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 counter-measure 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. Pillow-shading 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 pillow-shading 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 anti-aliasing 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:

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 are- that 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 hue-shifting applied. When using hue 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.

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.

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 two-dimensional 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 three-dimensional 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 three-dimensional 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.

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.

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.

L

C

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