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

04.11.2019

Part 6: Antialiasing
Part 7: Textures and Blur
Part 8: Tile World

Preface

There are many definitions of pixel art, but here we will use this: an image is pixel art if it is created entirely by hand, and there is control over the color and position of each pixel that is drawn. Of course, in pixel art, the inclusion or use of brushes or blur tools or degraded machines (not sure), and other software options that are “modern” are not used by us (actually put at our disposal means “at our disposal” , but logically it seems more correct this way). It is limited to the pencil and fill tools.

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 will teach you neither 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

Bad news: you won't draw a single pixel in this part! (And that's no reason to skip it, right?) If there's a saying I hate, it's "there are no bad tools, only bad workers." I actually thought that nothing could be further from the truth (except maybe "what doesn't kill you makes you stronger"), and the pixel art is a very good confirmation. This guide aims to introduce you to various software, used to create pixel art, and help you choose the right program.

1.Some old things

When choosing software to create pixel art, people often think: “Choice of software? This is crazy! All we need to create pixel art is paint! (apparently a play on words, drawing and a program)” Tragic mistake: I talked about bad tools, this is the first one. Paint has one advantage (and only one): you already have it if you're running Windows. On the other hand, it has a lot of shortcomings. This is a (incomplete) list:

*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...

People then think: "Okay, Paint is too limited for me, so I'll use my friend Photoshop (or Gimp or PaintShopPro, they're the same thing), which have thousands of features." This can be good or bad: if you already know one of these programs, you can make pixel art (with all options for automatic anti-aliasing turned off, and many of the advanced features turned off). If you don't already know these programs, then you will spend a lot of time learning them even though you don't need all of their functionality, which will be a waste of time. In short, if you've been using them for a long time, you can create pixel art (I personally use Photoshop out of habit), but otherwise, it's much better to use programs that specialize in pixel art. Yes, they exist.

3. Cream

There are many more programs designed for pixel art than one might think, but here we will consider only the best. They all have very similar characteristics (palette control, repeating tile previews, transparency, layers, etc.). Their differences are in convenience... and price.

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

This great leadership based on pixel art, written by Phil Razorbak from LesForges.org. Thank you very much Phil Razorbak for allowing OpenGameArt.org to translate these guides and post them here. (From the translator into Russian: I didn’t ask permission, if anyone wants, you can help, I don’t have enough experience communicating in English, much less French).

Translator's note from English to Russian

I’m a programmer, not an artist or a translator, I translate for my artist friends, but whatever good is wasted, let it be here.
The original in French is somewhere here www.lesforges.org
Translation from French to English here: opengameart.org/content/les-forges-pixel-art-course
I translated from English because I don’t know French.
And yes, this is my first publication, so design suggestions are welcome. Plus, I’m interested in the question: should the remaining parts be published as separate articles, or is it better to update and supplement this one?

Adobe Photoshop: We draw and animate a character in Pixel technology Art

In this lesson you will learn how to draw and animate characters using the technique Pixel Art. To do this, you only need Adobe Photoshop. The result will be a GIF with a running astronaut.

Program: Adobe Photoshop Difficulty: beginners, intermediate 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 with 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 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 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.

● Use a pencil and eraser to correct the part right hand 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.

Part 7: Textures and Blur
Part 8: Tile World

Preface

So, let me get back to the point.

Part 1: The Right Tools

Bad news: you won't draw a single pixel in this part! (And that's no reason to skip it, right?) If there's a saying I hate, it's "there are no bad tools, only bad workers." I actually thought that nothing could be further from the truth (except maybe "what doesn't kill you makes you stronger"), and the pixel art is a very good confirmation. This guide aims to introduce you to the different software used to create pixel art and help you choose the right program.

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 is a good program, but distribution seems to be on hold.

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 pretty 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 the 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

This is a great tutorial on pixel art, written by Phil Razorbak from LesForges.org. Many thanks to Phil Razorback for allowing OpenGameArt.org to translate these guides and post them here. (From the translator into Russian: I didn’t ask permission, if anyone wants, you can help, I don’t have enough experience communicating in English, much less French).

Translator's note from English to Russian

4.7 (93.8%) 158 votes

Checkered drawings or pixel art are very popular view art among schoolchildren and students. During tedious lectures, drawings by squares save you from boredom. The prototype of drawing by squares was cross-stitching, where a cross pattern was drawn on a canvas, a fabric marked with squares. We were all once students and schoolchildren and drew different pictures in boxes out of boredom, imagine my surprise when I learned that this is practically art with its own masterpieces and geniuses. I began to study the issue in more detail and this is what came out of it...

How to draw pictures by cells

