In this tutorial, you will learn how to draw and animate characters using the Pixel Art technique. All you need for this is Adobe Photoshop. The result is a GIF with a running astronaut.
Program: Adobe Photoshop Difficulty: Beginners, Intermediate Time required: 30 minutes - an hour
I. Setting up the document and tools
Step 1
Select Pencil (pencil) on the toolbar - this will be the main tool for our lesson. In the settings, select the type Hard Round brush, and set the rest of the values the same as in the picture. Our goal is to make the pencil nib as sharp as possible.
Step 2
In the settings of the Eraser Tool (eraser), select the Pencil Mode mode, and set the rest of the values \u200b\u200bas shown in the picture.
Step 3
Turn on the Pixel Grid (View > Show > Pixel Grid). If there is no such item in the menu, then go to the settings and enable graphic acceleration Preferences > Performance > Graphic acceleration.
Please note: The grid will only be visible on the newly created canvas when zoomed in to 600% or more.
Step 4
In Preferences > General (Control-K) change the image interpolation mode to Nearest Neighbor mode. This will allow the boundaries of objects to remain as clear as possible.
In the Units & Rulers settings, set the units for the rulers in pixels Preferences > Units & Rulers > Pixels.
II. Character Creation
Step 1
And now, when everything is set up, we can proceed directly to drawing the character.
Sketch your character with a clear outline, while being careful not to overload it with small details. At this stage, the color does not matter, the main thing is that the outline is clearly drawn, and you understand how the character will look. Here is a sketch prepared specifically for this lesson.
Step 2
Scale the thumbnail down to 60 pixels high using the keyboard shortcut Control+T, or the Edit > Free Transform command.
The size of the object is displayed in the information panel. Note that the interpolation settings are the same as we did in step 4.
Step 3
Zoom in on the thumbnail 300-400% to make it easier to work with, and lower the layer's opacity. Then create a new layer and outline the outlines of the sketch using the Pencil Tool. If the character is symmetrical, as in our case, you can outline only half, and then duplicate and flip the drawn mirror (Edit> Transform> Flip Horizontal).
Rhythm: To draw complex elements, break them into parts. When the pixels (dots) in a line form a "rhythm", such as 1-2-3, or 1-1-2-2-3-3, the sketch looks smoother for human eye. But, if the form requires it, this rhythm can be broken.
Step 4
When the outline is ready, you can choose the main colors and paint the large shapes. Do this on a separate layer below the outline.
Step 5
Smooth out the outline by drawing a shadow along the inner edge.
Continue adding shadows. As you may have noticed in the course of drawing, some shapes can be corrected.
Step 6
Create a new layer for highlights.
Select the Overlay blend mode from the dropdown list in the Layers panel. Paint with a light color over the areas you want to highlight. Then smooth out the highlight by applying Filter > Blur > Blur.
Finish the picture, and then copy and mirror the finished half of the picture, then merge the layers with the halves to get a whole picture.
Step 7
Now the astronaut needs to add contrast. Make it brighter with the Levels settings (Image > Adjustments > Levels) and then adjust the hue with the Color Balance option (Image > Adjustments > Color Balance).
The character is now ready for animation.
III. Character animation
Step 1
Create a copy of the layer (Layer > New > Layer Via Copy) and move it 1 px up and 2 px to the right. This is a key point in character animation.
Lower the opacity of the original layer by 50% so you can see the previous frame. This is called “Onion Skinning” (plural mode).
Step 2
Now bend the character's arms and legs as if he is running.
● Select the left hand with the Lasso Tool
● Using the FreeTransformTool (Edit > FreeTransform) and holding down the Control key, move the bounds of the container so that the hand moves back.
● Select one leg first, and stretch it out a bit. Then, on the contrary, squeeze the second leg so that it feels like the character is walking.
● Using a pencil and eraser, touch up the part of the right arm below the elbow.
Step 3
Now you need to redraw a clean new position of the arms and legs as shown in the second section of this tutorial. This is necessary in order for the image to look sharp, because the transformation greatly distorts the pixel lines.
Step 4
Make a copy of the second layer and flip it horizontally. Now you have 1 basic pose and 2 in motion. Restore the opacity of all layers to 100%.
Step 5
Go to Window > Timeline to display the Timeline panel and click Create Frame Animation.
On the timeline, do the following:
- Set the time delay to 0.15 sec
- Click on DuplicatesSelectedFrames to create 3 more copies
- Set the repeat loop to Forever
Step 6
To select the desired layer for each frame, click the Eye icon next to the layer name in the layers panel. The order should be like this:
Basic stance→Running with the right foot→Basic stance→Running with the left foot.
Everyone is well aware of how the mainstream spurs publications related to what is popular “this week”. Over the past six months, I have often come across articles “acquaintance with pixel art”. They began, as a rule, with a listing of the capabilities of a particular software. However, with the exception of 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 on the very first pages of 2015.
In this publication, we do not consider programs, but we are digging for something more. The pixels themselves. From the beginnings, starting with the four-color CGA era, all the way to the Renaissance. In the publication, we do not consider games, we do not sing praises to the artists of the past (perhaps just a little), being engaged in the process of creating the simplest pixel art. This material will be of interest to novice artists and those interested. The article practically does not contain theory, tedious conclusions and presents a third-party view of the world of pixel art from a certain self-taught person who preferred 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 a copious amount 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
The title implies that there will be pictures. Empty text is often dry, salty, and a pain in the throat. And if you remember, where does the teaching of writing begin? Isn't it from the alphabet? The alphabets are equipped with pictures-images that help to identify the already known oral word, with the initial letter, and then with the written word itself. It would be nice if those who write works about “how to learn to draw well”, or “I will teach you pixel art” remember this. Without turning the article into a gallery of pictures with brief scribbles or descriptions of the amazing features of various software packages. All this does not fit very well with the word “good”, being a private phenomenon that does not affect the essence of the issue. Learning to do something well in five minutes is impossible. Learning to do something well by looking at someone else's work is difficult. Learning to do something well without practice is impossible. This means that practical examples and explanations are needed for why something is done this way and not otherwise.I do not deny the necessity of the theory. I do not deny the need for images. But not in isolation. Everything should be here, as in a good ticket - "all inclusive". The whole range of services. Theory is not boring. Illustrations of other people's work. Illustrations created by the author of the article. Recommendations. Adviсe.
What's the point of writing a post with the 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 something that can turn out well? Therefore, we will supply our short theoretical introduction with a worthy amount of moisture, designed to quench the thirst for knowledge unburdened by the desire to learn.
During my work in different gaming offices, I brought own definition pixel art. The time of the birth of this phenomenon is directly related to the technical limitations of that era. I would say a consequence of one of the steps 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 on 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 the pixel flickering on the screen (or a group of them) is something more. A bunch of pixels, or even a single pixel, could be a person, an animal, a building, or even an entire planet. Thus, we can say that due to several pixels on the screen, a whole and understandable image was created for the player. That is, at the expense of a little, a lot was transmitted. And this, without exaggeration, is almost poetry.
Years have passed. Decades. Progress jumped ahead. 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 is like a high-speed train, filled with rabid fanatics, continues to rush forward in a frantic race for photo-realism. We can say that it would be interesting to know - what will all these people do when 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 a picture, but with an essence. True, this is unlikely. Unless, of course, look back at the history of mankind, and not dream. Let's return, however, to the definition of pixel art.
Pixel art- this is a kind of art where the artist, due to 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 comes to the small.
For those to whom the phrase “art form” is like “a sickle raised above the most important”, I recommend replacing it with “image creation technique”. 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 lead my personal chronology from the manuscripts of the Monk Pair of Truperian. Although, of course, the term video game has a much more ancient origin. 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 points, the same colors, the frames of the monitors around which have moved apart. Which does not prevent people with enviable persistence from following the precepts of the creators of the past, when the screens were small and the pixels on them were large.
original image: link
Pioneers. Developer EigenLenk. This indie game is made in four (4) colors. All. I would call it a little hymn to minimalism and mastery in dealing with a small number of colors. I have not seen anything like this in the modern industry (note all the necessary links to the sites of the authors of the projects and web resources will be given at the end of the publication).
Pixel artists of our time still follow the canons of minimalism and create images based on a limited number of dots. A sign of the high skill of the artist can be considered the ability to use palettes with a small number of colors. For example, from four (4) to sixteen (16). That is, work in a limited color range. However, the creators of paintings are also valued in the same way, whose color arsenal has been increased to 256 or more colors, which do not limit themselves in matters of resolving the final work. Artist 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 encrusted with rare piedmont stones and those ornaments that the modern world has long forgotten.
In our journey with you, we will think with the canons of antiquity. Namely - a limited palette and low resolution. Our the way will pass through the CGA, EGA and VGA eras, excluding the Dark Ages that began for pixel art after the advent of the SVGA tyrant. It was with the advent of high resolutions that pixel art began to lose ground, retreating under the onslaught of the 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 practically unchanged means that these dots on the screen were not just dots, but were and remain something more.
Note: Much later, another historic murder occurred that changed the course of the gaming industry when bible story repeated and Trekhmer stabbed the Twomer. However, this is a topic for a separate, serious, and no less passionate publication.
Chapter II - In Search of the Lost Ark
Pixel art is not much different from any fine art. This means that the concepts of light, shadow and form are appropriate for him. And if we talk about what was first, it will be the Form. In a world where there were already pixels but almost no colors, the shape of an object was paramount. And we, being today by chance the fierce adherents of Pixelism, will remember this once and for all. The shape of the object, its silhouette in pixel art have great importance. Just like the silhouette was of great importance for the artists of the past. And speaking of the past, I don't mean game industry artists. We are talking about artists whose images are dated eight, ten or even twenty thousand years before our era.
The photo shows White Sea and Onega petroglyphs. Mostly in silhouette. 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 is capable of absorbing a person, but absorption is pleasant, and there is one more nuance. Ancient human activity does not disappear and it is fundamental. What can not be said about the transience of today's day. Yesterday a loaf, today an iPhone, tomorrow some other ...
Not surprisingly, the first artists from the PC world repeated the technique of their older brothers. The number of flowers obliged to show some imagination, given their scarcity. And the key to all sorts of discoveries, as we well know, lies in history. Bow, crossbow, siege weapons did not appear immediately, being phenomena of an evolutionary order. And more than once a stone thrown by an opponent hit the future Newtons from the world of weapons in the forehead, until a sling was born that allowed some of the arguments to be returned back. History is always the same. First comes the simple, then the complex.
In order for this postulate not to be unfounded, we will create our first pixel art with you. However, I prefer to call our experiments only pixel images, since the presence of pixels on an abstract scene does not make them art. The canvas in our case will be the canonical resolution of 320x200. So that you can see the results without resorting to glasses, the images will be enlarged by a factor of 1. Let today's gods of the nameless world be the ball, sword and 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 emerging stronghold.
Fortunately, this area is not just another one of my many stupid jokes. If I followed in the footsteps of stupidity today, I would draw one single pixel on the screen, and then I would begin to claim the laurels of Malevich.
If you are ready to close this publication by putting the author on a stake, I can say with all seriousness that the ball, even using the four colors typical of the CGA era, can be drawn in more than one way. Please make sure of this.
I apologize for the "pull-eye-palette" of these images. In the publication, I decided to use the original CGA palette, and not modified as done by Pioneers, mentioned at the very beginning.
As you can see, the balls are made not only in the silhouette solution, but also in the form of lines, using a gradient color rendition, when the gradient grating compensates for the lack of colors to create halftones. In the world of pixel art, the last mentioned method of rendering halftones can be called a special case of shading.
That is, pixel art uses the same principles as the subjects of fine art. There is a smear (spot, or pixel), there is a stroke (a discrete difference between two colors due to an alternating grid of pixels of different colors).
For the sake of additional practice, we will sketch out a couple of logos of fictitious brands. Contrary to the well-known stereotype, the size is not important and resolution is not important either. The main thing is the form and idea embedded in the image. To complicate the problem even more, we put 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 shown 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, this is enough to secure the authorship of the image. Well, we will not 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 in them, rare elements emphasizing the form are rather an exception confirming this position. The form is recognizable. The text is provided with an additional image that allows to interpret and identify the logo. In pixel art, I would recommend starting from the form, and only after supplying the successful version with light, colors and details. That is, for starters, you should learn how to give birth to some interesting image, and after that everything else.
Fifty grams of lyrics on the topic of logos. Supervisory executives - strongly not recommended. Because you have already drunk it hundreds of times from your subordinates and only translated the product.
Unfortunately, the reality of the pattern of any year, decade or century is always the same. There are creators, people who do things and a layer of drone-like people from above (often exceeding the number of creative people by tens and hundreds of times) whose whole job is to discuss other people's work. This is how the world works, that what is created by someone passes through the intestines of the corporate digestive tract to be changed, or not to be, but necessarily within a few days. When individuals who have long since reached their level of incompetence will discuss the conceptual dissonance regarding the pixels that form the snail's tail, or will vote on the entire composition of the leadership to decide whether to add length to the tail, reduce it, or vice versa - leave it.
A monstrous layer of meaningless, but incredibly necessary cells in the body of almost any office. I am well aware that they feel good looking at their own reflections in mirrors, and that a sense of their own importance or significance is not alien to them. But the practical output in the form of a useful result from this plankton is rather scarce. Nevertheless, these people usually respond to such statements, admiring their own wit, - "it only seems to you."
What. It probably seems. Perhaps I do not understand the usefulness of such people. True, every time this happens, I remember the notorious video "Expert". I like the British version more than the Russian one (checkmate and overacting do not yet mean a competent transfer of the overall color). And the actors of this short film, in my opinion, play much stronger, correctly conveying the emotions and tones of this beautiful story by Alexei Berezin.
- Andersen, I understand that you are a narrow specialist and do not see overall 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 on the other hand, I know perfectly well that the snail depicted on the logo in combination with the words “journey” looks at least funny. Moms with prams passing under a road poster will point it out to their babies (because it's cute), drunken teenagers will surely add a smile or a mustache to the snail with a marker (because they are teenagers), and no less drunk "Seeds" in the kitchens for the next philosophical with passages interspersed with pats on the shoulders, they will note that “it would be more fun to make the logo of a taxi or the post office of the Russian Federation as a snail” (because they are not freeloaders, but partners). With the general absurdity of the image, the snail will be noticed and remembered by the most diverse strata of society, therefore, it will spread slowly but surely around the district.
There is another category of people that should be sent to Magadan. Those who every time after viewing your work asks “what did you want to say with this image? What were you thinking when you drew this? What motivated 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?”, “Why are the colors exactly like this, and not others?”
Their "funny" is that no matter what nonsense you tell them, they will be satisfied with the explanation. But they need it. Without your textual description, they cannot perceive your work. If suddenly, you are squinted at the absurdity of what is happening, 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. And here, a group of pixels, in a 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 composed - they will be satisfied.
For someone who is not a narrow specialist and can see the WHOLE picture as a whole, these fables are a necessary tool. If necessary, they will be sewn to the case. The folder will get thicker. For one sheet. And if the fable is printed on one sheet, and the image of the snail is on another, and the tail is close-up on the third, then they can be solidly shifted. It helps to depict the thought process or study of a subject during a meeting. The folder of papers that is laid out from the purse emphasizes efficiency.
Extensive experience in working with different customers led me to the conclusion that a detailed textual description is not an extra element. This adds weight, even if it does not exist. Unfortunately, business is often full of absurdities and absurd situations. The truth is that in a crazy tent, you can only remain normal by pretending to be a clown.
Do you think there is a smart guy 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 not the same. The size is not the same. The scale is not the same. There will be great theorists who will tell you that the real size of the object is the key to the correct perception of the logo on a psychological level! Say no? It can not be? There are a lot of such people around. And it's not just CEOs, CEOs and CEOs. This is a whole part of humanity that by nature is not Pushkin, but Belinsky. Such is the man. If he does not produce, he brings down.
For those who looked into this “tab” and got upset with me, regardless of the categories mentioned, I prepared a pixelated stack with the same two-color cucumber. It won't lessen the sorrow, but it will ease the suffering. And there must definitely be suffering. Either from the article, or from the first working day after the celebration of the New Year.
Let's remember the second whale of our world. About the sword. There are no less murder weapons than paintings by great artists. Many of the handcrafted blades of the past are nothing short of true works of art. We are not pulling at the masters yet, but we can sprinkle at least one blade with pixels.
In our case, the sword is perfect option for a well-planned hack. Simple form, mostly linear except for the handle. This is probably why beginners start 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 did not want to, because you can overwork out of habit. On this simple example you can clearly remember - the first thing we do is 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 repeat its silhouette, you will need to carefully look at the photo of the animal. Or… just circle it. There is nothing shameful in this.
I will not argue - pure scam, from the point of view of every second artist. Why every second? Make no mistake. Today's world is fast paced. You will draw 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 is worth noting that our kudu is not yet pixel art, but only a silhouette. And if the silhouette can be taken anywhere (copy any existing object in the world), then no one will do pixel art for you. This image will need 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 elevation changes, holes, dents ... in a word, 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 sharp corners, and filled the potholes in the poor thing with one-color cement. The flowers are over. Now comes the berries. It's not just polishing the shape. You should feel your subject, "cutting corners" only where necessary. You should think more about the readability of the silhouette than its historical or biological validity. As you can see, I sawed off part of the ear, showing almost the entire second horn, added a tail with a navel, etc. That is, he polished and distorted the real proportions so that they are better read
Organic objects are more complex than static objects. That's why I needed something alive. Firstly, I wanted to find an animal with the letter M. Secondly, it had to be graceful, preferably with horns, so the bear immediately disappeared. The 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, devoted to the simplest pixel art animation), but also, concurrently, an excellent object for learning.
The antelope is not over. On it, we will analyze a series of extremely important tricks. I just talked about smoothing shapes, contour lines that form volume. And here it is necessary to note what I call "pixel pitch". Although it would be more correct to say "the step of any inclined line."
Note. I took the top row, copied it and added one pixel at random places. The naturalness of the form instantly disappeared. This effect is especially noticeable on a 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 knotted stick. What happened? The step has changed.
If we were on the canvas high resolution no one would notice the flaws. But being adherents of 320x200 resolution, we know that each incorrectly set pixel is no longer a flaw, but a sparkling fiasco. Any miss destroys the integrity of the form. It is probably for this reason that the works of the masters are often evaluated with enthusiastic “hell, yes, here every pixel is in its place.”
What to do? Observe the regularity of the pixel pitch in relation to the line, avoiding sharp and uncharacteristic changes for this form. In order to understand the essence of such a phenomenon as a 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 more than one pixel difference in height.
If you break these two rules, your pipe will no longer look like a curve. The smoothness of the line breaks. Everything else is achieved through experience. The curve may be a sinusoid, it may be broken, the line may be distorted deliberately, and so on.
I continued polishing the mold. It seemed to me that the antelope was not elegant enough, so I took it to the fitness center, we marked the waist and chest more clearly, then went to the grinder and trimmed the shape of the horns, at the same time cut a few pixels on the ears at the hairdresser, which spoiled all our raspberries. 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 make-up artist mumbled something about the imposed sanctions and the protection of information about the colors of domestic pixels abroad. We did not understand anything, but we left the salon ... like that.
Let's summarize this chapter. We have found that the silhouette is an important part of the image. We also found out that the form can exist by itself and at the same time transmit information to the observer. Now we know that when drawing pixel art, a certain step must be observed regarding lines and shapes in order for the image to be smooth, look natural and not break. We will remember that if we cannot create a shape on our own, 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 do not understand how pixels are drawn, I have prepared a short graphic lesson in one image.
Despite the risk of being on a cola today, I will explain as quickly as possible what is hidden behind this image. Unlike brushes and other traditional anointing tools, your pixel, when born on the canvas (when you click any of your tools), does not react in any way to pen pressure, retaining only one gene given by daddy - color. If you want to draw a dot of a different color, refer to the mother palette, select the color you need with an eyedropper and put it on the canvas in the same way.
Even if you use object smoothing by changing the tone of neighboring pixels - they do not have any dependence on the brush being pressed at the moment of application to the canvas, they do not have any dependence on the angle of the brush relative to the canvas, they do not change tone, no matter how you press the buttons. That is, to put a pixel on the canvas, one click is enough with any input device in any graphic package.
This is binary graphics, if you will. If to operate with scientific terms - "effect of a gopher". A pixel is either there or it isn't. The click either happened or it didn't. A pixel either appeared on the screen or it didn't. Zero and one. It makes things a lot easier for newbies. Don't believe? Let's skim through 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, do not know how to draw. What do we usually hear on forums of professional artists?
- You have disgusting proportions, lame anatomy. Your stroke is to scare the children in kindergarten. Why are you painting at all? Why increase the amount of terrible things in this world, is the exchange rate of the dollar really not enough? These are not colors, but some kind of nightmare, some kind of porridge! You have terrible color reproduction. You don't know how to distribute light over an object.
What you just do not hear enough, visiting specialized resources. Every second there, at least Aivazovsky. But here you are ... what do you say about my color now, huh? What is your verdict on my progress today in mastering the technique of drawing patellas? Am I good enough in anatomy this week?
Note: I forgot to mention, but it's about time. This publication will not mention software packages, as it is fashionable to do in similar materials. Technologies and programs are good at giving seriousness to the material, pretending that they understand something about pixel art, while 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 that is usually called a pencil or a brush. In fact, even an elastic band is not needed, because you can erase a free-thinking pixel by putting a dot on top of it with a background color.
So far, we've been doing well. We had a pinch of flowers in our hands and simple shapes. The time has come to fill our ark and, like Noah, escape to the new era, which has come after the time of the CGA regime. EGA world. With the same working resolution, it promises us unheard-of wealth in the form of sixteen colors. And it will no longer be a pinch, but a handful.
Chapter III - Noah's Escape
I would venture to suggest that the reader is somewhat confused by the presentation of the material, which brazenly claims to be teaching material. There is no indication of where to move the mouse, which button to press and on which layer to draw. I will take a chance on the first risky assumption that the baby will learn to walk without lessons. The simplest motor functions come with natural practice. That is, we, of course, can torment the baby and interfere with him. But it is better that everything happens in due time. Nature knows when to take the first step. Your task in this case is simply to enjoy his first steps. Well...or yours.However, there will be much more information about HOW in this chapter. A greater number of colors imposes on the artist additional responsibility due to the growing arsenal. Colors for ticks in the case of pixel art - do not exist. Each of them has 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. It is even possible to 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 connect 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. Let's start by modifying the silhouette.
What happened to the sword? Why did the antelope, while we were taking a breath after the second chapter, rushed through the candy stores ?! And what kind of jester proportions? I will answer sequentially, to each of the three questions. If you looked under the spoiler in the previous chapter (and I hope not) then the Fable could begin at this point. However, you are not a customer, but my reader. And I will be very frank with you.
Please proceed under the spoiler, into the halls of transformation.
When the gods of the nameless pixel world decided to come 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 they look organic when together? Could you cross a plunger, a lion and a golf club together in fifteen minutes? And do they fit? About the same is the discrepancy between the ball, sword and small kudu. And the idea came to my mind at the wrong time to reduce the number of pictures in the publication and work with one image. Just throw them on the canvas? Not interested. You need to combine them somehow. I will outline the train of thought so that you can understand exactly how Baron Munchausen pulled himself out of the swamp by the hair. I believe that it is nothing but the power of fantasy.
Like a drowning man grasping for 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 put the antelope on the ball. But how? The pose is wrong, the ball is too small, and this sword too! There is always a solution. Need styling. You need to stylize the image, create a kind of grotesque. Something unreal in proportions, but real in the canvas of the overall image. Hypertrophy forms. Here is the solution. After all, hypertrophy is often the essence of pixel art. Grotesque heroes, whose legs are no thicker than a pixel, powerful torsos. Sometimes these bunches of pixels are much more human than their three-dimensional counterparts.
I tilted the antelope’s head, enlarged its muzzle, extended its horns to emphasize the “compression of the image” from below, and pulled its legs so that they converged, if not to the point, then they certainly fit on the ball (I agree, it resembles the diaries of a maniac, but if we hoist in front of the word "maniac" the word "pixel" everything will fall into place). Half done. The two main characters of our play have already been saved. The sword remains. Can't be thrown out. Angry. Rotate ninety degrees? Pierce the ball? Pierce an antelope? Pierce both? Not an option. Otherwise, the article will receive an age rating. Exit?
Curves are needed. Distorted as well as the antelope. Further, we recall that there are a great many blades. Something rounded and curved will do to balance the top of our "bootype". Some kind of scimitar or scimitar. Drum roll, fanfare. One out of three was born. To find everyone, to gather together, and to shackle with a single black will.
So let's get started. Let's remove the sword so that it does not interfere with us and does not confuse us. This is advice. Divide complex entities into separate objects so that they can be moved and hidden from the human eye. Sometimes it can be helpful to focus on the essentials. And what is the main 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 the kudu is masculine, and the antelope is feminine. Let her be, and we will call her Kudya. The secondary object is a ball (aka a ball, nee a sphere). Since it is merged with the legs of an antelope, we take it with us. As we remember, we need a palette and we have only 16 colors in stock. Let's try to use them sparingly. From now until the end of Cudi'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 achieving in the image.
The first image is original. In the second step, we decolorized the CGA blank (made it monochrome) and started punching additional shadows. It seems to me that they are necessary in the area of the throat, legs and abdomen. Another color smoothed the white stripes on the back. I put all the colors on the palette, which is located in the corner of the image (see example below). And it doesn't matter that now it's shades of gray.
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 to correct the shadows that we have, to fill out the emerging pixels, to refine the background, to add 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 two more colors. The sixth and last step in this block is to add any color you need, for example, taken with a pipette from a kudu photo, and overlay it on top, using any overlay method convenient for you (Overlay, Multiply, Color). Kudu becomes colored. In the same way, our palette becomes colored. The result is a blank of the desired color with eight colors in the colors we need.
Note: Blend modes are a feature native to professional imaging 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 did not suffer with the selection of colors, but took them in a crowd, since they are all shades of the same skin. That is, subsequently they will become the same color scheme. Secondly, a black-and-white image can better show the observer the flaws of light and shadow. That is, lighting flaws. When an artist works with a color image, he may not see his own mistakes. This is due to different color perception in people, and not the curvature of the hands. To draw immediately in color, you need a habit. It is produced by repeated drawing (classical and digital).
Go ahead. There comes a time when we should use hatching. This would not be necessary if we were in the next chapter, basking in the duvets of 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 “Hollywood, already fed up!” (referring to the film-like effect of blue light on one side and red or orange light on the other), among those who work with it and who like it, it is often referred to as "backlighting". It gives rise to a bright accent on the edge of the object and emphasizes its shape. This is our first action in the new set.
The second step adds bright spots of light to the back in the area of the stripes, as if they were from a different material. The second virtual light source is on the other side of the antelope. The third act is significant. The first hatch based on alternating pixels is added. This is most clearly seen in the glare of the sphere. Minor edits to the blue lighting are also being made.
By the fourth point, we introduce the same shading into the illumination of Cudi's back as on our sphere. With the fifth point, we balance the hatching that has appeared, spreading in different directions from the light on the back with a dashed “pattern” (pattern is a regularly repeating element). The sixth point is the second light source that emphasizes kudu from the back.
I would like to dwell on the hatching separately and give it a close-up so that you can see how the back fragment changes directly with the hatching. As you can see, it is similar to regular hatching, with the only exception that the grating is spaced as evenly as possible across the pixel, offset on the next line. We can say that in a certain sense it is mechanical. Automating this process so that it looks good for the most part is impossible, 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 amplify the warm backlight so that it illuminates Kudi's leg joint. And add 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 light accents. It is interspersed gently and neatly, so that it does not irritate the eyes, but only slightly enhances the main blue light. You can consider it a glare. In the second paragraph, we try on a blank of our sword and add shading on the sphere in order to add volume (Let Kudya be bored, we are almost done with it). The third point, we throw a stroke already familiar to us on the sword. Just one color added on different sides of the weapon makes it rich and gradient.
We are already close to completion. In the fourth step, we add the second side of the sword and the handle, 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 step, we introduce a darker brown than all existing ones and, by analogy with 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 meet the ball, on the belly and on the throat under the head. The addition of such a color, as in the case of a bright highlight, should be rare and not intrusive. However, in the aggregate, the feeling of volume will increase. In the sixth paragraph, we add the last color and smooth out the main shading on Kudi's back, and then we “stretch” along her body with one of the old colors even more, covering a much larger space with shading.
Part of our work in the third chapter resulted in a short poem, an ode to the Bronze and Silver Ages. CGA and EGA modes. We'll give it the name "four to sixteen."
Let's digress for a while to find out what happened during this time with our logos 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 we will no longer be distracted by the stage.
I promised you not to look at the logos in detail. It's not that I'm lying to you, but there's some sort of misunderstanding. One more minute of your time. It can be either useful or interesting. Or both, and the other, 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 pronounced.
- SOLAR- practically does not have gradient drops and is painted with multi-colored and rough lines. Slight smoothing is present only at the corners of the logo. The main weather is made by the effect of extrusion and a sharp difference in colors in its zone.
- Snail travel. Made in the brush technique. There are no patterns. On the other hand, there are spots of varying degrees of illumination and frequency, which, as it should be with similar drawings, break up into porridge near, but being in the distance 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 exist. Therefore, I would advise you to start working with the general shape of the object. With a silhouette. And 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 need. You designate the incident light, and, remembering that light almost always gives rise to 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 the application of additional detailing. That is - additional light and shadow accents, hatching, rebalancing colors, working with gamma, etc.
The position of the "second pass" is also true for any other type of work (even in relation to your unfinished dacha). 3D model, sketch or texture - it doesn't matter what kind of piece of content you make, but it is important that the construction should be phased. It is important that any object must have an outline. base. Sketch. That is where it all starts, and not where everything should come to. Only after sketching do you begin to detail the form. Otherwise you will be doomed to repeat typical mistake a beginner who first draws one detailed piece, and then diligently tries to fit it to the object.
Note: Operations with contrast, editing curves, changing color saturation are all signs of working with a professional image editing package. Nevertheless, this does not negate the position that pixel art can be prepared in almost any graphic editor.
Note 2: You must have noticed that the pixel art of this chapter looks pastel. Perhaps this is fatigue from the CGA mode. Or maybe what I was talking about earlier. When an artist in color allows softer tones, more faded colors and is, as it were, afraid to allow himself something juicy. Regardless of what caused this result, you can always “twist the curves”, that is, correct the illumination levels of individual areas of the image or the contrast as a whole, and if necessary, you can mute the color. In the proportions you need. Personally, I spun Kudya and the logos as follows.
Chapter IV - Concerning the Renaissance
A great era in the world of game development goes hand in hand with the arrival of the 256 colors (256) brought by the VGA mode. The games were already rich in gameplay. Now they have caught up in their gaming splendor with visual beauty. It is pointless to list the parade of masterpieces that followed this event. It is only worth noting that never before, and never again, have games been so rich in their content, style and bold experiments, both in terms of artistic decisions and in terms of gameplay (paradoxically, but subsequently the whole mind of the gaming industry seems to went into monitor resolution, computer power, shaders and triangles, focusing on visualization, which continues to grow year by year).The artists were no longer constrained by colors, which allowed them not only to create great examples of pixel art, but also to transfer images from their real canvases to a computer. By the way, images were scanned before, but they were far from these symphonies of color.
The problems with "anti-aliasing" disappeared, in the presence of a large number of colors, anti-aliasing was no longer "worth" the loss of one or two precious colors. Gone are the problems with halftones, the need to use patterns is gone. The algorithm for transferring 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 running at a gallop, but it's still common practice on the web to minimize images in order to increase download speeds.
Every entity has two sides. Bad and good. The presence of more colors, which made the image richer, gave a good cuff to pixel art. As Aramis would say in this case - "it happened." 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 the 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 traditional way(pencil, watercolor, oil, etc.) In the 90s, there was no concept of a "digital artist" (English - Digital Artist).
At the beginning, there was digitized art (which was being finalized to suit the needs of the application), software packages that allow you to imitate the 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 Dig. A stunning piece in every way. Sound, video, amazingly detailed backgrounds and the same charming pixel art characters.
Today, in our time, many developers go back along the spiral of time, returning to their roots. The genre of the quest has become popular again, and moreover, the quest made in the old graphic solution, where all the action is concentrated in a resolution of 320x240, so close to the canonical resolution of 320x200. Adventure games (quests) - Gemini Rue, Resonance, Primordia can be considered the most striking examples of the "reverse turn". There are others, but the article is already bursting with images.
I think it's wonderful. In my understanding, the world of computer games, the world digital art, like the world of fine art should be represented using most faces (works made using different techniques and in different styles). The same provision should also apply to the filling of games, but here, unfortunately, there are serious problems. With a visible variety of visualization, there is a serious degradation of the very essence of games. People who played old tactical and role-playing games most likely to agree with me. Today, in the gaming industry, the approach prevails when there is one and the same game mechanics on which developers change skins. It's more like playing with dolls than developing games, when instead of developing, the developer changes the dress to a worn-out Barbie. There are many clothes, but Barbie is still the same.
Talk less, work more. Let's go back to our images, armed with a 256-color palette. Today we are no longer pygmies and no longer hostages of technical limitations. Today, the sword-kudo-ball will become a god (I hope that the latter still does not read Habr and does not start throwing lightning down into one of his excessively talkative creations).
What have we done? In short, several hours crawled with a magnifying glass smoothing the previous picture. Where there were sharp transitions between two colors characteristic of a limited palette, we added one, two, three or four transition colors, turning a rough two-tone transition into a relatively smooth gradient. Usually, few people think how much work was hidden behind such images. It is no coincidence that modern indie developers prefer earlier versions of pixel art in terms of a limited palette and small size of dynamic objects. This pixel art is easier to make and easy 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 the gameplay, and not on delivering another Barbie to your apartments.
While polishing Kudyu, I was guided by the gold fund in the form of games from the famous game office Westwood Studios. I never had real teachers. But I have always had games. They became my teachers. For example, I made an image from the EGA era with an eye on another well-known French office, Silmarils. Its name was surprisingly appropriate for its own games, each of which could well be considered a special and rare gem in the gaming industry's treasure trove.
The fourth chapter of our story turned out surprisingly short. It is quite difficult, without a video and clearly, to show in the article the application of hundreds of pixels smoothing a rough sketch so that later you do not have to wake up those who read it, who fell into a sound sleep. Yes, and there is no need for this. In order to skillfully handle pixels, you need to know the basics, basic concepts, be able to operate with the basics. With regular practice, the level will increase, which will later lead to much more difficult work than the local krivulki.
There is a concept of the 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. Control.
Chapter V - Summing up
It is necessary to sum up our first journey into the world of pixel art. To summarize what we have learned about him. About what can be considered its cornerstones. Something that you will often have to deal with if you swear allegiance to him.We 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 excessively obstinate Cudi. What can we do now?
- Palette
- Form (silhouette)
- Light and shadow
- Line
- Hatch
- Smoothing
Palette
To keep your pixel art "honest" I would recommend using a palette. Just like real artists. Take a place on the canvas where the colors you are working with will be located. Use only them. This will give the image some integrity. Teach you to do small things. Teach you to appreciate every color.
I would recommend starting with a four color palette and an eight color palette. The main thing is that the number of colors is limited. If you rush to use more colors, they will turn your art into a mess. Only an ascetic can understand and feel the limitation of flowers, just as only one who has ever starved can enjoy food to the fullest. It is impossible to understand the essence of pixel art without bowing to the origins, and even a pilgrimage to them does not guarantee one hundred percent success.
Form (silhouette)
An object that occupies a small area should have a good, or well-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 one for the object on it.
The proportions of pixel objects may differ from the proportions of real objects. The technique of hypertrophied accents or stylization is often used in order to better present (what we did a little earlier with Kudey). It 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 fix the material, we will fix it. He will easier than that what you saw will have fewer colors, less screen space, and be more visual. Let's start with two colors. Black and white. The theme is post-apocalyptic. What a dull landscape. A broken car, a road sign, some little thing. Let's start with the shape of the objects. And don't be afraid to mess things up. This is not a date. If you accidentally added extra pixels, we will remove them 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 doodles. You may have to try a little in the area of \u200b\u200bthe wires. But in general, for starters - fit. Now let's trim our car by adding a couple of pixels. Let's turn the sign into Mailbox. The fact is that the mailbox as a silhouette is recognizable. And our road sign looks like a shovel.
We can say that we are almost done with the silhouette. Let's shoot a couple of holes in the mailbox and mark the window and door openings of the car. With the red circle I've marked a problem that we'll deal with in the next paragraph when we get to the lines. Remember our trumpet exercise?
Line
You can draw lines however you like. But the best option would be to observe a certain step (pixel shift) in the direction of the line. To practice the lines we drew some 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 was talking about earlier. A case where an incorrectly placed pixel can turn a straight line into a knotted 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 slowly. Gradually. Let's draw to the left of the bad wire - the wire is good. Keeping an even pace.
It is not a sin to fasten such a wire to a pole. We will erase the old one as unnecessary. And dilute, by the way, a straight line of the earth with various garbage. Stones, pieces of iron, everything that relies on a post-apocalyptic landscape. Apply strokes as God puts on the soul. This is a silhouette. If anything, let's lie that this is post-apocalyptic and everything is distorted here. after nuclear explosions. If this does not satisfy your viewer, tell him a story about rock-eaters. Who walk and gnaw stone. Explain that it is for this reason that everything is uneven and rough.
Shall we remove those troublesome wires, and replace them with just a line, as if it were a piece of wire? Drawing a straight line is easier than fiddling with and correcting crooked lines.
You know what? I think one element is missing. And even if this is not a line, but ... let it hang. So the picture will become more sad. And since this is not a tree, but a pole, this time I will not be accused of plagiarism.
What am I talking about? Somehow I drew a similar plot and the great critics from this world saw in it the logo of the Dead Island game, which, by the way, caused a lot of scandals. People love to quarrel where there is no need for it. Or rather, where nothing needs to be done, except for the scandal. For example, seeing a corpse hanging on a tree in some game is the easiest way to inflate a scandal. This is called caring for the next generation. It would be nice at the moment of this mouse and thoroughly hypocritical fuss to block the TV with a sirloin, because there these corpses are shown by the hundreds, in the daytime. Or learn not to spit on the streets, not toss cigarette butts everywhere, to bring your garbage to the trash cans, not to pollute the already polluted nature on vacation. But for this you need to do something, 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 transparency on the edges of objects that can be considered dynamic (characters, moving objects). How and how much to work out these aspects in detail, how deep you go on your way is up to you. We're just going to take the intermediate color between black and white and go over the edge of the car.
This is an enlarged image. You can see that I put a pixel of this color far from everywhere. If you start doing this around the entire perimeter of the car, then you will end up with a car with a pop gray piping.
I also suggest running through the rest of the picture and getting the following result.
Let's add one more color to our three-color palette. Lighter. And paint over the corners of our images again. This is especially true for such thin images as wires. The lack of smoothing is always noticeable on thin elements.
Enlarged machine for understanding the process.
We are done with the silhouette of our work, and with the smoothing of the contours. I think that it is possible to pass to light. Putting my hand on my heart, I can say - the light is drawn before smoothing, since smoothing is image polishing or an additional, but optional effect. It may not exist at all. First the shape, then light and shadow to add volume. Then everything else.
Light and shadow
I single out this couple in particular. In all my publications. For me, this is a 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 that there will be nothing. Strokes, highlights, reflections, and other frills are meaningless without them. Not essential. Secondary. Light and shadow in pixel art are as important as Form. Therefore, at the stage of the 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 taken to the abstract.
Let's not philosophize slyly and just emphasize our silhouette with a light interspersed with light. For example, let's denote the wings of our car. Let's make it over dark color than all the others, already the fifth in a row. At the same time, we paint the insides of the car. Still, from this angle, we, purely theoretically, should have seen part of the cabin and a piece of the roof of the car. Plus, add two or three pixels of light highlight with another light color on these wings.
See two pixels in the area where the door should be. Charm, right? Two dots, and the brain is already grasping the visual information and confidently believes that it sees the door handle gleaming in the dark.
Hatch
Hatch. Do you remember Kudu? Remember the principle of hatching? Interleaved pixels. Dot, and behind it is emptiness, new point and again "space", on the next "line" shift and repeat everything again. So that a lattice of a certain color appears. Let's repeat the same trick here. The same color that we have, the color of the wing of the car.
The wings worked perfectly. It's like 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 is worth taking one more, last color. Darker. And put out the shading on the box.
At the same time, let's use the same dark color that we dimmed the mailbox to dim the bottom row of pixels of our impromptu hatching. Feel the power of the pixel? Only one color and the wings of the car became voluminous, began to bend and go down, as a voluminous object is supposed to behave when light falls on it. Just. A couple of touches, and we can already go on Kickstarter with a prototype of a hangman waving simulator for the iPhone. Let's just before doing this stupidity - draw a few horizontal lines on the ground. It doesn't matter how. In any order. And three or four bright dots under the car. Let them show us broken glass.
On Kickstarter, of course, I would not recommend meddleling with such things. But, to practice more and more, increase the number of colors and experiment with shapes - I recommend it. Mandatory.
As you can see in our anchoring material, simplicity is the key to success. It is not necessary to litter the canvas with details and show miracles of waste in relation to flowers. 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 with his nose into one of the details of his drawing, but observe a sense of taste and moderation. It is best to develop 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 feature of the game.
Epilogue
I think that today you got to know the world of pixel art a little deeper than you expected when opening this article. And I must warn you right away - this is just the tip of a monumental complex that goes deep underground to the very roots of what is today known as the gaming industry.The upper tiers of the temple are still accessible to visitors and tourists, but desolation reigns on the lower levels. Many ceilings collapsed, whole floors sank, making the sources of knowledge inaccessible. This world is truly huge and any of your favorite old games can be a breeding ground for exploration and analysis. As in the case of fine art, there are many techniques for creating pixel art, stylizing it as traditional and living techniques, adapting modern graphics for pixel art and so on.
It is very sad for me to hear how the names of the offices that produced certain games are confused, as buyers of online services, buying old game, write angry reviews about it, reproaching the godlessly outdated graphics. In the gaming industry, unfortunately, there is no concept of history as such. It is passed from mouth to mouth. And therefore, each next version of the fairy tale is overgrown with modern details that are relevant for current generations. There are no institutions of knowledge, no chronicles of history, no names of discoverers carved on golden blocks who will survive the apocalypse. And there are no Guardians who would observe the purity of morals even in temples.
Of course, there are departments in certain institutions, but this is a drop in the ocean. Of course, there are gaming offices that, as part of additional earnings, establish courses and give out meaningless pieces of paper to those who have passed them. Meaningless because they are not listed in other offices. It is not a running currency. This is not a document on education, which guarantees subsequent employment. Wow! That's how he joked. In my opinion, the first funny joke in the article. A job-guaranteed education? Here? In Mordor? God forbid, I was daydreaming this morning.
If you are a regular reader of my small opuses dedicated to the gaming industry, then you probably noticed that in almost every article there is an information block “backdating notes”. The fact is that not every information can be included in the publication without violating the thread of the story. However, some marginal notes and Additional Information can and reveal the topic deeper, 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 (a block of comments that was previously called “backdating notes”), but also to introduce a new building called the Infosphere. In it, I intend to store all informational links, one way or another mentioned in the publication. Hyperlinks in the text are convenient, but with a large number of them, the body of the article begins to resemble Wikipedia or someone else's site. The structured base with which you, with using null-t portals go to the network resources you need, it 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. Let me know in the comments what you like and what you don't. What do you think is superfluous, and what was appropriate. Was the material useful and, in your opinion, is it worth developing.
At the moment, a block of four articles was planned. Where the first two are dedicated directly to pixel art and the technique of working with it, and the last two, its animation. However, based on the results of the relevance of this article, I will decide whether to increase the excavation area, or, conversely, to reduce it.
All the best and thank you for your attention! See you again.
Bunker Herr Text
Note one, predictive.
Even the format of a compressed article is quite voluminous. Therefore, I decided to divide the narrative dedicated to pixel art into four parts. The first publication can be considered introductory, and based on its results, I will see if it is worth making a second, enhanced one. It should become more technical. Articles already written in in general terms, but each of them requires proofreading and polishing, which often takes more than half the time allotted for writing the text. Creating material is not a problem - the holds are packed. Making the material accessible is the challenge.
Animation should also be divided into simple and complex. Looping a ball or a resting antelope against the background of the savanna is not as difficult as a step or run animation, for example, for a cinematic platformer like Prince of Persia or Flashback. As you know worthy representatives of this genre can be counted on the fingers of two hands. So you need to have a lot of audacity to write an article about this with own examples. I don't have the audacity. However, I have made sure that my animations are up to par with the best animations in games in their heyday.
Note two, complementary.
For the last (2014) year I have been working closely on two types of projects. Isometric 3D games and classic platforming (classic in my opinion). As a result of tests, research and fruitful work, I have accumulated a lot of material that can be useful to Habrchans. Starting from pixel art animation and ending with project planning regarding the development of graphic content. This allows you to maintain the quality of a certain level, within the time specified above, and most importantly, it helps to keep the declared quotas for polygons, textures, etc. I have no idea how original this experience is (everyone remembers Paul McCartney's statement), and what value it really is. Nevertheless, I will venture to offer all this for your judgment. Gradually, of course.
Note three, "back to the future" returning.
By virtue of my worldview, I am a supporter of the idea that Time moves in a spiral, certain coils of which tend to repeat themselves. Even in the example of our young gaming industry, you can see how mobile devices repeat the history of its inception. First, due to limited capacity, then due to the convenience of using art without connecting 3D. Well, due to the fact that certain stylistic decisions are now mainstream.
It seems to me that something similar will happen in the future. And someday the real Roger Wilko, while on a spaceship, will pass the time not behind a mop (or its then equivalent), but behind some mini-device like today's mobile phones or mini-set-top boxes, looking at very real pixels running across a small screen . It doesn't have to be mainstream, maybe it's retro Tetris, or the fashion of the time will be kind to retro games, which will make consoles stylized after the best designs of the year 2100 popular.
Note four, dissatisfied.
You may have noticed that the body of the article is shot through with shots in relation to the gaming industry, which prefers to focus on graphics rather than the essence of games. This irritation is caused by the fact that even the "returners of the 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 do not want to do this, believing that their names, reputation, and victories of past years will be enough to live well today.
Because the result is games visually similar to the "old fashioned". However, these new products do not even have half of the wealth of functionality, game mechanics that the games of the past offered. Now, for the "trick" of the game, you can pass off the character's ability to squat behind the box, or the ability to break this box (you don't have to go far for an example, Brian Fargo's exorbitant Wasteland 2 project). What is this squalor, my dears? Games of the past offered completely destructible worlds, where it was the functionality of the game that 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 be gray, 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, and I'm forty years old, I can show my passport ... "What do men talk about"
Primordia
Developer: Wormwood Studios
Note: Repeatedly met with a common mistake. At the mention of any of these three games, you may be answered “We know, this is Wadjet Eye Games developed." This is wrong. Wadjet Eye Games this is publisher and producer Dave Gilbert (not to be confused with Ron Gilbert), who provides support for adventure games. As far as I understand on the AGS engine. This does not prevent Dave Gilbert from being a developer, author of the Blackwell series. However, the developers of Resonance, Gemini Rue and Primordia are the companies mentioned above.
Similar mistakes have already taken place in the history of the gaming industry, in particular in relation to the publisher Interplay, more than one project passed under their wings, which is why people saw the Interplay logo when loading the game, identified the latter with the developer. One of these phenomena is the stereotypical phrase "I know, this is 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.
As pixel art has evolved into a popular art form rather than a technical limitation, so have the various tools developers use to create it. Some use old favorites, others use free software, and some opt for higher end software. Whether you're into pixel art or looking for new game creation software, the choice can be tricky.
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's 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 specifically made for pixel art. 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.
It's one of the most recommended pixel art software, and for good reason. Aseprite has all the standard features you need to create pixel art, all wrapped up 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 spritesheets and GIFs and perform other pixel-specific functions.
Aseprite has a lot of fans, but not everyone likes it. The program itself has a low resolution. For some, the pixel editing interface is considered logical and helps to acquire creative thinking. For others, it's an unnecessary distraction.
Jay Tolen, 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 the "safe" color palette. If I made a piece and then decided that this color is not working, I would have to heavily fill it with other colors or just leave it like that and then suffer for ages. For the Hypnospace Outlaw, I used Aseprite's color dimming feature to give the 3D graphics an old-fashioned "safe" color look.”.
Price: For free
Available for: Windows
GraphicsGale is another serious program created specifically for pixel art. It has the same main features you would expect for drawing and animation: onion-skinning, layer and color palette management. The biggest disadvantage of GraphicsGale is that it is only available for Windows.
Besides the 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, and this, fortunately, is almost all scanners and cameras. Probably the most notable feature is the ability to preview animations while editing. There is no need to interrupt your work to export a gif file 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 made with GraphicsGale: the great Duelyst.
Pro Motion NG
Link
Price: $40 or time-limited 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 a wide range of options for both animating sprites and editing tilesets. Like Pyxel Edit, Pro Motion allows you to edit all the same tiles. It can also automatically fill large portions of a drawing.
Pro Motion is initially only available 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 a lot of features for advanced users, such as the ability to change keyboard shortcuts, automatic backups, and opening multiple projects at the same time. Pro Motion could be the best value-for-money program made specifically for pixel work.
Price: $20-30 per month
Available for: Windows / OS X
Adobe Photoshop needs no introduction, but I'll go into more detail anyway. 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've already been lucky enough to get your hands on a copy, thanks to an educational license, or prior to signing 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 there's official documentation and an endless supply of text and video guides on Google.
In terms of features, Photoshop has everything you need and more. Like its free alternative GIMP, it's not made 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 low resolutions, but it can be extremely effective for those who are used to it. The ability to manage layers, layer styles, custom brushes, palettes and editing history can add a lot to your workflow.
Len Stewart, Lead Artist of Pixel Noir, uses Photoshop not only because of its versatility, but also because he's used to it. “Personally, I have been using Photoshop since high school, so it's just a program that I feel comfortable using.”
GIMP
Image from the tutorial on recoloring spritesheets in Gimp.
LinkPrice: 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. While GIMP's best-known quality is that it's "free Photoshop," it has other strengths that cut down on work time. One of the features is that it is configurable through several programming languages. There are quite a few community-created plug-ins, which means that you can, with some effort, customize the set of features for GIMP yourself.
If, for whatever reason, you find yourself switching from working with pixels to working with high-resolution graphics, GIMP is a good way to avoid being overwhelmed by a huge number of other programs.
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, came 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 used to 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 simple pixel art concepts, but has been extended many times, so it differs significantly from the original version. There are many tutorials on the web on the same topic, but they all seem too complicated or lengthy to me. Pixel art is not science. You don't have to calculate vectors while creating pixel art.
Tools
One of the main advantages of creating pixel art is that you don't need any advanced tools - the graphic editor installed on your computer by default should be enough. It is worth mentioning that there are programs designed specifically for creating pixel art, such as 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 it costs a lot, contains a lot of useful tools for creating art, some of which are very useful for pixelation.
How to Draw Pixel Art in Photoshop
While using Photoshop, your main weapon will be the Pencil Tool (B key), which is an alternative to the Brush Tool. Pencil allows you to color individual pixels without overprinting colors.
Two more tools come in handy: the Selection (M key) and the 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 the selected objects or exclude them from the current selection list. This is necessary by the way when you need to select uneven objects.
You can also use an eyedropper to transfer colors. There are a thousand reasons why it's important to preserve colors in pixel art, so you'll need to take a few colors and use them over and over again.
Finally, make sure you memorize all the hotkeys, as this can save you a lot of time. Notice the "X" toggling between primary and secondary colors.
lines
Pixels are the same little colored squares. First you need to figure out how to effectively arrange these squares to create the line you need. We will look at the two most common types of lines: straight and curved.
straight lines
I know what you were thinking: everything is so simple here that it makes no sense to delve into something. But when it comes to pixels, even straight lines can be a problem. We need to avoid jagged parts - small fragments of the line that make it look jagged. They appear if one of the parts 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, the neat line has intervals 6 > 3 > 2 > 1, but the line with intervals 3 > 1< 3 выглядит зазубренной.
The ability to draw lines is a key element of pixel art. A little further I will tell you about anti-aliasing.
Conceptualization
To get started, you need a good idea! Try to visualize what you are going to do in pixel art - on paper or just in your mind. Having an idea about the drawing, you can concentrate on the pixelation itself.
Topics for reflection
- What will this sprite be used for? Is it for the website or for the game? Will it be necessary to make it animated later? If yes, 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 details 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 colors. main reason is the limited color palette due to system requirements (which is extremely unlikely in our time) or for compatibility. Or for precision, if you're emulating a particular style of C64, NES, and so on. It is also worth considering the dimensions of your sprite and whether it stands out too much against the background of the necessary objects.
Let's try!
There are no restrictions in this tutorial, but I wanted to make sure that my pixel art is big enough so that you can see in detail what happens in each of the steps. To this end, I decided to use as a model Lucha Lawyer, a character from the world of wrestling. He would fit perfectly into a fighting game or a dynamic action movie.
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 also a little dark. Later in the tutorial, I'll show you how to change the color of the outline to increase realism.
There are two approaches to creating an outline. You can draw the path freehand and then tweak it a bit, or draw everything one pixel at a time. Yes, you understood correctly, we are talking about a thousand clicks.
The choice of method depends on the size of the sprite and your pixel skills. If the sprite is really huge, then it would be more logical to draw it by hand to create approximate form and then straighten. 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 visually and explain what happened.
Step One: Rough Outline
Using your mouse or tablet, draw a rough outline for your sprite. Make sure it is NOT TOO raw, i.e. it looks something like how you see your final product.
My sketch almost completely coincided with what I had planned.
Step two: polish the outline
Start by magnifying the image by 6 or 8 times. You must clearly see every pixel. And then, clean up the outline. In particular, pay 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 small details that we missed in the first step.
Even large sprites rarely exceed 200 by 200 pixels. The phrase "do more with less" is a great way to describe the pixelation process. You will soon see that even one pixel matters.
Simplify your outline as much as possible. We will deal with the details later, now you need to work on finding large pixels, such as, for example, muscle segmentation. Things don't look very good right now, but have a little patience.
Color
When the outline is ready, we get a kind of coloring that needs to be filled with colors. Paint, fill and other tools will help us with this. Matching colors can be tricky, but color theory is clearly not the topic of this article. Be that as it may, there are a few basic concepts that you will need to know.
HSB color model
This is an English abbreviation, assembled from the words "Hue, Saturation, Brightness". It is just one of many computer color models (or numerical representations of color). You have probably heard of other examples like RGB and CMYK. Most image editors use HSB for color selection, so we'll focus on it.
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 “turn gray”.
brightness- light that emits color. For example, for black, 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:
- Soft and desaturated colors look more realistic than cartoony.
- Think of the color wheel: the farther two colors are on it, the worse they blend. 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 solely from combinations of brown and red.
Applying flowers
Applying color is very easy. If you use photoshop, then just select the desired fragment, select it magic wand(W key) and then fill it with the base color (Alt-F) or complementary color ctrl-f).
shading
Shading is one of the most important parts of the quest to become a pixelated 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 lights, like lamps, torches, and so on. And all of them can affect how the sprite looks in different ways. However, 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 is lit, and the rest is shaded.
Step Two: Shading Directly
Once we have chosen a light source, we can begin to darken the areas that are farthest from it. Our lighting model suggests that the lower part of the head, arms, legs, etc. should be covered with a shadow.
Recall that flat things cannot cast a shadow. Take a piece of paper, crumple it up and roll it across the table. How do you know it's not flat anymore? You just saw the shadows around him. Use shading to emphasize folds in clothes, 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, and on uneven surfaces.
Step four: illuminated places
Places that receive direct rays of light must also be highlighted. It is worth noting that there should be less highlights than shadows, otherwise they will cause unnecessary attention, that is, 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 exposed, and when you apply the shadows, they will have to be reduced.
Some useful rules
Shadows are always difficult for beginners, so here are a few rules that you need to follow while shading.
- Don't use gradients. The most common newbie mistake. The gradients look terrible and don't even approximate how light plays on surfaces.
- Don't use "soft shading". I'm talking about a situation where the shadow is too far away from the outline, because then it looks very blurry, and prevents the light source from being revealed.
- Don't use too many shadows. It is easy to think that "the more colors - the more realistic the picture." Be that as it may, in real life we are used to seeing things in dark or light spectrums, and our brain will filter out everything in between. Use only two dark colors (dark and very dark) and two light colors (light and very light) and layer them on the base color, not on top of each other.
- Don't use too similar colors. There's really no need to use almost identical colors, except when you want to make a really blurry sprite.
dithering
Preserving colors is what 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 "crosshatching" are used, that is, you, in the literal sense, get something in between the two colors.
Simple example
Here is a simple example of how two colors can be dithered to create four shading options.
Advanced Example
Compare the image above (created with a gradient in Photoshop) with the image created with just three colors using dithering. Please note that different patterns can be used to create "adjacent colors". It will be easier for you to understand the principle if you create several patterns yourself.
Application
Dithering can give your sprite that nice retro look, as a lot of the early video games used this technique heavily due to the small number of color palettes available (if you want to see a lot of examples of dithering, check out the games developed for the Sega Genesis). I don't use this method very often myself, but for educational purposes, I'll show you how it can be applied to our sprite.
You can use dither to your heart's content, but it's worth noting that only a few people actually use it successfully.
Selective contouring
Selective contouring, which is also called selout (from the English selected outlining), is a subspecies of contour shading. Instead of using a black line, we are choosing a color that will look more harmonious on your sprite. We also change the brightness of this path towards 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 you to qualitatively distinguish the sprite from the background of its surrounding objects. But by using this method, we are sacrificing some realism that we might need in some cases, as our sprite continues to look cartoonish. Selective contouring allows you to get rid of this.
You'll notice that I've used a seult to soften his muscles. Finally, our sprite starts to look like a whole, and not like a huge number of separate fragments.
Compare this to the original:
- Smoothing
The principle of anti-aliasing is simple: adding intermediate colors to the kinks 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 kinks along the edge.
Technique 1: smoothing the curves
In general, you need to add intermediate colors where there are breaks, 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 match the direction of the curve.
I don't think I can explain it better without complicating it. Just look at the picture and you will understand what I mean.
Technique 2: rounding off bumps
Technique 3: Overwriting Line Ends
Application
Now, let's apply anti-aliasing to our print. Note that if you want your sprite to look good against any background color, don't smooth the outside of the line. Otherwise, your sprite is surrounded by a very inappropriate halo at the junction with the background, and therefore will stand out too clearly against any background.
The effect is very subtle, but it is of great importance.
Why do you need to do it manually?
You might be asking, "Why not just apply a graphics editor filter to our sprite if we want it to look smooth?" The answer is also simple - no filter will make your sprite as sharp and clean as handmade. You will have full control over not only the colors used, 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 in which pixels will simply lose their quality.
Finishing
Wow, we're pretty close to being able to shut down your computer and grab a cold beer from the fridge. But he hasn't arrived yet! The last part is about what separates the energetic amateur from the seasoned professional.
Take a step back and take a good look at your sprite. There is a possibility that he still looks "raw". Take some time to improve and make sure everything is perfect. No matter how tired you are, the most fun part is ahead of you. Add details to make your sprite look more interesting. This is where your pixel skills and experience come into play.
You might be surprised by the fact that our Lucha Lawyer has had no eyes all this time, or that the package he is holding is empty. Actually, the reason lies in the fact that I wanted to wait with small details. Also notice the trim I added to his armbands, the fly on his pants… well, what would a man be without his nipples? I also darkened the lower part of his torso a bit so that the arm protrudes more against the background of the body.
Finally you are done! Lucha Lawyer competes in the Lightweight category, as it only has 45 colors (maybe it's a heavyweight depending on your palette limitations) and its resolution is about 150 by 115 pixels. Now you can open the beer!
Whole progress:
It's always funny. Here's a gif showing the evolution of our sprite.
- Learn the basics of art and practice traditional techniques. All the knowledge and skills necessary for drawing and drawing can be applied in pixeling.
- Start with small sprites. The hardest part is learning how to place a lot of detail using as few pixels as possible without making sprites as big as mine.
- 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.
- If you don't have a tablet, buy one. Constant nervous breakdowns and stress caused by continuous left-clicking of the mouse is not funny, and it is unlikely to impress the representatives of the opposite sex. I use a small Wacom Graphire2 - I like its compactness and portability. You might like a larger tablet. Before buying, do a little test drive.
- Share your work with others to get their opinion. 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 room. Or write directly to the messages of the group
What You'll Be Creating
If you enjoyed playing Lego as a child (or if you continued to play it as an adult), isometric pixel art might interest you; it can be quite technical, more like building than illustrating, and since it has no perspective, you can move elements around your isometric environment however you like.
We'll be creating the character since this is a logical starting point for isometric pixel art because it will help determine the proportions for most of the other elements we can continue to create. However, we need to go through some basics of isometric pixel art before we get to the character; unless you want to just make a character and never go back to styling, in which case you can jump to step 3. Let's add some character.
1. Pixel art lines
These lines are the foundation of the most common (and fun) isometric style in pixel art, the style we'll be using:
They consist of two pixels across for every one pixel down. They look pretty smooth and are used to create squared surfaces:
Basically structured lines of this kind will work fine, but the bigger each step gets, the more jagged they look:
Here are some irregularly structured lines for contrast:
Very uneven and not very pretty. Avoid them.
2. Volumes.
Our character will not strictly follow all the rules of an isometric view, so let's create a simple cube to start working with volumes.
Create a new New file in Adobe Photoshop with permission 400 x 400 pixels.
I like to open an additional window for the same file (Window > Arrange > New Window…), in order to work with one at about 600% scale, and leave the other at 100% scale to check how the work is going. Using the pixel grid is up to you, but I sometimes find it more annoying than helpful.
So let's zoom in and create 2:1 lines:
I prefer to use 5% gray instead of black so I can add shadows later (black and low opacity) and still be able to select each color individually with the magic wand.
Here are some ways to create a line:
- Using the tool Line (Line) with unchecked pixels, antialias and width 1 pixel. While drawing, a tooltip informs us about the angle of the line, we will take, say, 26.6 degrees. However, I don't find the Line tool very reliable, it can create messy lines if the angle isn't quite right.
- By creating a 40 x 20 px rectangular selection, then drawing with the tool Pencil(always in 1 pixel) a single pixel in the bottom left corner, then holding Shift to draw a second pixel in the top right corner. Photoshop will automatically create a line between the two points. With some experience, you can create these lines correctly (or almost correctly, and then touch up) without a rectangular selection.
- By drawing two pixels back to back with the tool Pencil by selecting them and holding alt, move the selection with the arrow keys or the mouse (hereinafter referred to as alt-drag), then move the pixels with the arrow keys or the mouse so that the two groups of pixels meet at the corners. Then, by selecting these two groups of pixels and repeating the above, extend the line further.
We've got our first line. Let's pick it out and alt-drag, or in other words - copy the selection, paste it and merge the layers back into one. Then flip it horizontally (Edit > Transform > Flip Horizontal). I use this feature so often that I set up a keyboard shortcut for it!
And let's combine both lines:
Then select and alt-drag them again, flip them horizontally, and join them together to complete our square:
It's time to add a "third dimension". Alt-drag or copy square and place the copy 44px above the original.
Clue: If you hold down shift and press an arrow key, it will move your selection 10 pixels in that direction instead of just one.
To get a neater cube, let's smooth out the corners by removing the leftmost and rightmost pixels of the squares. Once done, add the missing vertical lines to complete the cube:
Now delete the back lines from the bottom square. And to start adding color. take any color you like (from the lighter shades) and fill the top square with it.
now increase the lightness of this color by 10% (I recommend using the HSB sliders in the color bar) to draw lighter corners along the front of our color square. Because of the way we cropped our cube slightly, these lighter lines will look better one pixel above the black lines (instead of replacing the black lines with light ones), like this:
Now we have to remove those black lines underneath the lighter ones. Trick with Shift Pencil to create black lines also works with an eraser (which must be set to a regular tool Eraser, mode pencil and size in 1 pixel.
Select a color from the top square with eyedropper(which you can call faster by holding alt with the Pencil or Fill tool selected) and use it to cover the vertical line in the middle of the cube. Then reduce the brightness of this color by 15% and fill the left side of the cube with the new color. Reduce the brightness by another 10% for the right side of the cube:
Our cube is ready. It should look clean and relatively smooth at 100% zoom. We can move on.
3. Let's add some character.
The choice of character style can be very personal, don't be afraid to change the proportions of the elements as you see fit. I tend to make skinny bodies and slightly big heads. Skinny bodies definitely help keep lines simple/straight.
It makes sense to start with the eyes. If we were strictly following isometric angles, then one eye would have to be lower on the screen than the other, but on the small scale we're using here, there's no problem with "cheating" to make our characters' faces more aesthetically pleasing. , it will also make them more legible despite their size.
We create a small character, because after a while everything can end up with the fact that we will create for him a car, a house or an entire square, or even a city scene. In this case, in the context of such an extended scene, the characters should be among the smallest elements belonging to the illustration. You also need to aim for some graphical efficiency aimed at making the character as beautiful as possible with the fewest pixels possible (but large enough to have facial features). And yet, small is much easier than big. .As long as the focus of what you want to illustrate is not the character himself, or his expressions, or his portrait, a small size works well for us.
Let's create a new layer. To create the eyes, we'll just take two pixels; one for each eye, with one empty pixel in between. And, at a distance of one pixel from one of the eyes, draw a vertical line.
Now add a new layer and draw a two px horizontal line under the eyes, this is the mouth. Move it down with the arrow keys and when you find a position that suits you, merge the layer back. You can do the same with the jaw line, it should just be a longer horizontal line.
Repeat the same for the hairline and crown of the head, then round off the corners and you should end up with something like this:
Now, next to the other eye, skip one blank pixel and after that add the sideburn (which will also help give the character ears) and more pixels above it so that it touches the hairline. Then another blank pixel where the ear should be, and then a line to represent the edge of the head. Go ahead and round the corners where the lines meet.
Add a pixel for the top edge of the ear and reshape the head if you like; heads are usually already near the neck:
Draw a line from the chin down, this will be the chest. And the neck will go from the ear, vertically down a few pixels, and from there a few more pixels, but diagonally, to create the only visible shoulder for our character.
Now, where the shoulder ends, create a 12 px vertical line to draw one edge of the arm and the other edge, it should be two pixels apart. Connect the lines at the bottom with a few pixels to form the arm/fist (there are no really detailed arms here, but this is usually not a problem) and just above where the arm ends, create a 2:1 line that will be the waist, then finish the chest line and you are get a fully rendered upper body. One arm remained invisible, but it should look normal, as if it were just hidden from us by the chest.
It should look like this:
Of course, you can try other proportions if you like, I like to look at different options from all angles before deciding on just about anything.
Now let's add a few vertical lines for the lower body. I like to leave 12 pixels between the soles and the waistline. The feet are quite simple, only one touch wider than the legs, and due to the isometric view, one leg on the screen is lower than the other.
Now we will add color. Beautiful skin tone is not always easy to match, so if you want to use the same color as me, its hex code is #FFCCA5 . Finding colors for the rest of the elements shouldn't be difficult. After that, you should decide on the length of the sleeve, the position and style of the collar of the shirt, and add a darker line to separate the shirt from the skin. I like to make most of the inner lines lighter than black (especially when the colors of different parts are almost on the same level, such as transitions from a shirt to leather or to pants), then the contrast from all the lines becomes less noticeable and different volumes become more obvious.
You can add a little light effect to almost every color area. Avoid too thick shadows or using gradients for shading; a few touches of a darker or lighter (10-25%) shadow is enough to make the elements look bumpy and stop being flat. If you want to add a brighter spot to a color that is already at 100% brightness, try lowering its saturation. And in some cases (such as hair), it's a good idea to also change the shade between shadows.
You can try many different hair options. Take a look at some ideas:
As you continue to create more characters, slight variations such as shirt style, sleeve length, leg length, accessories, clothing, and skin colors can create a good variety.
Now, all we have to do is combine both of our elements together and evaluate how they look in the same environment:
If you want to export, the ideal format is PNG.
That's it, you made it!
I hope this guide isn't over the top, my idea was to give you as many tips on Photoshop and style aesthetics as I can. We will continue to expand our world of isometric pixel art; buildings, cars, interiors, landscapes. All this is possible and fun to create, although, perhaps, not easy.
