Pixel art face. Programs for creating pixel art

Are you here: the beauty

Pixel graphics (hereinafter referred to as simply pixel art) are becoming more and more prominent 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, then the first thing you will have to do is learn how to draw the so-called “sprites”. Then, when the sprites no longer scare you, you can move on to animation and even selling your work!

Steps

Part 1

Collecting everything you need

Download good graphic editors. You can, of course, create masterpieces in Paint, but it is difficult and not very convenient. It would be better to work in something like:

photoshop
paint.net
Pixen

Buy a graphics tablet. If you do not like to draw with a mouse, then a tablet and a stylus are what you need. Tablets from Wacom, by the way, are the most popular.

Enable "grid" in your graphics editor. Actually, if your graphics editor does not support grid display, then you should think about finding another program. The grid will allow you to clearly see where and how each individual pixel will be located. As a rule, the rosary is turned on through the “View” menu.
- You may need to tweak the display settings a bit to get each segment of the grid to actually display a pixel. Each program does this differently, so look for appropriate tips.
Draw with a pencil with a brush size of 1 pixel. Any graphics editor should have a Pencil tool. Select it, set the brush size to 1 pixel. Now you can paint... pixelated.

Part 2
Practicing the basics
1. Create a new image. Since you are learning to draw in the style of pixel art, you should not aim at epic canvases. If you remember, in Super Mario Bros. the entire screen was 256 x 224 pixels, and Mario himself fit into a space of 12 x 16 pixels!
  
  Zoom in. Yes, otherwise you just can't see the individual pixels. Yes, you will have to increase it very much. Let's say 800% is quite normal.
  
  Learn to draw straight lines. It seems to be simple, but if you suddenly draw a line 2 pixels thick somewhere in the middle with a trembling hand, then the difference will hit your eyes. Draw straight lines until you have to activate the straight line drawing tool. You must learn how to draw straight lines by hand!
  
  Learn to draw curved lines. In a curved line, there should be, let's say, uniform “line breaks” (which is clearly visible in the figure a little higher). Let's say, starting to draw a curved line, draw a line of 6 pixels, below it - a line of three, below it - a line of two, and below it - from one pixel. On the other side, 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.
  
  Don't forget to erase the mistakes. The “Eraser” tool must be set up similarly to a 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
Creating the first sprite
1. 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 over a paper sketch (if you still have a tablet).
  - Don't skimp on sketch details! Draw whatever you want to see in the final drawing.
2. Transfer the sketch to the graphics editor. You can trace a paper sketch on a tablet, you can redraw everything by hand, pixel by pixel - it doesn't matter, the choice is yours..
  - When tracing the sketch, use 100% black as the outline color. If anything, you will manually change it later, but for now it will be easier for you to work with black.
3. Refine the outline of the sketch. In this context, you can, of course, say otherwise - erase everything superfluous. What is the point - the outline should be 1 pixel thick. Accordingly, zoom in and erase, erase the excess ... or fill in the missing with a pencil.
  - When working on a sketch, do not get distracted by the details - their turn will come.
Part 4
Coloring the sprite
1. Brush up on color theory. Look at the palette to see what colors to use. Everything is simple there: the farther the colors are from each other, the more they are not similar to each other; the closer the colors are to each other, the more similar they are and the better they look next to each other.
  - Choose colors that will make your sprite both beautiful and not irritating. And yes, pastels should be avoided (unless your entire project is done in this style).
2. Choose multiple colors. The more colors you use, the more "distracting" your sprite will be, so to speak. Look at the pixel art classics and try to count how many colors are used there.
  - Mario - 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 though Sonic is drawn with more details than Mario, it is still based on only 4 colors (and shadows).
  - Ryu is almost a classic sprite, as they are understood in fighting games, Ryu is 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.
3. Color the sprite. Colorize your sprite with the Fill tool and don't worry about everything looking flat and lifeless - nothing else is expected at this stage. The principle of the “Fill” tool is simple - it will fill with the color you choose all the pixels of the color you clicked on until it reaches the borders.
Part 5
Adding Shadows
1. Start applying shadows using colors that are slightly darker than the base ones. If the light comes 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 appropriate color above or below the outline.
  - If you reduce the "Contrast" setting of the base color by slightly increasing 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 the effect of gradients is achieved using the thinning technique (see below).
