Indie developers often have to combine several roles at once: game designer, programmer, composer, artist. And when it comes to visuals, many people choose pixel art - at first glance, it seems simple. But to make it beautiful, you need a lot of experience and certain skills. I found a tutorial for those who have just started to comprehend the basics of this style: with a description of special software and drawing techniques using two sprites as an example.
Background
Pixel art is a form of digital art in which changes are made at the pixel level. It is mostly associated with video game graphics from the 80s and 90s. Then the artists had to take into account the limitations of memory and low resolution. Now pixel art is still popular in games and as an art style in general, despite the possibility of creating realistic 3D graphics. Why? Even aside from nostalgia, creating cool work within such a rigid framework is a nice and rewarding challenge.
The barrier to entry in pixel art is relatively low compared to traditional art and 3D graphics, which attracts indie developers. But this does not mean that it will be easy finish game in this style. I have seen many indie developers with pixel art metroidvanias on crowdfunding platforms. They thought they would finish everything in a year, but in fact they needed another six years.
Metal Slug 3 (Arcade). SNK, year 2000
Pixel art at the level that most people want to create is time-consuming, and short tutorials are few and far between. When working with a 3D model, you can rotate it, deform it, move its individual parts, copy animations from one model to another, and so on. High-level pixel art almost always takes a lot of effort to meticulously place pixels on each frame.
In general, I warned.
And now a little about my style: I mainly draw pixel art for video games and find inspiration in them. In particular, I'm a fan of the Famicom/NES, 16-bit consoles, and 90s arcade games. The pixel art of my favorite games of the era can be described as bright, confident, and clean (but not overly so), it's not hard and minimalist. I work in this style myself, but you can easily apply the ideas and techniques from this tutorial to create completely different things. Explore the work of different artists and create the pixel art you love!
Soft
Basic digital tools for pixel art - Zoom (Zoom) and Pencil (Pencil) to place pixels. You will also need Line (Line), Figure (Shape), Select (Select), Move (Move) and Fill (Paint Bucket). There are many free and paid software with such a set of tools. I will talk about the most popular and those that I use myself.
Paint (Free)
If you have Windows, Paint is built into it - a primitive program, but it has all the tools for pixel art.
(is free)
An unexpectedly functional pixel art editor that runs through the browser. You can export your work to PNG or animated GIF. Great option for beginners.
(is free)
GraphicsGale is the only editor I've heard of designed specifically for pixel art and includes animation tools. It was created by the Japanese company HUMANBALANCE. Since 2017, it has been distributed for free and is still in demand, despite the growing popularity of Aseprite. Unfortunately, it only works on Windows.
($)
Perhaps the most popular editor at the moment. , tons of features, active support, versions for Windows, Mac and Linux. If you're serious about pixel art and still haven't found the right editor, this might be the one for you.
($$+)
GameMaker Studio 2 is an excellent 2D tool with a good Sprite Editor. If you want to create pixel art for your own games, it's very convenient to do everything in one program. Now I use this software in my work on , a collection of 50 retro games: I create sprites and animations in GameMaker, and tilesets in Photoshop.
($$$+)
Photoshop is expensive software, distributed by subscription, not designed for pixel art. I don't recommend purchasing this unless you're into high resolution illustrations or you don't need to do complex image manipulation like I do. You can create static sprites and pixel art in it, but it's quite complex compared to specialized software (like GraphicsGale or Aseprite).
Other
My pixel art kit. Everything is black, I just noticed.
Graphics tablet ($$+)
I recommend graphics tablets for any digital illustration work to avoid carpal tunnel syndrome. It is much easier to prevent than to cure. One day you will feel the pain and it will only get worse - take care of yourself from the very beginning. Due to the fact that I used to draw with a mouse, I now have a hard time playing games that require you to press keys. I currently use Wacom Intuos Pro S.
Wrist support ($)
If you can't get a tablet, at least buy a wrist caliper. My favorite is the Mueller Green Fitted Wrist Brace. The rest are either too tight or provide insufficient support. Calipers can be ordered online without any problems.
96 Γ 96 pixels
final fight. Capcom, 1989
Let's get started! Let's start with a 96x96 px character sprite. As an example, I drew an orc and put it on the screenshot from Final Fight (picture above) so you get the scale. This large sprite for most retro games, screenshot size: 384Γ224 pixels.
On such a large sprite, it will be easier to show the technique that I want to talk about. Also, pixel-by-pixel rendering is more like traditional forms of art (such as drawing or painting) that you may be more familiar with. Having mastered the basic techniques, we will move on to smaller sprites.
1. Choose a palette
The pixel is a much deeper concept in pixel art than in any other digital realm. Pixel art is defined by its limitations, such as colors. It is important to choose the right palette, it will help define your style. But at the start, I suggest not thinking about palettes and choosing one of the existing ones (or just a few random colors) - you can easily change it at any stage.
For this tutorial, I will be using the 32 color palette we created for . For pixel art, they are often assembled from 32 or 16 colors. Ours is designed for a fictional console that could appear somewhere between the Famicom and the PC Engine. You can take it or any other - the tutorial does not depend on the chosen palette at all.
2. Rough contours
Let's start drawing with the Pencil tool. Let's draw the sketch in the same way as we do it with a regular pen and paper. Of course, pixel art and traditional art overlap, especially when it comes to such large sprites. My observations show that strong pixel art artists are at least good at freehand drawing and vice versa. So developing drawing skills is always useful.
3. Contouring
We finalize the contours: remove extra pixels and reduce the thickness of each line to one pixel. But what exactly is redundant? To answer this question, you need to understand the pixel lines and bumps.
bumps
You need to learn how to draw two basic lines in pixel art: straight lines and curves. With pen and paper it's all about muscle control, but we're working with tiny blocks of color.
The key to drawing proper pixel lines is roughness. These are single pixels or small segments that destroy the smoothness of the line. As I said before, a single pixel is of great importance in pixel art, so unevenness can ruin the whole aesthetic. Imagine that you are drawing a straight line on paper and suddenly someone hits the table: bumps in pixel art look just like a random squiggle.
examples:
Direct
The curves
Jaggedness appears on curves when the length of line segments does not increase or decrease gradually.
Itβs impossible to completely avoid bumps β all your favorite retro games have them (unless, of course, pixel art consists of only simple shapes). Purpose: to minimize irregularities, while showing everything you need.
4. Applying the first colors
Color your character with a fill or other suitable tool. The palette will simplify this part of the work. If the software does not provide for the use of palettes, you can put it directly into the picture, as in the example above, and select colors with an eyedropper.
In the lower left corner, I drew our friend, get acquainted, this is Shar. With it, it will be easier to understand what exactly happens at each stage.
5. Shading
It's time to render shadows - just add darker colors to the sprite. So the image will look three-dimensional. Let's assume that we have one light source located above the orc to the left of it. This means that everything that is above and in front of our character will be illuminated. Add shadows to the bottom right.
Form and volume
If this step is difficult for you, imagine your drawing as three-dimensional shapes, and not just lines and color. Shapes exist in XNUMXD space and can have volume that we build with shadows. This will help visualize the character without details and make it look like it's made of clay instead of pixels. Shading isn't just about adding new colors, it's about building a shape. On a well-detailed character, the details don't obscure the basic shapes: if you squint, you'll see several large clusters of light and shadow.
Smoothing (anti-aliasing, anti-aliasing)
Every time I use a new color, I apply anti-aliasing (AA). It helps to smooth out pixels by adding intermediate colors at the corners where two line segments meet:
Gray pixels soften "breaks" in the line. The longer the line segment, the longer the AA segment.
This is how AA looks on the orc's shoulder. It is needed to smooth out the lines that represent the curve of his muscles.
Anti-aliasing should not go beyond the sprite that will be used in the game or against a background whose color is unknown. For example, if you apply AA to a light background, anti-aliasing will look ugly on a dark background.
6. Selective circuit
Previously, the outlines were completely black, which made the sprite look very cartoonish. The picture seemed to be divided into segments. For example, the black lines on the arm show the musculature too contrastingly, and the character looks less solid.
If the sprite becomes more natural, and the segmentation is not so obvious, then the basic forms of the character will be easier to read. To do this, you can use a selective outline - partially replace the black outline with a lighter one. On the lighted part of the sprite, you can use the lightest colors, or, where the sprite touches negative space, you can completely remove the outline. Instead of black, you need to use the color that was chosen for the shadow - this way the segmentation will be preserved (to distinguish between muscles, fur, and so on).
Also at this stage I added darker shadows. It turned out three gradations of green on the skin of an orc. The darkest green color can be used for selective contour and AA.
7. Finishing touches
At the end, it's worth adding highlights (the lightest spots on the sprite), details (earrings, studs, scars) and other improvements until the character is ready or until you have to move on to the next one.
There are several useful tricks that can be applied at this stage. Rotate the drawing horizontally, this often helps to reveal errors in proportions and shading. You can also remove the color - set the saturation to zero to understand where you need to change the shadows.
Creating noise (dithering, dithering)
So far, we've mostly used large, solid patches of shadows. But there is another technique - dithering, which allows you to go from one color to another without adding a third. Look at the example below.
The top dark to light gradient uses hundreds of different shades of blue.
The middle gradient only uses nine colors, but it still has too many shades of the same color. There is a so-called banding (from the English band - a strip), in which, due to thick uniform stripes, the eye focuses on the points of contact of the colors, instead of the colors themselves.
On the bottom gradient, we applied a dither that avoids banding and uses only two colors. We create noise of varying intensity to simulate color gradation. This technique is very similar to the halftone used in printing; as well as stippling (stippling - grainy image) - in illustration and comics.
On the orc, I dithered quite a bit to convey the texture. Some pixel artists do not use it at all, while others are not shy and do it very skillfully. I find dithering looks best on large areas filled with a single color (look at the sky in the Metal Slug screenshot above) or areas that should look rough and uneven (like dirt). Decide for yourself how to use it.
If you want to see an example of large-scale and high-quality dithering, look at the games of The Bitmap Brothers, a British studio from the 80s, or games on the PC-98 computer. Just keep in mind that they are all NSFW.
Kakyusei (PC-98). Elf, 1996
There are only 16 colors in this image!
8. Last look
One of the dangers of pixel art is that it seems light and simple (due to its structure and style limitations). But in the end, you will spend a huge amount of time fine-tuning your sprites. It's like a puzzle that needs to be solved, which is why pixel art appeals to perfectionists. Remember that one sprite shouldn't take too long - it's just a tiny piece of an extremely complex collection of pieces. It is important not to lose sight of the big picture.
Even if your pixel art isn't for gaming, sometimes it pays to say to yourself, "It's good enough already!" And move on. The best way to develop skills is to go through the entire process from beginning to end as many times as possible, using as many topics as possible.
And sometimes it's useful to leave a sprite for a while so that you can look at it with fresh eyes a little later.
32Γ32 pixels
We created the big 96x96 pixel sprite first, because at that size it's more like drawing or painting, but pixelated. The smaller the sprite, the less it looks like what it should display, and the more important each pixel is.
In Super Mario Bros. Mario's eye is just two pixels stacked one above the other. And his ear too. Character creator Shigeru Miyamoto said that the mustache was needed to separate the nose from the rest of the face. So one of the main features of Mario's face is not just a character design, but also a pragmatic trick. Which confirms the old wisdom - "need is the mother of ingenuity."
We are already familiar with the main stages of creating a 32Γ32 pixel sprite: sketch, color, shadows, further refinement. But in such conditions, as an initial sketch, I pick up colored shapes instead of drawing outlines due to the small size. Color plays a more important role in character definition than outlines. Look at Mario again, he has no contours at all. Not only mustaches are interesting. His sideburns define the shape of his ears, the sleeves show his arms, and the overall shape more or less clearly reflects his entire body.
Creating small sprites is a constant trade-off. If you add a stroke, you may lose space for the shadow. If your character has clearly defined arms and legs, the head is likely not to be very large. Using color, selective stroking, and anti-aliasing effectively will make the rendered object appear larger than it really is.
For small sprites, I like the chibi style: the characters look very cute, they have big heads and eyes. A great way to create a bright character in a limited space, and in general, a very pleasant style. But perhaps you need to show the mobility or strength of the character, then you can give less space to the head to make the body look more powerful. It all depends on your preferences and goals.
The whole team is here!
File formats
Such a result can make any pixel artist nervous
The picture you see is the result of saving the picture as a JPG. Part of the data was lost due to file compression algorithms. High-quality pixel art will end up looking bad, and returning it to its original palette will not be easy.
To save a static image without losing quality, use the PNG format. For animations - GIF.
How to share pixel art the right way
Sharing pixel art on social media is a great way to get feedback and meet other artists who work in the same style. Don't forget to use the hashtag #pixelart. Unfortunately, social networks often convert PNG to JPG without asking, worsening your work. And it is not always clear why your picture was converted.
There are some tips on how to save pixel art in the right quality for various social networks.
To keep the PNG file unchanged on Twitter, use fewer than 256 colors, or that your file is less than 900 pixels long. I would increase the file size to at least 512x512 pixels. And so that the scaling is a multiple of 100 (200%, not 250%) and sharp edges are preserved (Nearest Neighbor in Photoshop).
Animated GIFs for Twitter posts weigh no more than 15 MB. The picture must be at least 800x800 pixels, the looping animation must be repeated three times, and the last frame must be half the time of all the others - the most popular theory. However, it is not clear to what extent these requirements should be met, given that Twitter is constantly changing its image display algorithms.
As far as I know, it is not possible to post a picture to Instagram without quality loss. But it will definitely look better if you increase it to at least 512x512 pixels.
Source: habr.com