Pixel Art Tutorial: Dithering Technique

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Today I will show you a technique that most pixel artists use called dithering. Using this technique, we are going draw a small tilesheet that can be used in a tile map editor. Before we begin, make sure you have your favorite graphics editor, and a tile map editor installed. Let’s begin!

 

Dithering was a technique most artists used when creating 8-bit games. Since 8-bit games were limited to rendering 8 colors, this technique was used to transition two different colors. Dithering is best used for shading and highlighting. The image below is an example of dithering using black and white. These are two totally opposite colors, but as you can see, with the dithering technique these two colors blend quite nicely.

Dithering Pixel Art Example

 

There are several ways do use dithering techniques, you can experiment with different patterns and see which one blends best. My favorite, however, is the example image I just showed. Keep in mind when working with tilesheets, you want the images to be seamless. That way when you use them in a tile map editor, you don’t see any gaps.

 

Unlike the past, our modern computers can render several different colors, so we don’t necessarily have to use this technique. However, people today love the retro-style look, it has become more of a style of art.

Gradient Fill Black & White

 

Now that you have an idea of what dithering is, we can get started on our tilesheet. Let’s begin!

 

Step 1: Create Outlines

To show you how to use the dithering technique, we’ll draw something simple; I’m going to make a painted wooden support pole for an interior level. There will be  three parts of this tilesheet: top, middle, and bottom. The middle part of our wooden pole will be seamless. We want to be able to stack the middle part, so we can adjust the size of the pole in our tile map editor. This image is a 96×32 tilesheet, but I have resized it to make it easier to see. Like always, we start with our outline. Now we can move on to step 2

Dithering Step 1

 




 

Step 2: Fill in Main Colors

In this case, we will have two main colors: red and brass. For those of you who are curious, I am not a 49ers fan! (Yes, I know their colors are red & gold) I only watch college football. 🙂
dithering-s2

 

 

Step 3: Add Shading Color

Pick a light source first. Most of my previous tutorials, the light source was the sun, and it was always coming from the top. In this case, however, it’s an interior object. The light source, in this case, may be a light bulb, a lantern, candles, or any man-made lighting object. In the level, I may want to place the lights between each pole, so the highlights will appear on each side of the pole. Now that we have this figured out, add a little bit of your shading color, but don’t overdo it. Remember, we will be using the dithering technique to blend the colors.

dithering-s3

 

 

Step 4: Add Highlights

Add you highlights to both sides of the poles, but again don’t overdo this. Since the brass part of our wooden pole is more reflective, we won’t worry too much.

dithering-s5

 

 

Step 5: Focus on the Middle Tile

The dithering will be done on the red painted part of our wooden pole. To make sure we can stack the middle tile, we will focus first on that. I like to use a select tool, to select that particular tile. To do this in photoshop, grab your select tool and move your cursor to the canvas. Hold down the shift key, click the left mouse button and drag while still holding the shift key. This makes it so you can select a perfect square. Drag it until you have a 32×32 pixel square. If your ruler isn’t set to measure in pixels, go to Edit > Preferences > Units & Rulers. Then in the units section, change rulers to pixels. To make sure you have the selection in the middle tile, drag your 32×32 selection to the top (Not using the move tool). Now drag your selection down. If you’ve noticed, now you can see by pixels, how far you’re dragging the selection. You want to move down by 32 pixels to get the selection to the middle tile.

dithering-s5b

 

 

Step 6: Begin Dithering

Dither your shading first, then the highlights. Make sure your dithering is in an even patten. That way we can stack our middle tile.

 

dithering-s6

 



 

Step 7 Complete Dithering

Complete the rest of the image by dithering the top and the bottom part of the pole. If the patterns match evenly, then you’re done.

dithering-s7

 

 

I hope you have enjoyed this tutorial, don’t forget to like, comment, share, and subscribe.

Facebooktwittergoogle_plusredditpinterestlinkedinmail

About Justin

Computer programmer and owner of kauergames.com.
Bookmark the permalink.

2 Comments

  1. Wow! That’s really cool.

Leave a Reply

Your email address will not be published. Required fields are marked *