2. Don't forget the penumbra. Choose a color between the base color and the shadow color. Use it to create another layer - but already between the layers of these two colors. You will get the effect of transition from a dark area to a light one.
  
  Draw highlights. A highlight is the place on a sprite where the most light falls. You can draw a highlight if you take a color that is slightly lighter than the base one. The main thing is not to get carried away with glare, it is distracting.
Part 6
Using advanced drawing techniques
1. Do not forget about anti-aliasing (elimination of contour irregularities). Yes, the calling card of pixel art is the visible “pixelation” of the image. However, sometimes you want the lines to look a little less visible, a little smoother. This is where anti-aliasing comes in.
  - Add intermediate colors to the bends of the curve. Draw one layer of intermediate color around the outline of the curve you want to smooth out. If it still looks angular, add another layer, this time lighter.
  - If you want the sprite to not blend into the background, don't use anti-aliasing on the outer edge of the sprite on the outside.
2. Learn how to use selective rendering. What is the point: the outline is drawn with a color similar to those used for filling. It turns out a less “cartoonish” image, and it is precisely due to a more realistic appearance of the contour. Try, say, selectively rendering the skin, while leaving a classic black outline for clothes or objects.

pixel art(written without a hyphen) or pixel art- a direction of digital art, which consists in creating images at the pixel level (i.e., the minimum logical unit that an image consists of). Not all raster images are pixel art, although they are all made up of pixels. Why? Because in the end, the concept of pixel art includes not so much the result as the process of creating an illustration. Pixel by pixel, and that's it. If you take a digital photo, greatly reduce it (so that the pixels become visible) and claim that you drew it from scratch - this will be a real forgery. Although there will surely be naive simpletons who will praise you for your hard work.

Now it is not known exactly when this technique originated, the roots are lost somewhere in the early 1970s. However, the technique of composing images from small elements goes back to much more ancient forms of art, such as mosaics, cross-stitching, carpet weaving and beading. The very phrase "pixel art" as a definition of pixel art was first used in an article by Adele Goldberg and Robert Flegal in the journal Communications of the ACM (December 1982).

Pixel art has received the widest application in computer games, which is not surprising - it made it possible to create images that are undemanding to resources and look really beautiful at the same time (at the same time, they take a lot of time from the artist and require certain skills, and therefore imply good pay) . The heyday, the highest point in development, is officially called video games on consoles of the 2nd and 3rd generation (early 1990s). Further progress in technology, the appearance of first 8-bit color, and then True Color, the development of three-dimensional graphics - all this eventually pushed pixel art into the background and third plans, and then it completely began to seem that pixel art had come to an end.

Oddly enough, but it was Mr. Scientific and technological progress, who pushed pixel graphics to the last positions in the mid-90s, and later returned it to the game - revealing to the world mobile devices in the form of cell phones and PDAs. After all, no matter how useful a newfangled device is, we all know that if you can’t at least play solitaire on it, it’s worthless. Well, where there is a screen with a low resolution, there is pixel art. As they say, welcome back.

Of course, various retrograde-minded elements played their role in the return of pixel graphics, who love to nostalgize over the good old games of childhood, while saying: “Oh, they don’t do that now”; aesthetes who are able to appreciate the beauty of pixel art, and indie developers who do not perceive modern graphic beauties (and sometimes, though rarely, simply do not know how to implement them in their own projects), which is why they sculpt pixel art. But let's still not discount purely commercial projects - applications for mobile devices, advertising and web design. So now pixel art, as they say, is widespread in narrow circles and has earned itself a kind of art status "not for everyone" . And this is despite the fact that for a simple layman it is extremely accessible, because in order to work in this technique, it is enough to have a computer and a simple graphic editor at hand! (the ability to draw, by the way, also does not hurt) Enough words, get to the point!

2. Tools.

