home › Light and glass › Adobe Photoshop: Draw and animate a character using Pixel Art technique. An introduction to pixel art for games How to draw beautiful pixel art

Adobe Photoshop: Draw and animate a character using Pixel Art technique. An introduction to pixel art for games How to draw beautiful pixel art

Part 6: Smoothing
Part 7: Textures and blur
Part 8: World of tiles

Foreword

There are many definitions of pixel art, but here we will use this: a pixel art image if it is entirely handmade, and there is control over the color and position of each pixel that is drawn. Undoubtedly, in pixel art, the inclusion or use of brushes or blur tools or degradation machines (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 like this). It is limited to tools like "pencil" and "fill".

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 games (like Super Nintendo or Game Boy). You can also combine the techniques learned here with non-pixel art effects 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 human anatomy or the structure of the arts, and I won't say much about perspective. In this guide, you can find a lot of information about pixel art techniques. In the end, you will need to be able to create characters and scenery for your games, as long as you pay attention, practice regularly, and apply these tips.

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

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 color genius, Lunn, for his knowledge of perspective, and Panda, the stern Ahruon, Dayo, and Kryon for their generous contributions to illustrate these pages.

So, let's 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, is it?) If there's a saying I can't stand, it's "there are no bad tools, only bad workers." In fact, I thought that nothing could be further from the truth (except maybe "what doesn't kill you makes you stronger"), and pixel art, very good proof. This guide aims to familiarize you with the various software used to create pixel art and help you choose the right one.

1.Some old stuff

When choosing software for creating pixel art, people often think: “Choice of software? This is madness! All we need to create pixel art is paint! (apparently a pun, drawing and a program) ” tragic mistake A: I was talking 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, he has a lot of shortcomings. This is an (incomplete) list:

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

In short, you can forget about Paint. Now we will see 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, it's the same thing), which has thousands of possibilities." This can be good or bad: if you already know one of these programs, you can do pixel art (disabling all options for automatic anti-aliasing, and turning off many of the advanced features). 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 would be a waste of time. In short, if you are already 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 pixel art programs than one might think, but here we will consider only the best. They all have very similar characteristics (palette control, preview of repeating tiles, transparency, layers, and so on). Differences they have in convenience ... and price.

Charamaker 1999- good program, but distribution seems to be on hold.

Graphics Gale is a lot more fun and easy to use, and it's priced around $20, which isn't too bad. I will add, the trial version is not limited in time, and comes with enough set to do enough good graphics. Only it doesn't work with .gif, which isn't such a problem since .png is better anyway.

