Computer literacy, help and repair

Piskel - Count. sprite editor


Published in the collection of programs: November 20, 2010

Operating system: Windows
Size of the program (distribution kit): 350 kb
License type: freeware

The program is intended for creating, editing sprites and creating a sprite form (with or without masks).

When adding the program to the catalog of our site, the link to the Sprite and Sprite Shape Editor was checked by an antivirus, but since the file is located on the server of the software developer or publisher, it can be changed, we recommend that you check before downloading the software to your computer. files in On-Line mode by antivirus - will open in a new window and will be checked!

You can leave your opinion about the program Sprite and sprite shape editor or comments, as well as report a broken download link.
If you have a question about working with the Sprite and Sprite Shape Editor program, you can ask it here, as many program authors and publishers monitor messages on this site!
All advertising messages off topic, as well as links and phone numbers will be deleted!


Published in the collection of programs: November 20, 2010

Operating system: Windows
Size of the program (distribution kit): 350 kb
License type: freeware

The program is intended for creating, editing sprites and creating a sprite form (with or without masks).

When adding the program to the catalog of our site, the link to the Sprite and Sprite Shape Editor was checked by an antivirus, but since the file is located on the server of the software developer or publisher, it can be changed, we recommend that you check before downloading the software to your computer. files in On-Line mode by antivirus - will open in a new window and will be checked!

You can leave your opinion about the program Sprite and sprite shape editor or comments, as well as report a broken download link.
If you have a question about working with the Sprite and Sprite Shape Editor program, you can ask it here, as many program authors and publishers monitor messages on this site!
All advertising messages off topic, as well as links and phone numbers will be deleted!

The 6 best options for creating your own pixel art, from great free tools to powerful professional software.

As pixel art has evolved into a popular art form rather than being a testament to a technical limitation, so have the various tools that developers use to create it. Some use old favorites, others use free software, and some opt for higher end software. Whether you're into pixel art or looking for new game creation software, the choice can be tricky.

Most artists will tell you that a tool is just a tool and you can create beautiful graphics with any tool if you learn it well. But if you need help finding the tool that works best for you, here are a few recommended ones. And for inspiration, check out the huge graphics archive at PixelJoint and this great collection of pixel art tutorials.

Aseprite

Link

Price: $15 USD or free if you compile it yourself
Available for: Windows / OS X / Linux

Aseprite is specifically made for pixel art. It's not free, but $15 isn't a bad price if you're looking for a long-term solution. However, you can use Aseprite for free if you want to compile the source code yourself.

It's one of the most recommended pixel art software, and for good reason. Aseprite has all the standard features you need to create pixel art, all wrapped up in a user friendly interface. Onion-skinning - the ability to see the frame you are working with, as well as the animation frames following it and preceding it - what you need for animation. Aseprite can also export entire spritesheets and GIFs and perform other pixel-specific functions.

Aseprite has a lot of fans, but not everyone likes it. The program itself has a low resolution. For some, the pixel editing interface is considered logical and helps to acquire creative thinking. For others, it's an unnecessary distraction.

Jay Tolen, creator and artist of point-and-click adventure game Dropsy, switched to Aseprite after Microsoft Paint and hasn't changed his preference since. “ I used to stick more to the "safe" color palette. If I made a piece and then decided that this color is not working, I would have to heavily fill it with other colors or just leave it like that and then suffer for ages. For the Hypnospace Outlaw, I used Aseprite's color dimming feature to give the 3D graphics an old-fashioned "safe" color look.”.

Link

Price: For free
Available for: Windows

GraphicsGale is another serious program created specifically for pixel art. It has the same main features you would expect for drawing and animation: onion-skinning, layer and color palette management. The biggest disadvantage of GraphicsGale is that it is only available for Windows.

Besides the great price, GraphicsGale has two great features to improve your workflow. You can import images from scanners and digital cameras if you prefer to draw by hand before creating pixels. The program uses devices that support TWAIN, and this, fortunately, is almost all scanners and cameras. Probably the most notable feature is the ability to preview animations while editing. There is no need to interrupt your work to export a gif file or even pause the preview window. Immediate feedback as you work will help you feel more confident experimenting with animation.

