Pixel landscapes. Introduction to Pixel Art for Games. Preparing for work

Pixel Art (Pixel Art) - translated from English as pixel art. A pixel, in turn, is the smallest graphic element of a digital image.

So Pixel Art literally means the art of drawing with pixels.

Just for clarity, let's look at this example:

Owlboy (pixel art game)

This is what games with Pixel Art style graphics look like.

Very often, such graphics are used in indie games because they have a very recognizable computer gaming style.

However, Pixel Art is not only about graphics, sprites and pictures for games, this is a whole direction of digital and graphic art.

Beautiful pictures can be drawn using pixel art:


You won't confuse this retro graphic style with anything.

Some paintings in this style are quite worthy of taking a place on your desktop.


There are also very cool artists who work in this style.

Look at this picture. Each pixel here was drawn separately and manually. It’s like putting together a mosaic as they did before, and they still do it now.

If we enlarge this picture, we can see how everything is done up close:

The unique style of pixel art is that there are fairly clear color transitions and no anti-aliasing. For example, let's take another work in digital graphics of a fairly average level, look at this one drawing of a girl with glasses(18+) on the blog www.econdude.pw.

This is a drawing with a computer mouse in the SAI2.0 program.

However, if you zoom in on this image, you can see the anti-aliasing:

There are no clear transitions of colors and shades, but in pixel art the transitions are clear.

For example, look at how you can make transitions between colors in pixel art:

This is an approximate image; if you look at it from afar with high resolution, the color transition will be quite smooth, but the clarity and consistency of the style is visible here.

Here's another example, this is a pretty classic pickle art style drawing:

http://www.gamer.ru/everything/pixel-art-dlya-nachinayuschih

When you get close, the pictures don't seem very beautiful, but if you look at pixel art from afar, with higher resolution, it can look wonderful.

Can you imagine the great work such artists do?

Sometimes they say that Pixel Art is done this way because it’s cheaper, they say that indie developers simply don’t have the resources to create modern 3D graphics, so they use the simplest thing they can think of, drawing in basic graphic editors pixels.

However, anyone who has drawn anything in the Pixel Art style will tell you that this is almost the most expensive graphics style in terms of resources (time, first of all).

Animation in the Pixel Art style is generally hellish work.

http://www.dinofarmgames.com/a-pixel-artist-renounces-pixel-art/

Therefore, it still needs to be proven that Pixel Art is a “lazy style”, I would even say that on the contrary, it is not the least lazy graphics style.

However, anyone can learn to draw something simple in the Pixel Art style, and you don’t need any special programs, just a simple graphics editor.

If you want to learn how to draw in this style, you, as in any other case, need a lot of practice, and you can start, for example, with articles on Habré: Pixel art course

There you will also find the basic principles of pixel art.

Here is one example of how to draw pixel art (accelerated video - speed drawing) at the beginner level; you can learn how to draw like this in literally a week:


Pixelart:: drawing a spaceship

Sometimes in this style They make some really crazy drawings, I can’t even believe that a person drew this and I want to know how much time was spent on it. Example:


https://www.youtube.com/watch?v=vChMzRnw-Hc

See this picture of Sarah Carrigan from StarCraft? What do you think this is and how is it made?

This man built it from blocks in the game Minecraft, the work took 23 weeks.

Looking closer, you can see that these are all separate blocks.

Formally, this is no longer pixel art, but even “minecraft block art,” but the essence of the style remains the same and this is the largest pixel art drawing and a world record, according to the author.

In fact, if you look at any photo or picture closely, it is obvious that it also consists of pixels, like any image in general. But the whole difference is that pixel art is created by hand, pixel by pixel.

Another example, artists and animators Paul Robertson and Ivan Dixon created this:


SIMPSONS PIXELS

There is a feeling of enormous work here, and even when using some additional tools(there are filters that turn pictures into pixel art) this would take a very long time.

Personally, I think that pictures in the Pixel Art style are the most real modern art in the most better sense this word.

Each Pixel Art picture has a very clear value and it is visible and felt.

Even a person who doesn’t understand this well can appreciate this.

