Pixel graphics (hereinafter referred to as simply pixel art) are increasingly reminiscent of themselves these days, especially through indie games. This is understandable, because this way artists can fill the game with a great variety of characters and not spend hundreds of hours modeling three-dimensional objects and hand-drawing complex objects. If you want to learn pixel art, the first thing you have to do is learn how to draw so-called “sprites”. Then, when the sprites no longer scare you, you can move on to animating and even selling your work!
Steps
Part 1 of 7: Collecting Everything You Need
Step 1. Download good graphics editors
You can, of course, create masterpieces in Paint, but it's difficult and not very convenient. It would work much better with something like:
- Photoshop
- Paint.net
- Gimp
- Pixen
Step 2. Buy a graphics tablet
If you don't like drawing with a mouse, then a tablet and a stylus are what you need. Wacom tablets are, by the way, the most popular.
Step 3. Turn on the "grid" in your graphics editor
Actually, if your graphics editor does not support grid display, then you should think about looking for another program. The grid will allow you to clearly see where and how each individual pixel will be located. As a rule, the bead is turned on through the "View" menu.
You may need to tweak the display settings a bit to ensure that each mesh segment actually renders a pixel. Each program does this differently, so look for advice on how to do this
Step 4. Draw with a pencil with a brush size of 1 pixel
Any graphics editor must have a Pencil tool. Select it and set the brush size to 1 pixel. Now you can paint … pixel by pixel.
Part 2 of 7: Practicing the Basics
Step 1. Create a new image
Since you are learning to draw in the pixel art style, then you shouldn't aim at epic canvases. If you remember, in Super Mario Bros. the whole screen was 256 x 224 pixels, and Mario himself fit into a space of 12 x 16 pixels!
Step 2. Zoom in
Yes, otherwise you simply won't see the individual pixels. Yes, you will have to increase it very much. Let's say 800% is quite normal.
Step 3. Learn to draw straight lines
It seems to be simple, but if you suddenly, somewhere in the middle, draw a line 2 pixels thick with a trembling hand, then the difference will hit the eyes. Draw straight lines until you have to activate the straight line drawing tool. You must learn how to draw straight lines by hand!
Step 4. Learn to draw curved lines
The curved line should have, let's say, uniform "line breaks" (which is clearly noticeable in the figure just above). Let's say, starting to draw a curved line, draw a straight line of 6 pixels, below it - a straight line of three, below it - a straight line of two, and below it - of one pixel. On the other hand draw the same thing (mirrored, of course). It is this progression that is considered optimal. Curves drawn in a “3-1-3-1-3-1-3” pattern do not meet pixel art standards.
Step 5. Don't forget to erase mistakes
The Eraser tool should be adjusted similarly to the pencil, making the brush size equal to 1 pixel. The larger the eraser, the more difficult it is not to erase the excess, so everything is logical.
Part 3 of 7: Create the first sprite
Step 1. Think about what purpose the sprite will serve
Will it be static? Animated? A static sprite can be saturated with details to the point of failure, but it is better to make an animated one simpler, so that later you do not spend hours redrawing all the details on all frames of the animation. By the way, if your sprite is supposed to be used with others, then they should all be drawn in the same style.
Step 2. Find out if there are any special requirements for the sprite
If you are looking for, say, a project, then it would be reasonable to expect color or file size requirements. However, this will be more important a little later, when you start working on large projects with many different sprites.
Objectively speaking, these days, requirements for the size or palette of sprites are rarely put forward. However, if you are drawing graphics for a game that will be played on older gaming systems, then you have to consider all the limitations
Step 3. Make a sketch
A sketch on paper is the basis of any sprite, since this way you will be able to understand how everything will look and, if necessary, you can correct something in advance. In addition, you can also trace the paper sketch later (if you still have a tablet).
Spare no details for sketching! Draw whatever you want to see in the final drawing
Step 4. Transfer the sketch to a graphics editor
You can trace a paper sketch on your tablet, you can redraw everything by hand, pixel by pixel - it doesn't matter, the choice is yours.
When outlining the sketch, use 100% black for the outline. If anything, you will manually change it later, but for now it will be easier for you to work with black
Step 5. Refine the outline of the sketch
In this context, you can, of course, say differently - erase all unnecessary. What is the point - the outline should be 1 pixel thick. Accordingly, zoom in and erase, erase unnecessary … or finish the missing with a pencil.
As you sketch, don't get distracted by the details - their turn will come
Part 4 of 7: Coloring the Sprite
Step 1. Brush up on color theory
Look at the palette to see which colors to use. Everything is simple there: the further the colors are from each other, the more they differ from each other; the closer the colors are to each other, the more they are similar and the better they look next to each other.
Choose colors that will make your sprite look beautiful and not biting your eyes. And yes, pastel colors should be avoided (unless your entire project is done in this style)
Step 2. Choose some colors
The more colors you use, the more “distracting” your sprite will be, so to speak. Take a look at the pixel art classics and try to count how many colors are used there.
- Mario - there are only three colors (if we are talking about the classic version), and even those are located on the palette almost close to each other.
- Sonic - even if Sonic is drawn with more detail than Mario, it is still based on only 4 colors (and shadows).
- Ryu is almost a classic of sprites, as they are understood in fighting games, Ryu are large areas painted in simple colors, plus a little shadow for demarcation. Ryu, however, is a little more complicated than Sonic - there are already five colors and shadows.
Step 3. Colorize the sprite
Use the Paint Bucket Tool to color your sprite and don't worry about everything looking flat and lifeless - nothing else is expected at this stage. The way the Paint Bucket works is simple - it will fill all the pixels of the color you clicked with the color of your choice until it reaches the borders.
Part 5 of 7: Adding Shadows
Step 1. Decide on the light source
Here's the gist: you need to decide at what angle the light will fall on the sprite. With this in mind, you can create believable looking shadows. Yes, there will literally be no “light”, the point is to imagine how it will fall on the drawing.
The simplest solution is to assume that the light source is very high above the sprite, slightly to the left or right of it
Step 2. Start applying shadows using colors that are slightly darker than the base colors
If the light falls from above, where will the shadow be? That's right, where direct light does not fall. Accordingly, to add a shadow, simply add a few more layers to the sprite with pixels of the corresponding color above or below the outline.
- If you decrease the “Contrast” setting of the base color, and slightly increase the “Brightness” setting, you can get a good color for rendering the shadow.
- Don't use gradients. Gradients are evil. Gradients look cheap, hacky and unprofessional. An effect similar to that of gradients is achieved using the “decimation” technique (see below).
Step 3. Don't forget about penumbra
Pick a color between the base color and the shadow color. Use it to create another layer - but between the layers of these two colors. The result will be a transition effect from a dark area to a light area.
Step 4. Draw highlights
The highlight is where the most light falls in the sprite. You can draw a highlight if you take a color that is slightly lighter than the base color. The main thing is not to get carried away with glare, it is distracting.
Part 6 of 7: Using Advanced Drawing Techniques
Step 1. Use decimation
This technique can convey a change in the shadow. With decimation, you can recreate the gradient effect with just a few colors by repositioning the pixels to create a transition effect. The number and position of pixels of two different colors will trick the eye into seeing different shadows.
Beginners often overuse thinning, don't be like it
Step 2. Don't forget about anti-aliasing (removing contour irregularities)
Yes, the calling card of pixel art is the apparent “pixelity” of the image. Nevertheless, sometimes you want the lines to look a little less noticeable, a little smoother. This is where anti-aliasing comes in.
- Add intermediate colors to the curves. Draw one layer of intermediate color around the outline of the curve you want to smooth. If it still looks angular, add another layer, lighter.
- If you want the sprite not to blend in with the background, do not use anti-aliasing on the outer edge of the sprite from the outside.
Step 3. Learn to use selective rendering
What is the point: the path is drawn with a color similar to those used for the fill. The result is a less "cartoonish" image, and precisely due to the more realistic appearance of the contour. Try, say, selectively rendering the skin while leaving the classic black outline for clothing or items.
- When selectively rendering, the skin outline should be created with a color that is slightly darker than the base color. Remember to keep the light source in mind to change the color of the outline accordingly so it looks more natural, which is especially useful when drawing skin and muscles.
- However, if you just want the sprite not to blend in with the background, then outline everything in black.
Part 7 of 7: Adding the Final Touches
Step 1. Check the sprite
You can even take a step or two away from the screen. See if everything is in order, if there are any noticeable errors and inaccuracies.
Step 2. Add details
Done with color and shadows? Go to detail! Lettering, eyes, any other features that will make your sprite more interesting and professional - that's what is important at this stage.
Step 3. Animate the sprite
If you drew by following this article, you ended up with a static sprite. This, of course, is good, but as a separate work of art. If you wanted to learn how to create graphics for games, then know that static sprites are not suitable for games (except for backgrounds, of course, but even then not always). Accordingly, the sprite needs to be animated - that is, it should be drawn using a similar sprite for each frame. The collection of sprites for animation is called a “sprite sheet”.
- Look for articles that go into detail on animating sprites.
- Good animation can style the entire sprite! Moreover, it is precisely by the level of animation that you can sometimes distinguish an amateur from a master.
Step 4. Create a portfolio
If you want to make a living drawing pixel art for video games, then you just need a portfolio to impress potential employers. Include in your portfolio your best sprites (preferably different ones), your best animations.