Beautiful pixel art. Adobe Photoshop: Draw and animate a character using Pixel Art technique

Adobe Photoshop: We draw and animate a character using technology Pixel art

In this tutorial you will learn how to draw and animate characters in Pixel technology Art. For this you only need Adobe program Photoshop. The result will be a GIF with a running astronaut.

Program: Adobe Photoshop Difficulty: beginners, average level Time required: 30 min – hour

I. Setting up the document and tools

Step 1

Select Pencil from the toolbar - this will be the main tool for our lesson. In the settings, select the Hard Round brush type, and set the remaining values ​​as in the picture. Our goal is to make the pencil nib as sharp as possible.

Step 2

In the Eraser Tool (eraser) settings, select Pencil Mode, and set the remaining values ​​as shown in the picture.

Step 3

Turn on Pixel Grid (View > Show > Pixel Grid). If there is no such item in the menu, then go to the settings and enable graphics acceleration Preferences > Performance > Graphic acceleration.

Please note: The grid will only be visible on the newly created canvas when zoomed in at 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 ruler units to pixels Preferences > Units & Rulers > Pixels.

II. Character Creation

Step 1

And now that everything is set up, we can proceed directly to drawing the character.

Sketch your character with a clear outline, being careful not to overload it. small details. At this stage, the color does not matter at all, the main thing is that the outline is clearly drawn and you understand how the character will look. This sketch was prepared specifically for this lesson.

Step 2

Reduce the scale of the sketch to 60 pixels in height using the keyboard shortcut Control+T, or Edit > Free Transform.

The size of the object is displayed in the information panel. Please note that the interpolation settings are the same as we did in step 4.

Step 3

Zoom in on the sketch by 300-400% to make it easier to work with and reduce the layer's opacity. Then create a new layer and draw 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 it and flip it as a mirror (Edit > Transform > Flip Horizontal).

Rhythm: To draw complex elements break them into pieces. 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 disrupted.

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 as you draw, some shapes can be corrected.

Step 6

Create a new layer for the highlights.

Select the Overlay blend mode from the drop-down list in the Layers panel. Draw light color over the areas you want to highlight. Then smooth out the highlights using Filter > Blur > Blur.

Complete the picture, then copy and mirror the finished half of the picture, then combine the layers with the halves to make a whole picture.

Step 7

Now the astronaut needs to add contrast. Use the Levels settings (Image > Adjustments > Levels) to make it brighter, and then adjust the hue using 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 pixel up and 2 pixels to the right. This is a key point in character animation.

Reduce the opacity of the original layer by 50% so that you can see the previous frame. This is called “Onion Skinning” (plural mode).

Step 2

Now bend your character's arms and legs as if he were running.

● Highlight left hand Lasso tool

● Using the FreeTransformTool (Edit > FreeTransform) and holding down the Control key, move the borders of the container so that the hand moves back.

● Select one leg first and stretch it a little. Then squeeze the other leg on the contrary so that it feels like the character is walking.

● Using a pencil and eraser, adjust the part of your right arm below the elbow.

Step 3

Now you need to completely redraw the new position of the arms and legs as shown in the second section of this lesson. This is necessary to ensure that the image looks clear, 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.

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

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

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

Tools

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

How to draw pixel art in Photoshop

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

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

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

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

Lines

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

Straight lines

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

Curved lines

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

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

Conceptualization

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

Topics for Thought

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

Let's try!

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

Circuit

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

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

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

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

Step one: rough outline

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

My sketch almost completely coincided with what I had planned.

Step Two: Polish the Outline

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

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

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

Color

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

HSB color model

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

Hue– Hue is what we used to call color.

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

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

Choosing colors

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

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

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

Applying colors

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

Shading

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

Step one: choose a light source

First we choose a light source. If your sprite is part of a larger fragment that has its own lighting sources, such as lamps, torches, and so on. And they can all have different effects on how the sprite looks. 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 are illuminated and the rest is shaded.

Step two: direct shading

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

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

Step Three: Soft Shadows

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

Step four: illuminated areas

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

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

A few useful rules

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

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

Dithering

Preserving colors is something that pixel art creators really need to pay attention to. Another way to get more shadows without using more colors is called dithering. Just like in traditional painting"Hatching" and "cross-hatching" are used, that is, you, in literally, you get something in between the two colors.

Simple example

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

Advanced example

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

Application

Dithering can give your sprite that wonderful retro look, as many early video games made heavy use of. this technique 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 myself do not use this method very often, but for educational purposes, I will show how it can be applied on our sprite.

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

Selective contouring

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

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

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

Compare this with the original:

1. Smoothing

The principle of smoothing is simple: adding intermediate colors into 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 breaks along the edge.

