What is Pixel Art? Examples and how to learn it. Pixel art

Are you here: Children's games

Pixel art is very popular for gaming even these days and there are several reasons for that!

So, what captivates Pixel Art:

Perception. Pixel art looks amazing! There is a lot to be said about each individual pixel in a sprite.
Nostalgia. Pixel Art brings back a great nostalgic feeling for gamers who grew up playing Nintendo, Super Nintendo, or Genesis (like me!)
Ease of learning. Pixel art is one of the easiest digital arts to learn, especially if you're more of a programmer than an artist ;]

So, you want to try your hand at Pixel Art? Then follow along with me and I'll show you how to make a simple but effective playable character that you can use in your own game! Plus, as a bonus, we'll look at how to integrate it into iPhone games!

For successful learning, you will need Adobe Photoshop. If you don't have it, you can download a free trial from the Adobe website or torrent.

What is Pixel Art?

Before we get started, let's be clear about what Pixel Art is, it's not as obvious as you might think. The easiest way to define what is Pixel Art is to specify what it is not, namely: everything where pixels are created automatically. Here are some examples:

Gradient: Select two colors and calculate the color of the pixels in between. Looks cool, but it's not Pixel Art!

Blur Tool: detecting pixels and replicating/editing them to make a new version of the previous image. Again, not a pixel chart.

Smoothing tool(mostly generating new pixels in different colors to make something "smooth"). You must avoid them!

Some will say that even auto-generated colors are not Pixel Art, since they require a layer for mixing effects (blending pixels between two layers according to a given algorithm). But, since most devices currently deal with millions of colors, this statement can be ignored. However, using a small number of colors is good practice in Pixel Art.

Other tools like (line) or paint bucket tool(Paint Bucket) also auto-generates pixels, but since you can set them to not smooth the curve of filled pixels, these tools are considered to be Pixel Art friendly.

Thus, we have found that Pixel Art requires a lot of attention when placing each pixel in a sprite, most often by hand and with a limited palette of colors. Let's get to work now!

Beginning of work

Before you start making your first Pixel Art asset, you should know that Pixel Art cannot be scaled. If you try to reduce it, everything will look blurry. If you try to scale it up, everything will look acceptable as long as you use a scaling that is a multiple of two (but, of course, there will be no clarity).

To avoid this problem, you must first understand how big your game character, or game element, should be, and then get to work. Most often this is based on the screen size of the device you are targeting and how many "pixels" you want to see.

For example, if you want your game to look twice as big on an iPhone 3GS (“Yes, I really want to give my game a pixelated retro look!”), which has a screen resolution of 480x320 pixels, then you need to work at half the resolution in this case it will be 240x160 pixels.

Open a new Photoshop document ( File → New…) and set the size to be the size of your game screen, then select the size for your character.

Each cell is 32x32 pixels!

