We draw a pixel arcade game character in Photoshop. Adobe Photoshop: Draw and animate a character using Pixel Art technique

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 drawn-out 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 positive feedback. In this tutorial I'll be using Photoshop, which, although expensive, contains a lot of useful tools for creating 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

When drawing curved lines, you need to make sure that the decline or rise is uniform along the entire length. 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

First you need a 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 for 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 are the restrictions? 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!

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 a rough shape, and then trim it. 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 English abbreviation, assembled from 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. Regardless, choosing a distant light source like the sun is a 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 more realistic picture" Be that as it may, in real life we ​​are used to seeing things in the dark or light spectrum, and our brain will filter out everything that is 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 in traditional painting"Hatching" and "cross-hatching" are used, 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 from 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 whole, rather than a huge number of 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 - not a single filter will make your sprite as clear and clean as manual work. 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 hardest part is learning how to place a lot of detail using a minimum number of 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 to learn is to repeat fragments of other people's work. It takes a lot of time to develop your own style.
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

Everyone knows how the mainstream encourages publications related to what is popular “this week.” Over the past six months, I have often come across articles “getting to know pixel art.” They began, as a rule, with a list of the capabilities of a certain software. However, minus the question of choosing a program and a cursory listing of known facts, they did not bring the reader one iota closer to understanding how to prepare this pixel art. It is this unfortunate omission that I would like to address in the very first pages of 2015.

In this publication we are not looking at programs, but we are digging into something more. The pixels themselves. From the origins, starting with the four-color CGA era, right up to the Renaissance era. In this publication, we don’t review games, we don’t sing praises to artists of the past (except a little), focusing specifically on the process of creating the simplest pixel art. This material will be of interest to beginning artists and those interested. The article contains practically no theory, tedious conclusions and represents an outside view of the world of pixel art from a certain self-taught person who chose to discover each of the Americas on his own, without looking back at the official, generally recognized and documented Columbuses. The article is provided with an abundance of explanatory illustrations, examples, and tips.

The material is divided into several publications due to the volume of text and images. Each article has its own degree of complexity, however, all of them are visual and can be used as a guide to action.

Chapter I – Graphic Theory

I do not deny the need for theory. I don’t deny the need for images. But not separately from each other. Everything here should be like in a good trip - “all inclusive”. Full range of services. The theory does not turn into tediousness. Illustrations of other people's works. Illustrations created by the author of the article. Recommendations. Adviсe.

What’s the point of writing a publication, giving it a catchy title “how to learn to do something well” without offering at least a pinch of your own evidence that this author’s material will actually teach you something that can turn out well? Therefore, we will provide our brief theoretical introduction with a decent amount of moisture, designed to quench the thirst for knowledge not burdened by the desire to learn.

During my work in various gaming offices, I brought own definition pixel art. The time of origin of this phenomenon is directly related to the technical limitations of that era. I would say a consequence of one of the stages in the evolution of graphics in games. The resolution of games before the advent of SVGA mode was 320x200 pixels. The second limitation was the number of colors used. Thus, small objects in panoramic scenes often occupied two, three or four pixels and their palette was extremely poor. Only the skill of the artists and the richness of the imagination of the player of that time made it possible to create the illusion that a pixel (or a group of them) flickering on the screen was something more. A bunch of pixels, or even one pixel, could be a person, an animal, a building, or even an entire planet. Thus, we can say that a few pixels on the screen created a whole image that was understandable to the player. That is, a lot was transmitted through little. And this, without exaggeration, is almost poetry.

Years have passed. Decades. Progress has leapt forward. Monitor resolutions, textures and game sizes have long since left the solar system, where the first pixel crawled out of the waters of oblivion and grew legs. The industry, like a high-speed express train filled with rabid fanatics, continues to rush forward in a mad race for photo-realism. We can say that it would be interesting to know - what will all these people do once they reach it? But no. Not interested. Because most likely, they will finally have to learn how to make games. Again. How they did it before. Entertaining people not with the picture, but with the essence. True, this is unlikely. If, of course, you look back at the history of mankind, and not dream. Let's return, however, to the definition of pixel art.

Pixel art is a type of art where the artist, using a small number of dots (pixels), creates a form or image that is understandable to the observer. We can say that pixel art is one of the representatives of minimalism, where a lot is conveyed to the small ones.

For those who think of the phrase “form of art” as “a sickle raised above the most important,” I recommend replacing it with “technique of creating an image.” The meaning of this will not change much, but it will avoid starting another holy war on the topic of what is art and what is not.

I base my personal chronology on the manuscripts of St. Pair of Truperian. Although, of course, the term video game has much more ancient origins. The first video games date back to 1961. Despite the significant time interval, the ideology of pixel art has not changed much over the past half century. These are all the same dots, the same colors, the frames of the monitors around which have moved apart. That does not prevent people from following with enviable tenacity the precepts of the creators of the past, when screens were small and the pixels on them were large.

Original image: link
Pioneers. Developer EigenLenk. This indie game comes in four (4) colors. All. I would call it a little hymn to minimalism and mastery of working with a small number of colors. I have never seen anything like this in the modern industry (note: all necessary links to the websites of project authors and web resources will be provided at the end of the publication).

Modern pixel artists still follow the canons of minimalism and create images based on a limited number of dots. The ability to use palettes with a small number of colors can be considered a sign of an artist’s high skill. For example, from four (4) to sixteen (16). That is, work in a limited color range. However, creators of paintings whose color arsenal has been increased to 256 or more colors, who do not limit themselves in matters of resolution of the final work, are also valued. The artist is known online under the pseudonym Fool. His pixel canvases fascinate with detail and sophistication.

Original image: link
Fool. If the above project Pioneers An ode to minimalism, the artist Fool can be called a jeweler of pixel art, and his images are richly inlaid with rare mountain stones and those ornaments that the modern world has long forgotten.

On our journey with you, we will think in the canons of antiquity. Namely, a limited palette and low resolution. Our path will pass through the CGA, EGA and VGA eras, excluding the Dark Times that began for pixel art after the arrival of the SVGA tyrant. It was with the advent of high resolutions that pixel art began to lose ground, retreating under the onslaught of avant-garde “monitor resolution” and “working game resolution.” The fact that pixel art has survived half a century later as a phenomenon and as an art form virtually unchanged means that these dots on the screen were not just dots, but were and remain something more.

Note: Much later, another historical murder occurred that changed the course of the gaming industry, when biblical history repeated itself and the Three-Dimer stabbed the Dwemer to death. However, this is a topic for a separate, serious, and no less passionate publication.

Chapter II – Raiders of the Lost Ark

The photo shows the White Sea and Onega petroglyphs. Mostly of a silhouette nature. I went to the Onega petroglyphs as a child, when I still dreamed of becoming an archaeologist. Perhaps this would be a better outcome for me than to connect my life with game development. Any secret can consume a person, but absorption is pleasant, and there is one more nuance. Ancient activity of a person does not disappear and it is fundamental. The same cannot be said about the transience of today. Yesterday a loaf of bread, today an iPhone, tomorrow something else...

It is not surprising that the first artists from the PC world repeated the technique of their older brothers. The number of flowers required some imagination, given their scarcity. And the key to various kinds discoveries, as we well know, lie in history. The bow, crossbow, and siege weapons did not appear immediately, being phenomena of an evolutionary order. And more than once a stone thrown by an opponent hit the foreheads of future Newtons from the world of weapons, until a sling was born that made it possible to return some of the arguments back. The story is always the same. First comes the simple, then the complex.

In order for this postulate not to be unfounded, we will create with you our first pixel art. I prefer, however, to call our experiments only pixel images, since the presence of pixels on an abstract scene does not yet make them art. The canvas in our case will be the canonical resolution of 320x200. So that you can see the results without using glasses, the images will be enlarged multiple times. Let today's gods of the nameless world be the ball, the sword and the small kudu, which, being connected together, will never be a pyramid and will never be mentioned in the history of the universe with the abbreviation MMM.

