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

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

So, what captivates Pixel Art:

1. Perception. Pixel art looks amazing! There is a lot to 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. Ease of learning. Pixel art is one of the easiest digital arts to learn, especially if you're more of a programmer than an artist ;]

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

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

What is Pixel Art?

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

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

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

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

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

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

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

Beginning of work

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

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

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

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

I chose 32x32px not only because it's great for the screen size I chose, but also because 32x32px is also a multiple of 2, which is handy for toy engines, (tile sizes are often multiples of 2, textures align). multiple of 2, etc.

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

How to Draw a Pixel Art Character

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

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

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

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

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

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

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

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

Select by pressing and holding Rectangle tool(Rectangle Tool)

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

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

Applying colors and shadows

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

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

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

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

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

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

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

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

Spice up your palette

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

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

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

Once you find the right one, click OK and reconfigure the Paint Bucket tool. Don't worry, you can then simply uncheck the 'Contiguous' checkbox and when you paint with the new color, all new pixels with the same background color will also be painted over.

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

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 below your character and fill it with different colors. This is necessary in order to make sure that your character will be visible on light, dark, warm and cold backgrounds.

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

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

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

Integrating Pixel Art Drawing into iPhone Games

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

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

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

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

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

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

Hero scale = 2.0;

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

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

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

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

And what's next?

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

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

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

The term "pixel graphics" is not familiar to everyone, nor is it underground slang. What is it that Wikipedia will help to find out. The main thing to understand is that pixel art determined by the way the pattern was created (pixel by pixel), not by the results. Therefore, drawings obtained using filters or special renderers are also not included in it. In the first part of the article, and maybe even a series of articles dedicated to this art, I will show some of the works I liked.

Amazing illustrations, great shading. (Polyfonken's Pixel Art).

The topic is quite broad. There are variations of dice.

The illustrations by Rod Hunt are very colorful and realistic. The artist combines vector graphics with pixel art.

Brazilian-German bloggers Thiago, Pi, Jojo and Mariana present themselves as cuddly laughing pixel characters.

This painting was done by Juan Manuel Daporta using only MS Paint! The work took 8 months. Impressive.

Pixels also live outside of computer screens. It's amazing how well the plots of pixelated pictures are understood.

Space wars in Super Robot Wars style. In the world of pixel art, Roberson has his own unique style.

City of crazy dolls. The illustration, although drawn in vector, still looks like pixel art. Interesting job.

This direction of pixel art is of particular interest to me. These paintings are not drawn on the screen, but on canvas with acrylic paints. This masterpiece was made by Ashley Anderson.

Pixel cities are a separate big topic. There are usually a lot of details and storylines. In this picture there is an embankment and colorful balloons and a sushi bar and even protesters.

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 of contemporary art without exaggeration. Works that take your breath away when viewed.

Pixel Art. The best works and illustrators

City. Author: Zoggles

Fairytale castle. Author: Tinuleaf

medieval village. Author: docdoom

Hanging Gardens of Babylon. Author: Lunar Eclipse

Residential quarter. Author:

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

Pixel art is a special technique of 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. Such an image is characterized by a low resolution, at which each pixel becomes clearly visible. Pixel art is performed for 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 drawing - in other words, its contours. Pixel art is done using lines - straight lines and curves.

straight lines

The rule for drawing lines in pixel art is that they should consist of segments that move to the side by one pixel as you draw. Avoid the main mistake of beginner pixel art artists: 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 patterns of oblique lines:

As can be seen from the figure, all the straight lines presented on it consist of the same 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 are called "ideal" lines in pixel art.

Straight lines can have a different pattern, for example, you can alternate two-pixel segments with a one-pixel segment, 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 draw 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 ones.

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 - smoothly rise and fall just as smoothly. Pixel graphics do not allow kinks.

You are unlikely to be able to draw a perfect curved line with one hand movement without violating any rules, 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 is a certain way of mixing pixels of different colors to create a color transition effect.

The most popular dithering method is arranging pixels in a checkerboard pattern:

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

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

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

Pixel art software

To master the creation of art in a pixel manner, you can use any graphics editor that supports this kind of drawing. All artists work with different programs based on their preferences.

To this day, many people 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 minus - it is rather 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 on the Internet absolutely free, is GraphicsGale. The downside of the program is, perhaps, the fact that it does not support saving pixel art in the .gif format.

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

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

How to Draw Pixel Art in Photoshop

As with traditional fine arts, shape, shadow, and light are important in pixel art, so before you learn how to draw pixel art, take the trouble to familiarize yourself with the basics of drawing - practice drawing with pencil on paper.

Drawing "Balloon"

Let's start with the simplest - draw an ordinary balloon. Create a new file in Photoshop with a screen resolution of 72 dpi. It makes no sense to set 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, move them to the side by a pixel, leaving no kinks and right angles. Then mirror this arc by drawing the top of the balloon.

By the same principle, draw the bottom of the ball and the thread. Fill the ball with red using the Fill tool. Now it remains to add volume - our ball looks too flat. Draw a dark red stripe on the bottom right side of the balloon, and then apply dither to this area. In the upper left corner of the ball, draw a glare of white pixels.

See how easy it is - the ball is ready!

Figure "Robot"

And now let's try to draw a picture in the traditional way, and only then we will clean up those pixels that violate the rules of pixel art.

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

Now you can clean up everything that gets in the way and draw pixels where necessary:

In the same way, draw the robot's lower body. Don't miss the opportunity to draw "perfect" lines in the right places.

Detail the torso of the robot. Many experienced artists advise you to prepare yourself a palette before starting work - a set of colors that you will use when creating work in a pixel manner. This allows you to achieve the greatest integrity of the image. 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. "Decorate" the body of the robot 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. We have it located somewhere above and to the right in front of the robot. Let's draw the chest of our character, adding volume:

On the right side, mark the deepest shadow in the figure, passing along the contour of the torso. 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 supposed to reflect light:

Give the robot's legs a cylindrical look with shadows and lights. In the same way, make holes from the circles on the chest of the robot:

Now let's improve the picture by adding the element of pixel art we considered earlier - dithering - to the shadow areas of the torso.

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

That's it - 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, tell your friends!

Read also on our website:

show more