I chose 32x32 pixels not only because it is great for the selected screen size, but also because 32x32 pixels is also a multiple of 2, which is convenient for toy engines, (tile sizes are often a multiple of 2, textures are aligned multiple of 2, etc.

Even if the engine you are using supports any image size, you can always try to work with an even number of pixels. In this case, if the image needs to be scaled, the size will be better divided, resulting in a better performance.

How to Draw a Pixel Art Character

Pixel Art is known to be crisp and easy to read graphics: you can define facial features, eyes, hair, body parts with just a few points. However, the size of the image complicates the task: the smaller your character, the more difficult it is to draw them. To approach the task more practically, choose what will be the smallest in size of the character traits. I always choose eyes because they are one of the best ways to bring life to a character.

In Photoshop select pencil tool(Pencil Tool). If you can't find it, just press and hold the tool brush tool(Brush Tool) and you should see it right away (it should be second on the list). You will just need to resize it to 1px (you can click in the tool options bar and resize it, or just hold down the [ key).

Also you will need Erase tool(Eraser Tool), so click on it (or press the E key) and change its settings by selecting from the dropdown list Mode:(Mode:) Pencil(Pencil) (because there is no smoothing in this mode).

Now let's start pixelating! Draw eyebrows and eyes as shown in the image below:

ey! I'm pixelated!!

You could already start with Lineart (where drawing is done with lines), but a more practical way is to draw a character's silhouette. The good news is that you don't need to be a pro at this stage, just try to imagine the dimensions of the body parts (head, body, arms, legs) and the starting pose of the character. Try to do something like this in grey:

You don't need to be a pro at this stage

Note that I also left some blank space. You don't really need to fill the entire canvas, leave room for future frames. In this case, it will be very useful to keep the same canvas size for all of them.

Once you've completed the silhouette, it's time to . Now you have to be more careful with pixel placement, so don't worry about clothing, armor, etc. for now. To be on the safe side, you can add a new layer so you never lose your original silhouette.

If you feel that the Pencil tool is too slow to draw, you can always use (Line Tool), just remember that you won't be able to position pixels as accurately as you would with a pencil. You will need to set up like below:

Select by pressing and holding Rectangle tool(Rectangle Tool)

Go to the tool options panel, in the dropdown list Pick Tool Mode(Outline Draw Mode) select Pixel , change Weight(Width) by 1px (if not already done) and uncheck Anti-alias(Smoothing). Here's how you should be:

Please note that I did not make the bottom outline for the feet. This is optional, as the feet are not such an important part of the legs to be highlighted, and you save one line of pixels on the canvas.

Applying colors and shadows

Now you are ready to start coloring our character. Don't worry about picking the right colors, they'll be very easy to change later, just make sure each one has "its own color". Use the default colors on the tab Swatches(Window → Swatches).

Color your character as shown below (but feel free to get creative and use your own colors!)

A good, contrasting color improves the readability of your asset!

Note that I still haven't done any outlines for the clothes or the hair. Always remember: save as many pixels as possible from unnecessary outlines!

Don't waste time painting every pixel. To speed things up, use lines for the same color, or paint bucket tool(Paint Bucket Tool) to fill in the gaps. By the way, it will also have to be configured. Select paint bucket tool in the toolbar (or just press the G key) and change tolerance(Tolerance) to 0, and uncheck Anti-alias(Smoothing).

If you ever need to use Magic Wand tool(Magic Wand Tool) - a very useful tool that selects all pixels with the same color, then set it up the same way as the "Paint Bucket" tool - no tolerance and anti-aliasing.

The next step, which will require some knowledge from you, is lightening and shading. If you do not have the knowledge of how to show the light and dark sides, then below I will give you a little instruction. If you don't have the time or inclination to learn it, you can skip this step and go to the Spice Up Your Palette section, because after all, you can just make your shading look like my example!

Use the same light source for the entire asset

Try to give the outlines as you want / can, because after that the asset starts to look more interesting. For example, now you can see the nose, scowling eyes, mop of hair, folds in the pants, etc. You can also add some light spots on it, it will look even better:

Use the same light source when shading

And now, as I promised, a small guide to light and shadows:

Spice up your palette

Many people use the default palette colors, but since many people use these colors, we see them in many games.

Photoshop has a large selection of colors in the standard palette, but don't rely on it too much. It's best to make your own colors by clicking on the main palette at the bottom of the toolbar.

Then, in the Color Picker window, browse the right sidebar to select a color and the main area to select the desired brightness (lighter or darker) and saturation (juicier or duller).

Once you find the right one, click OK and reconfigure the Paint Bucket tool. Don't worry, you can then just uncheck the 'Contiguous' box and when you paint with the new color, all new pixels with the same background color will be filled in too.

This is another reason why it's important to work with a small number of colors and always use the same color for the same element (shirt, hair, helmet, armor, etc.). But don't forget to use different colors for other areas, otherwise our drawing will be too overcolored!

Uncheck "Contiguous" to fill selected pixels with the same color

Change the colors if you like and get a more glamorous character coloring! You can even recolor the outlines, just make sure they blend in well with the background.

Finally, do a background color test: create a new layer below your character and fill it with different colors. This is necessary in order to make sure that your character will be visible on light, dark, warm and cold backgrounds.

As you can see, I turned off anti-aliasing in all the tools I have used so far. Don't forget to do this in other tools as well, for example, Elliptical Marquee(Oval selection area) and Lasso(Lasso).

With these tools, you can easily resize selected parts, or even rotate them. To do this, use any selection tool (or press the M key) to select an area, right click and select Free Transform(Free Transform), or just press Ctrl + T . To change the size of the selected area, drag one of the handles located along the perimeter of the transformation frame. To resize the selection while maintaining aspect ratio, hold down the Shift key and drag one of the corner handles.

However, Photoshop automatically smoothes everything that is edited with the Free Transform so before editing go to Edit → Preferences → General(Ctrl + K) and change image interpolation(Image interpolation) on Nearest neighborhood(Nearest neighbor). In a nutshell, at Nearest neighborhood the new position and size is computed very roughly, no new colors or transparencies are applied and the colors you choose are kept.

Integrating Pixel Art Drawing into iPhone Games

In this section, you will learn how to integrate our pixel art into an iPhone game using the Cocos2d game framework. Why am I only considering iPhone? Because, thanks to a series of articles about Unity, (for example:, or Game in the style of Jetpack Joyride in Unity 2D) you already know how to work with them in Unity, and from articles about Crafty (Browser games: Snake) and Impact (Introduction to creating browser-based games on Impact) you learned how to embed them on a canvas and create browser games.

If you're new to Cocos2D, or iPhone development in general, I suggest you start with one of the Cocos2d and iPhone tutorials. If you have Xcode and Cocos2d installed, read on!

Create a new project iOS → cocos2d v2.x → cocos2d iOS template, name it PixelArt, and select iPhone as the device. Drag the created pixel art, for example: sprite_final.png into your project, and then open HelloWorldLayer.m and replace the initialization method with the following:

-(id) init ( if((self=)) ( CCSprite * hero = ; hero.position = ccp(96, 96); hero.flipX = YES; ; ) return self; )

We position the sprite on the left side of the screen and rotate it so that it faces to the right. Compile, run, and then you will see your sprite on the screen:

However, remember, as we discussed earlier in this tutorial, we wanted to artificially scale up the pixels so that each pixel is noticeably different from the others. So add this new line inside the initialization method:

Hero scale = 2.0;

Nothing complicated, right? Compile, run and... wait, our sprite is blurry!

This is because, by default, Cocos2d flattens the drawing when it scales it. We don't need it, so add the following line:

This line configures Cocos2d to scale images without anti-aliasing, so our boy still looks "pixelated" Compile, run and... yes, it works!

Note the benefits of using Pixel Art graphics - we can use a smaller image than what is displayed on the screen, saving a lot of texture memory. We don't even need to make separate images for retina displays!

And what's next?

I hope you enjoyed this tutorial and learned a little more about pixel art! Before parting, I want to give you some advice:

Always try to avoid using anti-aliasing, gradients, or too many colors for your assets. This is for your own good, especially if you are still a beginner.
If you REALLY want to emulate retro style, look at the art in 8-bit or 16-bit console games.
Some styles do not use dark outlines, others do not take into account the influence of light or shadow. It all depends on the style! In our lesson, we did not draw shadows, but this does not mean that you should not use them.

To a beginner, Pixel Art seems to be the easiest graphics to learn, but in fact it is not as simple as it seems. The best way to improve your skills is practice, practice, practice. I highly recommend posting your work on the Pixel Art forums for other artists to give you advice - it's a great way to improve your technique! Start small, practice hard, get feedback and you can create an amazing game that will bring you a lot of money and joy!

"itemprop="image">

In this 10-step How to Draw Pixel Art tutorial, I'll teach you how to create a "sprite" (a single 2D character or object). The term itself, of course, 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 of 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. The main reason is the limited palette of colors 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 a rough shape, and then trim it. Believe me, it's much faster than trying to draw the perfect sketch right away.

In my tutorial, I create a fairly large sprite, so the first method will be shown here. It will be easier if I show everything 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 - 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 cartoonish.
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're using Photoshop, then just select the desired fragment, select it with a magic wand (W key), and then fill it with the main color (Alt-F) or secondary 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 rookie 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 spectra, 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 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 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, look at 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 light weight category, with only 45 colors (or maybe a heavyweight depending on your palette limitations) and a resolution of 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 clicking the left mouse button 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

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

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

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

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

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

2. Tools.

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

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

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

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

3. General principles.

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

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

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

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

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

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

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

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

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

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

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

4.1. We draw a bottle with living water.

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

2. Red liquid.

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

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

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

4.2. We draw a watermelon.

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

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

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

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

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

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

5. Dithering.

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

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

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

Two more options for dithering:

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

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

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

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

1. Preparation for work.

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