Adobe Photoshop: Draw and animate a character using Pixel Art technique

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

● Select the left hand with the 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.

4.7 (93.8%) 158 votes

Drawings by cells or pixel art are a very popular form of 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. 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 its pale green color, 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, 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 do not 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. To make your colors more varied, go to a stationery store and choose whatever your heart desires, gel pens, oil pens, ballpoint pens.

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-based; 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 have been drawing with wooden ones since 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 for drawing. Watercolor pencils are 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 start looking at 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:

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

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:

1. 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.
   
   
2. Draw lines indicating the contours of the picture.
   
   
3. Mark three points on each side, see figure.
   
   
4. We mark the area of ​​the drawing with two lines.
   
   
5. Let's put one more point on each side and draw boundaries under the top points.
   
   
6. Let's draw 8 points vertically and 4 points on both sides, as shown in the figure below.
   
7. By drawing vertical lines, as shown in the figure, we will completely indicate the boundaries of the drawing.
   
8. In the same way, mark the lower part of the heart on the left and right.
   
   
9. We outline the cells as in our image.
   
   
10. 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.
    
    
11. 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.

To apply three-dimensional drawings, we need to count the number of cells that will be painted over. 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.

" itemprop="image">

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

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

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

Tools

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

How to draw pixel art in Photoshop

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

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

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

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

Lines

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

Straight lines

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

Curved lines

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

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

Conceptualization

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

Topics for Thought

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

Let's try!

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

Circuit

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

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

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

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

Step one: rough outline

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

My sketch almost completely coincided with what I had planned.

Step Two: Polish the Outline

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

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

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

Color

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

HSB color model

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

Hue– Hue is what we used to call color.

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

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

Choosing colors

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

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

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

Applying colors

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

Shading

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

Step one: choose a light source

First we choose a light source. If your sprite is part of a larger fragment that has its own lighting sources, such as lamps, torches, and so on. And they can all have different effects on how the sprite looks. However, choosing a distant light source like the sun is a great idea for most pixel art. For games, for example, you will need to create the brightest possible sprite, which can then be adjusted to the environment.

I usually opt for a distant light somewhere up in front of the sprite, so that only the front and top of the sprite are illuminated and the rest is shaded.

Step two: direct shading

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

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

Step Three: Soft Shadows

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

Step four: illuminated areas

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

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

A few useful rules

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

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

Dithering

Preserving colors is something that pixel art creators really need to pay attention to. Another way to get more shadows without using more colors is called dithering. Just like traditional painting uses “hatching” and “crosshatching”, that is, you literally get something in between two colors.

Simple example

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

Advanced example

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

Application

Dithering can give your sprite that wonderful retro look, as many early video games made heavy use of the technique due to the small number of color palettes available (if you want to see plenty of examples of dithering, check out the games developed for the Sega Genesis). I myself do not use this method very often, but for educational purposes, I will show how it can be applied on our sprite.

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

Selective contouring

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

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

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

Compare this with the original:

1. Smoothing

The way smoothing works is simple: adding intermediate colors to the edges to make them look smoother. For example, if you have a black line on a white background, then small gray pixels will be added to its breaks along the edge.

Technique 1: Smoothing out kinks

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

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

Technique 2: Rounding the bumps

Technique 3: erasing line endings

Application

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

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

Why do you need to do this manually?

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

Finishing

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

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

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

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

Full progress:

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

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

