DEFINITION

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. 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.

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. Any tool that places pixels automatically, is generally frowned upon in pixel art.

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. 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

It's not the program that determines whether or not it's pixel art, it's how it is made. If
you can create the image without zooming in, chances are it isn't pixel art. 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

You aren't expected to behave like a robot, filling in large areas with thousands of
single-clicks of the pencil tool. The bucket 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.

FILE FORMATS
Always save your pixel art as a GIF or PNG. Never save it as a JPEG. Both GIF and
PNG files use lossless compression. GIF files support animation, but limit you to 256
colors and no partial transparency. The PNG format was designed to replace GIF, and
supports as many colors as you can put on a canvas, as well as alpha transparency.

JPEGs are terrible for pixel art, because a JPEG's compression wreaks havoc on the
content of the file. It's not usually noticeable in things like photographs, but it can
devastate the quality of your pixel art.

SIZE & SCALE

When it comes to pixel art, tiles are incredibly useful. It can be for a game, or even just
for a specific style! But not only are tiles useful, they help with scale.

SCALE IS THE MOST IMPORTANT THING.

The reason why scale is important, is because it helps us make sure what we're drawing
isn't ridiculously unrealistic! Though saying this, if you're purposely drawing unrealistic
things, then scale is up to you! But for the most part, you want to pick a canvas size that
will fit everything you'll need in a piece.

As for tile sizes, refer to this image:

Almost all tiles I have ever drawn are 16x16, due to the fact that it's easy to express
enough detail without using a large space. Doing more with less never rings more true
than when pixeling: even very large sprites rarely exceed 200x200 pixels.

You may want to pick a sub-scale ~ telling yourself that you must only draw sprites that
are a multiple of 8, or 4. This ensures that what you're drawing is cohesive! Another
thing that might be good to watch for is to keep your dimensions/colors/anything to a
power of 2 (2, 4, 8, 16, etc.) if you plan on using it for video-games (some technical
stuff here)

When youre learning, its better to minimize the size of the sprites (and color count
too). Even if it increases the trouble of conveying what you want to, it reduces pretty
much every other possible trouble that may come with bigger pixel art

If you're drawing a sprite sheet, a good canvas size is 16x the size of your tiles:

8x8 --> 128x128 canvas

12x12 --> 192x192 canvas
16x16 --> 256x256 canvas
24x24 --> 384x384 canvas
32x32 --> 512x512 canvas
HUE, SATURATION AND LUMINESCENCE
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. In this picture
the green in the trees is actually not green at all, but the same neutral grey as the picture
beside it. Because the background is so purple (which is the opposite of green), the grey
looks greener than it actually is:

Saturation is the intensity of a color. The lower the saturation of a color, the closer it
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.
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.

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:

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

In a given palette, you want 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
have is not using enough contrast. Here's an example (bad and good contrast,
respectively):

There are very little changes to the sprite itself, but the updated colors make a huge
difference. It pops, it looks like it has real depth to it. Its the colors the contrast, more
precisely that bring a sprite to life. To make this clear, look at how the same yellow is
used in different situations:

In the first two, there is a buffer color between the yellow and red/green, which makes
everything seem the same whole. In the third, there are no buffer colors between the
yellow in the hair and the skin or the hat, which makes each element stand out and
rightly so: the hair, skin and hat arent supposed to look like a whole, they need the
depth

The value of a color is a set number, but colors can appear lighter or darker depending
on their background. So you won't always use your brightest color for every highlight.
A color that makes a good highlight on one object might be too bright to use on another

Luminescence is especially relevant to pixel art: The brightness of a pixel or line

determines how thick it appears:
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 isnt necessary that you actually create a model like the one above. What is important
is that you understand your color relationships shown by the color ramps. Notice how
each color flows into the next, then to next and so on. This makes for a unified palette

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.

Its 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.

Eyeburn created by a color with high saturation and by green clashing with 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 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 shifting, bend your highlights toward a certain
color (usually yellow, like in the example above), and move the darker colors toward a
second color (usually purple or blue, like above). 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.

LINES & CURVES TECHNIQUES

Lets start with the basics: lineart. Everyone has different methods of drawing their lines.
A lot of people do it with a tablet. Some people draw a sketch on paper, then import it
into their computer and pixel over it. I've always done everything with a mouse.
Experiment to find what works best for you.

When it comes to drawing lines, it is important to keep mathematics in mind!

A perfect line, on a computer, is either a 90 angle or a 45 angle. A computer can't
display a line crisper than that. Other good lines are generally made with 2x1 or 3x1
smaller lines of pixels

So as you can see, the lines go 1 across, 2 up, 1 across, 2 up. Simple! This keeps things
clean, so try to avoid messy random lines. For curves, use increasingly small lines of
pixels as you round the edge, such as "1, 1, 1, 2, 3, 5, 8, 5, 3, 2, 1, 1, 1

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. 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(AA)
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, usually in a range between the line and the background, to ease the transition.