One of the notable professional games made with GraphicsGale: the great Duelyst.

Pro Motion NG

Link

Price: $40 or time-limited free version
Available for: Windows

While GIMP and Photoshop are repurposed tools, Pro Motion is a high-quality program built specifically for pixel art that has been used to create impressive professional games like Shovel Knight. Pro Motion has a wide range of options for both animating sprites and editing tilesets. Like Pyxel Edit, Pro Motion allows you to edit all the same tiles. It can also automatically fill large portions of a drawing.

Pro Motion is initially only available for Windows, but it is possible to run the program on Linux and OS X via Wine. The free version of Pro Motion offers many features for pixel art: support for drawing tile templates, a tile map editor, color palette editing, and layer effects. If you give it a try and decide to purchase the program, the paid version adds a lot of features for advanced users, such as the ability to change keyboard shortcuts, automatic backups, and opening multiple projects at the same time. Pro Motion could be the best value-for-money program made specifically for pixel work.

Link

Price: $20-30 per month
Available for: Windows / OSX

Adobe Photoshop needs no introduction, but I'll go into more detail anyway. As the leading high resolution image editing software, Photoshop will cost you $20 per month depending on the subscription plan you choose (annual is cheaper than monthly). Students can purchase it cheaper - for $10 per month. If you've already been lucky enough to get your hands on a copy, thanks to an educational license, or prior to signing up for a subscription, using the program to create graphics immediately becomes more possible. The advantage of using Adobe products is the availability of a huge amount of resources. If there's a feature you need to learn, you can rest assured there's official documentation and an endless supply of text and video guides on Google.

In terms of features, Photoshop has everything you need and more. Like its free alternative GIMP, it's not made specifically for pixel art, but there are plenty of tutorials on how to set up Photoshop to work with pixel art and get the most out of Photoshop's power. Sometimes it's not very good at low resolutions, but it can be extremely effective for those who are used to it. The ability to manage layers, layer styles, custom brushes, palettes and editing history can add a lot to your workflow.

Len Stewart, Lead Artist of Pixel Noir, uses Photoshop not only because of its versatility, but also because he's used to it. “Personally, I've been using Photoshop since middle school, so it's just a program that I feel comfortable using.”

GIMP

Image from the tutorial on recoloring spritesheets in Gimp.

Link

Price: free
Available for: Windows / OS X / Linux

GIMP is a well-known high resolution image editor, but that doesn't make it any less popular for low resolution work. While GIMP's best-known quality is that it's "free Photoshop," it has other strengths that cut down on work time. One of the features is that it is configurable through several programming languages. There are quite a few community-created plug-ins, which means that you can, with some effort, customize the set of features for GIMP yourself.

If, for whatever reason, you find yourself switching from working with pixels to working with high-resolution graphics, GIMP is a good way to avoid being overwhelmed by a huge number of other programs.

This article will give you a general idea of ​​how to draw cool 2D graphics for games. This is not a step-by-step tutorial, this is something much cooler!

The article is intended for those who have some familiarity with game 2D graphics. First of all, this applies to people involved in programming and who want to create high-quality game resources. Further - just to everyone who wants to create game graphics. By 2D resources in the text we mean any 2D images for games: from character sprites to large backgrounds. This article will briefly introduce good traditional design concepts and how they can improve your game. It is supposed to save you time and not develop bad taste.

It won't cover things like file formats, bitmap versus vector graphics comparisons, or the software used in the examples in this article.

List of topics:

  • Forms
  • Anatomy and Proportions
  • perspective
  • color science
  • Lighting and shading
  • Sharpening Your Skills

If these points didn't grab you, a visual demonstration of your "before" and "after" abilities follows below:


Internet fact!

These are real pictures. The programmer drew the top one himself and wanted to use it in his game, and the bottom one is what happened after small improvements of his designer friend.

