Simple pixel art. Pixel Art

Pixel Art (Pixel graphics) is very popular for games even these days and there are several reasons for this!

So, what makes Pixel Art captivating:

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

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

To successfully learn, 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 begin, let's clarify what Pixel Art is, because it's not as obvious as you might think. The easiest way to define what is Pixel Art is to define what it is not, namely: anything where pixels are created automatically. Here are some examples:

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

Blur Tool: Defining pixels and replicating/editing them to make new version previous image. Again, not pixel art.

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

Some will say that even automatically generated colors are not Pixel Art, since they require a layer for mixing effects (mixing pixels between two layers according to a given algorithm). But since most devices nowadays deal with millions of colors, this statement can be ignored. However, the use is not large quantity colors is good practice in Pixel art.

Other tools such as (line) or paint bucket tool(Paint Bucket) also automatically generates pixels, but since you can set them to not anti-alias the pixels you fill, these tools are considered Pixel Art friendly.

Thus, we found out that Pixel Art requires a lot of attention when placing each pixel into a sprite, most often manually 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 zoom it in, everything will look okay as long as you use a multiple of two zoom (but of course it won't be sharp).

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

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

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

I chose 32x32 pixels not only because it fits perfectly with 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 multiples of 2, textures are aligned multiple of 2, etc.

Even if the engine you're using supports any image size, you can always try working with an even number of pixels. In this case, if the image needs to be scaled, the size will be divided better, which will ultimately result in better performance.

Drawing a Pixel Art character

Pixel Art is known to be clear and easy to read graphics: you can define facial features, eyes, hair, body parts with just a few dots. However, the size of the image complicates the task: the smaller your character, the more difficult they are to draw. To be more practical, choose the smallest character trait. 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 will see it immediately (it should be second in the list). You'll just need to resize it to 1px (you can click in the Tool Options bar and resize it, or just hold down the [ key).

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

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

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

Note that I also left some white 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.

After you finish the silhouette, it's time . Now you have to be more careful with your pixel placement, so don't worry about clothes, armor, etc. Just 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 the pixels as precisely as you can with a pencil. You will need to configure as shown below:

Select , pressing and holding Rectangle tool (Rectangle Tool)

Go to the tool options panel, in the drop-down list Pick Tool Mode(Path Tracing Mode) select Pixel , change Weight(Thickness) to 1px (if not already done) and uncheck Anti-alias(Smoothing). This is how you should have it:

Notice that I didn't do the bottom outline for the feet. This is optional, as the feet are not such an important part of the legs to highlight, and this will 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 choosing the right colors, they will be very easy to change later, just make sure that each one has its own "color". Use the default colors on the tab Swatches(Window → Swatches).

Color your character like the picture below (but feel free to get creative and use your own colors!)

Please note that I still haven't outlined the clothes or hair. Always remember: save as many pixels as possible from unnecessary outlines!

There is no need to waste time painting every pixel. To speed up your work, use lines for the same color, or Paint bucket tool(Paint Bucket Tool) to fill in the gaps. By the way, you will also have to configure it. Select Paint bucket tool on the toolbar (or just press the G key) and change Tolerance(Tolerance) to 0, and also uncheck Anti-alias(Smoothing).

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

The next step, which will require some knowledge on your part, is dodging and shading. If you do not have knowledge of how to show bright and dark sides, then below I will give you some instructions. If you don't have the time or inclination to study it, you can skip this step and move on to the "Spice Up Your Palette" section, because in the end, you can just make your shading the same as in my example!

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

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

Spice up your palette

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

Photoshop has big choice colors in the standard palette, but should not rely too much on it. The best way to make your own colors is to click 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 (brighter or duller).

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

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

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

Finally, do a background color test: create a new layer under your character and fill it with different colors. This is to ensure that your character will be visible against light, dark, warm and cool backgrounds.

As you can already see, I've turned off anti-aliasing in all the tools I've used so far. Don't forget to do this in other tools too, e.g. Elliptical Marquee(Oval marquee) 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 M) 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 around the perimeter of the transformation frame. To resize the selection while maintaining proportions, hold down the Shift key and drag one of the corner handles.

However, Photoshop automatically smoothes anything edited using the Free Transform so before editing go to Edit → Preferences → General(Ctrl + K) and change Image Interpolation(Image Interpolation) on Nearest Neighbor(Nearest neighbor). In a nutshell, when Nearest Neighbor the new position and size are calculated very roughly, no new colors or opacity are applied and the colors you choose are retained.

Integrating Pixel Art 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 games games on Impact) you learned how to insert them into the canvas and create browser games.

If you are new to Cocos2D, or to iPhone app 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 is facing 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 increase the scale of the pixels in an artificial way so that each pixel would be noticeably distinguishable 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 smooths out the drawing when it scales it. We don't need this, so add the following line:

