If you loved playing with Lego as a child (or continue to play with it even as an adult), you will probably be interested in isometric pixel art. It can be technical and more like science than illustration. But in such art there is no 3D perspective; you can move elements environment with maximum simplicity.

We'll create the character as a logical starting point for the pixel art, as it will help determine the proportions for most of the other items we might create. However, first you need to learn some basics of isometric pixel art, and then move on to creating a character; if you don't want to learn the basics and draw a cube, skip to step 3. Now let's get started.

1. Pixel lines

These lines are the basis for the most common (and interesting) style of isometric pixel art, the style we will use in this tutorial:

They represent two pixels along for every pixel down. These lines look relatively soft and are used for square surfaces:

The most commonly used line structures (like the one below) will work well, but the drawing will become more angular and rougher with each increment you increase:

For contrast, here are some unevenly structured lines:

Very angular and don't look

Beautiful. Avoid using them.

2. Volumes

Our character won't exactly follow the laws of isometry, so let's first create a simple cube to decide on the proportions.

Create a new document in Photoshop with resolution 400 x 400 px.

I like to open an additional window for the same file using the menu Window > Arrange > New Window/lessons.(Window > Arrange > New Window…). This allows, working at magnification 600% monitor the results in the zoom window 100% . Using the grid is up to you, but sometimes I find it more intrusive than helpful.

Let's zoom in on the document and create one of the lines 2:1

I prefer to use 5% gray instead of black, so that you can then add shadows (black and low opacity) and be able to select each color separately using the magic wand.

There are several ways to draw a line:

1. Using Line tool(Line Tool) with mode Pixels(Pixels), unchecked Smoothing(Anti-alias) and thickness 1px. While drawing, the angle tooltip should show 26.6°. In fact, the Line tool cannot be called convenient; it creates straight lines, if the angle is not exact.

2. You need to create a selection 20 x 40 px, then select K pencil(Pencil Tool) thickness 1px and draw a dot in the lower left corner of the selection, then hold down the key Shift click in the upper right corner. Photoshop will automatically create new line between two points. If you practice, you can create straight lines in this way without highlighting.

3. You need to draw two pixels with a pencil, select them, click Ctrl + Alt, then drag the selection to a new location so that the pixels meet at the corners. You can also move the selection using the arrow keys on your keyboard while holding down Alt. This method is called Alt-offset(Alt-Nudge).

So we created the first line. Select it and move it as in step 3 or just copy and paste, moving the new layer down. After that, flip the second line horizontally through the menu Edit > Transform > Flip Horizontal(Edit > Transform > Flip Horizontal). I use this feature so often that I even created a keyboard shortcut for it!

Now let's combine our lines:

Then, Alt-Offset again, flip the copy vertically, and merge the two halves to complete our surface:

It's time to add the "third dimension". Alt-offset the square surface and move it to 44px down:

Tip: If you hold down the arrow keys while moving Shift, the selection will move to 10 pixels instead of one.

To make a neater cube, let's soften the corners by removing the leftmost and rightmost pixels from the squares. After that add vertical lines:

Now remove the unnecessary lines at the bottom of the cube. To start coloring our figure, select any color (preferably a light shade) and fill the top square with it.

Now increase the brightness of the selected color by 10% (I recommend using the HSB sliders on the control panel) to paint lighter corners along the front of our colored square. Because we cropped the cube a little, these light lines will look nicer sitting above the black edges (instead of replacing them) like in the image below:

Now we need to remove the black edges. Use the trick from the second line drawing method for the eraser (which should be set to normal Eraser tool(Eraser Tool), mode Pencil(Pencil Mode), thickness 1px).

Select the color of the top square using Pipettes(Eyedropper Tool). To quickly select this tool, press the Alt. Use the resulting eyedropper color to fill the vertical line down the middle of the cube. After that, reduce the color brightness by 15% and fill the left side of the cube with the resulting color. Reduce brightness further 10% for the right side:

Our cube is complete. It should look clean and relatively smooth when zoomed in 100% . We can continue.

3. Add a character

The character's style can be completely different, you are free to change the proportions or elements as you wish. Typically I go for a thin body and a slightly larger head. The character's thin body helps keep the lines straight and simple.

It would be logical to start with the eyes. If we were strict with the isometric angles, then on the face one eye should be lower, but on a small scale we can neglect this feature to make the faces of the characters more pleasant. This will make the drawing neat even despite the size.

We make the character small, because after a while you may want to add a car, a house, an entire square or even a city to him. Therefore, the character must be one of the most small elements in illustration. It's also worth considering graphical efficiency; try to make the character as attractive as possible with minimum quantity pixels (large enough to depict facial features). In addition, small objects are much easier to draw. The exception is when you only want to show a character, their emotions, or their resemblance to someone.

Let's create a new layer. The eyes only need two pixels - one for each eye, with a blank pixel in between. Skipping one pixel to the left of the eyes, add a vertical line:

Now add another layer and draw a horizontal strip of two pixels, this will be the mouth. Use the arrow keys on your keyboard to move around and when you find the perfect position, move the layer down. Do the same with the chin, it should just be a longer line:

Draw in the hair and top of the head, then soften the corners. You should get something similar to this:

Now leave a blank pixel next to the second eye, add sideburns (which will also help draw the character's ears) and a few more pixels above them all the way to the hairline. Then leave another empty pixel, this is where the ear will start and a line marking the end of the head. Go ahead and soften the angles where the lines meet:

Add a pixel for the top of the ear and change the shape of the head if you like; heads are usually drawn already in the neck area:

Draw a line from the chin - this will be the chest. The beginning of the neck will be in the ear area, a few pixels down and a couple of pixels diagonally so that our character’s shoulders are visible:

Now, at the place where the shoulders end, add a vertical line of length 12 pixels to make the outside of the hand, and the inside will be two pixels to the left. Connect the lines at the bottom with a couple of pixels to make a hand/fist (there's no detail in this case, so ignore that element) and just above where the hand ends, add a line 2:1 , which will act as a waist, then draw in the chest line and get a completed upper body. The character's other arm is not visible, but it will look normal since it is covered by the torso.

You should end up with something like this:

Of course you can use any proportions you like; I prefer to draw different options next before deciding which is best.

Now for the lower torso we will add some more vertical lines. I like to leave 12 pixels between the soles and waist. Legs are very easy to draw, you just need to make one leg a little longer, which will allow the character to look more voluminous:

Now we'll add color. Finding a good skin color is always difficult, so if you want to use the same one as in this tutorial, its code #FFCCA5. Selecting colors for the remaining elements should not be a problem. After this, determine the length of the sleeves, the position of the shirt cut, and its style. Now add a dark stripe to separate the shirt from the body. I prefer to keep all decorative elements lighter than black (especially when many elements are on the same level, such as from a shirt to leather or pants). This allows you to get the necessary contrast without the image being too rough.

You can add lighting effects to almost every color zone. Avoid too large quantity shadows or use of gradients. Several pixels more ( 10% or 25% ) a light or dark color is enough to make the elements look three-dimensional and remove the flatness of the illustration. If you want to add a pop of color to an area that already has 100% brightness, try reducing its saturation. In some cases (for example, when drawing hair) this may become in a good way change shades.

There are many hair options you can try. Here are some ideas:

As you continue to create characters, little things like clothing style, sleeve length, pants length, accessories, clothing, and skin color will come in handy for variety.

Now all that remains to be done is to place both elements together and evaluate how they look in one setting:

If you want to export your creation, PNG is the ideal format.

That's it, job done!

I hope this lesson wasn't too confusing. I think I talked about maximum quantity tips and aesthetic techniques. You can freely expand your isometric pixel world - buildings, cars, interiors, exteriors. Doing all this is possible and even interesting, although not so easy.

Translator: Shapoval Alexey

In this tutorial you will learn how to turn a photo of a person into pixel art as fictional character arcade game since the early 90s.
James May - aka Smudgethis - developed this style in 2011 for music video for a dubstep rock act. Nero's first hit, Me & You - where he created an animation to show old game featuring Nero's two members. The game was a 2D rhythm platformer with 16-bit graphics similar to Double Dragon, but far superior to 8-bit retro classics like Super Mario Bros.
To create this style, the characters still need to be blocky, but more complex than the older games. And while you'll need to use a limited color palette to achieve the look, remember that these games still had 65,536 colors.
Here James shows you how to create a character from a photo using a simple color palette and the Pencil tool.
Just like the animation guide, you will also need a photo of the person. James used a photo of a punk that is included in the project files for this tutorial.
Once complete, check out this 16-bit After Effects animation tutorial where James shows you how to take this character in AE, animate him, and apply retro game effects.

Step 1

Open the Animation Guide (16 bit).psd and 18888111.jpg (or photo of your choice) to use as a base for the character. A full-length profile photo will work best and will help with getting color palettes and styles for your 16-bit figure.
The animation tutorial has several poses on individual layers. Choose the one that best matches the pose in your photo - since we don't have legs in the frame, I went with the standard pose on level 1.

Step 2

Using the Rectangular Marquee Tool (M), select the head from your photo and copy (Cmd /Ctrl + C) and paste it (Cmd /Ctrl + V) into the Animation Guide (16 bit).psd.
Scale the image to fit, proportionately. You will notice that as the PSD dimensions are very small, the image will instantly start drawing a pixel.

Step 3

Create a new layer and draw the outline with a single pixel black pencil (B), using the animation guide provided in it and the photo as a base. \n
The supplied guide helps develop a range of characters from larger boss figures or slimmer female ones. This is a rough guide for composing and animating my pixel art characters.

Step 4

Using the Eyedropper Tool (I), sample the darkest area of ​​the skin tone in the photo and create a small square of color. Do this three more times to create a four-color skin tone palette.
Create another layer below the outline layer and use a one-pixel brush and a four-color color palette to shade the image (again, using the photo as your guide). \n
It's best to store all the elements of your artwork or different layers as this makes it easy to reuse them on other shapes. This is especially useful for baddies, since most 16-bit games use very similar numbers. For example, one buddy might have a red shirt and a knife, while a later one is identical except for a blue shirt and a gun.

Step 5

Repeat this process for other parts of the figure, shading the fabric to match other elements in the original photo. Be sure to continue sampling with the Eyedropper tool to create color palettes first, as this provides a consistent set of colors that looks great and fits the relatively limited color palette of 16-bit games.

Step 6

Add data to enhance your character with shades, tattoos, earring, etc. Dine here and think about how you want your character to appear in the gaming environment. Perhaps they could use an ax or have a robotic arm?

Step 7

To animate your character, repeat the previous steps using the other five layers of the animation guide. This process can take some time to master and create seamless results, but short cuts can be made by reusing elements from previous frames. For example, in this six-frame sequence, the head remains unchanged.

Step 8

To check that the animation sequence is in order, open the Animation panel in Photoshop and make sure that only the first frame of the animation is currently in progress. You can add new frames and turn layers on and off to make your animation, but most in a fast way is to use the “Make Frames from Layers” command in the panel pop-up menu (top right).
The first frame is an empty background, so select it and click on the panel's trash icon (bottom) to delete it.

Pixel-level drawing has its niche in fine arts. With the help of simple pixels, real masterpieces are created. Of course, you can create such drawings on a sheet of paper, but it is much easier and more correct to create pictures using graphic editors. In this article we will analyze in detail each representative of such software.

The world's most popular graphics editor that can work at the pixel level. To create such pictures in this editor, you just need to perform a few preliminary setup steps. Here is everything an artist needs to create art.

But on the other hand, such an abundance of functionality is not needed for drawing pixel art, so there is no point in overpaying for the program if you are going to use it only for a specific function. If you are one of such users, then we advise you to pay attention to other representatives who are focused specifically on pixel graphics.

PyxelEdit

This program has everything you need to create such paintings and is not oversaturated with functions that the artist will never need. Setting up is quite simple; the color palette allows you to change any color to the desired tone, and free movement of windows will help you customize the program for yourself.

PyxelEdit has a feature for setting tiles on the canvas, which can be useful when creating objects with similar content. The trial version is available for download on the official website and has no restrictions on use, so you can try the product before making a purchase.

Pixelformer

In appearance and functionality, this is the most ordinary graphic editor, only it has several additional features to create pixel images. This is one of the few programs that are distributed absolutely free.

The developers do not position their product as suitable for creating pixel art, they call it an excellent way to draw logos and icons.

GraphicsGale

In almost all such software they try to introduce a picture animation system, which most often turns out to be simply unusable due to limited functions and incorrect implementation. GraphicsGale is not so good with this either, but at least this function can work normally.

As for drawing, everything here is exactly the same as in the bulk of editors: basic functions, large color palette, the ability to create multiple layers and nothing extra that could interfere with your work.

Charamaker

Character Maker 1999 is one of the oldest such programs. It was created to create individual characters or elements, which would then be used in other animation programs or implemented into computer games. Therefore, it is not very suitable for creating paintings.

The interface is not very good. Almost none of the windows can be moved or resized, and the default layout isn't very good. However, you can get used to it.

Pro Motion NG

This program is ideal in almost everything, starting with a well-thought-out interface, where it is possible to move windows independently of the main one to any point and change their size, and ending with an automatic switch from an eyedropper to a pencil, which is simply an incredibly convenient feature.

Otherwise, Pro Motion NG is just good software for creating pixel graphics of any level. The trial version can be downloaded from the official website and tested to decide whether to further purchase the full version.

Aseprite

Can rightfully be considered the most convenient and beautiful program to create pixel art. The interface design alone is worth it, but that’s not all the advantages of Aseprite. There is the ability to animate a picture, but unlike previous representatives, it is implemented competently and convenient to use. There is everything you need to create beautiful GIF animations.

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

So, what captivates Pixel Art:

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 in between. 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, 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 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!

Getting started

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

Each cell is 32x32 pixels!

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 makes it difficult: the smaller your character, the harder 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:

ey! I'm pixelated!!

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:

You don't need to be a pro at this stage

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

A good, contrasting color improves the readability of your asset!

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

Use the same light source for the entire asset

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:

Use the same light source when shading

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!

Uncheck "Contiguous" to fill selected pixels with the same color

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 color test Background: 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, without applying any new colors or opacity and keeping the colors you chose.

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 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 anti-aliasing, so our guy still looks "pixelated" Compile, run and... yes, it works!

Check out 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!

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. To do this, you only need Adobe Photoshop. The result will be a GIF with a running astronaut.

Program: Adobe Photoshop Difficulty: beginners, intermediate level Time required: 30 min – hour

I. Setting up the document and tools

Step 1

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

Step 2

In the Eraser Tool (eraser) settings, select Pencil Mode, and set the remaining values ​​as shown in the picture.

Step 3

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

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

Step 4

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

In the Units & Rulers settings, set the ruler units to pixels Preferences > Units & Rulers > Pixels.

II. Character Creation

Step 1

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

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

Step 2

Reduce the scale of the sketch to 60 pixels in height using the keyboard shortcut Control+T, or Edit > Free Transform.

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

Step 3

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

Rhythm: To draw complex elements, break them into parts. When the pixels (dots) in a line form a "rhythm" such as 1-2-3, or 1-1-2-2-3-3, the sketch looks smoother for human eye. But, if the form requires it, this rhythm can be disrupted.

Step 4

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

Step 5

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

Continue adding shadows. As you may have noticed as you draw, some shapes can be corrected.

Step 6

Create a new layer for the highlights.

Select the Overlay blend mode from the drop-down list in the Layers panel. 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 original layer's opacity by 50% so 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.