However, unfortunately, this genre of art is not very popular and is now considered outdated, and a return to it in recent years in the form of many games from steam in the style of pixel art, people are also starting to get bored. Although I personally think that this retro graphic style is already a classic, and a true classic will never die.

" itemprop="image">

In this 10-step How to Draw Pixel Art tutorial, I'll teach you how to create a "sprite" (a single 2D character or object). The term itself, of course, comes from video games.

I learned how to create pixel art because I needed it for the graphics in my game. After years of training, I got the hang of it and began to understand that pixel art is more of an art than just a tool. Today, pixel art is very popular among game developers and illustrators.

This tutorial was created many years ago to teach people the simple concepts of creating pixel art, but has been updated many times so that it is significantly different from the original version. There are many tutorials on the Internet on the same topic, but they all seem too complicated or lengthy to me. pixel art is not science. You shouldn't calculate vectors when creating pixel art.

Tools

One of the main advantages of creating pixel art is that you don't need any advanced tools - the default graphics editor installed on your computer should be enough. It's worth mentioning that there are programs designed specifically for creating pixel art, like Pro Motion or Pixen (for Mac users). I haven't tested them myself, but I've heard a lot of positive feedback. In this tutorial I will use Photoshop, which, although it costs a lot, contains a lot useful tools to create art, some of which are very useful for pixelating.

How to draw pixel art in Photoshop

When using Photoshop, your main weapon will be the Pencil tool (B key), which is an alternative to the Brush tool. The pencil allows you to color in individual pixels without overlapping colors.

We will need two more tools: “Selection” (M key) and “Magic Wand” (W key) in order to select and drag, or copy and paste. Remember that by holding down the Alt or Shift key while making a selection, you can add selected objects or exclude them from the current selection list. This is useful when you need to select uneven objects.

You can also use an eyedropper to transfer colors. There are a thousand reasons why preserving colors in pixel art is important, so you'll want to grab a few colors and use them over and over again.

Finally, make sure you remember all the hotkeys, as this can save you a lot of time. Notice the "X" that switches between the primary and secondary colors.

Lines

Pixels are the same small colored squares. First you need to understand how to effectively arrange these squares to create the line you want. We will look at the two most common types of lines: straight and curved.

Straight lines

I know what you're thinking: everything here is so simple that there's no point in going into anything. But when it comes to pixels, even straight lines can become a problem. We need to avoid jagged parts - small pieces of line that make it look uneven. They appear if one part of the line is larger or smaller than the others surrounding it.

Curved lines

Drawing curved lines, you need to make sure that the decline or rise is uniform along the entire length. IN in this example, a neat line has intervals 6 > 3 > 2 > 1, but a line with intervals 3 > 1< 3 выглядит зазубренной.

The ability to draw lines is a key element of pixel art. A little further I will tell you about anti-aliasing.

Conceptualization

To get started you will need good idea! Try to visualize what you are going to do in pixel art - on paper or just in your mind. Once you have an idea of ​​the drawing, you can concentrate on the pixelation itself.

Topics for Thought

  • What will this sprite be used for? Is it for a website or a game? Will it be necessary to make it animated later? If so, then it will need to be made smaller and less detailed. Conversely, if you don't work with the sprite in the future, you can attach as many parts to it as you need. Therefore, decide in advance what exactly this sprite is needed for and select the optimal parameters.
  • What restrictions are there? Earlier I mentioned the importance of preserving flowers. The main reason is the limited color palette due to system requirements (which is extremely unlikely in our time) or for compatibility. Or for accuracy if you are emulating a particular style of C64, NES, etc. It's also worth considering the dimensions of your sprite and whether it stands out too much from the background objects you need.

Let's try it!

There are no restrictions in this tutorial, but I wanted to make sure that my pixel art would be large enough so that you could see in detail what happens in each of the steps. For this purpose, I decided to use Lucha Lawyer, a character from the world of wrestling, as a model. It would fit perfectly into a fighting game or fast-paced action game.

Circuit

The black outline will be a good base for your sprite, so that's where we'll start. We chose black because it looks good, but is also a little dark. Later in the tutorial I will tell you how to change the color of the outline to increase realism.

There are two approaches to creating a contour. You can draw the outline by hand and then adjust it a little, or you can draw everything one pixel at a time. Yes, you understood everything correctly, we are talking about a thousand clicks.