In everyday life, we are accustomed to often see 2D images. But knowing that a thing looks beautiful is not the same as knowing why This is true. Any 2D image can be broken down into basic elements, so you can think of creating a 2D graphic as combining these elements so that: 1) It looks like what you had in mind; and 2) Wasn't super ugly. For example, we all know what a square and a sphere look like, but what does that have to do with creating an easy-to-understand character?

To answer this, we proceed to the first part:

Forms

Knowing what role forms actually play, you can use them to create a welcoming or unfriendly-looking game environment, as well as make characters and objects fit (or intentionally not fit) this environment.

Start with the simplest shapes: circles, squares, and rectangles. Try drawing a character with only squares or only triangles, and then see which one looks more like a hero and who looks more like a villain. By keeping your initial ideas as sketches with simple shapes, you will be able to generate a lot of ideas without being prematurely distracted by working out the details (this is discussed a lot in the "Hone Your Skills" section).

As a rule, pointed forms contain a hint of artificiality or evil, while sinuous and rounded ones hint at organic origin and goodness. Such is the traditional spectrum of characters. The circle and triangle are at its ends, and the square is somewhere in the middle.

perspective

Perspective is about creating the illusion of depth on a 2D surface by changing the shapes and shapes of things, and it's a pretty big topic, so you'll see a few subheadings here.

geometric perspective

In most 2D games, the creators simply don't want to mess with geometric perspective because realizing it in graphics would be insanely labor intensive. To take the easy route, developers take advantage of the unrealistic assumption that everything can be viewed equally well from the side (like in the classic Super Mario platformer), or deploy graphics in a more realistic-looking, but still far from reality, isometric projection.

We will study the topic of geometric perspective in detail, because this is the most difficult general principle to understand, but even a very simple understanding of it will also significantly improve the graphics. At the core of most formal perspective theory is the idea of ​​a vanishing point. The parallel lines seem to converge to a single point at a far distance from the observer. It looks something like this:


Even more impressive would be a train rushing towards

Have you noticed how parallel lines converge (real and imaginary)?


You can add even more red lines, but everything is clear

The red lines intersect at the vanishing point. You should also be familiar with the line that separates heaven and earth. This is the horizon line, which is obtained by crossing infinite (from the point of view of the observer) planes.

The vanishing point and the horizon at their core embody a simple idea: objects that are far away look smaller than objects that are closer to us. And the side of the object close to us seems larger than the remote side. In the example above, only one vanishing point is used, but in fact there will be as many vanishing points in the picture as there are sets of parallel lines - for each one. Sounds too complicated? It is, which is why perspective in drawings is usually simplified to one-, two-, and three-point perspective. In one-point and two-point perspective, one or more sets of parallel lines are assumed to remain parallel forever and never converge. Here is an example of a cube and box in one point perspective:


Pencil and paper… What did you hope for?

Note that the horizontal and vertical faces remain strictly parallel. Now let's look at two-point perspective:


When depicting objects in perspective, it is often customary to draw their reverse side in order to get a better sense of three-dimensionality.

Here the previously parallel horizontal lines found their vanishing point. The vertical faces remain parallel. Finally, three-point perspective:


In 3-point perspective, the object looks epic, at least in terms of height

Now all edges have their own vanishing point. With which we congratulate them. I must say that the vanishing points are easiest to draw for parallel lines. But by drawing guide lines or even whole boxes for complex objects, you can better represent their depth. One-, two-, and three-point perspective is the most commonly used, but there is at least one artist who has used six-point perspective to create crazy spherical scenes.

There is an important trick to drawing tubes and other round objects in the correct perspective, because in perspective the circle deforms in a special way. When viewed obliquely, the circles look like ellipses. The greater the slope, the more compressed the ellipse:


The circle turns into an ellipse

Here is a simple rule. When you look at the edge of a cylinder (for example, the roof of a round building), the curve curves upward. When you look down, for example, at the base of a tree trunk, the curve bends down. The horizon line runs through the middle of this image.


To show the volume of the figures, they should be shaded, but we will leave it like this.

