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:

1. Draw shapes using basic forms: square, rectangle, triangle, circle, etc in black color
2. Refine shapes to be nearer the real forms
3. Define a light source
4. Use two lighter versions of black (grey and light grey) to indicate where the light source illuminates the character or elements within the composition
5. 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

• 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

1. Start with a good pose that will be a good starting point for the animation you want to create
2. Continue by creating the main positions or key frames for the animation
3. 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:

• Piskel. A great web-based editor to do pixel art. I used it for the art in Earth That Was
• GraphicsGale (for Windows)
• Pixen - A Pixel Art Editor (for Mac)
• Aseprite is great for animations
• PyxelEdit is great for designing tilesets

Piskel is a particularly good choice because it is web based. You only need to open your browser, Google “piskel”, click on the first hit and there you are. The tool is incredibly user friendly

Anyhow, if you are very proficient with any of these more established graphics editors then go ahead!

• Photoshop. Classic photo editing and design program, yet it works great for pixel art as well. I’ve used photoshop for all the pixel art I’ve done for javascript-mancy.
• Gimp

References and Resources

• MortMort has tooons of tutorials on how to do pixel art
• How to do Pixel Art for Your Game on Udemy. This course is soooooo goooood.
• Creating Stunning Pixel Art Tilesets For Your Game. By the same author than the course above.
• HeartBeast, the maker of the course above, also has more YouTube Tutorials on Pixel art
• Studio Miniboss Pixel Art Tutorials are just pure GOLD.
• More How to Pixel Art Tutorials on YouTube
• PixelProspector.com
• Pixel Dailies
• Pixel Joint