The method you choose depends on the size of the sprite and your pixelating skills. If the sprite is really huge, then it would be more logical to draw it by hand to create approximate form, and then trim. Believe me, it's much faster than trying to draw the perfect sketch right away.

In my tutorial I create a fairly large sprite, so the first method will be shown here. It will be easier if I show everything clearly and explain what happened.

Step one: rough outline

Using your mouse or tablet, draw a rough outline for your sprite. Make sure it's NOT TOO raw, meaning it looks roughly the way you see your final product.

My sketch almost completely coincided with what I had planned.

Step Two: Polish the Outline

Start by enlarging the image by 6 or 8 times. You should see every pixel clearly. And then, clean up the outline. In particular, it's worth paying attention to the "stray pixels" (the entire outline should be no more than one pixel thick), get rid of the jagged edges, and add the little details we missed in the first step.

Even large sprites very rarely exceed 200 by 200 pixels. The phrase “do more with less” is a great way to describe the pixelation process. You'll soon see that even one pixel matters.

Simplify your outline as much as possible. We'll get into the details later, now you need to work on finding the big pixels, such as, for example, muscle segmentation. Things don't look great right now, but be a little patient.

Color

When the outline is ready, we get a kind of coloring sheet that needs to be filled in with colors. Paint, pouring and other tools will help us with this. Picking colors can be tricky, but color theory is clearly not the topic of this article. Be that as it may, there are a few basic concepts that you will need to know.

HSB color model

This is an English abbreviation made up of the words Hue, Saturation, Brightness. It is just one of many computer color models (or numerical representations of color). You've probably heard of other examples like RGB and CMYK. Most image editors use HSB for color selection, so we'll focus on that.

Hue– Hue is what we used to call color.

Saturation– Saturation – determines the intensity of the color. If the value is 100%, then this is the maximum brightness. If you lower it, then dullness will appear in the color and it will “grey”.

Brightness– light that emits color. For example, for a black person this indicator is 0%.

Choosing colors

Deciding which colors to choose is up to you, but there are a few things to keep in mind:

  • Dull and desaturated colors look more realistic than cartoonish.
  • Think about a color wheel: the further apart two colors are on the wheel, the worse they go together. At the same time, red and orange, which are in close proximity to each other, look great together.

  • The more colors you use, the blurrier your drawing will look. Therefore, choose a couple of primary colors and use them. Remember that Super Mario, at one time, was created exclusively from combinations of brown and red.

Applying colors

Applying color is very simple. If you use Photoshop, then simply select the desired fragment, select it with the magic wand (W key), and then fill it with the main color (Alt-F) or additional color Ctrl-F).

Shading

Shading is one of the most important parts of the quest to become a pixelation demigod. It is at this stage that the sprite either begins to look better or turns into a strange substance. Follow my instructions and you will definitely succeed.

Step one: choose a light source

First we choose a light source. If your sprite is part of a larger fragment that has its own lighting sources, such as lamps, torches, and so on. And they can all have different effects on how the sprite looks. Be that as it may, choosing a distant light source, such as the sun, great idea for most pixel art. For games, for example, you will need to create the brightest possible sprite, which can then be adjusted to the environment.

I usually opt for a distant light somewhere up in front of the sprite, so that only the front and top of the sprite are illuminated and the rest is shaded.

Step two: direct shading

Once we have chosen a light source, we can begin to darken the areas that are furthest from it. Our lighting model dictates that the lower part of the head, arms, legs, etc. should be covered in shadow.

Let us remember that flat things cannot cast shadows. Take a piece of paper, crumple it up and roll it across the table. How did you realize that it was no longer flat? You just saw shadows around him. Use shading to emphasize folds in clothing, muscles, fur, skin color, and so on.

Step Three: Soft Shadows

The second shade, which is lighter than the first, should be used to create soft shadows. This is necessary for areas that are not directly illuminated. They can also be used to transition from light to dark areas, and on uneven surfaces.

Step four: illuminated areas

Places that receive direct rays of light also need to be highlighted. It is worth noting that there should be fewer highlights than shadows, otherwise they will cause unnecessary attention, that is, they will stand out.

