Pixel art illustration tutorial
I did the computer demon illustration for the thumbnail of the “How to start making games” post. I wanted the drawing to convey a software development environment, but with a twist. Games are at their best when they let the imagination run wild; when you can see reality on it but it’s distorted, warped.
I settled down on the idea of an old school computer that’s possessed by the game being made, irradiating weird connections to a bunch of machines and control panels around it. I used Aseprite to do the illustration, an app focused on pixel-art, and a Wacom Intuos tablet, which is just great for this kind of drawing.
First, I tried to use an isometric projection to emulate the look of some strategy games. But the oblique perspective did not work out well with the idea I was trying to convey.
I did a second sketch, but this time using a perspective with one vanishing point, right behind the computer. It worked better because it made the image more dynamic.
I liked the overall tone, so it was time to start cleaning the image and add more detail.
Next, I added the colors. I decided not to keep the black outlines, as it made the image too heavy and a bit too much cartoony. Some selective darker outlines can be very helpful to separate the planes of a drawing or to draw attention to an object. This illustration, in particular, did not need that technique.
As a last touch, I added a quick and quirky animation, to inject some life into the image. Aseprite makes it easy to add extra frames to the drawing and tweak its pixels. Because we’re dealing with a pixel graphic, the time-effort is much smaller if compared to a high definition animation. Also, the resulting gif is tiny (~6kb) and loads very fast.