Technique 1: Smoothing out kinks

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

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

Technique 2: Rounding the bumps

Technique 3: erasing line endings

Application

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

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

Why do you need to do this manually?

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

Finishing

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

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

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

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

Full progress:

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

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

P.S.

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

Preface

However, you can’t say that pixel art or non-pixel art graphics are more or less beautiful. It's fairer to say that pixel art is different and better suited for retro style games (like Super Nintendo or Game Boy). You can also combine the techniques learned here with effects from non-pixel art to create a hybrid style.

So, here you will learn the technical part of pixel art. However, I will never make you an artist... for the simple reason that I am not an artist either. I won't teach you either human anatomy, nor the structure of the arts, and I will say little about perspective. In this tutorial, you can find a lot of information about pixel art techniques. In the end, you should be able to create characters and scenery for your games, provided you pay attention, practice regularly, and apply the tips given.

- I also want to point out that only some of the images used in this tutorial are enlarged. For images that are not enlarged, it would be good if you took the time to copy these images so that you can study them in detail. Pixel art is the essence of pixels; studying them from afar is useless.

In the end, I have to thank all the artists who joined me in creating this guide in one way or another: Shin, for his dirty work and line art, Xenohydrogen, for his genius with colors, Lunn, for his knowledge of perspective, and Panda, the stern Ahruon, Dayo, and Kryon for their generous contributions to illustrate these pages.

So, let me get back to the point.

Part 1: The Right Tools

1.Some old things

*You cannot open more than one file at the same time
* No palette control.
*No layers or transparency
* No non-rectangular selections
* Few hotkeys
* Terribly inconvenient

In short, you can forget about Paint. Now we will look at the real software.

2. In the end...

3. Cream

Charamaker 1999 - good program, but distribution appears to have stalled.

Graphics Gale is much more fun and easy to use, and it retails for around $20, which isn't too bad. Let me add that the trial version is not limited in time, and comes with enough kit to make enough good graphics. It just doesn't work with .gif, which isn't such a problem since .png is better anyway.

The software more commonly used by pixel artists is ProMotion, which is (obviously) more convenient and faster than Graphics Gale. Oh yes, she is dear! you can buy full version for a modest amount... 50 euros ($78).
Let's not forget our Mac friends! Pixen is a good program available for the Macintosh, and it's free. Unfortunately I can't tell you more because I don't have a Mac. Translator's note (from French): Linux users (and others) should try , and GrafX2. I urge you to try them all in demo versions and see which suits your convenience. In the end it's a matter of taste. Just know that once you start using a program, it can be very difficult to switch to something else.

To be continued…

Translator's notes from French to English

Translator's note from English to Russian

Back in the 20th century, pixel graphics became a wide area of ​​application. computer games, especially in the 90s. With the development of 3D graphics, pixel art began to decline, but then came back to life thanks to the development of web design, the emergence of cell phones and mobile applications.

Pixel art represents special technique creating an image in digital form, performed in raster graphics editors, in which the artist works with the smallest unit of a raster digital image - a pixel. This image is characterized by a low resolution, at which every pixel becomes clearly visible. Pixel art takes a long time and painstakingly, depending on the complexity of the drawing - pixel by pixel.

Basic rules of pixel art

The most important component of pixel art is the so-called line art - in other words, its contours. Pixel art is done using lines - straight and curved.

Straight lines

The rule for constructing lines in pixel art is that they should consist of segments that move to the side by one pixel as the drawing progresses. Avoid the main mistake of beginner pixel art artists: the pixels should not touch each other, forming a right angle.

In the case of straight lines, you can make your task easier by using one of the well-known examples of inclined straight lines:

As can be seen from the figure, all straight lines presented on it consist of identical pixel segments, shifted to the side by a distance of one pixel, and the most popular ones are segments of one, two and four pixels. Such simple straight lines in pixel graphics are called “ideal”.

Straight lines can have a different pattern, for example, you can alternate segments of two pixels with a segment of one, but such lines will not look so beautiful, especially when the image is enlarged, although they do not violate the rules of pixel art.

Curved lines

Straight lines are easier to make because they avoid kinks, which is not the case with curved lines. Their construction is more difficult, but curved lines have to be drawn much more often than straight lines.

In addition to the same prohibition on the formation of right angles from pixels, when drawing curved lines, it is necessary to remember the nature of their displacement. The length of the pixel segments should change evenly, gradually - rise smoothly and fall just as smoothly. Pixel graphics do not allow kinks.

You are unlikely to be able to draw an ideal curved line with one movement of your hand without breaking a single rule, so you can resort to two methods: draw lines by drawing one pixel after another, or draw a regular curve and then correct it by removing extra pixels from finished “frame”.