What do you need to create pixel art? As I said above, a computer and any graphic editor capable of working at the pixel level is enough. You can draw anywhere, even on the Game Boy, even on the Nintendo DS, even in Microsoft Paint (another thing is that drawing in the latter is extremely inconvenient). There are a great many raster editors, many of them are free and functional enough, so that everyone can decide on the software on their own.

I draw in Adobe Photoshop because it's convenient and because it's been a long time. I won’t lie and tell, mumbling my false teeth, that “I remember Photoshop was still very small, it was on the Macintosh, and it was with the number 1.0” This was not. But I remember Photoshop 4.0 (and also on a Mac). And so for me the question of choice never stood. And therefore, no, no, but I will give recommendations regarding Photoshop, especially where its capabilities will help greatly simplify creativity.

So, you need any graphics editor that allows you to draw with a tool in one square pixel (pixels can also be non-square, for example, round, but we are not interested in them at the moment). If your editor supports any set of colors, great. If it also allows you to save files - just great. It would be nice to know how to work with layers, since when working on a rather complex picture, it is more convenient to decompose its elements into different layers, but by and large this is a matter of habit and convenience.

Shall we start? Are you probably waiting for a list of some secret tricks, recommendations that will teach you how to draw pixel art? And the truth is, there isn't much of it. The only way to learn how to draw pixel art is to draw yourself, try, try, don't be afraid and experiment. Feel free to copy other people's work, don't be afraid to seem unoriginal (just don't pass off someone else's work as your own, hehe). Carefully and thoughtfully analyze the work of masters (not mine) and draw, draw, draw. Several useful links are waiting for you at the end of the article.

3. General principles.

However, there are a few general principles that are worth knowing. There are really few of them, I call them "principles" and not laws, because they are rather advisory in nature. After all, if you manage to draw an ingenious pixel art bypassing all the rules - who cares about them?

The most basic principle can be formulated as follows: the minimum unit of an image is a pixel, and if possible, all elements of the composition should be proportionate to it. I will decipher: everything that you draw consists of pixels, and the pixel should be read in everything. This does not mean that there cannot be elements in the picture at all, for example, 2x2 pixels, or 3x3. But it is still preferable to build an image from individual pixels.

The stroke and in general all lines of the picture should be one pixel thick (with rare exceptions).

I am by no means saying that this is wrong. But it's still not very pretty. And to make it beautiful, remember one more rule: draw without kinks, round smoothly. There is such a thing as kinks - fragments that are out of order, they give the lines an uneven, jagged look (in the English-speaking environment of pixel artists they are called jaggies):

Kinks deprive the drawing of natural smoothness and beauty. And if fragments 3, 4 and 5 are obvious and easily corrected, the situation is more complicated with others - the length of a single piece in the chain is broken there, it would seem a trifle, but a noticeable trifle. It takes a little practice to learn to see and avoid such places. Kink 1 is knocked out of the line because it is a single pixel - while in the area where it is wedged, the line consists of segments of 2 pixels. To get rid of it, I softened the entry of the curve into the bend by extending the top segment to 3px, and redrawing the entire line in 2px segments. Breaks 2 and 6 are identical to each other - these are already fragments of 2 pixels in length in areas built by single pixels.

An elementary set of examples of oblique lines, which can be found in almost every pixel art manual (mine is no exception), will help to avoid such breaks when drawing:

As you can see, a straight line is made up of segments of the same length, shifted by one pixel as it is drawn - this is the only way the effect of linearity is achieved. The most common construction methods are with a segment length of 1, 2 and 4 pixels (there are others, but the options presented should be enough to implement almost any artistic idea). Of these three, the most popular can be safely called the length of the segment of 2 pixels: draw a segment, move the pen by 1 pixel, draw another segment, move the pen by 1 pixel, draw another segment:

Easy, right? It just takes a habit. Knowing how to draw slanted lines in 2 pixel increments will help with isometrics, so we'll take a closer look at it next time. In general, straight lines are great - but only until the task of drawing something miraculous arises. Here we need curves, and a lot of different curves. And we adopt a simple rule for rounding curved lines: the length of the curve elements should decrease/increase gradually.