To get comfortable, let's draw our trinity. And the ball will be the first petroglyph that we will put on the stones of the nascent stronghold.

Fortunately, this area is not just another of my many stupid jokes. If I were walking in the footsteps of stupidity today, I would draw one single pixel on the screen, and then begin to lay claim to Malevich’s laurels.

If you are ready to close this publication by impaling the author, I can say with complete seriousness that the ball, even using the four colors typical of the CGA era, cannot be drawn in the only way. Please make sure of this.

I apologize for the eye-popping palette of these images. In the publication, I decided to use the original CGA palette, and not a modified one as was done in the Pioneers mentioned at the very beginning.

As you can see, the balls are made not only in silhouette, but also in the form of lines, using gradient color rendering, when the gradient lattice compensates for the lack of colors to create halftones. In the world of pixel art, the last mentioned method of transmitting halftones can be called a special case of shading.
That is, pixel art uses the same principles as subjects of fine art. There is a stroke (spot, or pixel), and there is a stroke (a discrete difference between two colors due to an alternating lattice of pixels of different colors).

For additional practice, let's sketch out a couple of logos for fictitious brands. Contrary to the well-known stereotype, size is not important and resolution is also not important. The main thing is the form and idea embedded in the image. To complicate the task even more, let's set an additional condition. Let each logo begin with the Latin letter “S” and let it speak for itself.

Note: I plan to use two of the three logos presented here in my game project, so the copyright is not for advertising, as one might think. In the civilized world, if my memory serves me correctly, this is enough to secure authorship of the image. Well, we won’t talk about the uncivilized world. Besides, I already looked out the window today.

With the naked eye you can see that the shape of the object, its silhouette in such compositions is dominant. There is no obvious light and no pronounced shadows; rare elements emphasizing the form are rather an exception that confirms this position. The shape is recognizable. The text is provided with an additional image that allows you to interpret and identify the logo. In pixel art, I would recommend starting from the form, and only then providing the best option with light, colors and details. That is, first you should learn to give birth to a certain interesting image, and then everything else.

Fifty grams of lyrics on the theme of logos. It is strictly not recommended for senior management. Because you have already drunk this hundreds of times from your subordinates and only transferred the product.

Unfortunately, the reality of any year, decade or century sample is always the same. There are creators, people who do things, and a layer of drone-like persons on top (often exceeding the number of creative people by tens and hundreds of times) whose entire job is to discuss other people’s works. The way the world works is that something created by someone passes through the intestines of the corporate digestive tract to be changed or not to be, but always within a few days. When people who have long ago reached the level of their incompetence will discuss the conceptual dissonance in relation to the pixels that form the tail of the snail, or will hold a vote with the entire composition of management officials to decide whether to increase the length of the tail, decrease it, or vice versa - leave it.
A monstrous layer of meaningless, but incredibly necessary cells in the body of almost any office. I know very well that they feel good when looking at their own reflections in the mirrors, and that the feeling of self-importance or significance is not alien to them. But the practical output in the form of a useful result from this plankton is quite meager. However, these people usually respond to such statements by admiring their own wit - “it just seems like it to you.”

What. Probably, it seems. I probably don’t understand much about the benefits of such people. True, every time this happens, I remember the well-known “Expert” video. I like the British version better than the Russian one (swearing and overacting do not mean a competent transfer of the overall flavor). And the actors of this short film, in my opinion, play much stronger, correctly conveying the emotions and undertones of this wonderful story Alexey Berezin.

- Andersen, I understand that you are a specialist and don’t see big picture

I don't really understand the value of moving a group of two or three pixels to the right or left. Thank God I don't see the big picture. But I know very well that the snail depicted on the logo in combination with the words “journey” looks at least funny. Mothers with strollers passing under the road poster will point it out to their kids (because it’s cute), drunk teenagers will definitely draw a smile or a mustache on the snail with a marker (because these are teenagers), and no less drunk “Seeds” in the kitchens for the next philosophical in passages interspersed with pats on shoulders, they will note that “it would be funnier to make the logo of a taxi or Russian post office a snail” (because they are not freeloaders, but partners). Given the general absurdity of the image, the snail will be noticed and remembered by a variety of layers of society, and therefore will spread around the area slowly but surely.

There is another category of people who should be exiled to Magadan. Those who every time after viewing your work ask “what did you want to say with this image? What were you thinking when you drew this? What prompted you to do this and not otherwise? The first three questions are harmless. But after them you will definitely be asked the question “why is the color black here?”, “why is it blue here?”, “why are these colors and not others?”

The “funny thing” about them is that no matter what nonsense you tell them, they will be satisfied with the explanation. But they need it. Without your text description, they cannot perceive your work. If suddenly, you are dumbfounded by the absurdity of what is happening, you mumble that “a medium-sized tail is not too pretentious, but not small either, which can personify the average representative of society, and that this will allow us to avoid any misunderstandings. But here a group of pixels, in a certain sense, balances the overall curiosity of the composition, which gives space...”, in a word, you will talk complete nonsense, composing the worst fable you have ever written - they will be satisfied.

For those who are not a narrow specialist and can see the WHOLE picture as a whole, these fables are a necessary tool. If necessary, they will be added to the case. The folder will become thicker. For one sheet. And if you print the fable on one sheet, and the image of a snail on another, and a close-up of the tail on a third, then they can be rearranged solidly. This helps to depict the thought process or exploration of a subject during a meeting. A folder of papers taken out of a purse emphasizes efficiency.

Extensive experience in working with different customers led me to the conclusion that a detailed text description is not an unnecessary element. This adds weight, even if there is none. Unfortunately, business is often replete with absurdities and absurd situations. The truth is this: in a crazy tent, you can only stay normal by pretending to be a clown.

Do you think there is not a smart person who would not ask if this is a nine millimeter cartridge? Not because it is important to him, but because in any case he will find something to tell you. The sleeve is not the same. The bullet is wrong. The size is wrong. The scale is not the same. There will be great theorists who will tell you that the real size of an object is the key to the correct perception of the logo on a psychological level! Would you say no? It can not be? There are a lot of such people around. And it's not just executives, CEOs, and CEOs. This whole part humanity, that by nature they are not Pushkins, but Belinskys. That's the way a person is. If it does not produce, then it degrades.

For those who looked at this “tab” and were upset with me, regardless of the categories mentioned, I prepared a pixelated stack with the same two-color cucumber. This will not reduce the grief, but it will ease the suffering. And there must definitely be suffering. Either from the article, or from the first working day after the New Year celebration.

In our case, the sword is an ideal option for a well-planned hack. Simple shape, mostly linear except for the handle. This is probably why beginners begin their journey into the world of pixel art with weapons. It would be a little more difficult if we wanted to use exotic weapons. But we didn’t want to, because you can get overtired if you’re not used to it. In this simple example, you can clearly remember that the first thing we do is create the form. Then light and shadow (or the play of light on different faces), then details.

Last on the list, but not least in importance, is kudu. In order to replicate its silhouette, you will need to carefully look at the photograph of the animal. Or... just circle it. There is nothing shameful about this.

I won’t argue - it’s pure fraud, from the point of view of every second artist. Why every second? Make no mistake. Today's world is fast-paced. You will draw the work for a week and even a crust of bread will not be on your table. Many artists use photographs and 3D models to speed up their work. It's worth noting that our kudu is not yet pixel art, but only a silhouette. And if a silhouette can be taken anywhere (copy any object existing in the world), then no one will do pixel art for you. This image will have to be processed.