Save yourself the headache by remembering one simple rule: first the shadows, then the highlights. The reason is simple: if there are no shadows, too large fragments will be blown out, and when you apply shadows, they will have to be reduced.

A few useful rules

Shadows are always a challenge for beginners, so here are a few rules you need to follow while shading.

  1. Don't use gradients. The most common mistake made by beginners. Gradients look terrible and don't even approximate how light plays on surfaces.
  2. Don't use soft shading. I'm talking about a situation where the shadow is too far from the contour, because then it looks very blurry and prevents the light source from being identified.
  3. Don't use too many shadows. It’s easy to think that “the more colors, the more realistic the picture.” Be that as it may, in real life We are used to seeing things in dark or light spectrums, and our brain will filter out everything in between. Use only two dark (dark and very dark) and two light (light and very light) and layer them over the base color, not on top of each other.
  4. Don't use too similar colors. There's no real need to use nearly identical colors unless you want to make a really blurry sprite.

Dithering

Preserving colors is something that pixel art creators really need to pay attention to. Another way to get more shadows without using more colors is called dithering. Just like traditional painting uses “hatching” and “crosshatching”, that is, you literally get something in between two colors.

Simple example

Here's a simple example of how, through dithering, you can create four shading options from two colors.

Advanced example

Compare the image above (created using a gradient in Photoshop) with the image created with just three colors using dithering. Please note that different patterns can be used to create "adjacent colors". It will be easier for you to understand the principle if you create several patterns yourself.

Application

Dithering can give your sprite that wonderful retro look, as many early video games made heavy use of the technique due to the small number of color palettes available (if you want to see plenty of examples of dithering, check out the games developed for the Sega Genesis). I myself do not use this method very often, but for educational purposes, I will show how it can be applied on our sprite.

You can use dither to your heart's content, but it's worth noting that only a few people use it really well.

Selective contouring

Selective contouring, also called selected outlining, is a subtype of contour shading. Instead of using a black line, we choose a color that will look more harmonious on your sprite. In addition, we change the brightness of this outline closer to the edges of the sprite, allowing the color source to determine which colors we should use.

Up to this point, we have used a black outline. There is nothing wrong with this: black looks great, and also allows the sprite to stand out from the surrounding objects. But by using this method, we sacrifice realism, which could be useful to us in some cases, since our sprite continues to look cartoonish. Selective contouring gets rid of this.

You'll notice that I used selaute to soften the definition of his muscles. Finally, our sprite starts to look like a single unit, rather than huge amount separate fragments.

Compare this with the original:

  1. Smoothing

The way smoothing works is simple: adding intermediate colors to the edges to make them look smoother. For example, if you have a black line on a white background, then small gray pixels will be added to its breaks along the edge.

Technique 1: Smoothing out kinks

In general, you need to add intermediate colors where there are kinks, otherwise the line will look jagged. If it still looks uneven, add another layer of lighter pixels. The direction of application of the intermediate layer must coincide with the direction of the curve.

I don't think I can explain it better without making it more complicated. Just look at the picture and you will understand what I mean.

Technique 2: Rounding the bumps

Technique 3: erasing line endings

Application

Now, let's apply anti-aliasing to our print. Note that if you want your sprite to look good against any background color, you shouldn't smooth the outside of the line. Otherwise, your sprite will have a very inappropriate halo around it where it meets the background, and will therefore stand out too much against any background.

The effect is very subtle, but it is of great importance.

Why do you need to do this manually?

You might ask, "Why not just apply a graphics editor filter to our sprite if we want it to look smooth?" The answer is also simple - no filter will make your sprite as clear and clean as handmade. You'll have complete control over not only the colors you use, but also where to use them. In addition, you know better than any filter where anti-aliasing will be appropriate, and where there are areas where the pixels will simply lose their quality.

Finishing

Wow, we're getting pretty close to the point where you can turn off your computer and grab a cold bottle of beer from the refrigerator. But it hasn't arrived yet! The last part is about what separates the avid amateur from the seasoned professional.

