Why Pixel Art?

Because it's awesome.

Moving on...

Technical constraints

Good pixel art that maintains that "pixel" feel often does so by following a few clearly established limitations. There are a few things you can do to define limits for yourself when working with pixel art from the basic size of your image to the kind of tools used within your chosen art program.

Limitations can be helpful so that you don't have to be continuously checking to see if any given action is exceeding your desired range. For instance; if you want to make an image that uses 10 colors then instead of trying to keep a mental list of the exact RGB values (30 different numbers) it would be better to make a list of "swatches" (chosen colors) to pull from to ensure you don't use colors you didn't intend to. If you can decide early on what kind of canvas size you want to work with then you simply have to remember never to exceed that.

Resolution constraints

Deciding what the resolution or scale of your images should be is a give and take process where increasing the resolution has both benefits and drawbacks.

  • If you increase the resolution you'll be able to fit more detail into any given image.
  • The more you increase the iamge resolution the less effective individual pixels will be.

Where the most effective resolution lies is always up to the artist but there is one obvious rule of thumb that should be followed.

If you can't see the pixels, then it's not pixel art.

Classic console hardware for instance usually had a resolution of only a few hundred pixels across. Most Super Nintendo games utilized the default resolution setting of 256 horizontal by 224 vertical. Choosing a similar size for your own projects is an easy way to ensure a similar aesthetic.

A screenshot of "A Link to the Past" for the Super Nintendo. Here we see the actual image size of the game at the original resolution. A bit smaller than your modern monitor screen isn't it?

Color constraints

Pixel art is not just about limited resolution. Other properties of the image such as color depth are intentionally limited as well.

Indexed image files store pixels as positions on a list of user-defined colors (typically 256 entries long) instead of storing the color for each pixel itself.

Some artists like to limit themselves by only using "index" color modes within their application. Programs like Adobe Photoshop actually allow you to apply index coloring as the image format. This would physically prevent you from using colors that are not on the index list so you don't have to worry about using a "wrong" color.

So why limit colors as well as the resolution? Of course the obvious answer is that pixel art has its roots within classic video game consoles where palettes were often very limited (the NES could only have 4 colors per sprite for instance) but there is another reason. Even if your goal isn't to reproduce retrograde hardware it can greatly help in the *clarity* of the image. Fewer colors can make it clear exactly where, and how much a surface changes direction. Examples of this can be seen further down in the shading section.

Linework in pixel art

Just as with traditional art anyone trying to create pixel art will have to decide what style their image wil use. Is it cartoonish? Is it more realistic? Will it be flat or look like it is lit from a specific light source? Outlines or no outlines?

It's important to decide upon a line thickness and maintain it throughout a project. Inconsistent styles in characters, objects, and backgrounds not only look less developed but can distract the viewer's eye from what you want them to actually see.

There are four general approaches to line art (for any kind of drawing). Thin lines, thick lines, brush lines, and no lines.

Constant width lines (thin and thick)

Thin and thick lines are the easier to utilize than variable width lines but still require care when being drawn. It's easy enough to see your line thickness when the line is straight but can be trickier during turns and curves.

XXX

Note how pixels that make up the black outline flow. Pixels that make up diagonal lines either touch pixels adjecent to them or diagonal to them but never a pair of pixels that is both adjecent and diagonal.

Brush lines

When peoople refer to linework as looking "brushed" they are describing lines that become thinner towards the tips of line strokes.

Lines that taper as if drawn by a brush tool have the same problem as thick lines however. To look tapered the lines have to start thick in the middle before they can become thin at the ends. This means more pixels devoted to the thickness of the line which leaves fewer pixels for the coolor and shading.

This technique therefore works better when the art assets are given higher resolutions. Such as the larger sprites of classic brawler games (As opposed to platformers that traditionally have smaller characters) or games with 480 vertical pixels (as might have been seen on early PC VGA monitors).

Colored lines

