Pixel Art - An Introduction

What is a pixel?

The dicitonary definition, per Wikipedia:

In digital imaging, a pixel (abbreviated px), pel, or picture element is the smallest addressable element in a raster image, or the smallest addressable element in a dot matrix display device. In most digital display devices, pixels are the smallest element that can be manipulated through software.

In digital imaging, the pixel can be thought of as a basic building block of images, typically square in shape:

With a collection of of pixels, you can create straight lines, and with those lines you can create the beginnings of 2D primitive shapes, such as squares and rectangles:

Provided you are using a 1:1 ratio for the height and width, you can even draw 45-degree diagonal lines, such as those in a right triangle:

But what happens when you attempt to draw triangles with varying widths and heights?

Well, it’s important to remember that the arrangement of these pixels are meant to be “representative”. They’re not meant to be mathematically accurate, but give you the best approximation of what that arrangement of pixels is attempting to convey within the limits of the technology.

For pixel art specifically, this means that some amount detail will be lost in the translation, but that’s okay since we’re just trying to get the main ideas across.

The trick, though, is to make it believable as a straight, diagonal line. How might one do this? The answer is fairly intuitive.

Lets consider some angles, using an X-Y Coordinate system as our base.

As can be seen here, I’ve made diagonal lines corresponding to 1:1 proportions and 1:2 proportions. Using this template, I can begin creating triangles of different shapes and sizes:

So, what about circles? Or rather, how would you even draw curves?

To draw convincing curves, we iterate on the number of pixels along the the curve connecting the two flat sides:

There’s a number of ways you can achieve this effect as well, depending on how harsh or soft you would like the curve. For example:

This is very useful when attempting to create circular objects:

And when we start combining everything what we’ve learned thus far, we can start creating three dimensional shapes!

In the next part, we’ll be looking at at the various techniques we can use to create 3D objects in different configurations.