The software most commonly used by pixel artists is ProMotion, which is (clearly) more convenient and faster than Graphics Gale. And yes, she is precious! 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 (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 be aware 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 guide to pixel art written by Phil Razorback of LesForges.org. Many thanks to Phil Razorback for allowing OpenGameArt.org to translate these guides and post them here. (From a translator into Russian: I didn’t ask permission, if anyone has a desire, you can help, I don’t have enough experience in communicating in English, let alone French).

Translator's note from English to Russian

I am a programmer, not an artist or translator, I translate for my friends artists, but what good is lost, let it be here.
Original in French somewhere here www.lesforges.org
French to English translation 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 post, so design suggestions are welcome. Plus, the question is, should the remaining parts be published as separate articles, or is it better to update and supplement this one?

Adobe Photoshop: Draw and animate the character in Pixel technique Art

In this tutorial, you will learn how to draw and animate characters using the Pixel Art technique. For this you only need Adobe program Photoshop. The result is a GIF with a running astronaut.

Program: Adobe Photoshop Difficulty: Beginners, Intermediate Time required: 30 minutes - an hour

I. Setting up the document and tools

Step 1

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

Step 2

In the settings of the Eraser Tool (eraser), select the Pencil Mode mode, and set the rest of the values \u200b\u200bas shown in the picture.

Step 3

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

Please note: The grid will only be visible on the newly created canvas when zoomed in to 600% or more.

Step 4

In Preferences > General (Control-K) change the image interpolation mode to Nearest Neighbor mode. This will allow the boundaries of objects to remain as clear as possible.

In the Units & Rulers settings, set the units for the rulers in pixels Preferences > Units & Rulers > Pixels.

II. Character Creation

Step 1

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

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

Step 2

Scale the thumbnail down to 60 pixels high using the keyboard shortcut Control+T, or the Edit > Free Transform command.

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

Step 3

Zoom in on the thumbnail 300-400% to make it easier to work with, and lower the layer's opacity. Then create a new layer and outline the outlines of the sketch using the Pencil Tool. If the character is symmetrical, as in our case, you can outline only half, and then duplicate and flip the drawn mirror (Edit> Transform> Flip Horizontal).

Rhythm: To draw complex elements break them apart. 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 to the human eye. But, if the form requires it, this rhythm can be broken.

Step 4

When the outline is ready, you can choose the main colors and paint the large shapes. Do this on a separate layer below the outline.

Step 5

Smooth out the outline by drawing a shadow along the inner edge.

Continue adding shadows. As you may have noticed in the course of drawing, some shapes can be corrected.

Step 6

Create a new layer for highlights.

Select the Overlay blend mode from the dropdown list in the Layers panel. Paint with a light color over the areas you want to highlight. Then smooth out the highlight by applying Filter > Blur > Blur.

Finish the picture, and then copy and mirror the finished half of the picture, then merge the layers with the halves to get a whole picture.

Step 7

Now the astronaut needs to add contrast. 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 px up and 2 px to the right. This is a key point in character animation.

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

Step 2

Now bend the character's arms and legs as if he is running.

● Highlight left hand Lasso tool

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

● Select one leg first, and stretch it out a bit. Then, on the contrary, squeeze the second leg so that it feels like the character is walking.

● Using a pencil and eraser, touch up the part of the right arm below the elbow.

Step 3

Now you need to redraw a clean new position of the arms and legs as shown in the second section of this tutorial. This is necessary in order for the image to look sharp, because the transformation greatly distorts the pixel lines.

Step 4

Make a copy of the second layer and flip it horizontally. Now you have 1 basic pose and 2 in motion. Restore the opacity of all layers to 100%.

Step 5

Go to Window > Timeline to display the Timeline panel and click Create Frame Animation.

Pixel graphics (hereinafter referred to as simply pixel art) are becoming more and more prominent these days, especially through indie games. This is understandable, because this way artists can fill the game with a great variety of characters and not spend hundreds of hours modeling three-dimensional objects and hand-drawing complex objects. If you want to learn pixel art, then the first thing you will have to do is learn how to draw the so-called “sprites”. Then, when the sprites no longer scare you, you can move on to animation and even selling your work!

Steps

Part 1

Collecting everything you need

Download good graphic editor. You can, of course, create masterpieces in Paint, but it is difficult and not very convenient. It would be better to work in something like:

photoshop
paint.net
Pixen

Buy a graphics tablet. If you do not like to draw with a mouse, then a tablet and a stylus are what you need. Tablets from Wacom, by the way, are the most popular.

Enable "grid" in your graphics editor. Actually, if your graphics editor does not support grid display, then you should think about finding another program. The grid will allow you to clearly see where and how each individual pixel will be located. As a rule, the rosary is turned on through the “View” menu.
- You may need to tweak the display settings a bit to get each segment of the grid to actually display a pixel. Each program does this differently, so look for appropriate tips.
Draw with a pencil with a brush size of 1 pixel. Any graphics editor should have a Pencil tool. Select it, set the brush size to 1 pixel. Now you can paint... pixelated.

Part 2
Practicing the basics
1. Create a new image. Since you are learning to draw in the style of pixel art, you should not aim at epic canvases. If you remember, in Super Mario Bros. the entire screen was 256 x 224 pixels, and Mario himself fit into a space of 12 x 16 pixels!
  
  Zoom in. Yes, otherwise you just can't see the individual pixels. Yes, you will have to increase it very much. Let's say 800% is quite normal.
  
  Learn to draw straight lines. It seems to be simple, but if you suddenly draw a line 2 pixels thick somewhere in the middle with a trembling hand, then the difference will hit your eyes. Draw straight lines until you have to activate the straight line drawing tool. You must learn how to draw straight lines by hand!
  
  Learn to draw curved lines. In a curved line, there should be, let's say, uniform “line breaks” (which is clearly visible in the figure a little higher). Let's say, starting to draw a curved line, draw a line of 6 pixels, below it - a line of three, below it - a line of two, and below it - from one pixel. On the other side, draw the same thing (mirrored, of course). It is this progression that is considered optimal. Curves drawn in a “3-1-3-1-3-1-3” pattern do not meet pixel art standards.
  
  Don't forget to erase the mistakes. The “Eraser” tool must be set up similarly to a pencil, making the brush size equal to 1 pixel. The larger the eraser, the more difficult it is not to erase the excess, so everything is logical.
Part 3
Creating the first sprite
1. Make a sketch. A sketch on paper is the basis of any sprite, since this way you will be able to understand how everything will look and, if necessary, you can correct something in advance. In addition, you can also trace over a paper sketch (if you still have a tablet).
  - Don't skimp on sketch details! Draw whatever you want to see in the final drawing.
2. Transfer the sketch to a graphics editor. You can trace a paper sketch on a tablet, you can redraw everything by hand, pixel by pixel - it doesn't matter, the choice is yours..
  - When tracing the sketch, use 100% black as the outline color. If anything, you will manually change it later, but for now it will be easier for you to work with black.
3. Refine the outline of the sketch. In this context, you can, of course, say otherwise - erase everything superfluous. What is the point - the outline should be 1 pixel thick. Accordingly, zoom in and erase, erase the excess ... or fill in the missing with a pencil.
  - When working on a sketch, do not get distracted by the details - their turn will come.
Part 4
Coloring the sprite
1. Brush up on color theory. Look at the palette to see what colors to use. Everything is simple there: the farther the colors are from each other, the more they are not similar to each other; the closer the colors are to each other, the more similar they are and the better they look next to each other.
  - Choose colors that will make your sprite both beautiful and not irritating. And yes, pastels should be avoided (unless your entire project is done in this style).
2. Choose multiple colors. The more colors you use, the more "distracting" your sprite will be, so to speak. Look at the pixel art classics and try to count how many colors are used there.
  - Mario - only three colors (if we are talking about classic version), and even those are located on the palette almost close to each other.
  - Sonic - even though Sonic is drawn with more details than Mario, it is still based on only 4 colors (and shadows).
  - Ryu is almost a classic sprite, as they are understood in fighting games, Ryu is large areas painted in simple colors, plus a little shadow for demarcation. Ryu, however, is a little more complicated than Sonic - there are already five colors and shadows.
3. Color the sprite. Colorize your sprite with the Fill tool and don't worry about everything looking flat and lifeless - nothing else is expected at this stage. The principle of the “Fill” tool is simple - it will fill with the color you choose all the pixels of the color you clicked on until it reaches the borders.
Part 5
Adding Shadows
1. Start applying shadows using colors that are slightly darker than the base ones. If the light comes from above, where will the shadow be? That's right, where direct light does not fall. Accordingly, to add a shadow, simply add a few more layers to the sprite with pixels of the appropriate color above or below the outline.
  - If you reduce the "Contrast" setting of the base color by slightly increasing the "Brightness" setting, you can get a good color for rendering the shadow.
  - Don't use gradients. Gradients are evil. Gradients look cheap, hacky, and unprofessional. An effect similar to the effect of gradients is achieved using the thinning technique (see below).
2. Don't forget the penumbra. Choose a color between the base color and the shadow color. Use it to create another layer - but already between the layers of these two colors. You will get the effect of transition from a dark area to a light one.
  
  Draw highlights. A highlight is the place on a sprite where the most light falls. You can draw a highlight if you take a color that is slightly lighter than the base one. The main thing is not to get carried away with glare, it is distracting.
Part 6
Using advanced drawing techniques
1. Do not forget about anti-aliasing (elimination of contour irregularities). Yes, business card pixel art - the visible “pixelation” of an image. However, sometimes you want the lines to look a little less visible, a little smoother. This is where anti-aliasing comes in.
  - Add intermediate colors to the bends of the curve. Draw one layer of intermediate color around the outline of the curve you want to smooth out. If it still looks angular, add another layer, this time lighter.
  - If you want the sprite to not blend into the background, don't use anti-aliasing on the outer edge of the sprite on the outside.
2. Learn how to use selective rendering. What is the point: the outline is drawn in a color similar to those used for filling. It turns out a less “cartoonish” image, and it is precisely due to a more realistic appearance of the contour. Try, say, selectively rendering the skin, while leaving a classic black outline for clothes or objects.

4.7 (93.8%) 158 votes

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

What to draw drawings on the cells

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

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

How to draw drawings by cells

No special tools are needed for coloring drawings by cells, any pencils and pens will do. Monochrome paintings are very cool, but I really want to add colors to my life. In order for the colors to become diverse, go to the stationery store and choose whatever your heart desires, gel pens, oil, ball.

Ballpoint pens for pixel art

Markers for drawings by cells

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

Pencils for drawings by cells

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

Watch a video on how easy it is to draw drawings by cells and how beautiful it can be as a result:

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. The technology of pixel art is very simple, it is dot graphics.

Before proceeding to consider the ways of pixel art, let's go back to childhood in the 80s and 90s. Of course, those who grew up in post-soviet time, remembers 8-bit video games, game graphics, which are built on pixel graphics.

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

Let's take a black and red oil pen, and a checkered notebook sheet.

Let's start with a simple drawing. Let's count the cells, define the contour and decorate according to the colors.

For example, let's draw a heart:

We take a leaf in a cage and a pen with black paste, put 3 dots, as in the figure, the dots mark which cells will be painted over with black.
We draw lines denoting the contours of the picture.
Mark three points on each side, see picture.
Mark the area of the figure with two lines.
Let's put one more point on each side and draw the borders under the top points.
Draw 8 points vertically and 4 points on both sides, as shown in the figure below.
After spending vertical lines, as shown in the figure, we will fully indicate the boundaries of the figure.
In the same way, mark the lower part of the heart on the left and right.
We circle the cells, as in our image.
The next thing we need to do is paint over the inside of the heart with a red pen, leaving the highlight of the light unpainted.
And finally, shade the cells marked with dots with a black pen. Now you have learned how to draw 8-bit pictures.

If it seems to you that large and voluminous pictures are not for you, you should try to draw a photo from the Internet. Scared? Not worth it.

Take

black pen,
pencils,
checkered notebook,
computer,
photo or picture from the internet
photoshop program.

For application three-dimensional drawings we need to count the number of cells that will be painted over. It's pretty hard not to go wrong on large numbers. Also be sure to choose shades of colors similar to the original image.
So let's do it:

I will give one piece of advice that helps me a lot, if you have a color printer, print the picture, if not, it's not scary. Draw a grid of 10 cells with a thicker outline. On the printed sheet, using a ruler and a contrasting pen, if there is nowhere to print, you can open the image in Paint.
Creative success to you.

Nowadays, programs such as Photoshop, Illustrator, Corel facilitate the work of the designer and illustrator. With their help, you can fully work without being distracted by the arrangement of pixels, as was the case at the end of the last century. All necessary calculations are made by software - graphic editors. 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, in order to obtain a unique result and atmosphere in their work.

An example of pixel art. Fragment.

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