Wiki: Notes on Doing Pixel Art

Hi! This article is part of my personal wiki where I write personal notes while I am learning new technologies. You are welcome to use it for your own learning!

What to learn pixel art?

Pixel art is a very visual endeavor and it is easier to learn about it by seeing someone do it and practicing than by reading a collection of tips and scripts. Because of that, if you are interested in learning pixel art, I strongly recommend you this course from Udemy: Learn to Create Pixel Art For Your Game run by game developer and artist HeartBeast. It's really good!

What is Pixel Art?

Pixel Art is a form of digital art where art is created by editing pixels normally at very small scales. If you’re born in the 80s like I am, you’ll look at these graphics with lots of nostalgia as it is the defining aesthetic of 8-bit and 16-bit games we use to play as children in Arcade machines and video gaming consoles like the NES, SNES, NeoGeo, Sega Genesis, etc.

Me sharing some pixel art... :D

Pixel Art is a very interesting form of art because it has very hard constraints, which make it very challenging and, at the same time, very approachable (since you only need to fill at most 16x16=256 pixels with colors). It also looks awesome and it has that little bit of nostalgia that you can rarely find anywhere else.

How to get Started? Take a look at this awesome web based editor: Piskel.

Taking a look at Piskel, The Web-based Pixel Art Editor.

I added some more alternatives as an appendix at the bottom of this article but Piskel is a great way to get started with Pixel Art. It is web based, so you don’t need to install anything, and incredibly user friendly. Here’s a quick tutorial to get you warmed up:

A Process For Doing Pixel Art

This is a deceivingly powerful process for doing pixel art. It looks very simple but it really produces great results:

Use two lighter versions of black (grey and light grey) to indicate where the light source illuminates the character or elements within the composition

Now change the grayscale palette for actual colors following these rules:

A light color is the result of increasing the value of the base color and making the color warmer (change hue towards warm colors)

A dark color is the result of decreasing the value of the base color and making the color colder (change hue towards cold colors)

Throughout all this process it is extremely helpful if you often keep an eye to the preview of your pixel art at the correct (small size). Something that make look bad in close proximity can look awesome when looked from afar (which is how the pixel art will be displayed in the end).

Pixel Art Theory

Fundamentals Of Pixel Art: Shapes, Values and Edges

This ties a lot into traditional drawing and sketching. You can see any character and scene drawing as a composition of different basic shapes of diverse sizes: triangles, rectangles, squares, circles, cones, etc. You can start drawing using this basic shapes and then refining them into more complex ones that are more humane and dynamic. At this point your composition will look flat. The good thing about using basic shapes is that they give you a good idea about the scale and position of the composition before you have done too much work on a piece.

In order to give it a 3 dimensional look you need to work with value (the brightness of colors). Use a small number of hues (colors) for your characters and play with lighting and shadows (same hue, different value/brightness) to make your shapes pop and become 3 dimensional. The way to do this is to define a light source, make the parts of the character hit by the light source brighter, and the ones farther again darker.

Edges are extremely important in pixel art because since you’re working in such a teeny tiny medium they affect the final look of your composition a lot. 99% of the times you will want to be very careful to have very fine, clean edges and only in some occasions you can use them to accentuate forms. A very, fine clean edge is a single pixel edge (basically, you want to avoid steps, like stair steps).

Building Color Palettes

What is the HSL color scale?

H stands for Hue and it is essentially what we normally know as the color itself (red, green, blue, etc). Saturation is the amount of grey within a color. Value is the amount of white within a color. Find out more in wikipedia!

As I shared in this article the HSL scale (Hue Saturation Value) is an extremely useful color scale to create palettes for drawings, web design, etc. You can conveniently create palettes from different shades of the same color by changing the value (amount of white, brightness) of a given base color that you want to based your palette on.