One of the more popular techniques is to make the outlines a similar *hue* to the fill color. In other words the outline around a characters shirt should be a darker version of the characters shirt while the character hair should be a darker version of the character's hair and so on.

No lines

Even for pixel art it's perfectly acceptable to have a lineless style that uses only shape and color.

The benefit and drawback of this approach is the same for normal, high-resolution drawn art without linework. The lack of lines will allow you to makea natural or "realistic" image, but at the same time will require you to find an alternate technique to denote the edges of diofferent shapes.

Note the differences between the left images with linework and the right images without linework. While our two images are against a solid grey background neither seems to be particular "better" than the other. But it's fairly rare, especially in a game, that you'll want solid color backgroounds of a pre-defined color like this.
Now what about a more varied background? One with a wider range of tones? Here we see that the version with an outline still has clearly defined borders. However the version without lines becomes harder to see where the light grey meets the top of the background. Darker colors would have similar problems standing out against the bottom of the background.

These examples show why the linesless style might work better with singular works of pixel art where you can control the composition of a character or object over the background. When you can't control where a character will be standing, such as with a video game, then for the lineless style to work you might need to establish guidelines that increase the contrast between background and foreground. For instance; is it easier too identify the borders of the linesless version when we change the background like so...?

As you've might have read in a different section there are many forms of contrast beyond changes in brightness. Hue and saturation can be created to create a background that appears different than foreground objects.

Of course this means you'll never be able to use those specific background tones in a foreground character or object. Whether or not this is an acceptable trade-off will be up to the individual artist depending on the needs of thier project.

Color and shading

Showing the curvature of a surface or the angle of a surface from a light source is can be difficult when using Pixel art not only due to the smaller image area but because of limitations of how many colors you'll want to use.

Shading styles

Let's look at a few ways in which you can add shading to your pixel art.

Generally when starting a new image you'll use very simplistic shading to help you decide where light should fall on an object. You can also use this early form, probably using only two or three colors, as an actual style.

As you can see a two color object looks fairly cartoonish. If this is the desired effect then it will simply be a matter of smoothing the edge so that it has jagged lines only where you need them (corners or object edges). The sphere here requires a smooth, curved line to denote the round nature of the surface.

With this version we've added more colors to better denote the curvature of the surface. Even just 5 colors is enough to fully show that the object is a sphere.

However, at this point we are skirting the line between a cartoonish style and a more rendered, natural style with smooth lighting tones. The added shades make it more natural, but the stark change between one color and the next still invokes a more comic style.

If we don't want to (or can't) add more colors to make it even smoother than we need to look for ways to smooth the appearance of the colors we already have.

Dithering involves alternating a narrow range of tones in quick succession to simulate a wider range of tones.

Here we see an example of dithering. This is a technique whereby two (or more) colors are interlaced with one another so that they can create the appearance of a third (or more) color.

This sphere uses a simple version of this technique (referred to as "diffusion" in most programs) to effectively double the number of shades we have on the object while still only using the original five colors. This is done by alternating each color on a single-pixel level to form "bands" of the new shades where the two previously solid shades were touching.

While this has introduced slightly more "naturalism" into the object you can still see a "banding" effect in the smaller version of the same image above. This is typically an undesirable effect as may make the surface look like it has angles in the surface (with each color change) where we don't want angles to appear.

Noise refers to random variations in color components to remove the appearance of flat / solid colors or aid in the transition between two solid tones.

Here we see a similar approach that still only uses the same five colors but finally has a much more natural appearance. This is done by introducing basic noise into dithering of the image.

In this case the noise was painted by hand. In some painting programs you'll see options for noise generation but generally they are not designed for transitions from dark to light as we have here.

Keep in mind that just because this was the final image in this sequence we are not endorsing it as the "correct" way. Dithering can easily be applied to a point where it resembles an image without color constraints which would break the "pixel aesthetic". How far to take this technique will always be up to the artist.

Tiled images