Take a step back and take a good look at your sprite. There is a possibility that it still looks "damp". Spend a little time perfecting and making sure everything is perfect. No matter how tired you already are, the fun part is ahead of you. Add details to make your sprite look more interesting. This is where your pixelating skills and experience come into play.

You might be surprised by the fact that all this time our Lucha Lawyer had no eyes, or that the package he was holding was empty. Actually, the reason lies in the fact that I wanted to hold off on small details. Also notice the trim I added to his headbands, the fly on his pants... and who would a person be without his nipples? I also darkened the lower part of his torso a little to make his arm stand out more against his body.

Finally you are done! Lucha Lawyer is lightweight, because it has only 45 colors (or it can be super heavy - it all depends on the limitations of your palette) and its resolution is approximately 150 by 115 pixels. Now you can open your beer!

Full progress:

It's always funny. Here's a GIF showing the evolution of our sprite.

  1. Learn the basics of art and practice traditional techniques. All the knowledge and skills necessary for drawing and drawing can be applied to pixelating.
  2. Start with small sprites. The most difficult thing is to learn how to place many parts using minimum quantity pixels so as not to make sprites as large as mine.
  3. Study the work of artists you admire and don't be afraid to be unoriginal. The best way learning - repeating fragments of other people's work. For production own style it takes a lot of time.
  4. If you don't have a tablet, buy one. Constant nervous breakdowns and stress caused by continuous left-clicking are not fun, and are unlikely to impress members of the opposite sex. I use a small Wacom Graphire2 - I like how compact and portable it is. You might prefer a larger tablet. Before purchasing, take a short test drive.
  5. Share your work with others to get their opinions. This might also be a good way to make new geek friends.

P.S.

The original article is located. If you have links to cool tutorials that need to be translated, send them to our party. Or write directly to the group messages

Nowadays, programs such as Photoshop, Illustrator, Corel make the work of the designer and illustrator easier. With their help, you can work fully without being distracted by the arrangement of pixels, as was the case at the end of the last century. All necessary calculations makes software - graphic editors. But there are people working in a different direction, not just different, but even completely opposite. Namely, they are engaged in the same old-school arrangement of pixels to obtain a unique result and atmosphere in their works.

An example of pixel art. Fragment.

In this article we would like to talk about people who do pixel art. Take a closer look at their best works, which, due to the complexity of their implementation alone, can be called, without exaggeration, works contemporary art. Works that will take your breath away when viewed.

Pixel Art. Best works and illustrators


City. Author: Zoggles


Fairytale castle. Author: Tinuleaf


Medieval village. Author: Docdoom


Hanging Gardens of Babylon. Author: Lunar Eclipse


Residential area. Author:

Pixel art(written without a hyphen) or pixel graphics- a direction of digital art that involves creating images at the pixel level (i.e., the minimum logical unit that makes up an image). Not all raster images are pixel art, although they all consist of pixels. Why? Because ultimately, the concept of pixel art encompasses 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 probably be naive simpletons who will praise you for your painstaking work.

It is currently unknown when exactly 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).

The most widespread application of pixel art is in computer games, which is not surprising - it made it possible to create images that were undemanding in terms of resources and at the same time looked truly beautiful (at the same time taking a lot of time from the artist and requiring certain skills, and therefore implying good wages). In bloom, highest point in development are officially called video games on 2nd and 3rd generation consoles (early 1990s). Further progress in technology, the emergence of first 8-bit color, and then True Color, the development of three-dimensional graphics - all this over time pushed pixel art into the background and third place, and then it began to seem that the end of pixel art had come.

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

Of course, various retrograde elements played their role in the return of pixel graphics, loving to be nostalgic about the good old childhood games, saying: “Eh, they don’t do that anymore”; aesthetes who can appreciate the beauty of pixel art, and indie developers who do not perceive modern graphic beauties (and sometimes, although rarely, simply do not know how to implement them in their own projects), that 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 despite the fact that for the common man it is extremely accessible, because to work with this technology, it is enough to have a computer and the simplest graphic editor! (the ability to draw, by the way, won’t hurt either) Enough words, let’s get to the point!

2. Tools.

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