without AA with AA added

An AA technique worth checking out is in-line AA: it applies AA on the outline itself. The curves
use brighter shades than the rest of the lines and the edges are also brighter than the center of
a line. This may not be as good as actual AA, but has its usefulness (though it might look like
bad selective outlining)

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.

When antialiasing between two colors, you also have to take in hue and saturation
shifting, but the concept is the same. Try to get colors that are partway between the
line/object and background. It can take a lot more playing around when doing two
colors of a similar saturation and value.

You cannot antialias the outline of a sprite. Transparency in pixel art is usually a
single background color, marked as transparent in your respective image editor. That
being said, anything antialiased to a transparent background color will only look right
on that one color.

See how ugly that is? It'll only look right on the maroon background it was designed for.
So don't even try to AA outside of a sprite. You can apply your antialiasing skills to
some of the lines inside the sprite, but often it's not worth it

A good way to practice AA is to use curved fonts. Take one without AA and apply it,
one with automatic AA and reduce it, apply AA to a rotated/mirrored font, etc.

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. Usually you wont use more than half the length of the original
line for antialiasing colors
Too little AA- In general, the fewer AA pixels you use, the better, but here the artist
went overboard: the use of a single pixel 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.
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.

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: where an automatic
gradient would use hundreds of colors, you might get the same effect with less than five. 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.

Dithering in general adds texture, but stylized dithering is where you can control better the
texture given. Whereas some dont use dithering or use it just for gradients, others really like it
for textures exactly because of stylized dithering

Speaking of textures, some efficient techniques for illustrating surface properties:

 1. Dull surface with a diffused light spot. Skin and clothing.
2. Polished surface with a sharp light spot. Plastics and hi-tech equipment.
3. Metallic surface made up of a bright but softer spot at top and rim light on the
underside. Machinery and jewelery.
4. Pitted rough surface with a very diffused light spot broken up by simple dents.
Rocks and damaged surfaces.
5. Transparent glass using an offset sharp light spot, a pixel line right around the
object and a gradient getting darker from top to bottom. Glassware and gems.

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:
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:

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 and usually happens due to not deciding on a light source. 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.
Noise is 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 Im
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. Its 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.

PALETTE
Now, the juicy stuff! There are a countless number of palettes. COUNTLESS! "So
which one do I choose?!" First, you might notice most palettes use few colors, a low
color count. This isnt just tradition: less colors means they repeat in the piece, adding
cohesion, and its much easier to manage a few colors than hundreds.

Palettes like Arne's 16 Palette, the magnificent DawnBringer32 Palette, and the
legendary PICO-8 Palette are really good to work with! Notice how they dont have
any colors very similar to each other. However, even if the artists who created them are
more experienced than me, I found the palettes lacked direction towards material use.

"Material use?"
Well I mean the colors are organized and formed around the idea that they work
together, to allow you as the artist to paint with materials.

And with that, here is the first of my two palettes. ENDESGA~16 (EDG16):

Hex (left to right colors on top bar):

#e4a672 #b86f50 #743f39 #3f2832 #9e2835 #e53b44 #fb922b #ffe762

#63c64d #327345 #193d3f #4f6781 #afbfd2 #ffffff #2ce8f4 #0484d1

In a lot of cases, using the PICO-8, DB32, or ARNE16 would be far more versatile! But
I've found for me, when developing NYKRA, that putting the colors into "materials",
you can easily structure different objects.

Now, you might eventually want/need to make your own palette. A common method is
just deciding the colors the piece needs and then going as far as you can with those.
Colors are added according to necessity: details to color, advanced shading, etc.

PAINTING & CREATING

OKAY! So, in this part, I will show you the 6 basic steps to drawing a sprite.

Have a look, and I'll explain below:

 KEY THINGS:
- Give the light a pleasing direction: most used are top-right and top-left
- Use shadows and highlights to show depth: a rule of thumb is a medium amount of mid-tones,
a lot of shadows and less highlights than shadows, but that depends on what you want
- Dont use too many shades: at most two for dark (dark and very dark) and two for light (light
and very light) on top of the foundation colors
- Even if the above example doesnt follow it, a good way to color is to lay the main colors,
then go for the darkest shade (unlit parts), then dark shade (indirectly lit parts, also used as
transition from dark to light, specially on curved surfaces), then light/lightest shades (directly lit
parts). Highlights come last to avoid making them too big

- About pure black and pure white: using them is generally discouraged, but pure white can be
used for very bright/highly reflective surfaces and pure black for outlining sprites so it stands
out from surroundings. One exception for each color
- Watch the colors: a single sprite probably wont go over 32 colors (or even 10, according to
some) total when complete
- Be consistent with form. Don't do tiny 1x1 pixel details on one thing, then none on another!
- In this particular case was used a 2x2 pixel brush, making the art a little more chunky and
easier on the eyes
- Remember that the EDG Palettes are built for materials!
- Make sure your sprite is visible in dark, light, warm and cool backgrounds
- Try to keep shapes clean.
1. Here we start with our basically random "blob", which we will craft in to the leaves.