This art is accessible to anyone, the main thing is to follow the cells clearly. School notebooks are ideal for drawing images; the size of their squares is 5x5 mm, and the notebook itself is 205 mm by 165 mm. On at the moment Spring notebooks with an A4 sheet are gaining popularity among box artists; the size of this notebook is 280mm by 205mm.

Professional artists create their masterpieces on graph paper (drawing paper), that’s where there’s room to roam. The only disadvantage of graph paper is that it is pale green, which is not noticeable when you sketch with colored pens.
When choosing a notebook for drawing, pay attention to the thickness of the paper; the quality of your drawing in the cells depends on its density, and whether it will appear on the wrong side of the sheet. The ideal sheet density is no less than 50g/sq.m.

How to draw pictures by cells

To color pictures by cells, you don’t need any special tools; any pencils and pens will do. Monochrome paintings are very cool, but I really want to add some color to my life. In order for the colors to become varied, go to a stationery store and choose whatever your heart desires, gel pens, oil, ball.

Ballpoint pens for pixel art

Felt pens for drawings in cells

If you like to draw with felt-tip pens, your right, the colors of the felt-tip pens are very rich. It is worth remembering that felt-tip pens are divided into two groups: alcohol and water; water-based ones are safer, but they can soak the paper. Alcohol can also soak paper, and the smell is also not for everyone.

Pencils for drawings by cells

Pencils are another type of sketching device. Pencils are no exception in the variety of types; they come in plastic, wax, wood and watercolor. We paint with wood early childhood, and we know that they often break the stylus. Plastic and wax ones break less often, but they are thicker, which will be less convenient for drawing. About watercolor pencils out of the question, since after painting with a pencil you need to cover the drawing with a moistened brush, and this is unacceptable for notebook sheets.

Watch a video about how easy it is to draw pictures in cells and how beautiful the result can be:

A few more drawing schemes that I liked:

Dot graphics - pixel art technology

We figured out what accessories are needed, now let's get acquainted with the technology. Pixel art technology is very simple, it is dot graphics.

Before we begin to consider pixel art methods, let's go back to our childhood in the 80s -90s. Of course, those who grew up in post-Soviet times remember 8-bit video games, game graphics, which were built on pixel graphics.

The best way to master anything is practice, let's try to master pixel art:

Take a black and red oil pen, and notebook sheet in a cell.

First, let's make a simple drawing. Let's count the cells, determine the outline and color it according to the colors.

For example, let's draw a heart:

Take a checkered leaf and a pen with black ink, put 3 dots, as in the picture, the dots mark which cells will be painted black.
Draw lines indicating the contours of the picture.
Mark three points on each side, see figure.
We mark the area of the drawing with two lines.
Let's put one more point on each side and draw boundaries under the top points.
Let's draw 8 points vertically and 4 points on both sides, as shown in the figure below.
By drawing vertical lines, as shown in the figure, we will completely indicate the boundaries of the drawing.
In the same way, mark the lower part of the heart on the left and right.
We outline the cells as in our image.
The next thing we need to do is paint over it with a red pen. inner part hearts, leaving the glare of light unpainted.
And lastly, use a black pen to shade the cells marked with dots. Now you have learned how to draw eight-bit pictures.

If you think that large and voluminous pictures are not for you, you should try drawing a photo from the Internet. Are you scared? Not worth it.

Take

black pen,
pencils,
squared notebook,
computer,
photograph or picture from the Internet
Photoshop program.

For application volumetric drawings we need to count the number of cells that will be painted. It's quite difficult not to make mistakes with large quantities. Also, be sure to choose shades of colors similar to the original image.
So, let's act:

I’ll give you one piece of advice that helps me a lot: if you have a color printer, print the drawing, if not, no problem. Draw a grid of 10 cells with a thicker outline. On a printed sheet, using a ruler and a contrasting pen, if there is nowhere to print, you can open the image in Paint.
I wish you creative success.

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 advent of cell phones and mobile applications.

Pixel art is a special technique for creating images 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 shift to the side by one pixel as the drawing progresses. Avoid main mistake for 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 colors 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, which supports this type of drawing. All artists work with different programs based on their preferences.

Many people to this day prefer to draw with pixels in the well-known standard program of the Windows operating system - 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.

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

And, of course, an excellent option for creating pixel art is the Adobe Photoshop program, which has wide functionality, allows you to work with layers, supports transparency, and provides simple work with a palette. Using this program, we will look at simple examples of how to draw pixel art yourself.

How to Draw Pixel Art in Photoshop

As in types of traditional fine arts, great value 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 lower part 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 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:

WITH right side mark the deepest shadow in the drawing, running 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.

You don't have to do dithering on the highlights, as well as on the legs - they are already too small. 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!