I draw in Adobe Photoshop, because it’s convenient and because it’s been around for a long time. I won’t lie and tell you, muttering my dentures, that “I remember Photoshop was still very small, it was on a Macintosh, and it was numbered 1.0.” This did not happen. But I remember Photoshop 4.0 (and also on Mac). Therefore, for me the question of choice has never been a question. And therefore, no, no, but I will give recommendations regarding Photoshop, especially where its capabilities will help significantly simplify creativity.

So, you need any graphic editor that allows you to draw with a tool of one square pixel (there are also non-square pixels, for example round ones, but they at the moment not interested). If your editor supports any set of colors, great. If it also allows you to save files, that’s great. It would be nice to be able to work with layers, since working on enough complex picture, it is more convenient to decompose its elements into different layers, but according to by and large it is a matter of habit and convenience.

Shall we start? Are you probably waiting for a list of some secret techniques, recommendations that will teach you how to draw pixel art? But the truth is that, by and large, there is nothing like that. The only way to learn how to draw pixel art is to draw it yourself, try, try, don’t be afraid and experiment. Feel free to repeat 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 works of masters (not mine) and draw, draw, draw. Several useful links await you at the end of the article.

3. General principles.

And yet there are several general principles, which will not hurt to know. There are really few of them, I call them “principles” and not laws, because they are more of a recommendatory nature. In the end, if you manage to draw a brilliant 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. Let me break it down: everything you draw consists of pixels, and the pixel must be readable in everything. This does not mean that the picture cannot contain elements at all, for example, 2x2 pixels, or 3x3. But it is still preferable to construct an image from individual pixels.

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

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

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

An elementary set of examples of inclined straight lines, which can be found in almost every pixel art manual (mine is no exception), will help you avoid such kinks 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 - only in this way is the effect of linearity achieved. The most common construction methods are with segment lengths of 1, 2 and 4 pixels (there are others, but the presented options should be enough to implement almost any artistic idea). Of these three, the most popular can confidently be called a segment length of 2 pixels: draw a segment, move the pen by 1 pixel, draw another segment, move the pen by 1 pixel, draw another segment:

Not difficult, right? All you need is a habit. The ability to draw inclined straight lines in 2-pixel increments will help in isometry, so we’ll look at it in more detail next time. In general, straight lines are great - but only until the task arises of drawing something miraculous. Here we need curves, and many different curves. And we take into account 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 so on. Your case will not necessarily use the same sequence, it all depends on the smoothness that is required. Another example of rounding:

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

There are gross errors in the drawing, and simply unsuccessful roundings, and there are kinks - try to correct the picture based on what you already know. That's all I have with the lines, I suggest you draw a little. And don’t let the simplicity of the examples confuse you, you can only learn to draw by drawing – even the simplest things.

4.1. Draw a bottle of living water.

1. The shape of the object, you don’t have to use color for now.

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 1 pixel wide shadow of dark red color on the areas of the liquid bordering the walls of the bubble. Looks pretty good, huh?

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

4.2. Drawing a watermelon.

Let's draw a circle and a semicircle - this 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 rind and the pulp.

3. Filling. Colors from the palette, the middle shade of green is the color of the rind, the middle shade of red is the color of the pulp.

4. Let us mark the transition area from the crust to the pulp.

5. Light stripes on the watermelon (finally it looks like itself). And of course – seeds! If you cross a watermelon with cockroaches, they will crawl away on their own.

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

5. Dithering.

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

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

Now, in an era of limitless technical possibilities, many say that the need for dither has disappeared by itself. However, its proper use can give your work a characteristic retro style, recognizable to all fans of old video games. Personally, I like to use dithering. I’m not very good at it, but I still love it.

Two more dither options:

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 checkered lines). More is possible. It's better not to do less.

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

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

Pixel art can be drawn in any raster graphics program, it is a matter of personal preference and experience (as well as financial opportunities, of course). Some people use the simplest Paint, I do it in Photoshop - because, firstly, I’ve been working in it for a long time, and secondly, I’m more comfortable there. Once I decided to try the free Paint.NET, I didn’t like it - it’s like with a car; if you recognize a foreign car with an automatic transmission, you’re unlikely to get into a Zaporozhets. My employer provides me with licensed software, so my conscience is clear before the Adobe corporation... Although they charge unimaginable prices for their programs, and they will burn in hell for this.