P.S.

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

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: Identifying pixels and replicating/editing them to make a new version of a 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, using few colors is a 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 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 OK 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 game element, should be, 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. 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 in grey:

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(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 on your part, is dodging and shading. If you do not have the knowledge of how to show the light and dark sides, then below I will give you some short 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 a large selection of colors in its standard palette, but you shouldn't rely on it too much. 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!

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!

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

Pixel Art (Pixel Art) - translated from English as pixel art. A pixel, in turn, is the smallest graphic element of a digital image.

So Pixel Art literally means the art of drawing with pixels.

Just for clarity, let's look at this example:

Owlboy (pixel art game)

This is what games with Pixel Art style graphics look like.

Very often, such graphics are used in indie games because they have a very recognizable computer gaming style.

However, Pixel Art is not only about graphics, sprites and pictures for games, this is a whole direction of digital and graphic art.

Beautiful pictures can be drawn using pixel art:

You won't confuse this retro graphic style with anything.

Some paintings in this style are quite worthy of taking a place on your desktop.


There are also very cool artists who work in this style.

Look at this picture. Each pixel here was drawn separately and manually. It’s like putting together a mosaic as they did before, and they still do it now.

If we enlarge this picture, we can see how everything is done up close:

The unique style of pixel art is that there are fairly clear color transitions and no anti-aliasing. For example, let's take another work in digital graphics of a fairly average level, look at this one drawing of a girl with glasses(18+) on the blog www.econdude.pw.

This is a drawing with a computer mouse in the SAI2.0 program.

However, if you zoom in on this image, you can see the anti-aliasing:

There are no clear transitions of colors and shades, but in pixel art the transitions are clear.

For example, look at how you can make transitions between colors in pixel art:

This is an approximate image; if you look at it from afar with high resolution, the color transition will be quite smooth, but the clarity and consistency of the style is visible here.

Here's another example, this is a pretty classic pickle art style drawing:

http://www.gamer.ru/everything/pixel-art-dlya-nachinayuschih

When you get close, the pictures don't seem very beautiful, but if you look at pixel art from afar, with higher resolution, it can look wonderful.

Can you imagine the great work such artists do?

Sometimes they say that Pixel Art is done this way because it’s cheaper, they say that indie developers simply don’t have the resources to create modern 3D graphics, so they use the simplest thing they can think of, drawing in basic graphic editors pixels.

However, anyone who has drawn anything in the Pixel Art style will tell you that this is almost the most expensive graphics style in terms of resources (time, first of all).

Animation in the Pixel Art style is generally hellish work.

http://www.dinofarmgames.com/a-pixel-artist-renounces-pixel-art/

Therefore, it still needs to be proven that Pixel Art is a “lazy style”, I would even say that on the contrary, it is not the least lazy graphics style.

However, anyone can learn to draw something simple in the Pixel Art style, and you don’t need any special programs, just a simple graphics editor.

If you want to learn how to draw in this style, you, as in any other case, need a lot of practice, and you can start, for example, with articles on Habré: Pixel art course

There you will also find the basic principles of pixel art.

Here is one example of how to draw pixel art (accelerated video - speed drawing) at the beginner level; you can learn how to draw like this in literally a week:

Pixelart:: drawing a spaceship

Sometimes they make some really crazy drawings in this style, you can’t even believe that a person drew it and you want to know how much time was spent on it. Example:

https://www.youtube.com/watch?v=vChMzRnw-Hc

See this picture of Sarah Carrigan from StarCraft? What do you think this is and how is it made?

This man built it from blocks in the game Minecraft, the work took 23 weeks.

Looking closer, you can see that these are all separate blocks.

Formally, this is no longer pixel art, but even “minecraft block art,” but the essence of the style remains the same and this is the largest pixel art drawing and a world record, according to the author.

In fact, if you look closely at any photo or picture, it is obvious that it also consists of pixels, like any image in general. But the whole difference is that pixel art is created by hand, pixel by pixel.

Another example, artists and animators Paul Robertson and Ivan Dixon created this:

SIMPSONS PIXELS

It feels like a huge amount of work, and even if you used some additional tools (there are filters that turn pictures into pixel art), it would take a very long time.

Personally, I think that pictures in the style of Pixel Art are real modern art in the best sense of the word.

Each Pixel Art picture has a very clear value and it is visible and felt.

Even a person who doesn’t understand this well can appreciate this.

However, unfortunately, this genre of art is not very popular and is now considered outdated, and the return to it in recent years in the form of many games from steam in the style of pixel art is also beginning to bother people. Although I personally think that this retro graphic style is already a classic, and a true classic will never die.