This line configures Cocos2d to scale images without antialiasing, so our guy still looks "pixelated" Compile, run and... yes, it works!

See 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!

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 on your assets. This is for your own good, especially if you are still a beginner.
• If you REALLY want to emulate a retro look, look to the artwork in 8-bit or 16-bit console games.
• Some styles do not use dark outlines, others do not take into account the effects of light or shadow. It all depends on the style! In our tutorial we didn't draw shadows, but that doesn't mean you shouldn't use them.

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

Adobe Photoshop: Draw and animate a character in Pixel technology Art

In this lesson you will learn how to draw and animate characters using the Pixel Art technique. 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.

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

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

Pixel Art or pixel graphics is digital painting, which is created in raster editors by pixel. Pixel is the smallest graphic element of an image. In other words, this is the point. And all pixel drawings consist of countless accumulations of dots, turning out slightly uneven, as if poorly drawn. But this is the beauty of such paintings.

A little bit of history

What programs can you use to create modern pixel art?

There are many free raster editors. But most often called Microsoft Paint and Adobe Photoshop. True, Paint is considered a less convenient tool for creating pixel art than Adobe Photoshop. Why? In this program:
it is very difficult to achieve evenness and symmetry of images;
when saving them in jpg format, severe color distortion occurs;
It's difficult to draw shadows and highlights.
Therefore, they try to give preference to Adobe Photoshop. This program has much more working capabilities than Paint. What allows you to draw individual characters With simple design, but whole paintings. In addition, the pixel art itself is easier and faster to edit here. Yes, and you can transfer color transitions in Adobe Photoshop smoothly and naturally.

How to Avoid Kinks in Pixel Art

Pixel art is a collection of pixels that are square or rectangular "dots". When an image is drawn from such “points”, it becomes angular and the smoothness in the lines disappears. On the one hand, this is business card Pixel Art, but on the other hand, I want more smoothness, which will make the picture neat and attractive to the user. This problem in the language of pixel artists they are called kinks or “jaggies”.
Jaggies are pieces that give any lines a jagged look. They are usually disposed of in one of the following ways:
increase the stray line segment by 2, 3 or more pixels in length;
reduce the length of the pixels themselves in the prominent area;
construct a new line section from several single pixels;
add single pixels to the area with a break between longer “dots”, etc.
To properly eliminate kinks, you need to remember the main rule: the length of the elements is curved line should decrease or increase gradually. You also need to remember that shifting a line segment by two or more pixels in height leads to the destruction of smoothness.
Therefore, constant drawing practice is needed. And as the simplest and visual aid To help avoid kinks, you can use a set of inclined straight lines.

How to get shadow in Pixel Art

Another important point in pixel art, this is their volume. It, as in other graphics options, is achieved through highlights and shadows. To create a shadow in pixel art you will need a smooth transition from light to dark tone or from one color to another. To achieve this effect, mixing technology is often used - dithering. In other words, at the border of two colors they are mixed in a checkerboard pattern. This method arose against the background of a shortage of flowers. By mixing two colors in a checkerboard pattern, it was possible to obtain a third, which was not in the palette.
However, after the palette expanded significantly, dithering technology still remained in demand. But you need to remember that a one-pixel wide transition from one color to another does not look good. It turns out just a comb. That's why
the minimum blending zone must be at least two pixels. And the wider this transition, the better.
Also, when creating a shadow:
It is important to determine at what angle and from which side the light will fall on the object. This will make the drawing “alive” and also help you understand where to draw the shadow. For example, if the light comes from the right, then the shadow areas will be located on the left, etc.;
you need to use colors much darker than the base ones. Those. the shadow should be depicted using more dark colors than the shaded area itself. For example, if an object is red, then its shadow will be burgundy or dark brown;
don't forget about partial shade. For this purpose, a shade is selected that is between the base color and the shadow color in the palette. This shade is placed between layers of these two colors. The result is an effect smooth transition from a dark area to a lighter area.

How to get highlights in pixel art

A highlight, like a shadow, gives volume to the objects being drawn. It is always on the side where the light falls. But if the object is intended to have a glossy surface, for example, a porcelain cup, a steel sword, etc., then a highlight will also be needed in a shaded area.
To create a highlight in the area where the light falls, you need to take a paint that will be much lighter than the main one. Just don’t be zealous about the brightness of this spot - it may not turn out natural. Very often a highlight is depicted in white without transitions. This does not happen in nature. And the object will look flat.
To create a highlight from the side of the shadow, you will need a color lighter than the one with which the shadow itself is applied. And in this case, a smooth transition is also necessary, which can be achieved by using several shades at once.
To realize all this, of course, you need practice. And it’s best to start with simple objects.