Still, we must remember that in most games with 2D graphics they try to avoid difficulties in depicting geometric perspective. Choose a viewpoint from the side or directly from above, which minimizes the need for it.

Angle

When a character's figure is drawn with respect to perspective, this is called foreshortening. A fist pointed at the viewer will not only look larger than the one held at the side, it will also cover a significant part of the hand. Example:


Rough but understandable

Often artists draw angles by eye, simply because calculating all the vanishing points takes a lot of time. But just so you know how it should ideally be, below is a view with vanishing points and cylinders. In this form, sketches are made for the limbs:

Cylinders are easier to draw than people.

Remember that characters, especially human characters, can be represented as a series of simpler objects that are easier to compose. This is normal when a figure is sketched in the form of cylinders connected by joints, and then a person is drawn inside them.

Overlay and parallax

With overlap, everything is simple: objects closest to us will be superimposed on distant ones and hide them. A very necessary thing for 2D games, since it is the easiest way to show the player his position in relation to objects. Let's look at an extremely simple example:


The picture went down in history as strange hills in the background of all games in the Super Mario series.

This set of lines gives you the impression that the small round thing on the right (bush?) is in front of the others, and the largest one is behind. The effect is sometimes referred to as the "T-rule" because the lines of objects in front and behind form something like a T. It's simple, but quite powerful. In the example above, all T's are upside down:


Veteran programmers may remember ASCII 193

Parallax is another important perspective effect related to the relationship of overlapping objects. Its essence is that when the viewer moves, distant objects move less compared to closer ones. Parallax is great for 2D games because it's pretty easy to implement and you've no doubt come across it. Enough information to get started can be gleaned from this Wikipedia article.

Since 2D games often deliberately break the usual rules of perspective for the simple reason that they are easier to draw without them, one has to rely on other ways to get an idea of ​​depth. Another easy way is to make objects supposedly further away from the viewer appear blurrier and less detailed. Here's a real life example, in a photograph of a cityscape of industrial China:


City smog at its finest

You can also notice the effect of geometric perspective, although in this case the main vanishing point will be to the left of the frame. Almost every 2D platform game ever made uses an aerial perspective. For example (Super Mario World again):


As well as overlap and parallax

Notice that the farther away an object is in the background, the more blurred it looks. The proximity of the object to the player can be said even only by the color of the contours. This directly boils down to the idea of ​​contrast. The contrast will tell the player what is important and what is not.

Look again at the screenshot from Super Mario World. Lightly shaded blue hills? Doesn't matter. A pipe with white highlights and black outlines? Important. The only bright red object on the screen? Super important. Remember that interactive objects in a game should always stand out from non-interactive ones, unless there is a specific reason to hide something from the player.

Linear and aerial perspective at ArtyFactory.com , Tutorial from perspective-book.com

color science

Color is a tricky subject, and one of the most subjective in art in general. There is no comrade for color, and color combinations and their meanings differ in different cultures. White may be the color of purity in the West, but in Japan it often signifies death. However, there are a few basic ideas about color that will help you understand what's going on with your graphics. Let's first think about what a certain color consists of.

Hue, saturation, brightness

There are many ways of color slicing, but the one discussed here is the easiest and most convenient for beginner digital artists.

Let's start by comparing two colors:


Red and blue

Red and blue. It is clear that these are different colors, right? But in fact, there is a more accurate term Hue (Hue). The left square has a red tint and the right one has a blue tint. Other hues include green, orange, purple, etc. While hue may seem like a redundant term for a color, it is not because the amount of any hue in a color can change:


Red and pale red

So, here are two red colors, but how do they differ? The one on the right is kind of…faded. It has less Saturation.

Saturation refers to how much color a color has, or what hue it has. Saturation can be thought of as the amount of gray in a given color. No gray - rich color. Lots of gray - desaturated. So in this case the square on the left is fully saturated and the one on the right is less saturated. Pure gray is just a color without saturation. Saturation is the trickiest of color properties that a beginner can slip on. Just keep in mind that saturation has a big impact on the atmosphere of your graphics. Highly saturated colors tend to look friendlier when used in large quantities, while desaturated colors are associated with serious style.

The last property is Brightness. Sometimes Value is used instead. Brightness is much easier to understand: it shows how much brighter a color is. Here is the same red as above and a less bright (i.e. dark) version of it:


Red and dark red (less bright)

The relationship between brightness and saturation needs a little understanding:


These properties can be changed at the same time

Here is an example of how color can affect the atmosphere of a game. Compared New Super Mario (if you're already tired of the old examples) and Castlevania: Lords of Shadow.


Also note that Mario didn't throw any bloody lumps when he stepped on the mushroom.
Nothing special, I just wanted to show how beautifully bright statusbars stand out against the general background

Speaking of color, we can again remember about ... Barney and Godzilla! Consider how color makes them so different in terms of hue, brightness, and saturation, and what happens if one or more of these properties is changed. What happens if you take only one property and give it to both characters? Do you still want to hug gray Barney?

Briefly about RGB

Congratulations! Now you understand the color model HSB (Hue Saturation Brightness / Hue Saturation Brightness) or HSV (Value \u003d Brightness). Almost any imaging program uses this term along with RGB (Red Green Blue color model) and CMYK (Cyan Magenta Yellow Black). But HSB seems to be the easiest way to explain what happens to colors. Especially in regards to how bright or saturated the color you want is when you're shading. However, in different applications you will have to deal with the RGB color model, so we will briefly consider it. RGB simply describes all colors in terms of red, green, and blue, since all colors can be described as a combination of these three. Similarly, color information is processed by the human eye. Take some time to play around with the color values ​​and see how the HSB and RGB values ​​change and how they relate to each other. Here is a standard RGB chart (note what happens when the colors overlap):

Also known as the additive color model, since colors are created by adding light rather than absorbing it (as in the subtractive model)

See how the combination of all three colors gives white. You can think of the colors as playing a tug-of-war because when they are of the same brightness, the hues cancel each other out, leaving white or gray. But if you mix colors in different proportions, you can get confused in the logic of obtaining the result, which is why we advise HSB when working on graphics.

Now that we have figured out what color is, let's start looking at color combinations. Color theory is complex and quite subjective, so the following should not be regarded as an ironclad rule, but as a direction for further development.

The basis of the theory of color is the color wheel (color wheel). To simplify the explanation, the wheel is the subjective arrangement of shades of color in relation to red, yellow and blue, which divide the wheel into three parts (the so-called primary colors) and green, orange, purple (secondary colors) in between.


Typical color wheel

Hues are also commonly categorized into warm and cool, in terms of color temperature. Moreover, red-yellow colors are considered warm, and blue colors are cool, as shown below:


An interesting fact. In Doing the Right Thing (1989), the director added more orange tones to show the heat in the frame.

An area of ​​uncertainty is added here, since the colors included in it are a kind of borderline. But yellow-green is often referred to as cold, and purple as warm colors. It is important to remember that cool colors are associated with dark hues, so a cold color shadow will be perceived as darker than a warm color of the same brightness.

Other relationships between colors can also be explained using the color wheel. Analogous colors are simply shades next to each other, such as green, yellow, and the colors in between. Contrasting colors are colors (hues) 180 degrees apart that appear brighter when used together. You've probably seen them in action, even if you didn't know why. Blue and orange have even become a trope (a standard stylistic device).


If you are using Firefox, look at the icon. Blue and orange again!

When working on game graphics, try to associate colors with specific races or enemies, environments, or levels. Coloring is optional, but you can use it as a way to influence players' perceptions. Think of a set of colors for the bad guys, but use unique shades of those colors for specific enemies, for example. Don't be afraid to experiment and try to use rarer colors. In any fairly advanced imaging program (like GIMP), color is easier to change than any other property. This is one of the few things that can be easily changed in a finished drawing.

Shortly speaking: Colors can be separated and compared to each other in a variety of ways, and pairs of colors can look better or worse in different combinations.

We recommend reading (in English): Color theory for designers

Lighting and shading

In this part, you will see many examples of pixel art, but they talk about basic concepts that apply to any type of 2D graphics.

Sources of light

Beginning artists often do not understand why they actually draw light and shadow. Shading (or shading) a drawing usually means applying different shades to give the illusion of light in a drawing, just like perspective is the illusion of depth. And just like with perspective, you need to create some kind of 2D analogue of the effects that are visible in reality. There is only one rule: the light must come from somewhere. It can't be everywhere, so if you just color the drawing, it won't look right. When beginners try to draw a shadow but don't understand how, they end up with objects that look like this:


Seriously, don't do this.

Compare with the option without shadows:


Better to leave it as it was

This is called pincushion shading and is very easy to draw without thinking. It seems natural to shade objects along the outer contours ... but it looks completely unnatural. In order for lighting to look right, it must have a direction, and lighting / shading of the surface must be built depending on which side the light source is directed at the object. The light source can be the sun, a lamp, a lake of boiling lava, etc., or it can be left abstract.

For example, you can simply assume that almost all light comes from an infinitely distant source at an angle of 45 degrees. This is enough to nicely shade objects in most cases. For animated sprites that will be used on a variety of backgrounds, a little vagueness helps keep it looking relevant everywhere.

Here is an example with a light source in the upper left corner:

You also need to think about whether one of the parts of the object can cast a shadow on the other

The parts facing the light source will be lighter, and the parts opposite to them will be darker. What could be easier? But that's not always the case...

Flat and curved surfaces

Flat surfaces usually have almost the same shade everywhere, but on curved surfaces we will see a gradient. Graceful examples from the real world:


American bomber F-117. flat surfaces
More familiar looking F-15. Curved surfaces

Let's go back to the section on forms. Which of these bad guys will seem good to you, and which one will alert you with one appearance?

You can see the actual gradient between light and shadow. Pay attention to the left wing, the gradient is just perfect on it. Now back to the previously mentioned squalor with pillow shading:


The light source for a cube and a sphere is not exactly the same. What is the difference?

And here, for each face, the cube needs only one shade, and the sphere needs many more of them - to simulate the gradient nature of the shadows on curved surfaces.

Above, we looked at simplified shading, since light can further bounce off surfaces and highlight shadowed areas. This often means that the part of the shadow that is farthest from the main light source is actually lighter than elsewhere. The effect is most noticeable when the object is large or very close to a reflective surface. Below is a classic example:

Such shading allows you to better feel the volume

A couple more digital examples on the same topic.


If the spheres were on a blue surface, the reflected light would have a blue tint.

In the left example, you see the reflection of light located outside the edge of the picture, as happens with highly reflective surfaces. The stronger the incident light, the more clearly reflected is also visible.

The change in tone is related to the reflection of light and can be very well shown in pixel art. The main point of this phenomenon is that the tone of a shadow or reflected light is not always just a darker or lighter version of the main color of the object.

Most often, a change in tone can be found in objects that are illuminated by the sun. Direct sunlight has a yellow tint, but the blue sky reflects its color onto the shadows, so we get yellow highlights and blue tint shadows.


Think about warm and cold colors. Highlights are warm and shadows are cool

This concept becomes important when you have additional light sources and they differ in color from the main ones (for example, red-hot lava). Remember that colored light will change the color of the object being illuminated. However, changing the tone can also be just a stylistic decision. By exaggerating the effect or substituting additional colors, you can achieve a very interesting picture:


If you use too many shades, the game will resemble Instagram

It's also worth knowing that shadows are less saturated, and that less saturated colors can appear darker than they really are.

There is no consensus among artists regarding the change in tone. Find your solution, but remember that the more you change the tone, the more surreal your drawing will become.

Shading and texturing

Shading can suggest not only the shape of an object, but also its texture. The texture of an object affects how light reflects off it. Therefore, by changing the shading you can sometimes change the impression of the texture. To distinguish between some types of textures, there are terms:


This will come in handy someday when buying renovation paint

From the surface with glossy Textured light reflects well and with very little scattering. This means that the illuminated part of the subject will be very bright (due to good reflection), and the unlit part will be very dark (because the additional illumination comes from diffused light, and there is none). A good example of a glossy texture is a freshly polished car body.

Matte the texture does not reflect very well and scatters light when reflected. This means that it appears more evenly lit. A good example of a matte textured surface is an old car tire.

Smooth texture is somewhere in the middle. It reflects well, but strongly scatters light when reflected. Plastics often have a smooth texture, such as most computer keyboards.

So, do not forget about the properties of the materials you depict. Is it glossy metal or matte fabric? Clothing of medieval characters should not reflect light like plastic, and space armor should not feel soft to the touch.

Shortly speaking: For 2D graphics to look believable, light must have a direction.

Sharpening Your Skills

What to do now that all the basics are laid out? Forward! Start trying! It's true: anyone can draw. Of course, some people have more skills, but the biggest difference between a bad artist and a good one is how much they practiced. The more practice, the better you become at the skill. But practice wisely. Game projects provide an excellent opportunity for this. If you have dreamed about your game, start sketching for it while reading this article.

If you don't have your own, join other people's game projects! Even the smallest game has enough graphics for you to practice well and draw noticeably better next time. And one more thing: to be a game artist, you do not have to draw like renaissance artists.

Pencil and paper

The only way to draw better is to practice, and the cheapest and easiest way is to do it with pencil and paper. Using only digital tools is tempting, as you would immediately get the finished result. But don't be tempted! When you draw by hand, you are more involved in the process. In addition, you can avoid some of the bad habits that come with relying entirely on your computer. Of course, the tools in a program can look very powerful. But if you try to draw the sprites with auto shapes first, trust me, you'll end up with funny and ugly things that couldn't be done with a pencil sketch.

Once you have established good basic habits, there will be plenty of time to relentlessly explore all the tools and techniques. Does it seem strange to you to draw with a pencil on paper if you are already used to working in a program? But not just as it has become a starting point for artists around the world.

Get a sketchbook (it says sketchbook on the cover), crayons, and a good eraser. You will have to use a rubber band very often. But a notepad for sketching is optional. The key idea is that you need practice, so you can even draw in the margins of your school notebook. But in the notebook, all the work will be in one place, so you won’t have to regret later that the most successful drawing of the villain ended up on a piece of homework.

Sketches (aka sketches)

In pencil sketches, it is better to assume that all lines are only temporary suggestions, and not the final version. Don't get addicted to your lines. Draw over, erase and draw again without regard to what is already there. Of course, for this you need to make the lines light enough. Start with the basic shape of your object and gradually add details. Most objects can be approximated by basic shapes, i.e. a sphere, a cylinder, and a "box", which is especially useful for drawing in perspective.

For example, don't draw a more or less complete head, but switch to the chest, then the arms, then the legs, and so on. By going into details prematurely, you may lose sight of how they all fit together. Draw everything together on a large rough sketch and add details on top. Don't be afraid to keep sketching over the first lines until you've got the perfect overall shape, and don't be afraid to start over.

This video does a great job of showing how the artist builds the basic structure of the character, layering rough shapes on top while adding more and more new details, and erasing and repainting details that don't look good. And here is a picture from the notebook of a novice artist:


Typical sketch

Draft, draft, draft again

It may seem crazy at first, but you should draw at least three versions of any character/object/menu item in pencil on paper. Only then can they be transferred to a computer for revision. Major studios often create literally dozens of concepts for a single character before they even think about choosing. Sketching three versions even for non-interactive background resources like trees or bushes is common. You are at great risk if you rely on the first option as the only and final one. By coming up with three different options, you can take the best of each and combine them for the final. Here's a simple example where each of the cool space helmets differs from the final version below (which is based on even rougher early sketches):

Review the section on anatomy and proportions. Without knowing the structure of the skull, it is difficult to come up with a suitable helmet The top thing should actually cast a shadow on the visor

If this advice seems very difficult to follow, keep in mind that you are drawing rough, very rough, rough sketches. Don't waste time on them. In fact, in most cases, less is more. The longer you work on an option, the more difficult it is for you to agree to remake it or create another option. Leave the details aside, just convey the general idea and move on. You can always go back and work on a sketch if you like it.

Get ready for the fact that you will have to draw, and draw a lot, and that you will have to get frustrated at times. If your drawings seem incomprehensible to you, it only means that nothing human is alien to you. Next time it will be better, and then even better. Remember that it's okay to be dissatisfied. If drawing was a simple activity, this article would not have appeared. In fact, if you are 100% happy with your drawing, you don't try, you start to lose friends and convince yourself that this is a blurry mess that you originally wanted to draw.

Shortly speaking: Always make a few pencil versions of your game art first, and don't try to get perfect right away.

Conclusion and further reading

Now you know the basics and are ready to create decent graphics for 2D games. If you are interested in learning more about the topic, then throughout the article you may notice links to additional sources. The article itself is largely based on Chris Solarsky's book Drawing Basics and Video Game Art. You can read some of his writings. Dare!

Original article in English: Total beginner guide for better 2d game art

P.S.

You may also be interested

I once asked about a graphics editor with simultaneous animation display. I was offered an unfinished Aseprite with a terribly uncomfortable interface in the spirit of the 90s, and Photoshop with animation capabilities, but it seemed like viewing it “not immediately”, but everything seemed inconvenient and uncomfortable.

And then I came across a program with a name that is not very pleasant for the Russian ear

"Piskel"


PROS:

- Designed for pixel drawing, no extra features
- real time animation
- convenient conversion for enchantment maker
- user-friendly interface
- weight 60 megabytes WITHOUT installation
- easy to learn. Mastered all the functions in 10 minutes.
- FREE
- there is an online version

MINUSES:
- it seems like you can not upload several pictures / files at the same time

WEBSITE:

the site itself
online version
download

INSTRUMENTS:
See the picture above (left to right, top to bottom):

YELLOW FRAME:
- 4 top squares - brush size
- brush
- a brush that draws additionally MIRROR on the right. allows you to SIMULTANEOUSLY draw two symmetrical sides of the sprite. Very comfortable, never seen before
- filling
- fill ALL pixels of one color with another color
- eraser
- straight pixel line
- pixel square
- drawing pixel ellipses. URAAA!!! used to take a lot of time
- canvas movement
- Magic wand
- selection of a square area. It works in an unusual way - to move an object, you must first cut it, then move it, and then copy it. You get used to it quickly, but it's a little uncomfortable.
- selection of an arbitrary area. conveniently
- shadows
- checkered drawing. Apparently necessary for smooth color transitions. I don't remember what it's called
- pipette
- Colour
- below, left-bottom, there is a menu where you can reassign hotkeys

BLUE FRAME:
- frames (frames). As you know, in the ACE and MB maker, frames follow 2-1-2-3. Therefore, for correct animation inside the PISKEL program, which is shown in a RED FRAME, we also arrange the frames 2-1-2-3. Before converting to PNG format, delete the first frame

RED FRAME:
- animation. Updated in real time

GREEN FRAME:
layers menu
- create a new layer
- current layer up
- down
- change layer name
- merge layers
- remove layer
transformation menu
- vertical reflection
- turn
- clone current layer on all frames
palette

PURPLE FRAME:
program menu
- setup
- the size
- save
- export
- import (you can import in gif, png, png archive)

The image size menu deserves attention here.

We put the size that you need, I have 120x120. For the maker, as described above, we delete the first frame, and when exporting, the frames will be merged and we will get a PNG image with a size of 360x120.
Having drawn each type of character (gait forward / backward / left / right) in these sizes, then we simply glue these 4 pictures and we will get a charm for, for example, an RPG maker

Well, that's all. Few people know the program, he himself was looking for it for a long time, so I decided to publish it here, so that the rest would know who was looking for

Similar posts