Pixel art eyes design - Techniques and styles
When designing a character in pixel art the eyes are one of the most important aspects. The eyes are the first detail we observe in a sprite. They own the power to convey emotions and personality, all in just a few pixels.
This post is an exploration of different eyes styles and designs at different resolutions (8x8, 16x16, 32x32, 64x64).
For each resolution we discuss the limitations, some common designs and styles, and also some strategies to make your character's eyes stand out.
This post act as a reference, an inspiration for you to come up with your own pixel art eyes design.
Designing a unique 8x8 character is already a challenge.
On the few 8x8 characters examples on the web, most of them are required to either have a single eye pixel or no eyes at all.
The strategy at this small scale is to convey the character personality from other details, such as colors, clothes, and hairstyle.
An exceptional example is this sprite sheet below of 8x8 characters:
As you can see, all the characters are restricted to 1 pixel eye, and all have the same eyes in the same position.
Nonetheless, you may be able to recognize all the characters from Dragon Ball. Amazing!
Note ☝️: Usually the hairs are not included in the pixel limit. As you can see, some characters count more than 8 pixel if we include the hairs.
Exceeding the pixel limit may not be allowed when working on a sprite for a game.
16 pixels are still too few to reserve much space for the eyes alone.
Nonetheless, 16 pixels allow more room for different styles.
The most common design technique consists in emphasizing the size of the head, which can take half of more of the total space available.
A big head leaves more freedom to add "details" to the eyes (similar to a 32x32).
In most cases the eyes consist in a 2x2 pixel square, with 2 black pixel (pupils) and 2 white (usually with 2 shades).
The 2 pixel at the top can also be used as eyebrows, by adding another black pixel and leaving only 1 pixel white.
You can also go as far as giving the same color to all 4 pixels, making the eyes a 2x2 pixel square:
Another common option is using 2 (or 3) vertical or horizontal pixels.
The choice of style shapes the personality of the character. For example, a 2 pixel horizontal eye gives the impression of old age or a sense of disinterest.
Finally, also for a 16x16 sprite is common to give the eyes only 1 pixel or leaving them out entirely:
In between 16x16 and 32x32 there are also some interesting examples of eyes design. In this post we are mainly going to focus on a subset of resolutions (8x8, 16x16, 32x32, etc.)
Subscribe to the newsletter
In my newsletter I share ideas, articles, tips and tutorials about Functional Programming and Frontend Development with Dart & Typescript (📱 + 🖥️)
With 32 pixel you start to see more variability in each character shape and details. Each unique personality choice dictates in part also the style of the eyes.
The most common styles are the same as the 16x16 characters we discussed above, with usually 2 or 4 pixels reserved for the eyes, horizontal or vertical.
At 32x32 there is enough space to give more emphasis on the eyes. It is possible to make the eyes bigger to achieve a manga/anime style (big cute eyes):
The manga style in pixel art consists of a 4 or even 6 pixels square for the eyes and a more detailed eyebrow to give a clear expression to the character:
The eyes have more variability especially when the charterers represent monsters, skeletons, slimes, or when they wear some sort of hat or helmet:
Note 💡: In this post we are more focused on "normal" human or "humanoid" pixel eyes.
If we consider also strange monsters and creatures the styles and proportions start to vary a lot, too much to categorize them in one place (just take a lot at all the different Pokemon).
Once we reach the 64x64 resolution mark the possibilities and styles start to grow exponentially.
With 4.096 pixels available (64x64) there is plenty enough space to come up with all different kinds of style and designs for the eyes.
Even more when the pixel resolution goes above 64x64. At these sizes we start to move more into "traditional" drawing, with less constraints on the details for each character.
At these resolutions the suggestion is to start searching for references specific for the technique and style that we want to use in our sprite, focusing on the details of the eyes:
In a more manga style we use less pixels for the white of the eye and instead give more space to a big pupil, to make the character look chibi and cute:
The size of the pupil conveys a lot about the feeling and expression of the character. Also in this case it depends on the personality of the character you want to portray:
We learned some common designs for smaller resolutions eye in pixel art. With few pixels available the styles are limited and shared between sprites.
As the amount of space increases we see more variability, and making an exhaustive collection of stylistic choices becomes impossible.
Below you can see a picture that gives a good idea of different resolutions and the amount of pixels available for each:
This overview is intended to act as a reference for common styles. From here you can continue your personal exploration into the beauty of pixel art.
If you are interest in game development and pixel art you can subscribe to my newsletter here below 👇
Thanks for reading.