Take a look at the silhouette of what we cut out at 4x magnification. Rough sharp forms, no smoothness and grace that is inherent in animals. Sudden changes in height, holes, dents... in short, a complete nightmare. We must trim our antelope.

Compare both forms. Original (left) and processed (right). I changed the proportions in several places, smoothed out the sharp corners, and filled the potholes in the poor thing with one-color cement. The flowers are gone. Now the berries will come. It's not just about sanding the shape. You need to get a feel for your subject, cutting corners only where necessary. IN to a greater extent you should think about the legibility of the silhouette, not its historical or biological accuracy. As you can see, I cut off part of the ear, showing almost the entire second horn, added a tail with a belly button, etc. That is, he polished and distorted the real proportions so that they were better readable

Organic objects are more complex than static objects. That's why I needed something alive. Firstly, I wanted to find an animal starting with the letter M. Secondly, it had to be graceful, preferably with horns, so the bear immediately disappeared. Horns in our case are a complex and subtle form. A real hell for an animator (a problem that will be described in the third article of this series, dedicated to the simplest pixel art animation), but also, concurrently, an excellent object for learning.

The antelope is not over. Here we will look at a number of extremely important techniques. I just talked about smoothing shapes and contour lines that form volume. And here it is necessary to note what I call “pixel pitch”. Although it would be more accurate to say “the step of any inclined line.”

Note. I took the top row, copied it and added one pixel at a time in random places. The naturalness of the form instantly disappeared. This effect is especially noticeable on the line located at an angle of 45 degrees relative to the horizontal, the first in the second row. Just two pixels turned it into a knotty stick. What happened? The step has changed.

If we were on a high-resolution canvas, no one would notice the flaws. But being adherents of the 320x200 resolution, we know that every incorrectly set pixel is no longer a flaw, but a sparkling fiasco. Any mistake destroys the integrity of the form. It is probably for this reason that the work of masters is often assessed with an enthusiastic “damn it, every pixel is in its place here.”

What to do? Maintain a measured pixel pitch in relation to the line, avoiding sudden changes that are uncharacteristic for this shape. In order to understand the essence of such a phenomenon as pixel pitch, there is a simple exercise. Let's call it a pipe. We take a straight vertical or horizontal line and try to make it curve. The rules of the game are simple - each subsequent segment of the curve (the length of the line fragment in pixels) must be less than the previous one, there should not be differences in height of more than one pixel.

If you break these two rules, your pipe will no longer resemble a curve. The smoothness of the line breaks. Everything else is achieved through experience. The curve can be a sinusoid, it can be broken, distortions in the line can be deliberately introduced, and so on.

I continued polishing the mold. It seemed to me that the antelope was not graceful enough, so I took it to the fitness center, we more clearly defined the waist and chest, then went to the grinder and trimmed the shape of the horns, and at the same time cut a few pixels on the ears at the hairdresser, which spoiled all the raspberries for us. And now we can say that the shape of the antelope (on the right) looks more graceful than our previous version (on the left).

To become completely and incomparably beautiful, we also decided to go to a beauty salon, but here a surprise awaited us. It turned out that someone had restricted the import of flowers. The makeup artist mumbled something about the sanctions imposed and the protection of information about the colors of domestic pixels abroad. We didn’t understand anything, but we left the salon... like that.

Let's summarize this chapter. We found out that the silhouette is an important part of the image. We also found out that a form can exist on its own and still convey information to the observer. Now we know that when drawing pixel art, there is a certain step to be taken in terms of lines and shapes so that the image is smooth, looks natural and does not break. We will remember that if we cannot create a form ourselves, it can be seen in the outside world, but if everything is really bad, we can copy it and then process it, turning it into a good pixel image.

For those who still don’t understand how pixels are drawn, I’ve prepared a short graphic lesson into one image.

Despite the risk of being impaled today, I will quickly explain what is hidden behind this image. Unlike brushes and other traditional anointing tools, your pixel, when born on the canvas (at the moment you click any of your tools), does not react in any way to pen pressure, retaining only one gene given by the daddy - color. If you want to paint a dot of a different color, turn to the mother palette, select the color you need with an eyedropper and place it on the canvas in the same way.

Even if you use smoothing of an object by changing the tone of neighboring pixels, they have no dependence on the pressure of the brush at the moment of application to the canvas, have no dependence on the angle of the brush relative to the canvas, and do not change tone, no matter how much you press the buttons. That is, to place a pixel on the canvas, just one click with any input device in any graphics package is enough.

This is binary graphics, if you may. In scientific terms - the “gopher effect”. A pixel is either there or it isn't. The click either went through or it didn’t. The pixel either appeared on the screen or it didn’t. Zero and one. This makes the job a lot easier for beginners. Don't believe me? Let's take a quick look at your unbelief.

Let's say you've ever picked up a pen, pencil, or, God forbid, a tablet. Let's say that you, like me, don't know how to draw. What do we usually hear on professional artist forums?
-Your proportions are disgusting, your anatomy is lame. Your touch should scare children in kindergarten. Why do you even draw? Why increase the amount of terrible things in this world, isn’t the dollar exchange rate enough? These are not colors, but some kind of nightmare, some kind of mess! Your color rendering is disgusting. You don't know how to distribute light across an object.

You can hear a lot when visiting specialized resources. Every second person there is at least Aivazovsky. But here you go... what can you say about my color now, huh? What is your verdict on my progress today in mastering the technique of drawing kneecaps? Am I doing well enough on my anatomy questions this week?

Note: I forgot to mention, but it’s high time. This publication will not mention software packages, as is fashionable in such materials. Technologies and programs are good at imparting seriousness to the material, pretending that they understand something about pixel art, whereas in order to do it, it is enough to have any package that is able to put a dot on the canvas. That is, you need any graphic editor, a tool usually called a pencil or a brush. In fact, you don’t even need an eraser because you can erase a free-thinking pixel by placing a dot with a background color on top of it.

So far we've been doing well. We had in our hands a pinch of flowers and simple shapes. The time has come to fill our ark and, like Noah, escape into a new era that has come after the time of the CGA regime. EGA World. With the same working resolution, it promises us unprecedented wealth in the form of sixteen colors. And it will no longer be a pinch, but a handful.

Chapter III – Noah's Escape

However, in this chapter there will be much more information about HOW. A larger number of colors imposes additional responsibility on the artist due to the growing arsenal. There are no colors for a tick in the case of pixel art. Each of them is in its place and each is used for its intended purpose. Therefore, first of all, you, as a real artist (and apparently me too), will have to choose a palette for the future canvas. You can even create an aesthetic analogue of real palettes, rather than a set of squares illustrating the available colors.

To reduce the number of images and make the material more visual, I will combine the kudu, the ball and the sword in one place, in the form of a kind of logo. We will transform our early petroglyphs into a solid image and will work with it. First, let's modify the silhouette.

What happened to the sword? Why did the antelope, while we were catching our breath after the second chapter, wander through the candy stores?! And what are these clownish proportions? I will answer each of the three questions in sequence. If you looked under the spoiler in the previous chapter (and I hope not), then this is where the Fable could begin. However, you are not a customer, but my reader. And I will be very frank with you.

Please proceed under the spoiler to the halls of transformation.

When the gods of the nameless pixel world decided to get together to write an article about pixel art, they somehow forgot to warn me that they would need a logo in chapter three. How to cross three different entities so that when they are together they look organic? Could you cross a plunger, a lion and a golf club together in fifteen minutes? And do they fit together? The discrepancy between the ball, the sword and the lesser kudu is approximately the same. And at the very wrong time I came up with the idea of ​​reducing the number of pictures in the publication and working with one image. Just throw them on the canvas? Not interested. We need to somehow combine them. I will outline the train of thought so that you can understand exactly how Baron Munchausen pulled himself out of the swamp by his hair. I believe that it is nothing other than the power of fantasy.