The exit from the straight line to the rounding is carried out smoothly, I indicated the length of each segment: 5 pixels, 3, 2, 2, 1, 1, again 2 (already vertical), 3, 5 and beyond. Not necessarily your case will use the same sequence, it all depends on the smoothness that is required. Another rounding example:

Again, we avoid kinks that spoil the picture so much. If you want to check the learned material, here I have a skin for Winamp drawn by an unknown author, a blank:

There are gross errors in the picture, and just unsuccessful rounding, and kinks are found - try to correct the picture based on what you already know. That's all for me with the lines, I propose to draw a little. And don't let the simplicity of the examples fool you, you can only learn to draw by drawing - even such simple things.

4.1. We draw a bottle with living water.

1. The shape of the object, while you can not use color.

2. Red liquid.

3. Change the color of the glass to blue, add shaded areas inside the bubble and a light area on the intended surface of the liquid.

4. Add white highlights on the bubble, and a dark red 1 pixel wide shadow on the liquid areas bordering the bubble walls. Looks good, doesn't it?

5. Similarly, we draw a bottle with a blue liquid - here the same color of glass, plus three shades of blue for the liquid.

4.2. We draw a watermelon.

Let's draw a circle and a semicircle - these will be a watermelon and a cut out slice.

2. Let's mark the cutout on the watermelon itself, and on the slice - the border between the crust and the pulp.

3. Fill. Colors from the palette, the average shade of green is the color of the crust, the average red is the color of the pulp.

4. Denote the transitional area from the peel to the pulp.

5. Light stripes on a watermelon (finally, he looks like himself). And of course, seeds! If you cross a watermelon with cockroaches, they will spread themselves.

6. We bring to mind. We use a pale pink color to indicate highlights above the seeds in a section, and by laying out the pixels in a checkerboard pattern, we achieve some kind of volume from the cut out slice (the method is called dithering, about it later). We use a dark red tint to indicate the shaded places in the section of the watermelon, and dark green (again, checkerboard pixels) to give volume to the watermelon itself.

5. Dithering.

Dithering, or blending, is the technique of mixing pixels in a distinctly ordered (not always) pattern in two bordering areas of different colors. The simplest, most common and effective way is to alternate pixels in a checkerboard pattern:

The reception was born due to (or rather contrary to) technical limitations - on platforms with limited palettes, dithering made it possible, by mixing pixels of two different colors, to get a third one that was not in the palette:

Now, in an era of limitless technical possibilities, many say that the need for dithering has disappeared by itself. However, proper use of it can give your work a characteristic retro style that all fans of old video games will recognize. Personally, I like to use dithering. I don't know it very well, but I love it.

Two more options for dithering:

What you need to know about dithering to be able to use it. The minimum width of the blending zone must be at least 2 pixels (those same checkers). More is possible. It's better not to do less.

Below is an example of bad dithering. Despite the fact that such a technique can often be found on sprites from video games, you need to be aware that the TV screen significantly smoothed the image, and such a comb, and even in motion, was not fixed by the eye:

Well, enough theory. I suggest you practice a little more.

Pixel art can be drawn in any raster graphics program, it's a matter of personal preference and experience (as well as financial capabilities, of course). Someone uses the simplest Paint, I do it in Photoshop - because, firstly, I have been working in it for a long time, and secondly, I am more comfortable there. Somehow I decided to try the free Paint.NET, I didn’t like it - it’s like with a car that recognizes a foreign car with an automatic transmission in Zaporozhets is unlikely to sit down. My employer provides me with licensed software, so I have a clear conscience before Adobe Corporation ... Although the prices for their programs are unthinkable, and they burn in hell for it.

1. Preparation for work.

Create a new document with any settings (let it be 60 pixels wide, 100 pixels high). The main tool of a pixel artist is a pencil ( Pencil Tool, invoked by hotkey B). If the toolbar has a brush enabled (and an icon depicting a brush), hover over it, press and hold LMB- a small drop-down menu will appear in which you should select a pencil. Set the pen size to 1 pixel (in the top panel on the left, a drop-down menu Brush):