1. Preparation for work.

Create a new document with any settings (let the width be 60, height 100 pixels). The main tool of a pixel artist is a pencil ( Pencil Tool, called by hotkey B). If the brush (and the brush icon) is enabled in the toolbar, hover over it, click and hold L.M.B.– 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 there is a drop-down menu Brush):

Pixel art for beginners. | Introduction.

Pixel art for beginners. | Introduction.

A few more useful combinations. " Ctrl+" and " Ctrl-"zoom the image in and out. It is also useful to know that pressing Ctrl and " (herringbone quotes, or Russian key " E") turns the grid on and off, which is a great help when drawing pixel art. The grid spacing should also be adjusted to suit you; some find it more convenient when it is 1 pixel; I’m used to the cell width being 2 pixels. Click Ctrl+K(or go to Edit->Preferences), go to the point Guides, Grid & Slices and install Gridline every 1 pixels(I repeat, 2 is more convenient for me).

2. Drawing.

Finally we start drawing. Why create a new layer ( Ctrl+Shift+N), switch to black pen color (press D sets the default colors, black and white) and draw the character’s head, in my case it’s this symmetrical ellipse:

Pixel art for beginners. | Introduction.


Pixel art for beginners. | Introduction.

Its bottom and top bases are 10 pixels long, then there are segments of 4 pixels, three, three, one, one and a vertical line 4 pixels high. Straight lines in Photoshop are convenient to draw with the Shift, although the scale of the image in pixel art is minimal, this technique sometimes saves a lot of time. If you made a mistake and drew too much, you went wrong – don’t be upset, switch to the eraser tool ( Eraser Too l or "" key E") and delete what you don't need. Yes, be sure to set the eraser to also the pen size to 1 pixel so that it erases pixel by pixel, and the pencil mode ( Mode:Pencil), otherwise it will wash the wrong thing. Switching back to a pencil, let me remind you, via “ B»

In general, this ellipse is not drawn strictly according to the rules of pixel art, but it requires it artistic design. Because this is the future head, it will have eyes, a nose, a mouth - enough details that will ultimately attract the viewer’s attention and discourage the desire to ask why the head is such an irregular shape.

We continue drawing, adding a nose, mustache and mouth:

Pixel art for beginners. | Introduction.

Pixel art for beginners. | Introduction.

Now the eyes:

Pixel art for beginners. | Introduction.

Pixel art for beginners. | Introduction.

Please note that at such a small scale the eyes do not have to be round - in my case they are squares with a side length of 5 pixels, with corner points not drawn in. When returned to the original scale, they will look quite round, plus the impression of sphericity can be enhanced with the help of shadows (more on this later, see the 3rd section of the lesson). For now, I’ll slightly adjust the shape of the head by erasing a couple of pixels in one place and adding them in another:

Pixel art for beginners. | Introduction.

Pixel art for beginners. | Introduction.

We draw eyebrows (it’s okay that they hang in the air - that’s my style) and facial folds in the corners of the mouth, making the smile more expressive:

Pixel art for beginners. | Introduction.

Pixel art for beginners. | Introduction.

The corners don't look very good yet; one of the rules of pixel art states that each pixel of the stroke and elements can come into contact with no more than two neighboring pixels. But if you carefully study sprites from games of the late 80s and early 90s, this error can be found there quite often. Conclusion - if you can’t, but really want to, then you can. This detail can be played up later during filling with the help of shadows, so for now let’s continue drawing. Torso:

Pixel art for beginners. | Introduction.

Pixel art for beginners. | Introduction.

Don't pay attention to the ankles for now, it looks awkward, we'll fix that when we start filling. Small correction: add a belt and folds in the groin area, and also highlight knee joints(using small 2 pixel fragments protruding from the leg line):

Pixel art for beginners. | Introduction.

Pixel art for beginners. | Introduction.

3. Filling.

For each element of the character, three colors will be enough for us for now - the main fill color, the shadow color and the stroke color. In general, there are a lot of things you can advise on color theory in pixel art, including: initial stage feel free to spy on the work of the masters and analyze exactly how they select colors. The stroke of each element can, of course, be left black, but in this case the elements will certainly merge, I prefer to use independent colors, similar to the main color of the element, but with low saturation. The most convenient way is to draw a small palette somewhere near your character and then take colors from it using the eyedropper tool ( Eyedropper Tool, I):

By selecting desired color, activate the “bucket” tool ( Paint Bucket, G). Also, be sure to disable the Anti-alias function in the settings; we need the fill to work clearly within the drawn contours and not go beyond them:

Pixel art for beginners. | Introduction.


Pixel art for beginners. | Introduction.

We fill in our character; if we can’t fill in, we draw it by hand with a pencil.

Pixel art for beginners. | Introduction.

Pixel art for beginners. | Introduction.

Pay attention to the ankles - due to the fact that these areas are only 2 pixels thick, I had to abandon the stroke on both sides and only drew it on the intended shadow side, leaving a line of the main color one pixel thick. Also note that I left the eyebrows black, although this doesn't really matter.

Photoshop has a handy color selection feature ( Select->Color range, by poking the eyedropper into the desired color, we will get the selection of all areas of similar color and the ability to instantly fill them, but for this you need the elements of your character to be on different layers, so for now we will consider this function useful for advanced Photoshop users):

Pixel art for beginners. | Introduction.


Pixel art for beginners. | Introduction.

4. Shadow and dithering.

Now select the shadow colors and, switching to the pencil ( B) carefully lay out the shady places. In my case, the light source is somewhere to the left and above, in front of the character - therefore we indicate the right sides with a shadow with an emphasis towards the bottom. The face will be the richest in shadow, since there are many small elements, which stand out in relief with the help of a shadow on one side, and on the other they themselves cast a shadow (eyes, nose, facial folds):

Pixel art for beginners. | Introduction.

Pixel art for beginners. | Introduction.

Shadow is very powerful visual medium, a well-designed shadow will have a positive effect on the character’s appearance – and on the impression he will have on the viewer. In pixel art, a single pixel placed out of place can destroy the entire work, while at the same time, seemingly such minor adjustments can make the image much prettier.

As for dithering’and in an image with such miniature dimensions, in my opinion, he is completely superfluous. The method itself consists of “mixing” two adjacent colors, which is achieved by staggering the pixels. However, to give you an idea of ​​the technique, I will still introduce small areas of blending, on the trousers, on the shirt and a little on the face:

Pixel art for beginners. | Introduction.

Pixel art for beginners. | Introduction.

In general, as you can see, nothing particularly complicated. Pixel art What makes it so attractive is that having mastered some patterns, anyone can draw well themselves - simply by carefully studying the works of the masters. Although yes, some knowledge of the basics of drawing and color theory still won’t hurt. Go for it!

While browsing the Internet this morning, I wanted to write a post about Pixel Art, and while searching for material I found these two articles.

The term “pixel graphics” is not familiar to everyone, nor is it underground slang. Wikipedia will help you find out what this is. The main thing to understand is that pixel graphics determined by the way the drawing is created (pixel by pixel), not by the results. Therefore, drawings obtained using filters or special renderers are also not included in it. In the first part of the article, and maybe even a series of articles dedicated to this art, I will show some of the works I liked.

Amazing illustrations, excellent shadow work. (Polyfonken's Pixel Art).

The topic is quite broad. There are variations of dice.


Rod Hunt's illustrations are very colorful and realistic. The artist combines vector graphics with pixel art.


Brazilian-German bloggers Thiago, Pi, Jojo and Mariana present themselves as pleasant, laughing pixelated characters.

This painting was created by Juan Manuel Daporta using only MS Paint! The work took 8 months. Impressive.

Pixels also live outside of computer screens. It's amazing how well the plots of pixelated pictures are understandable.

Space wars in the style of Super Robot Wars. In the world of pixel graphics, Roberson has his own unique style.


City of crazy dolls. The illustration, although drawn in vector, still looks like pixel art. Interesting work.

This direction of pixel art particularly interests me. These pictures are drawn not on the screen, but on the canvas acrylic paints. This masterpiece was made by Ashley Anderson.

Pixel cities are a separate big topic. There are usually a lot of details and storylines. In this picture there is an embankment and colorful balls and a sushi bar and even protesters.