Like a drowning man clutching at something that can keep him afloat, I grabbed the ball. He became the firmament I needed. Some land. Then everything is simple - you need to place the antelope on the ball. But how? The pose is wrong, the ball is too small, and also this sword! There is always a solution. Need stylization. You need to stylize the image, create some kind of grotesque. Something unreal in proportions, but real in the outline of the overall image. Hypertrophy forms. Here's the solution. After all, hypertrophy is often the essence of pixel art. Grotesque heroes with legs no thicker than a pixel, powerful torsos. Sometimes these piles of pixels are much more human than their three-dimensional counterparts.

I tilted the antelope’s head, enlarged its muzzle, stretched out its horns to emphasize the “compression of the image” from below, and pulled its legs so that they came together, if not to a point, then certainly fit on the ball (I agree, it reminds me of the diaries of a maniac, but if we put the word “maniac” in front of the word “pixel”, everything will fall into place). Half the battle is done. The two main characters of our play have already been saved. The sword remains. You can't throw it away. He gets angry. Rotate ninety degrees? Pierce the ball? Pierce an antelope? Pierce them both? Not an option. Otherwise, the article will receive an age rating. Exit?

We need curved shapes. Distorted just like the antelope. Next we remember that there are a great variety of blades. Something round and curved will do to balance the top of our “godtype”. Some kind of scimitar or scimitar. Drum roll, fanfare. Out of three, one was born. To find everyone, gather them together, and bind them with a single black will.

So let's get started. Let's put the sword away so that it doesn't bother us and confuse us. This is advice. Separate complex entities into individual objects so they can be moved and hidden from view. Sometimes it helps to focus on what's important. What is the most important thing for us?

The main object in this scene is the Lesser Kudu. It’s high time to give it a name, but it’s confusing that kudu seems to be masculine, and antelope is feminine. Let her be, and we will call her Kudya. The secondary object is a ball (aka ball, nee sphere). Since it is fused with the legs of the antelope, we take it with us. As we remember, we need a palette and we only have 16 colors in stock. We will try to use them sparingly. From now until the end of Kudi's wanderings, I will post images in sets of six (counting from left to right, in rows). And then give comments so that it is clear what is happening and what we are trying to achieve in the image.

The first image is the original one. In the second step, we desaturated the CGA blank (made it monochrome) and began to create additional shadows. It seems to me that they are necessary in the throat, legs and abdomen. Another color was used to smooth out the white stripes on the back. I apply all the colors to the palette, which is located in the corner of the image (see example below). It doesn’t matter that these are shades of gray now.

In the third step, we smooth out the newly applied shadows, with a neat one-pixel thick edge around the perimeter of all shadows, with rare exceptions where this is not necessary. The fourth action is straightening the shadows that we have, tamping down the pixels that are crawling out, refining the background, adding eyes, a nose (all from the current palette). The fifth step is to add additional shadow volume around the entire perimeter of the lower part of the antelope. This pleasure eats up two more colors. The sixth and final action in this block is to add any color you need, for example, taken with an eyedropper from a photo of a kudu, and overlay it on top using any overlay method convenient for you (Overlay, Multiply, Color). Kudu becomes colorful. Our palette becomes colored in the same way. The result is a blank of the desired color with eight colors in the tones we need.

Note: Blending modes are a feature typical of professional image processing packages. That is, in the absence of such a package, the palette is created manually.

Why did we start working in black and white? Firstly, we didn’t struggle with the selection of colors, but took them in bulk, since they are all shades of the same skin. That is, later they will become the same color scheme. Secondly, a black and white image can show the observer the flaws of light and shadow better than anyone else. That is, illumination flaws. When an artist works with a color image, he may not see his own mistakes. This is due to different color perception among people, and not the curvature of the hands. To draw immediately in color, you need a habit. It is developed through repeated drawing (classical and digital).

Go ahead. There comes a time when we should use shading. This would not be necessary if we were in the next chapter, basking in the feather beds of a 256-color VGA mode. But as long as Kudya has 16 colors, we should stick to the chosen course.

Loved by some and hated by others. Not a person, but a reception. Those who don’t like this effect call it “already sick of Hollywood!” (meaning the characteristic film effect of blue light on one side and red or orange on the other side), among those who work with it and who like it, it is often called “backlighting.” It creates a bright accent on the edge of the object and emphasizes its shape. This is our first action in the new set.
The second action adds bright spots of light to the back in the area of ​​the stripes, as if they were made of a different material. The second virtual light source is on the other side of the antelope. The third action is significant. The first hatch is added based on alternating pixels. This is most clearly visible in the glare of the sphere. Minor adjustments to the blue lighting are also made.
The fourth point is to add the same shading to the lighting of Kudi’s back as on our sphere. At the fifth point, we balance the hatching that appears, spreading in different directions from the illumination on the back with a hatched “pattern” (eng. pattern - a regularly repeating element). The sixth point is the second light source, which emphasizes the kudu from the back.

I would like to dwell on the shading separately and give it a close-up so that you can see how the back fragment changes directly with the shading. As you can see, it's similar to regular shading, except that the hash marks are spaced as evenly as possible across the pixel, offset on the next line. You could say that in a certain sense it is mechanical. For the most part, it is impossible to automate this process so that it looks good, except in the case of gradients in the sky. This is quite painstaking work, especially if Kudya is not the only entity on the stage.

The first step is to increase the warm backlight so that it illuminates the joint of Cudi's leg. And introduce another color. Bright blue. This is an important point. The presence of this bright color in a number of places in the image enhances the accents of light. It is interspersed gently and carefully, so that it does not become an eyesore, but only barely enhances the main blue light. You can consider it a glare. The second step is to try on the blank of our sword and add shading on the sphere in order to add volume (let him be bored, we are almost done with it). The third point is to add a touch that is already familiar to us to the sword. Just one color added on different sides of the weapon makes it look rich and gradient.

We are already close to completion. The fourth step is to add the second side of the sword and the hilt using the original palette. The number of colors used is fourteen (14) and I think it’s worth making yourself a couple of gifts. In the fifth action, we introduce a brown darker than all existing ones and, similar to a bright highlight, we shade only those places where the shadow should be by definition. At the very bottom of the antelope, where the hooves come into contact with the ball, on the belly and on the throat under the head. Adding this color, as in the case of a bright highlight, should be rare and not intrusive. However, in aggregate the sensation of volume will increase. In the sixth step, we add the last color and smooth out the main shading on Kudi’s back, and then “stretch” along her body with one of the old colors, covering a much larger space with shading.

The result of part of our work in the third chapter was a short poem, an ode to bronze and silver ages. CGA and EGA modes. We'll call it "from four to sixteen."

Let's digress for a moment to find out what happened during this time with our logotypes from the second chapter. What they have become in the new century, and using the same palette. In this case, we will simply study the image, but will no longer be distracted at the stage.

I promised you not to look at logos in detail. Not that I lied to you, but there is some kind of misunderstanding. One more minute of your time. This can either be useful or interesting. Or both, together.
Since Kudi was made in the style that we have already seen, I decided to make logos in three different styles, which, one way or another, differ despite the same color palette.

• Saul Armory- uses as a pattern not a lattice, but something linear, similar to grated metal, where only horizontal lines are clearly visible.
• SOLAR- has practically no gradient changes and is painted with multi-colored and rough lines. Minor anti-aliasing is present only at the corners of the logo. The main weather is made by the effect of extrusion and a sharp change in colors in its zone.
• Snail Travel. Made using brush stroke technique. There are no patterns. But there are spots of varying degrees of illumination and frequency, which, as befits such drawings, disintegrate into mush up close, but when in the distance they form an image much more realistic than others. The origin of this technique is traditional paints.