Dithering

In pixel art there is such a thing as dithering. It represents a specific way of mixing pixels different color to create a color transition effect.

The most popular method of dithering is to arrange pixels in a checkerboard pattern:

This method owes its appearance to technical limitations in color palettes, because in order to get, for example, purple, it was necessary to draw red and blue pixels in a checkerboard pattern:

And subsequently, dithering was often used to convey volume through light and shadow in images:

For dithered pixel art to work well, the color mixing area must be at least two pixels wide.

Programs for pixel art

To master creating art in a pixel style, you can use any graphic editor that supports this type of drawing. All artists work with different programs, based on your preferences.

Many people to this day prefer to draw with pixels in the well-known standard program operating system Windows - Microsoft Paint. This program is really easy to learn, but this is also its disadvantage - it is quite primitive, for example, it does not support working with layers and their transparency.

Another easy-to-use pixel art program whose demo version can be found online absolutely free is GraphicsGale. The downside of the program is, perhaps, that it does not support saving pixel art in .gif format.

Owners of Mac computers can try working in free program Pixen. And users of the Linux operating system should test the GrafX2 and JDraw programs for themselves.

And of course great option to create pixel art - the Adobe Photoshop program, which has wide functionality, allows you to work with layers, supports transparency, provides simple work with a palette. With the help of this program we will look at simple examples, how to draw pixel art yourself.

How to Draw Pixel Art in Photoshop

As in types of traditional visual arts, great importance in pixel art have shape, shadow and light, so before you learn how to draw pixel art, take the trouble to familiarize yourself with the basics of drawing - practice drawing with a pencil on paper.

Drawing "Balloon"

Let's start with the simplest thing - draw an ordinary balloon. Create a new file in Photoshop with a screen resolution of 72 dpi. There is no point in setting the image sizes large - this is pixel art. Select a brush, hard and opaque, set the size to 1 pixel.

Draw a small curved semi-arc from left to right, leading it from bottom to top. Remember the rules of pixel art: keep the same proportions of the segments, shift them to the side by a pixel, without leaving kinks or right angles. Then mirror this arc by drawing top part ball.

Using the same principle, draw the bottom of the ball and the thread. Fill the ball with red using the Fill Tool. Now all that remains is to add volume - our ball looks too flat. Paint a dark red stripe on the bottom right side of the ball, then dither the area. In the upper left corner of the ball, draw a highlight of white pixels.

See how simple it is - the ball is ready!

Drawing "Robot"

Now let’s try to draw a picture in the traditional way, and only then we’ll clean up those pixels that violate the rules of pixel art.

Open a new document and make a rough sketch of the future robot:

Now you can clean up everything that gets in the way and add pixels where needed:

In the same way, draw the lower part of the robot’s body. Don't miss the opportunity to draw "perfect" straight lines in appropriate places.

Detail the robot's body. Many experienced artists Before starting work, they advise you to prepare yourself a palette - a set of colors that you will use when creating work in a pixel style. This allows for the greatest image integrity. Create a palette on a free area of ​​the Photoshop workspace - for example, in the form of squares or color spots. Subsequently, to select the desired color, click on it with the Eyedropper tool.

You can start filling the contours. “Paint” the robot’s body with the main color. Our color is lavender blue.

Change the color of the outline - fill it with dark blue. Decide where the light source is in your drawing. For us, it is located somewhere above and to the right in front of the robot. Let's draw our character's chest, adding volume:

On the right side, mark the most deep shadow in the figure, passing along the contour of the body. From this shadow, from the edges to the center, draw a lighter shadow that disappears in the intended areas illuminated by the light source:

Add highlights to the robot in all areas that are expected to reflect light:

Give the robot's legs a cylindrical appearance using shadow and light. In the same way, make holes from circles on the robot’s chest:

Now let's improve the picture by adding the previously discussed pixel art element - dithering - to the shadow areas of the body.

Dithering can be avoided on highlights, as well as on the legs - they are already too small size. Using dark and light pixels, draw a row of rivets on the robot’s head instead of teeth, and also add a funny antenna. It seemed to us that the robot's hand was not drawn very well - if you encounter the same problem, cut out the object in Photoshop and move it down.

That's all - our funny pixel robot is ready!

And with the help of this video you will learn how to make pixel art animation in Photoshop:

Take it for yourself and tell your friends!

Read also on our website:

show more

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

An example of pixel art. Fragment.

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

Pixel Art. Best works and illustrators

City. Author: Zoggles

Fairytale castle. Author: Tinuleaf

Medieval village. Author: Docdoom

Hanging Gardens of Babylon. Author: Lunar Eclipse

Residential area. Author: