Cool pixel art. Adobe Photoshop: Draw and Animate a Character with Pixel Art

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

Foreword

There are many definitions of pixel art, but here we will use this: a pixel art image if it is entirely handmade, and there is control over the color and position of each pixel that is drawn. Undoubtedly, in pixel art, the inclusion or use of brushes or blur tools or degradation machines (degraded machines, not sure), and other software options that are “modern” are not used by us (actually put at our disposal means “at our disposal” , but logically it seems more correct like this). It is limited to tools like "pencil" and "fill".

However, you can't say that pixel art or non-pixel art graphics are more or less beautiful. It's fairer to say that pixel art is different and better suited for retro games (like Super Nintendo or Game Boy). You can also combine the techniques learned here with non-pixel art effects to create a hybrid style.

So, here you will learn the technical part of pixel art. However, I will never make you an artist...for the simple reason that I am not an artist either. I won't teach you human anatomy or the structure of the arts, and I won't say much about perspective. In this guide, you can find a lot of information about pixel art techniques. In the end, you will need to be able to create characters and scenery for your games, as long as you pay attention, practice regularly, and apply these tips.

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

In the end, I have to thank all the artists who joined me in creating this guide in one way or another: Shin, for his dirty work and line art, Xenohydrogen, for his color genius, Lunn, for his knowledge of perspective, and Panda, the stern Ahruon, Dayo, and Kryon for their generous contributions to illustrate these pages.

So, let's get back to the point.

Part 1: The Right Tools

Bad news: you won't draw a single pixel in this part! (And that's no reason to skip it, is it?) If there's a saying I can't stand, it's "there are no bad tools, only bad workers." In fact, I thought that nothing could be further from the truth (except maybe "what doesn't kill you makes you stronger"), and pixel art, very good proof. This guide aims to familiarize you with the various software used to create pixel art and help you choose the right one.

1.Some old stuff

When choosing software for creating pixel art, people often think: “Choice of software? This is madness! All we need to create pixel art is paint! (apparently a pun, drawing and a program)” Tragic mistake: I talked about bad tools, this is the first one. Paint has one advantage (and only one): you already have it if you're running Windows. On the other hand, it has a lot of shortcomings. This is an (incomplete) list:

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

In short, you can forget about Paint. Now we will see the real software.

2. In the end...

People then think, "Okay, Paint is too limited for me, so I'll use my friend Photoshop (or Gimp or PaintShopPro, it's the same thing), which has thousands of possibilities." This can be good or bad: if you already know one of these programs, you can do pixel art (disabling all options for automatic anti-aliasing, and turning off many of the advanced features). If you don't already know these programs, then you will spend a lot of time learning them, even though you don't need all of their functionality, which would be a waste of time. In short, if you've been using them for a long time, you can create pixel art (I personally use Photoshop out of habit), but otherwise, it's much better to use programs that specialize in pixel art. Yes, they exist.

3. Cream

There are many more pixel art programs than one might think, but here we will consider only the best. They all have very similar characteristics (palette control, preview of repeating tiles, transparency, layers, and so on). Differences they have in convenience ... and price.

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

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

The software most commonly used by pixel artists is ProMotion, which is (clearly) more convenient and faster than Graphics Gale. And yes, she is precious! You can buy the full version for a modest amount... 50 euros ($78).
Let's not forget our Mac friends! Pixen is a good program available for the Macintosh and it's free. Unfortunately I can't tell you more because I don't have a Mac. Translator's note (French): Linux users (and others) should try , and GrafX2 . I urge you to try them all in demo versions and see which suits your convenience. In the end it's a matter of taste. Just be aware that once you start using a program, it can be very difficult to switch to something else.

To be continued…

Translator's notes from French to English

This is a great guide to pixel art written by Phil Razorback of LesForges.org. Many thanks to Phil Razorback for allowing OpenGameArt.org to translate these guides and post them here. (From a translator into Russian: I didn’t ask permission, if anyone has a desire, you can help, I don’t have enough experience in communicating in English, let alone French).

Translator's note from English to Russian

I am a programmer, not an artist or a translator, I translate for my friends artists, but what good is lost, let it be here.
Original in French somewhere here www.lesforges.org
French to English translation here: opengameart.org/content/les-forges-pixel-art-course
I translated from English because I don't know French.
And yes, this is my first post, so design suggestions are welcome. Plus, the question is, should the remaining parts be published as separate articles, or is it better to update and supplement this one?

"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, came 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 used to 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 simple pixel art concepts, but has been extended many times, so it differs significantly from the original version. There are many tutorials on the web on the same topic, but they all seem too complicated or lengthy to me. Pixel art is not science. You don't have to calculate vectors while creating pixel art.

Tools

One of the main advantages of creating pixel art is that you don't need any advanced tools - the graphic editor installed on your computer by default should be enough. It is worth mentioning that there are programs designed specifically for creating pixel art, such as 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 it costs a lot, contains a lot of useful tools for creating art, some of which are very useful for pixelation.

How to Draw Pixel Art in Photoshop

While using Photoshop, your main weapon will be the Pencil Tool (B key), which is an alternative to the Brush Tool. Pencil allows you to color individual pixels without overprinting colors.

Two more tools will come in handy: the Selection (M key) and the 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 the selected objects or exclude them from the current selection list. This is necessary by the way when you need to select uneven objects.

You can also use an eyedropper to transfer colors. There are a thousand reasons why it's important to preserve colors in pixel art, so you'll need to take a few colors and use them over and over again.

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

lines

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

straight lines

I know what you were thinking: everything is so simple here that it makes no sense to delve into something. But when it comes to pixels, even straight lines can be a problem. We need to avoid jagged parts - small fragments of the line that make it look jagged. They appear if one of the parts 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, the neat line has intervals 6 > 3 > 2 > 1, but the 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

To get started, you need a good idea! Try to visualize what you are going to do in pixel art - on paper or just in your mind. Having an idea about the drawing, you can concentrate on the pixelation itself.

Topics for reflection

• What will this sprite be used for? Is it for the website or for the game? Will it be necessary to make it animated later? If yes, 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 details to it as you need. Therefore, decide in advance what exactly this sprite is needed for and select the optimal parameters.
• What are the restrictions? Earlier I mentioned the importance of preserving colors. The main reason is the limited palette of colors due to system requirements (which is extremely unlikely in our time) or for compatibility. Or for precision, if you're emulating a particular style of C64, NES, and so on. It is also worth considering the dimensions of your sprite and whether it stands out too much against the background of the necessary objects.

Let's try!

There are no restrictions in this tutorial, but I wanted to make sure that my pixel art is big enough so that you can see in detail what happens in each of the steps. To this end, I decided to use as a model Lucha Lawyer, a character from the world of wrestling. He would fit perfectly into a fighting game or a dynamic action movie.

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 also a little dark. Later in the tutorial, I'll show you how to change the color of the outline to increase realism.

There are two approaches to creating an outline. You can draw the path freehand and then tweak it a bit, or draw everything one pixel at a time. Yes, you understood correctly, we are talking about a thousand clicks.

The choice of method depends on the size of the sprite and your pixel 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 visually and explain what happened.

Step One: Rough Outline

Using your mouse or tablet, draw a rough outline for your sprite. Make sure it is NOT TOO raw, i.e. it looks something like how you see your final product.

My sketch almost completely coincided with what I had planned.

Step two: polish the outline

Start by magnifying the image by 6 or 8 times. You must clearly see every pixel. And then, clean up the outline. In particular, pay 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 small details that we missed in the first step.

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

Simplify your outline as much as possible. We will deal with the details later, now you need to work on finding large pixels, such as, for example, muscle segmentation. Things don't look very good right now, but have a little patience.

Color

When the outline is ready, we get a kind of coloring that needs to be filled with colors. Paint, fill and other tools will help us with this. Matching 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, assembled from the words "Hue, Saturation, Brightness". It is just one of many computer color models (or numerical representations of color). You have probably heard of other examples like RGB and CMYK. Most image editors use HSB for color selection, so we'll focus on it.

Hue- Hue - 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 “turn gray”.

brightness- light that emits color. For example, for black, 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:

• Soft and desaturated colors look more realistic than cartoony.
• Think of the color wheel: the farther two colors are on it, the worse they blend. 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 solely from combinations of brown and red.

Applying flowers

Applying color is very easy. If you're using Photoshop, then just select the desired fragment, select it with a magic wand (W key), and then fill it with the main color (Alt-F) or secondary color Ctrl-F).

shading

Shading is one of the most important parts of the quest to become a pixelated 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 lights, like lamps, torches, and so on. And all of them can affect how the sprite looks in different ways. 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 is lit, and the rest is shaded.

Step Two: Shading Directly

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

Recall that flat things cannot cast a shadow. Take a piece of paper, crumple it up and roll it across the table. How do you know it's not flat anymore? You just saw the shadows around him. Use shading to emphasize folds in clothes, 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, and on uneven surfaces.

Step four: illuminated places

Places that receive direct rays of light must also be highlighted. It is worth noting that there should be less highlights than shadows, otherwise they will cause unnecessary attention, that is, 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 exposed, and when you apply the shadows, they will have to be reduced.

Some useful rules

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

1. Don't use gradients. The most common rookie mistake. The 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 away from the outline, because then it looks very blurry, and prevents the light source from being revealed.
3. Don't use too many shadows. It is 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 dark or light spectra, and our brain will filter out everything in between. Use only two dark colors (dark and very dark) and two light colors (light and very light) and layer them on the base color, not on top of each other.
4. Don't use too similar colors. There's really no need to use almost identical colors, except when you want to make a really blurry sprite.

dithering

Preserving colors is what pixel art creators really need to pay attention to. Another way to get more shadows without using more colors is called "dithering". Just like in traditional painting, "hatching" and "crosshatching" are used, that is, you, in the literal sense, get something in between two colors.

Simple example

Here is a simple example of how two colors can be dithered to create four shading options.

Advanced Example

Compare the image above (created with 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 nice retro look, as a lot of early video games used this technique heavily due to the small number of color palettes available (if you want to see a lot of examples of dithering, look at the games developed for the Sega Genesis). I don't use this method very often myself, but for educational purposes, I'll show you how it can be applied to our sprite.

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

Selective contouring

Selective contouring, which is also called selout (from the English selected outlining), is a subspecies of contour shading. Instead of using a black line, we are choosing a color that will look more harmonious on your sprite. We also change the brightness of this path towards 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 you to qualitatively distinguish the sprite from the background of its surrounding objects. But by using this method, we are sacrificing some realism that we might need in some cases, as our sprite continues to look cartoonish. Selective contouring allows you to get rid of this.

You'll notice that I've used a seult to soften his muscles. Finally, our sprite starts to look like a whole, and not like a huge number of separate fragments.

Compare this to the original:

1. Smoothing

The principle of anti-aliasing is simple: adding intermediate colors to the kinks 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 kinks along the edge.

Technique 1: smoothing the curves

In general, you need to add intermediate colors where there are breaks, 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 match the direction of the curve.

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

Technique 2: rounding off irregularities

Technique 3: Overwriting Line Ends

Application

Now, let's apply anti-aliasing to our print. Note that if you want your sprite to look good against any background color, don't smooth the outside of the line. Otherwise, your sprite is surrounded by a very inappropriate halo at the junction with the background, and therefore will stand out too clearly against any background.

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

Why do you need to do it manually?

You might be asking, "Why not just apply a graphics editor filter to our sprite if we want it to look smooth?" The answer is also simple - no filter will make your sprite as sharp and clean as handmade. You will have full control over not only the colors used, 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 in which pixels will simply lose their quality.

Finishing

Wow, we're pretty close to being able to shut down your computer and grab a cold beer from the fridge. But he hasn't arrived yet! The last part is about what separates the energetic amateur from the seasoned professional.

Take a step back and take a good look at your sprite. There is a possibility that he still looks "raw". Take some time to improve and make sure everything is perfect. No matter how tired you are, the most fun part is ahead of you. Add details to make your sprite look more interesting. This is where your pixel skills and experience come into play.

You might be surprised by the fact that our Lucha Lawyer has had no eyes all this time, or that the package he is holding is empty. Actually, the reason lies in the fact that I wanted to wait with small details. Also notice the trim I added to his armbands, the fly on his pants…well, what would a man be without his nipples? I also darkened the lower part of his torso a bit so that the arm protrudes more against the background of the body.

Finally you are done! Lucha Lawyer competes in the Lightweight category, as it only has 45 colors (maybe it's a heavyweight depending on your palette limitations) and its resolution is about 150 by 115 pixels. Now you can open the beer!

Whole 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 in pixeling.
2. Start with small sprites. The hardest part is learning how to place a lot of detail using as few pixels as possible without making sprites as big 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 of the mouse is not funny, and it is unlikely to impress the representatives of the opposite sex. I use a small Wacom Graphire2 - I like its compactness and portability. You might like a larger tablet. Before buying, do a little test drive.
5. Share your work with others to get their opinion. 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 room. Or write directly to the messages of the group

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

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

For clarity, let's take a look at this example:

Owlboy (pixel art game)

This is what pixel art games look like.

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

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

Beautiful pictures are drawn with the help of pixel art:

You will not confuse this retro graphic style with anything.

Some paintings in this style are quite worthy to take 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 used to do, and they do 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 sharp color transitions and no anti-aliasing. For example, let's take another job in digital graphics of a fairly average level, check out 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 picture, you can see the dithering:

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

For an example, see how you can make transitions between colors in pixel art:

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

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

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

When you zoom in, the pictures don't look very pretty, but if you look at the pixel art from a distance, with a higher resolution, it can look wonderful.

Can you imagine what a great job these artists do?

It is sometimes said that Pixel Art is made because it is cheaper, they say that indie developers simply do not 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 ever drawn anything in the Pixel Art style will tell you that this is almost the most resource-consuming (time-consuming in the first place) graphic style.

Animation in the style of Pixel Art and generally a hell of a job.

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, this is not the most NOT lazy graphic style.

However, everyone can learn how to draw something simple in the Pixel Art style, and you won’t need any special programs, a simple graphic editor is enough.

If you want to learn how to draw in this style, you, like in any other case, need a lot of practice, and you can start, for example, from 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 just a week:

Pixelart:: spaceship drawing

Sometimes some absolutely crazy drawings are made in this style, I can’t even believe that a person drew it and I 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 is it according to you and how is it done?

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

In the approximation, you can see that all these are 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 analyze any photo or picture in an approximation, 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 for each pixel.

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

SIMPSONS PIXELS

It feels like a gigantic work, and even with the use of some additional tools (there are filters that turn pictures into pixel art), it would take a very long time.

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

Each Pixel Art picture has a very clear value and you can see it, you can feel it.

This can be appreciated even by a person who does not understand this well.

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

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

The most popular graphics editor in the world that is capable of working at the pixel level. To create such pictures in this editor, you just need to perform a few pre-configuration steps. Everything an artist needs to create art is here.

But on the other hand, such an abundance of functionality is not needed for drawing pixel art, so it makes no sense to overpay for a program if you are going to use it only for a certain function. If you are one of these 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 features that an artist will never need. The setup is quite simple, in the color palette it is possible to change any color to the desired tone, and the free movement of windows will help you customize the program for yourself.

PyxelEdit has a tile-to-canvas feature that can come in handy 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 feel the product before making a purchase.

Pixelformer

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

The developers do not position their product as suitable for creating pixel art, they call it a great 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. In GraphicsGale, too, not everything is so good with this, but at least this function can be worked normally.

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

charamaker

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

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

Pro Motion NG

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

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

Aseprite

It can rightfully be considered the most convenient and beautiful program for creating pixel art. The interface design alone is worth something, but that's not all the benefits of Aseprite. It has the ability to animate the picture, but unlike the previous representatives, it is implemented correctly and is convenient to use. There is everything to create beautiful GIF animations.

In this tutorial, you will learn how to turn a photo of a person into pixel art as a fictional arcade game character from the early 90s.
James May - aka Smudgethis - developed this style in 2011 for a music video for a dubstep rock act. Nero's first hit, Me & You - where he created an animation to show an old game featuring Nero's two members. The game was a 2D rhythmic platformer with 16-bit graphics similar to Double Dragon but far superior to 8-bit retro classic games like Super Mario Bros.
To create this style, characters still need to be blocky but more complex than older games. And while you have to use a limited color palette to achieve the look, remember 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.
Like the animation guide, you will also need a photo of the person. James used the photo of a punk that is included in the project files for this tutorial.
Once completed, check out this 16-bit After Effects Animation Tutorial where James will show you how to take this character in AE, animate it, 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 help you get the color palettes and styles for your 16-bit shape.
The animation guide has several poses on separate layers. Choose the one that best matches the pose in your photo - since we don't have legs in the frame, I went for the standard pose at 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 (16bit).psd.
Scale the image to fit, proportionally. You will notice that as the PSD dimensions are very small, the image will instantly begin to draw a pixel.

Step 3

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

Step 4

Using the Eyedropper Tool (I), sample the darkest skin tone area in the photo and create a small square of color. Do this three more times to create a four tone skin tone palette.
Create another layer below the outline layer and use a 1 pixel brush and a 4 color color palette to shade the image (again using the photo as your guide). \ P
It's best to keep 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 the blue shirt and gun.

Step 5

Repeat this process for other parts of the figure, shading the fabric to match other elements in the original photo. Don't forget 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 into the relatively limited color palette of 16-bit games.

Step 6

Add data to enhance your character with shades, tattoos, an earring, and more. Have dinner here and think about how you want your character to appear in the game environment. Perhaps they can use an ax or have a robotic arm?

Step 7

To bring your character to life, repeat the previous steps using the other five animation guide layers. This process may 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 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 selected. You can add new frames and turn layers on and off to make your animation, but the quickest way is to use the "Make Frames From Layers" command in the panel pop-up menu (top right).
The first frame is a blank background, so select it and click on the panel trash icon (at the bottom) to delete it.