Many pixel artists, when making scenes, make use of tiled backgrounds. Not only does this help save time (by allowing you to copy and paste these tiles) but it helps recreate older gaming aesthetics if that is your goal. Back then it was important to use tiles because they would allow you to build entire scenes by repeating tiles over and over and therefore save memory on the low-spec hardware.

Let's examine this shot from "Secret of Mana" (1993) below. Here the image has been blown up from the original resolution and a grid placed over it to make the tiles more obvious.

Notice how the world falls into even divisions. Ignore the characters for now. In some games like "Secret of Mana" object position was stored differently than the tiles so they did not have to fall evenly within a tile. But buildings, stairs, static objects like pots and tables, even the flowers in the garden, are all individual "tiles" that fit together like a puzzle.

By using such a system not only could old console hardware save memory space by repeating similar images (there are around 38 uses of the plain grass texture in this image alone) but at the same time made it easier for artists to build the world by just fitting together these pre-made pieces. Objects that appear to be larger than one tile size were probably just made up of several tiles. The trees for instance would simply be 8 tiles placed together.

There are actually several kinds of projections or views to use when drawing tiles. Straight squares, rectangles, dimetric projections, trimetric projections, and hexagonal are all possible.

Square tiles

Tiles that are perfectly square are fairly straightforward to create. Just make sure that the width and height measurements are he same.

Dimetric (and Isometric Tiles) views

For many years, and to a certain extend today, any view projection that makes use of diamond shaped tiles tended to be referred to as "isometric". Especially in the realm of video games this term is actually being used incorrectly.

A true "isometric" view would be made up of the following properties.

  • There is no forshortening due to perspective (the view is "orthogonal").
  • The angles on an object that are 90 degrees to one another are drawn as being either 30 or 60 degrees to one another.
  • Vertical and horizontal measurements that are the same on the object will be drawn the same length within the view without distortion.

For example a perfect cube where the width, height, and length are all the same measure. Typically we might imagine a perspective view where the cube recedes in size from front to back. But with the orthographic nature of the isometric view it will not.

Dimetric views are very similar to isometric views with one exception. It does not demand that 90 degree angles be drawn at 30 or 60 degrees. In a dimetric view the corners may be drawn at any angle. The lengths of vertical and horizontal lines should still be the same however.

Here is a comparison to illustrate the difference.

So why is this the case? Why is pixel are not actually isometric? It's simply because of the way the square pixels on your screen are measured. Most hardwares vies to make individual pixels as square as possible to ensure that the images displayed remain consistent.

Trimetric views

Trimetric views are similar to Dimetric in that it is orthogonal but the similarities end there. It does not require similar lengths to any two directions and does not dictate a height to width ratio.

It does have two main drawbacks and two main benefits.

  • It makes scenes look a little more "natural" by not making the view symmetrical. Generally non-symmetrical compositions in any image will make the image seem more naturalistic since we rarely see objects / rooms / buildings from straight on angles.
  • On the scale of good visibility trimetric actually rates the highest. It allows for objects to exist in front of and behind other objects without obscuring one another too much.

At the same time it has two main drawbacks.

  • In video games some users do not find it as "comfortable" to interact with (click on) tiles that are not on the same plane. It may make it harder for them to judge distances.
  • At the same time Trimetric tiles will require more time to produce since, if you are rotating any items, you can not simple mirror the tile / object. Any object that was facing leftwards must be completely redrawn if you suddenly want it to face towards the right.

Because of these factors make sure you are ready if you want to embark on a project that uses Trimetric projection.

Maxis' "Sim City 4" (2003) is an example of a 2D sprite-based game that makes use of Trimetric projection.

xxxxxxxxx

Hexagonal

Hexagonal tiles are a favorite of turn-based strategy games because of their circular movement cost. What does that mean though? Imagine you are moving a character on a board, like in chess, and you are allowed to move the character 3 spaces. If you look at the possible spaces you can move to from the starting point on a board of square (or dimetric) tiles then you'll see it produces a diamond shape that doesn't seem natural. In the real world if you were to walk 1 meter in a direction of your choice you'd expect to be able to walk anywhere within a *circle* with a radius of 1 meter. Because of their 6 sided nature hexagons allow for a slightly more natural movement range.