It is worth noting that without the first petroglyphs, without understanding the form, these objects would not have existed. Therefore, I would advise starting to work with general form object. With a silhouette. And only then turn it into something more. Without mastering the breathing technique, there is no need to take risks at depth.

Let's summarize this chapter:
First you make the silhouette you want. Designate the incident light, and, remembering that light almost always creates a shadow, apply it too. The silhouette ceases to be a silhouette and turns into a three-dimensional object. Only after a satisfactory verdict on the primary object do you begin the “second pass.” This is what I call adding additional detail. That is, additional light and shadow accents, shading, rebalancing colors, working with gamma, etc.

The “second pass” position is also true for any other type of work (even in relation to your unfinished cottage). A three-dimensional model, a sketch or a texture - it doesn’t matter what kind of piece of content you are making, but it is important that the construction should be stage-by-stage. It is important that any object must have a sketch. Base. Sketch. That's where it all begins, and not where everything should come to. Only after sketching do you begin to detail the shape. Otherwise, you will be doomed to repeat the typical mistake of a beginner who first draws one detailed piece and then painstakingly tries to fit it into the object.

Note: Operations with contrast, editing curves, changing color saturation - all these are signs of working with a professional image editing package. However, this does not deny the proposition that pixel art can be prepared in almost any graphic editor.

Note 2: You may have noticed that the pixel art of this chapter looks pastel. Perhaps this is fatigue from the CGA mode. Or maybe what I talked about earlier. When an artist in color allows for softer tones, more faded colors and seems to be afraid to allow himself something rich. Regardless of what caused this result, you can always “twist the curves”, that is, correct the light levels of individual areas of the image or the contrast as a whole, and if necessary, you can dim the color. In the proportions you need. Personally, I spun Kudya and logos as follows.

Chapter IV – Concerning the Renaissance

Artists were no longer constrained by colors, which allowed them to not only create stunning pieces of pixel art, but also transfer images from their real canvases to the computer. By the way, the images had been scanned before, but they were far from these symphonies of color.

The problems with “anti-aliasing” have disappeared; if there are a large number of colors, anti-aliasing is no longer “worth” the loss of one or two precious colors. The problems with halftones have disappeared, the need to use patterns has disappeared. The algorithm for transmitting gradient images with a small number of colors can still be found in a number of packages, in particular when saving graphics for web resources. The gaming industry may be galloping along, but it's still common practice online to minimize images in order to increase loading speeds.

Any entity has two sides. Bad and good. The presence of more colors, which made the image richer, gave a good blow to pixel art. As Aramis would say in this case, “it happened so.” The artists wanted more. And gradually pure pixel art began to be replaced by digital art or digitized art, where the ubiquitous 3D followed on its heels.

Note: Digital art and digitized art are not the same thing. Digital art is initially created in digital packages, using tablets and virtual brushes, while digitized art is a scanned replica of an image created in a traditional way (pencil, watercolor, oil, etc.) In the 90s there was no concept of “digital” artist" (English – Digital Artist).
In the beginning there was digitized art (which was modified to suit the needs of the application); software packages that allowed simulating techniques characteristic of traditional fine art appeared much later.

There are still discussions about exactly how certain backgrounds were made in old games. For example, in quests from Lucas Arts. And speaking of quests, I mean such masterpieces as the game The Dig. A stunning canvas in every sense. Sound, video, amazingly detailed backgrounds and equally charming pixel art characters.

Today, in our time, many developers go back along the spiral of time, returning to their roots. The quest genre has become popular again, and moreover, quests executed in the old graphic solution, where all the action is concentrated in a resolution of 320x240, so close to the canonical resolution of 320x200. The most striking examples of the “reverse revolution” can be considered adventure games (quests) - Gemini Rue, Resonance, Primordia. There are others, but the article is already bursting with images.

I think this is wonderful. In my understanding, the world of computer games, the world of digital art, as well as the world of fine art should be presented using the greatest number of facets (works made using different techniques and in different styles). The same provision should apply to the content of games, but here, unfortunately, there are serious problems. Despite the visible diversity of visualization, there is a serious degradation of the very essence of games. People who played old tactical and role-playing games, most likely they will agree with me. Today in the gaming industry, the prevailing approach is when there are the same game mechanics, on which developers change their “skins”. This is more reminiscent of playing with dolls rather than developing games, when the developer, instead of developing, changes the dress on a well-worn Barbie. There are a lot of clothes, but Barbie is still the same.

Talk less, work more. Let's return to our images, armed with a 256-color palette. Today we are no longer pygmies and no longer hostage to technical limitations. Today the sword-kudo-ball will become a god (I hope that the latter does not read Habr after all and will not throw lightning down at one of his overly talkative creations).

What have we done? In short, we crawled around for several hours with a magnifying glass, smoothing out the previous picture. Where there were sharp transitions between two colors typical of a limited palette, we added one, two, three or four transition colors, turning a rough two-color difference into a relatively smooth gradient. Usually, few people think about how much work was hidden behind such images. It is no coincidence that modern indie developers prefer earlier versions of pixel art, operating with a limited palette and small size of dynamic objects. This kind of pixel art is easier to make and easier to animate. The fewer colors, the simpler the character. In that case, of course, if the artist is well-versed. In theory, this is not bad, but only if the developer, thanks to this simplification, can afford to focus on gameplay, and not on delivering another Barbie to your apartments.

While polishing Kudya, I relied on the gold fund in the form of games from the famous gaming company Westwood Studios. I never had real teachers. But I always had games. They became my teachers. For example, I made an image from the EGA era with an eye on another famous French company, Silmarils. Its name surprisingly corresponded to its own games, each of which could well be considered a special and rare gem in the treasury of the gaming industry.

The fourth chapter of our story turned out to be surprisingly short. It is quite difficult, without video and visually, to show in an article the application of hundreds of pixels smoothing out a rough sketch so that subsequently you do not have to wake up those reading it who have fallen asleep. And there is no need for this. In order to skillfully handle pixels, you need to know the basics, basic concepts, and be able to operate with the basics. With regular practice, the level will increase, which will subsequently lead to much more complex work than the local crooks.

There is a concept of a golden mean. If you mix it with respect for time (both yours and mine), it turns out that the moment has come to stop and take stock. However, I do not advise you to relax. Our results are nothing more than a consolidation of the material covered. Test.

Chapter V – Summing up

Let us list the entities that we now know. First in a list, and then in more detail, but concisely. Without all sorts of jokes with small visual examples. Let this be a reminder when you can jump to the end of the article and refresh the material without being distracted by ball games, sword cuts and abrasions from the overly obstinate Cudi. What can we do now?

• Palette
• Shape (silhouette)
• Light and shadow
• Line
• Hatch
• Smoothing

Palette
To make your pixel art “honest,” I would recommend using a palette. The same as those of real artists. Designate a space on the canvas where the colors you are working with will be located. Only use them. This will give the image some integrity. Will teach you to make do with little. Will teach you to appreciate every color.

I would recommend starting with a four-color and eight-color palette. The main thing is that the number of colors is limited. If you try to use more colors, they will turn your art into mush. Only an ascetic can understand and feel the limitation of flowers, just as only one who has ever been hungry can fully enjoy food. You cannot understand the essence of pixel art without bowing to its roots, and even a pilgrimage to them does not guarantee one hundred percent success.

Shape (silhouette)
An object occupying a small area must have a good or easily readable shape. When creating a character or any other object, immediately think about what you want to focus the observer’s attention on. Perhaps the best option would be to practice on expressive silhouettes and only then proceed to detailed detailing. The silhouette, in most cases, involves two colors. One for the background and the other for the object on it.
The proportions of pixel objects may differ from the proportions of real objects. The technique of exaggerated accents or stylization is often used for the purpose of better presentation (what we did a little earlier with Kudeya). This is also done to make it easier to work with the object, or in case of following the doctrines of a certain style.