2. This is our first stage of lighting for the leaves. I like to go from the top-left down
45-ish degrees, but you can go from any direction. But you'll find top-left or top-right
work best.

3. This is the second and final stage of lighting for the leaves. Think of volume, and
play around with how much highlight there is. The Rule of Thumb is generally that
there is a medium amount of mids, a lot of dark, and even more highlights. But this is
up to you!

4. The basic shape of the trunk is put in.

5. The lighting of the trunk is put in. Now, remember that the leaves have DEPTH.
And depth is incredibly important to make your art POP! So there is a shadow coming
from the leaves.

6. Last layer of lighting done, and some extra details.

EDG32
Hex:
#be4a2f #d77643 #ead4aa #e4a672 #b86f50 #733e39 #3e2731 #a22633 #e43b44
#f77622 #feae34 #fee761 #63c74d #3e8948 #265c42 #193c3e #124e89 #0099db #
2ce8f5 #ffffff #c0cbdc #8b9bb4 #5a6988 #3a4466 #262b44 #ff0044 #181425 #68
386c #b55088 #f6757a #e8b796 #c28569

CHARACTER DESIGN & TECHNIQUES

I start off with the tile size (32x32), and then decide to make the character slightly taller.
I then block out COMPLETELY RANDOM shapes (kind of like starting with a
silhouette and adding details later, but more random). Yup, I didn't pre draw this guy!
This is to prove that you don't always need to have a specific guideline. Draw some
blobs, turn them alive! When it comes to turning the blob in to a character design, it
take a lot of "hm, does it look good?" For this guy, I originally drew the green blob,
which I figured could be turned into a head!
After that, some lighting and edits are made. And once I decide "This guy is gonna be a
lizard-dragon warrior", I finalized his design. Put some time aside, and try drawing a
character! Maybe even redraw them a few times.
This guy uses the EDG32 palette, and as you can see, it's really easy to block out colors
and lighting!

If instead you sketch previously (which is much easier for large sprites, whereas smaller
ones may be done better one pixel at a time), zoom in and give your sketch a good look
over. Try to not have any lines more than 1 pixel in thickness, unless you're
intentionally going for a thick outline, and focus on defining the big pieces as details
are added later . You can make adjustments throughout the whole process, so don't
worry if you don't spot everything on your first cleanup.
Also keep in mind there are many ways to sketch. Some draw a silhouette first (said to be
better because it makes you think more in 3D), some draw the outline, and some prefer a
more traditional approach with stick figures and basic geometry

To Outline, Or Not To Outline...

YOU CHOOSE!

One thing to avoid though, is just purely outlining the sprite, rather than taking form
into account. Refer to this:

As you can see, the character looks fine without an outline! But suddenly looks rather
terrible when a solid outline is PUT around the character. The third image is taking
material and depth in to account - which is the way to go!
And the last image is using darker colors according to the light source (outline is a few
shades darker than the colors surrounding it this is selective outline/selout) to give
even more depth, which can look really amazing when done right!!

OUTLINE COLOUR, and the magical "INK"

Since the EDG16 and EDG32 palettes are high in saturation, it would be a sin to use
pure black as an outline.
One of the colours in both palettes is what I call "Ink". This colour binds all of the
colours in the palettes, and makes the outlines softer.

DO NOT USE PURE BLACK, PLEASE!

The difference isn't huge, but when you have a darker background, it really makes it
nicer!

PALETTE SHIFTING & ROCKS

Here I'll show you how I go about drawing rocks:
 REMEMBER: SIMPLICITY IS KEY! Try not to use all 6 of those colours for one
rock. Keep it soft and clean!

Rocks are relatively easy to construct. You mostly have to remember that stone is
formed by layers and chunks. So draw a good ol' blob, and construct the forms!
Also, as you can see, you can easily shift the palette! Metals like aluminium are brighter,
and maybe basalt or steel could be the darker ones!
Easy!

WEAPONS, ITEMS, & TOOL DESIGN

By popular request, I'll tell you about some basics for item design!

One major thing to remember when drawing items, is that it's best to not be too precise.
Using a graphics tablet can help with this, but if you don't have one, try to give the
items life.
Compare the 3 usual designs on the left, to the ones on the right!

Try to avoid being too simplistic! Most items are inside a small tile size, so make the
most of it by including small DETAILS!
A vine holding the head of the Pickaxe? Why not!
Make sure to explore options and designs, because each item is there to show a part of
the game. Every pixel counts!

If you're drawing a pickaxe, make it look like it's been used. Give the sword some
leather, or make the bread half eaten!
When I draw items, I try to make sure that they pull your eyes in - so use more than 2
materials if possible!