XXXXXXXXXXX

Hexagonal tiles fall somewhere between square and trimetric tiles in preventing objects and characters from covering one another.

Hybrid systems

Some games have actually made use of more than one of the above systems within the same game state. One of the more popular examples of this was "Fallout" and it's sequel from the late 90's.

The early Fallout games made use of both hexagonal and a trimetric set of tiles. These two layouts were able to coexist because of two reasons that you must keep in mind should you want to use more than one system at a time.

  • Individual tiles fit together at regular intervals.
  • The different tile types support specific systems within the game.

In the case of Fallout what this means is the following...

  • For every square tile there is an accompanying hex tile at a particular angle / distance.
  • The trimetric grid existed specifically for building and wall placement.
  • The hexagonal grid existed specifically for player and npc movement.

Common tiling concepts

Regardless of what type of tile you are interested in there are some ideas and techniques which apply to all of them.

Consistent scaling

Depending on your target resolution the tile templates on this page may or may not be appropriate for your own project. Keep in mind that it doesn't actually matter what the resolution of a tile is, what matters is the angle of each line and how the pixels of the lines are arranged at the point of intersection.

Seamless textures

Making tiles "seamless" and making them transition from one to another.

Seamless tiles are images that can be placed adjecent to one another without an obvious "seam" where one tile ends and another begins.

To make a seamless tile it is often easiest to place two versions of the same tile next to one another. Preferably within software that will automatically update all tiles to reflect the changes made within one tile.

Some dedicated pixel art programs have automated tiled views. See the list below for information about that.

Seamless textures (Photoshop)

If you are working with Adobe Photoshop specifically then you won't be able to find a "built in" function for viewing tiled images. But it's actually easy to make a make-shift tiled view system using "Smart objects".