Since we decided to consolidate the material, we will consolidate it. It will be simpler than what you saw, it will contain fewer colors, less volume on the screen and will be more visual. Let's start with two colors. Black and white. The theme will be post-apocalyptic. Some dull landscape. Broken car, road sign, some little thing. Let's start with the shape of objects. And don't be afraid to ruin something. This is not a date. If you accidentally added extra pixels, we will remove and comb them. But first, let's create a composition. I repeat once again that any editor and a regular mouse will do. And let it have at least one working button.

Every second person can figure out such scribbles. You may have to work a little harder in the area of ​​the wires. But in general, it will do for a start. Now let’s straighten out our car by adding a couple of pixels. Let's turn the sign into a mailbox. The point is that the mailbox as a silhouette is recognizable. And our road sign looks like a shovel.

We can say that we are almost finished with the silhouette. Let's shoot a couple of holes in the mailbox and mark the window and door openings of the car. With a red circle I indicated a problem that we will deal with in the next paragraph when we get to the lines. Remember our pipe exercise?

Line
You can build the lines as you please. But the best option would be to maintain a certain step (pixel shift) in the direction of the line. To practice lines we drew wires. But by a strange coincidence, they turned out to be quite correct. Nevertheless, the hall is clearly visible on the right wire. This is what I talked about earlier. A case where an incorrectly placed pixel can turn a straight line into a knotty stick.

What is a step? At least the same distance. For healthy and not drunk people, of course. When we want to draw a line, we decrease or increase the step. But we do it smoothly. Gradually. Let's draw to the left of the bad wire - the wire is good. Maintaining an even pace.

It’s not a sin to screw such a wire to a pole. We will erase the old one as unnecessary. And, by the way, let’s dilute the straight line of the ground with various debris. Stones, pieces of iron, everything that belongs in a post-apocalyptic landscape. Apply strokes as God wishes. This is a silhouette. If anything, we’ll lie that this is post-apocalyptic and everything here is distorted. After nuclear explosions. If this does not satisfy your viewer, tell him a story about rock eaters. Which walk and gnaw on stone. Explain that this is the reason why everything is uneven and rough.

Shouldn't we remove those problematic wires and replace them with just a line, as if it were a broken wire? Drawing a straight line is easier than fiddling around and correcting crooked lines.

You know what? I think one element is missing. And even if it’s not a line, but... let it hang. This will make the picture sadder. And since this is not a tree, but a pillar, this time I will not be accused of plagiarism.

What am I talking about? Once I drew a similar plot and great critics from this world saw in it the logo of the game Dead Island, which, by the way, caused many scandals. People love to make trouble when there is no need for it. Or rather, where nothing needs to be done except scandal. For example, seeing a corpse hanging on a tree in some game is the easiest way to stir up a scandal. This is called caring for the younger generation. It would be nice to block the TV with a loin part at the moment of this mousey and completely hypocritical fuss, because there these corpses are shown in hundreds, in daytime. Or learn not to spit on the streets, not to throw cigarette butts everywhere, to take your trash to trash cans, and not to pollute the already polluted nature on vacation. But something needs to be done for this, right?

Smoothing
Exist different techniques smoothing. Smoothing the internal contours of objects while maintaining the roughness of the external form. Smoothing the outer contours of objects, and even smoothing with different levels of transparency at the edges of objects that can be considered dynamic (characters, moving objects). How and in what detail to work out these aspects, how deep you will go on your path is up to you. We'll just take an intermediate color between black and white for now and go along the edge of the car.

This is an enlarged image. You see that I do not place a pixel of this color everywhere. If you start doing this around the entire perimeter of the car, you will end up with a car with a poppy gray edging.

I also suggest going through the rest of the picture and getting the following result.

Let's add one more color to our three-color palette. Lighter. And let's paint the corners of our images again. This is especially true for such thin images as wires. The lack of anti-aliasing is always noticeable on thin elements.

Enlarged machine for understanding the process.

We are done with the silhouette of our work, and with smoothing the contours. I think we can move on to the light. Hand on heart, I can say that the light is drawn before smoothing, since smoothing is a polishing of the image or an additional, but optional effect. It may not exist at all. First the form, then light and shadow to give volume. Then everything else.

Light and shadow
I especially highlight this couple. In all my publications. For me, this is brother and sister, tied together so much that one cannot exist without the other. If there is no Light, the Shadow will not be born, which means there will be nothing. Strokes, highlights, reflections, and other delights are meaningless without them. Insignificant. Secondary. Light and shadow in pixel art are as important as Shape. Therefore, at the stage of birth of any object, it is worth working with this trio. Even our two colors at the start - white and black - are nothing more than light and shadow raised to the abstract.

Let's not be subtle and just emphasize our silhouette with a light splash of light. For example, let's designate the wings of our car. Let's make it a darker color than all the others, already the fifth in a row. At the same time, we'll paint the insides of the car. Still, from this angle we, purely theoretically, should have seen part of the interior and a piece of the roof of the car. Plus we'll add two or three pixels of light highlight with another light color on these wings.

You see two pixels in the area where the door should be. Lovely, isn't it? Two dots, and the brain already grasps visual information and confidently believes that it sees the door handle glistening in the dark.

Hatch
Hatch. Do you remember Kudya? Remember the principle of shading? Alternating pixels. A dot, and behind it a void, a new dot and again a “space”, on the next “line” a shift and repeat everything again. So that a grid appears a certain color. Let's repeat the same technique here. The same color that we have, the color of the car fender.

It worked perfectly on the wings. It’s as if we’ve been drawing pixels all our lives. But with the letter box it turned out to be complete nonsense. It seems to me that it’s worth taking one more, final color. Darker. And fade out the shading on the box.

At the same time, let's use the same dark color that we used to dim the letterbox to dim the bottom row of pixels in our improvised shading. Feel the power of the pixel? Just one color and the wings of the car became three-dimensional, began to bend and go down, as a three-dimensional object should behave when light falls on it. Just. A couple of touches, and we can already go to Kickstarter with a prototype of a hangman swinging simulator for the iPhone. Let's just draw a few horizontal lines on the ground before we commit this stupidity. It doesn't matter how. In any order. And three or four more bright dots under the car. Let them depict broken glass for us.

Of course, I wouldn’t recommend going to Kickstarter with such things. But I recommend practicing more and more, increasing the number of colors and experimenting with shapes. Without fail.

As you can see in our anchor material, simplicity is the key to success. It is not necessary to litter the canvas with details and show miracles of wastefulness in relation to colors. It is not necessary to draw canvases. It is enough to create an image that is understandable to the observer, and then emphasize the accents. Carefully. I would say gently. Do not poke a person’s nose into one of the details of your drawing, but observe a sense of taste and moderation. It is best to carry out development from a position of harmony, and not from the position of “the main thing is that they notice our N,” where N is an effect, technology or game feature.

Epilogue

It is very sad for me to hear how the names of the companies that produced certain games are confused, how buyers of online services, buying an old game, write angry reviews about it, reproaching the ungodly outdated graphics. In the gaming industry, unfortunately, there is no concept of history as such. It is passed on by word of mouth. And therefore, each subsequent version of the fairy tale acquires modern details that are relevant for current generations. There are no institutions of knowledge, no chronicles of history, no names of discoverers carved on blocks of gold that will survive the apocalypse. And there are no Guardians who would preserve the purity of morals, at least in temples.

Of course, there are departments in certain institutes, but this is a drop in the ocean. Of course, there are gaming companies that, as part of additional income, establish courses and issue meaningless pieces of paper to those who complete them. Meaningless because they are not listed in other offices. This is not a tradable currency. This is not a document confirming education that guarantees subsequent employment. Wow! That's how I joked. I think this is the first funny joke in the article. Education that guarantees employment? Here? In Mordor? God have mercy, I was daydreaming about something this morning.