In order to make palettes closer to reality, in addition to changing the value from the base color, think about how light affects real life objects. Natural light is rarely pure white, oftentimes it is a warmer version nearer the yellows. So when defining a palette with lighter and darker colors, try making your lighter colors higher in value, more vibrant (slightly more saturation) and nearer the warmer colors (yellow, red, orange) and conversely, try making your darker color nearer the colder colors (blue, green, purple) and less vibrant (less saturation).

Animations

A pixel art animation is a collection of images known as frames which represent movement over a period of time. In pixel art, when you make animations, you’ll oftentimes need to create each of these frames manually. When you play them one after the other very fast, they’ll create the illusion of movement or animation.

A stick figure jumping! This was my first ever animated sprite.

A Script For Animating

Start with a good pose that will be a good starting point for the animation you want to create

Continue by creating the main positions or key frames for the animation

Fill in between key frames with more frames that make the animation smoother

You can use motion blurs as a cool effect which gives you the appearance of movement. A motion blur is literally the blur caused by an object moving very fast. Because it is a blur, a mix of air and object, you can make these colors brighter (as they’re a combination of solid object with air).

General Tips for Character Creation in Pixel Art

Start with a silhouette of the character you want to draw. Focus on basic shapes only.

Now and then, make sure you take a look at the character from far away, zooming out or event better using a preview. When doing pixel art it is very hard to look at the proportions of a character when looking too close.

Use palettes with a limited number of colors

Symmetric art can be static and boring. You can start symmetric, but try building asymmetry in your composition to make it look dynamic, alive and interesting.

You can use scale to create depth in a composition. Just like in reality, closer objects appear bigger than objects which are far away. Take this into account when creating your pixel art. You can use it when drawing characters (a forward fist, arm, leg is bigger than the rest of the body), or when drawing scenes (a near tree is bigger than trees far away).

You can also use colors to create the illusion of depth in a composition. If you reflect about light sources in reality, you’ll realize that closer objects are more defined while further ones are more blurry. You can achieve the same effect by having closer characters using colors with less saturation, and blending the colors in your palette more and more with the background as you draw objects in the background.

When creating smooth curves and arcs, you can take advantage of transparency in your palette. Using more transparent versions of your arc color you can make a jagged curve or edge look more smooth. This technique is known as anti aliasing.

The sky looks lighter as it touches the ground

General Tips for Animating

Don’t be subtle when animating. You want to have long and expressive movements. And then, if need be, reduce them on the refining stages.

Add some wait in key frames to add tension to an animation. Think, for instance, of a main character in a movie in the brink of giving a killing blow.

You can also add this tension by adding additional frames with very slight movements

For complex animations, consider dividing your character into different layers and animating each of these layers separately. This is nice because you can alter parts of the characters independently from each other.

When doing an animation is important to include all key frames. I had no clue about this but you can find tons of animation key frames just by googling them (f.i. type “kick keyframes” in Google and you’ll see what I’m talking about). I assume this is what professional animators and artists start with in the first place :D. (Check Pinterest as well).

General Tips for Scenes

Good resolutions for pixel art games are 640x360 and 320x180 (for 16:9 resolution). That is the size at which you will make the pixel art and then you can scale it for high-res monitors.

Tools for Doing Pixel Art

The easiest way to get started with Pixel art is using one of the pixel art editors which are specifically designed for pixel art. That way you don’t need to do any additional setup (like with Photoshop or Gimp) and can get started right away. You can try any of these:

Would you like to receive more articles like this one on programming, web development, JavaScript, Angular, developer productivity, tools, UX and even exclusive content like free versions of my books in your mailbox? Then sign up to my super duper awesome inner circle.

Did Ya Know I've Written Some Books?

I have! The JavaScript-mancy series is the lovechild of three of my passions: JavaScript, writing and Fantasy. In the pages of each one of the books of the series you’ll find a breadth of JavaScript knowledge, delivered with a humorous and casual style of writing and sprinkled with Fantasy at every turn.

They are the weirdest and quirkiest JavaScript books you'll ever find. There's nothing out there quite like it.