For instance let's say our target tile size is a simple 16x16 square tile while our target screen size is about 256x256.

  1. Create a new canvas of the target size (let's say 256 by 256 pixels).
  2. Create a square (on a new layer) of the target tile size (16).
  3. Convert the square to a "smart object" (right click the name of the layer and select "Convert to smart object").
  4. Arrange 9 or more smart objects in a regular grid on a larger canvas.
  5. Double Left-Click the new smart object layer icon to open it for editing.
  6. Choose a "2-up" option from the "Arrange" options under "Window".
  7. Make changes to the canvas containing the smart object.
  8. When you save your smart object it should update the pattern in the other view.

It's not a precise system, but then again, Adobe Photoshop was not made with pixel art in mind.

Organic, non-uniform tiles.

Making tiles transition from one image to another typically involves creating a third tile. Consider the image below of from "Final Fantasy 6" (1994), also for the Super Nintendo console.

What you can see in the screenshots of both "Secret of Mana" and "Final Fantasy 6" is how some landscape features curve by applying specific tiles that lead into one another. In the case of Final Fantasy 6 the cobblestone that is slightly covered by snow avoids actually looking like the square tiles they are because the tile is drawn with both snow and cobblestone within the same tile.

Layering tiles.

These days we typically don't have to worry about storing separate tiles for every transition if we don't want to. It used to be necessary because old console hardware either couldn't draw too many tiles with transparency or couldn't draw "semi" transparency which allows for proper fading between colors. Now however pretty much any operation involving drawing images to a screen is inconsequential to a modern computer. This means that we can layer images so that a few tile images can be combined in various possibilities to make many, many different possibilities.

Height coordination.

When putting together tiles to create an environment it can be possible to end up with tiles that are misaligned or don't "point" towards one another. To the eye *all* of the tiles exist on a 2d image but we still have to take into account the 3d space you are trying to create the impression of.

Coordinating and maintaining proper heights when assembling tiles into an actual environment is important to sell and environment as something that actually exists. If the vertical and horizontal positions of floor and wall tiles don't align then this impossible space can easily give a feeling of "unease" or at worse remove any possibility of the scene actually existing.

Let's try and explain this visually. In the following images examine the ground and both sides of the wall that you can see. Are there any inconsistencies?

Now that you've looked at it let's establish 4 facts.

  1. Within our view we can see that the ground extends all around the walls and does not appear to change height at any point.
  2. The lower half of the wall (near the viewer) appears to be 3 units high (drawn elements that may or may not be a single tile).
  3. The upper half of the wall appears to be only 2 units high.
  4. The top of the wall displays no change in elevation. It appears to be parallel to the floor.

Do you see the problem? Notice how the wall has taken on an Escher like quality where, even though the top of the wall appears parallel to the ground, the rear wall is shorter than the front wall? This scene should not be physically possible.

This is what we mean by watching out that you don't create "impossible space". This is something that will prevent a viewer from becoming immersed in the scene. So how do we fix this? There are several possibilities. Each depends on how you want the actual space to look.

  • Add another row of units to the bottom row of the rear wall so that the entire wall is 3 units high.
  • Remove a row of units from the front wall so that the entire wall is 2 units high.
  • Add or remove units from the top of the wall and make a tile that indicates a change in elevation there; such as stairs or an incline.
  • Change the grass tiles to indicate a rising elevation from front to back.

No particular fix is best, it all depends on your own design, it is simply important that the image be consistent and believable.

Program comparisons

WIP

Here is a simple chart that shows the capabilities of various programs that can be used to make pixel art (though that may not be the focus of them).

ADDENDUM: Forget the table below. For character / item creation that needs animation get "Aseprite" and for world building using tiles get "Pyxel Edit".

Name / Link Free Animation Index palette Auto tile view
Adobe Photoshop Hell no Barely Yes Work-around
Adobe Fireworks Nope Not great Yes Work-around
Graphics Gale No Yes Yes No
Paint.net Yes No   No
Tile Studio        
xxxxxxxxx.

Animation

While Adobe Photoshop is the standard art program across hobbyist and professional studios alike it is not necessarily the best choice for Pixel Art. If you are used to working with the layers browser it can take some getting used to because most of the individual frames will be displayed and selected in the animation view - but will have effects such as opacity still applied via the layer palette.

What is a little jarring about photoshop is that each layer will be a different frame. This seems wasteful at first since you are essentially seeing the same information in two different places, the timeline and the layer palette, but is not impossible to get used to.

Individual layers can make up background elements (so that if you change the background once you don't have to do it across multiple frames) but will appear on different tracks.

If you want to use Photoshop then follow these steps.

  1. Bring up the timeline by choosing "Window > Timeline" if it is not already open.
  2. Choose "Create Video Timeline" from the dropdown menu in the center of the Timeline palette and press the center button to enable it.
  3. If starting an animation you'll probably want to make individual frames larger to see them better. Do this by adjusting the scale slider at the bottom to the right (it has two icons that look like mountains at either end).
  4. In the Timeline, on one of the layer tracks, you'll see an icon of a film trip with a small arrow next to it (to the right of the name of the track / layer). Click it and choose "New video group". Video groups are very helpful because they allow you to see multiple frames on one track in the timeline instead of each frame / layer being on a different track which would force you to be constantly scrolling the timeline vertically to see each frame.
  5. You'll now see a "video group" in the layer palette just as you might see a normal group folder (but it will have a clapper board for an icon). Any new layers / frames that you make and drag into this group will appear on the same track. Make a new layer or two to test it and move them into the group.
  6. Make a another layer but leave it outside the video group. You should have at least two tracks within the timeline now.
  7. Test resizing the frames in the timeline by grabbing the end of the frame and dragging it to the left or right. This is an easy way to adjust frame length. Background plates, such as the frame / layer that is outside the video group, should run the length of a single shot. So if a single clip of animation runs 1 second and has 12 frames of animation then the video group should have 12 frames / layers on its track while the background layer is a single layer spread out to be the same length as those 12 frames.