If you are a regular reader of my short opuses on the gaming industry, you have probably noticed that in almost every article there is an information block “retroactive notes”. The fact is that not every information can be included in a publication without breaking the thread of the story. However, some notes in the margins and additional information can and do reveal the topic deeper and complement it. They allow you to explain what was not included in the article, what was left behind the scenes, what prompted the author to do exactly what he did.

With this article, I decided not only to legitimize the Herr Text bunker (the comment block that was previously called “retroactive notes”), but also to introduce a new building called the Infosphere. In it I intend to store all information links mentioned in one way or another in the publication. Hyperlinks in the text are convenient, but if there are a large number of them, the body of the article begins to resemble Wikipedia or someone else’s website. A structured base from which you, using null-T portals, will go to the network resources you need, will be a better solution than littering the body of the article, distracting from the subject of the story.

For today I say goodbye to you. I will be glad if you rate this material. Tell us in the comments what you liked and what you didn’t. What do you think is unnecessary and what was appropriate. Was the material useful and, in your opinion, is it worth developing?
On this moment a block of four articles was planned. Where the first two are directly devoted to pixel art and the technique of working with it, and the last two are devoted to its animation. However, based on the relevance of this article, I will make a decision to increase the excavation area, or, conversely, to reduce it.

All the best, and thanks for your attention! Until next time.

Bunker Herr Text

Note one, predictive.
Even the format of a compressed article turns out to be quite voluminous. Therefore, I decided to divide the story dedicated to pixel art into four parts. The first publication can be considered introductory, and based on its results I will see whether it is worth making a second, enhanced one. It needs to become more technical. Articles have already been written in general outline, but each of them requires proofreading and polishing, which often takes up more than half the time allotted for writing the text. Creating material is not a problem - the holds are chock full. Making the material accessible is the task.

Animation should also be divided into simple and complex. Looping animation of a ball or a resting antelope against the backdrop of the savannah, this is not as difficult as the animation of a step or run, for example, for a cinematic platformer of the Prince of Persia or Flashback class. As you know, worthy representatives of this genre can be counted on the fingers of two hands. So you have to have a lot of nerve to write an article about this with your own examples. I don't have the nerve. However, I made sure that my animations were on par with the best animation in games during their heyday.

Note two, complementary.
Over the past year (2014), I have been working closely on two types of projects. Isometric 3D games and classic platformers (classic in my opinion). As a result of tests, research and fruitful work, I have accumulated a lot of material that may be useful to Khabr residents. From pixel art animation to project planning regarding graphic content development. This allows you to maintain quality at a certain level, within the time limits specified above, and most importantly, it helps to maintain the stated quotas for polygons, textures, etc. I have no idea how original this experience is (everyone remembers Paul McCartney’s statement), and what value it actually represents. Nevertheless, I will risk offering all this for your judgment. Gradually, of course.

Note three, “back to the future” returning.
Due to my worldview, I am a supporter of the idea that Time moves in a spiral, certain turns of which tend to repeat themselves. Even in the example of our young gaming industry, one can see how mobile devices repeat the history of the period of its inception. First due to limited capacity, then due to the ease of using art without a 3D connection. Well, due to the fact that certain stylistic decisions are now mainstream.
It seems to me that something similar will continue to happen. And someday the real Roger Wilco, being on spaceship, will while away the time not with a mop (or its analogue of that time), but with some mini-device like today's mobile phones or mini-set-top boxes, looking at very real pixels running across a small screen. It is not at all necessary that it will be mainstream, perhaps it will be retro Tetris, or the fashion of that time will be kind to retro games, which will make popular consoles stylized according to the best examples of design of 2100.

Note four, dissatisfied.
You probably noticed that the body of the article is riddled with shots at the gaming industry, which prefers to focus on graphics rather than on the essence of games. This irritation stems from the fact that even the “returning legends” who raise funds for their projects on Kickstarter, or promise to return to the roots, do not actually fulfill their promises. Or they cannot calculate their strength. Or, they simply don’t want to do this, believing that their names, reputation, and victories of past years are enough to live well today.
Because the result is games that are visually similar to the “old ones.” However, these new products do not have half the wealth of functionality and game mechanics that games of the past offered. Now, as a “trick” of the game, you can pass off the character’s ability to crouch behind a box, or the ability to break this box (you don’t have to look far for an example, Brian Fargo’s enormously inflated Wasteland 2 project). What kind of squalor is this, my dears? Games of the past offered completely destructible worlds, where the functionality of the game gave rise to the most interesting gameplay and visual events. Was it worth being born for? To go hand in hand with the gaming industry for a decade and a half, live to see your gray hairs, and see how degeneration is presented as progress?

Note five, cowardly. The two biggest fears in the writing process.

- What are you doing here, boy?
- Uncle, I’m forty years old, I can show you my passport... “What do men talk about”

Primordia
Developer: Wormwood Studios

Note: I have come across this common mistake many times. When you mention any of these three games, you may be answered, “We know, this Wadjet Eye Games developed." This is wrong. Wadjet Eye Games This is the publisher and producer Dave Gilbert (not to be confused with Ron Gilbert), who supports the adventure games. As far as I understand on the AGS engine. This doesn't stop Dave Gilbert from being the developer behind the Blackwell series. However, the developers of Resonance, Gemini Rue and Primordia are the companies mentioned above.

Similar mistakes have already occurred in the history of the gaming industry, in particular regarding the publisher Interplay, more than one project took place under their wings, which is why when people saw the Interplay logo when loading the game, they identified the latter with the developer. One such phenomenon is the stereotypical phrase "I know, it's Brian Fargo who developed Fallout."

Add tags

The 6 best options for creating your own pixel art, from great free tools to powerful professional software.

Most artists will tell you that a tool is just a tool, and you can create beautiful graphics with any tool if you learn it well. But if you need help finding the tool that will work best for you, here are a few recommended ones. And for inspiration, check out the huge graphics archive at PixelJoint and this great collection of pixel art tutorials.

Aseprite

Link

Price: $15 USD or free if you compile it yourself
Available for: Windows / OS X / Linux

Aseprite is specially made for pixel graphics. It's not free, but $15 isn't a bad price if you're looking for a long-term solution. However, you can use Aseprite for free if you want to compile the source code yourself.

This is one of the most frequently recommended pixel art programs, and for good reason. Aseprite has all the standard features you need to create pixel art, wrapped in a user-friendly interface. Onion-skinning - the ability to see the frame you are working with, as well as the animation frames following and preceding it - what you need for animation. Aseprite can also export entire sprite sheets and GIF files and perform other pixel-specific functions.

Aseprite has a lot of fans, but not everyone likes it. The program itself is low resolution. For some, a pixel interface for editing pixels is considered logical and helps to acquire creative thinking. For others, it's an unnecessary distraction.

Jay Tholen, creator and artist of the point-and-click adventure game Dropsy, switched to Aseprite after Microsoft Paint and hasn't changed his preference since. “ I used to stick more to a “safe” color palette. If I made a piece and then decided that the color wasn't working, I'd have to heavily fill it with other colors or just leave it like that and then suffer for ages. For Hypnospace Outlaw, I used Aseprite's color dimming feature to give the 3D graphics the old-fashioned look of "safe" colors”.

Price: For free
Available for:Windows

GraphicsGale is another serious program created specifically for pixel graphics. It has the same main features you'd expect for drawing and animation: onion-skinning, layer and color palette management. The biggest drawback of GraphicsGale is that it is only available for Windows.

