Pixel art part 3: the pixel

 

Hey! you have 8 minutes? That’s what you need to read the whole thing! 

This is the last part of our pixel art tutorials, if you’re interested about the pixel art basics or about pixel art animation from scratch, don’t forget to check the part 1 and part 2 of this series.

The pixel

The pixel is the smallest part of almost anything related to images, and most of the time is indivisible. Every screen or non-vector image are composed by pixels, and the size of them are proportional to the amount of pixels and the size of them. Sometimes the amount of pixels is represented in terms of resolution:  for example, a 1920×1080 picture has 1920 pixels width, 1080 pixel height, 2073600 pixels in total and the pixel size depends on the picture size or the “zoom” applied to it.

A pixel has two main properties:  they’re squared and colored by a single color. Sometimes, a pixel may have an opacity value to achieve some transparence effects.

 

 

As shown in previous articles, we can create pixel art by painting each pixel one by one, but in theory, we can create any image using the same technique (and some of our sanity). Every non-vector image is an approximation to a model using colored pixels and some techniques. Normally, the bigger amount of pixels, the better the approximation will be.

Giving color to squared shapes

Each pixel has a color, but what color? There are any limits?

Well, once upon a time,  any NES videogame had around 13 colors available at a time and 50 in total, and Game Boy has only some shades of green to work with. Now almost everything works at least with 8-bits colors, and that means 256 colors. Raw pictures taken with reflex cameras can reach 12-13bits, and some software like Photoshop can work with up to 16-bit. At this point, using the 8-bit palette is a common practice, but if you need a classic design for your project, you can use only NES colors or even shades or green like the good old Game Boy times.

More colors means more freedom and more ways to detail your models without adding more pixels. For example, the Mario model changed a lot in a few years without growing a single pixel:

 

Anti-aliasing

In previous post I’ve written about dithering, using color contrast to create details, or hard lines to define shapes. Now it’s time to create softer curves, and the way to approximate a shape created by little squares to a soft curve is called anti-aliasing and it’s done by blending some pixels with the background color (or using the opacity value to blend them with dynamic backgrounds).

 

That’s not a technique to hi-res pieces or 3D games with tons of polygons and huge textures, you can apply anti-aliasing to a low resolution pixel-art model to create softer curves,  especially in models over 50×50 pixels, where the pixel size is usually little enough.

Size matters

Lots of doubts come from the size topic when someone arrives to the pixel’s world. The pixel size is so important, your models have to be in the same scale as the background, and that means a fixed number of pixels as size. Nowadays, a common screen is much bigger than an arcade screen, and that means smaller pixels, what means smaller models with the same amount of pixels at the same time.

 

 

At this point a difficult decision has to be made: What kind of pixel art you want? You can choose any amount of pixels to work with, the more pixels, the more detail you can achieve, but as I mentioned in the first part of this pixel art series, another option is creating a low res pixel art and then, scale it to a higher resolution using the “nearest neighbor” method to create “virtual” pixels composed by more than one real pixels (sometimes a lot of them)

A good way to start is creating a canvas as big as the chosen resolution, and then draw a fast sketch of the model to see how many pixels are needed. Making the model’s canvas a bit bigger than the size of the sketch is always usefull, especially when the model will be animated (a wider area is needed for characters performing dive kicks!).

 

 

 Not enough pixel art?

Then I’ll leave some links for you:

• Fool’s Deviantart – A pixel art master. Enough said.
• Pixelartus/PixelProspector – Pixel art news, articles and tutorials. Follow him on twitter @PixelProspector!
• Pixeljoint – Pixel artist community.
• 2D will never die – 2D retro games for ever 😀 ! Tutorials and a good retro look!

 

That’s all for now, and that’s all about pixel art for a while.  We wait your opinion or results on any of our social accounts or even here as a comment!

PD: Thanks everyone for your attention and thanks to all of our followers, we are more than 100 in twitter right now! Even boss loves you all!