Besides its great price, GraphicsGale has two great features to improve your workflow. You can import images from scanners and digital cameras if you prefer to draw by hand before creating pixels. The program uses devices that support TWAIN, which, fortunately, are almost all scanners and cameras. Probably the most notable feature is the ability to preview animations while editing. There's no need to interrupt your work to export a gif or even pause the preview window. Immediate Feedback while working will help you feel more confident in experimenting with animation.

One of the notable professional games created with GraphicsGale: the excellent Duelyst.

Pro Motion NG

Link

Price: $40 or limited time free version
Available for:Windows

While GIMP and Photoshop are repurposed tools, Pro Motion is a high-quality program built specifically for pixel art that has been used to create impressive professional games like Shovel Knight. Pro Motion has extensive capabilities for both sprite animation and tileset editing. Like Pyxel Edit, Pro Motion allows you to edit all the same tiles. It can also automatically fill large parts of a drawing.

Pro Motion is initially available only for Windows, but it is possible to run the program on Linux and OS X via Wine. The free version of Pro Motion offers many features for pixel art: support for drawing tile templates, a tile map editor, color palette editing, and layer effects. If you give it a try and decide to purchase the program, the paid version adds many features for advanced users, such as the ability to change keyboard shortcuts, automatic backups, and opening multiple projects at once. Pro Motion may be the best program out there, offering great value for money and made specifically for pixel work.

Price: $20-30 per month
Available for:Windows/OS X

Adobe Photoshop needs no introduction, but I'll still tell you in more detail. As the leading high-resolution image editing software, Photoshop will cost you $20 per month depending on the subscription plan you choose (annual is cheaper than monthly). Students can purchase it cheaper – for $10 per month. If you're already lucky enough to get your hands on a copy, thanks to the educational license, or before you sign up for a subscription, using the program to create graphics immediately becomes more possible. The advantage of using Adobe products is the availability of a huge amount of resources. If there's a feature you need to learn, you can rest assured that there's official documentation and endless text and video guides on Google.

When it comes to features, Photoshop has everything you need and more. Like its free alternative GIMP, it's not built specifically for pixel art, but there are plenty of tutorials on how to set up Photoshop to work with pixel art and get the most out of Photoshop's power. Sometimes it's not very good at working with low resolutions, but it can be extremely effective for those who are used to it. The ability to control layers, layer styles, custom brushes, palettes, and editing history can add a lot to your workflow.

Len Stewart, lead artist on Pixel Noir, uses Photoshop not only because of its versatility, but also because he's used to it. “Personally, I've been using Photoshop since high school, so it's just a program that I feel comfortable using.”

GIMP

Image from a tutorial on recoloring sprite sheets in Gimp.

Price: free
Available for: Windows / OS X / Linux

GIMP is a well-known high-resolution image editor, but that doesn't make it any less popular for low-resolution work. Although GIMP's most famous quality is that it is "free Photoshop", it has many others. strengths, which reduce operating time. One of the features is that it is customizable through multiple programming languages. There are quite a few community-created plugins, which means that with some effort you can customize GIMP's functionality yourself.

If for some reason you find yourself switching from working with pixels to working with high-resolution graphics, GIMP is a good way to avoid being scattered among so many other programs.

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Pixel graphics (hereinafter simply referred to as pixel art) are becoming more and more popular 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 3D objects and manually drawing complex objects. If you want to learn pixel art, then first of all you will have to learn how to draw so-called “sprites”. Then, when sprites no longer scare you, you can move on to animation and even selling your work!

Steps

Part 1

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

• Photoshop
• Paint.net
• Pixen

1. Buy a graphics tablet. If you don’t like to draw with a mouse, then a tablet and a stylus are what you need. Wacom tablets, 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 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 rosary is turned on through the “View” menu.

   • You may need to tweak the display settings a bit to ensure that each grid segment actually renders a pixel. Each program does this differently, so look for tips accordingly.

2. Draw with a pencil and a 1 pixel brush size. Any graphics editor should have a “Pencil” tool. Select it and set the brush size to 1 pixel. Now you can draw... in pixels.

   Part 2

   Working on the basics

   Create a new image. Since you are learning how to draw in the pixel art style, you shouldn’t aim for epic canvases. If you remember, in the game Super Mario Bros. the entire screen was 256 x 224 pixels, and Mario himself fit into a space of 12 x 16 pixels!

   1. Zoom in. Yes, otherwise you simply won’t be able to see 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 simple, but if you suddenly draw a line 2 pixels thick somewhere in the middle with a trembling hand, the difference will hit your eyes. Draw straight lines until you have to activate the straight line tool. You must learn 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 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 a straight line of one pixel. On the other side, draw the same thing (mirrored, of course). This is the progression that is considered optimal. Curves drawn in the “3-1-3-1-3-1-3” pattern do not meet pixel art standards.

      Don't forget to erase mistakes. The “Eraser” tool should be set up in the same way as a pencil, making the brush size equal to 1 pixel. The larger the eraser, the more difficult it is not to erase too much, so everything is logical.

      Part 3

      Create the first sprite

      1. Think about what purposes the sprite will serve. Will it be static? Animated? A static sprite can be filled with details to the fullest, but an animated one is better to make it simpler, so that you don’t spend hours redrawing all the details on all animation frames. By the way, if your sprite is supposed to be used with others, then they should all be drawn in the same style.

         Find out if there are any special requirements for the sprite. If you're drawing for, say, a project, it's 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 will have to take into account all the limitations.

      2. Make a sketch. A sketch on paper is the basis of any sprite, fortunately 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 then trace from a paper sketch (if you still have a tablet).

         • Don't skimp on details for your sketch! Draw everything you want to see in the final drawing.

      3. Transfer the sketch to a graphics editor. You can trace a paper sketch on a tablet, or you can redraw everything manually, pixel by pixel - it doesn’t matter, the choice is yours..

         • When tracing the sketch, use 100% black as the outline color. If anything happens, you can change it manually later, but for now it will be easier for you to work with black.

      4. Refine the outline of the sketch. In this context, you can, of course, say differently - erase everything unnecessary. What is the point - the outline should be 1 pixel thick. Accordingly, increase the scale and erase, erase the excess... or fill in what is missing with a pencil.

         • When working on a sketch, do not be 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 further the colors are from each other, the more they are different from 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 easy on the eyes. And yes, pastel colors should be avoided (unless your entire project is done in that style).

      2. Choose multiple colors. The more colors you use, the more “distracting” your sprite will be, so to speak. Look at some 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 almost close to each other on the palette.
         • Sonic - even if Sonic is drawn with big amount details than Mario, it is still based on only 4 colors (and shadows).
         • Almost a classic of sprites as they are understood in fighting games, Ryu is large areas of simple colors, plus some shadow for demarcation. Ryu, however, is a little more complicated than Sonic - there are already five colors and shadows.

      3. Color the sprite. Use the Paint Fill tool to colorize your sprite and don’t worry about everything looking flat and lifeless - at this stage it’s not expected to do otherwise. The principle of the Fill tool is simple - it will fill all pixels of the color you clicked with the color you selected until it reaches the borders.

      Part 5

      Adding shadows

      Decide on your light source. Here's the gist: you need to decide at what angle the light will hit the sprite. Once you decide on this, you can make believable-looking shadows. Yes, there will be no “light” in the literal sense, 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.

      1. Start applying shadows using colors that are slightly darker than the base. 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 several 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 drawing shadows.
         • Don't use gradients. Gradients are evil. Gradients look cheap, shoddy and unprofessional. An effect similar to that of gradients is achieved using the “thinning” technique (see below).

      2. Don't forget about partial shade. Choose a color between the base color and the shadow color. Use it to create another layer - but this time between the layers of these two colors. The result will be the effect of transition from a dark area to a light one.

         Draw the highlights. The highlight is the place on the 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’s distracting.