Course pixel art 4
This is a translation of the publication "Les Forges Pixel Art Course" .
Part 1: The Right Tools
Part 2: Lines and curves
Part 3: Perspectives
Part 4: Shadow and light
Part 5: Color Palettes
Part 6: Smoothing
Part 7: Textures and Blur
Part 8: The World of Tiles
Today we will move from 2D to 3D, while remaining in 2D. You will see (or not). So that we discussed so far, you can make beautiful line art and draw objects with the correct perspective. This is a good start, but not enough to do pixel art. In this part we will take a look at the shading. This is a set of techniques that will allow us to sculpt our landscapes and characters to represent the volume (and I will spare you a long story about the traditional importance of this part, IT IS JUST SUPER IMPORTANT).
In fact, you may already know the answer to this question. So that your brain can interpret the volume of objects, we change the colors on the surface resulting from differences in the illumination of the parts of the object. You do not need a halogen spotlight to see this effect in real life; the slightest reflections determine the depth, look around!
')
This sketch illustrates the concept simply: the object (sphere) is illuminated by a light source (indicated by an arrow) and this affects its color. The colors are lighter where the sphere is illuminated and darker in the shade. Note: I am talking here about light and dark colors, the next part tells more about how to choose them.
What is important to remember is that I chose a light source, and I placed shadows and light as a function resulting from this. If my drawing were more complex, I would have to pay attention to the light source on the set, so that everything remains consistent. Of course, you do not need to place the source at the top right, you can place it anywhere.
Things are not always as simple as this area for several reasons:
- Objects may be in the shadow of each other.
- Objects can have more complex shapes, and it is difficult to convey their volume accurately (especially in pixel art)
- Light has an annoying tendency to reflect on these objects, walls and floors.
As a result, the bottom of the sphere should look something like this.
Good question! I will help you a little. The first thing you need to do is to place your light source (most often it is at the top right, or top left, as it is usually the sun):
Now you have to think about the volume of your object in 3 dimensions (as opposed to flat space on your screen) in order to successfully determine the illuminated areas (and how intensely the light affects them), and then color them using this information. To partly simplify this problem, you can think of the good old Playstation (Paupi, thank you for the image of the sphere in 3D) and mentally divide the object into different polygons and look at the lighting of each of them. Generally speaking, it is necessary to identify areas “predominantly in the shade” and “predominantly bright”, rather than directly addressing the details (a bad idea). Along the way, it would be nice to gradually replace the black outlines of the line drawing with useful colors and leave room for more detail (a pixel can be invaluable!).
For example, look at the dragon from the first part (and you will see it again). I applied shading techniques as described in this section to give it a volume. My light source is on the right and not very high; the entire left part of the dragon in the shadow, excluding the paw that is closer to you and part of the gray area created by the body. There is nothing more to say, it is just an upgrade of line art.
Pillow shading is forgivable only in one case: if you have never read about shadows and light. This approach was used by people who noticed that others use light and dark colors, but did not really understand how or why. Instinctively, they begin to insert bright colors into the middle, and dark colors along the edges. The result is terrible.
The problem is obvious on simple shapes, such as a sphere or a cube, but be careful with more complex images. If you are not familiar with drawing shadows, you may have a natural tendency to cushion shading without realizing it.
The second mistake that should be avoided is for people who read such articles (for you, for example). The reasons that cause people to make such mistakes are: “Well, I put my light source in the lower right below. Is done. Now the colors are brighter at the bottom right and darker at the top left, and everything will be fine. "
MISTAKE. The result is catastrophic, and has no volume. Why? Because in three dimensions, flat surfaces are illuminated uniformly, unless it is very dim and near light (like a street lamp). Under normal conditions, you will be dealing with a very distant light source, such as the sun, which illuminates flat surfaces evenly.
We will complete the lesson with good technique. Now you can control the light sources. Ambient lighting is the addition of a second light source to give your object or character more color. Preferably, the second source is not in the same direction as the first, for two reasons: it would be “muffled” by the first source, and frankly invisible, the beauty of the second source stems from the fact that it illuminates the shadows, and gives a very exciting shade scene.
Nevertheless, be careful: lighting the shadows does not mean that the shadows will become lighter. For best results, just highlight the edges of the shaded areas, and leave the rest of the shadows dark.
This is what happens to the face of our dragon lit by fire, and back lit by a mysterious blue glow. Of course, this technique should be used sparingly. Do not over-complicate your first steps by introducing too many light sources at the same time. Instead, add them after you complete the shading from the first light source.
Finally, as a small example of what can be achieved with this technology on a larger scale, here is a screenshot of Tales of Phantasia on the Super NES, in which the walls and columns are lit with torches, providing a beautiful demonstration of ambient lighting (the sky is the “main” light source) .
And we already (“already”, this is for you, it took me years) at the end of this part. As in the previous parts, if something seemed unclear to you, it was because I didn’t dive into the details of drawing in general, but instead focused on the pixel art. If you want to study the coverage, and know English, you can read this page .
Part 1: The Right Tools
Part 2: Lines and curves
Part 3: Perspectives
Part 4: Shadow and light
Part 5: Color Palettes
Part 6: Smoothing
Part 7: Textures and Blur
Part 8: The World of Tiles
Part 4: Shadow and light
Today we will move from 2D to 3D, while remaining in 2D. You will see (or not). So that we discussed so far, you can make beautiful line art and draw objects with the correct perspective. This is a good start, but not enough to do pixel art. In this part we will take a look at the shading. This is a set of techniques that will allow us to sculpt our landscapes and characters to represent the volume (and I will spare you a long story about the traditional importance of this part, IT IS JUST SUPER IMPORTANT).
1. Why do I need a shadow?
In fact, you may already know the answer to this question. So that your brain can interpret the volume of objects, we change the colors on the surface resulting from differences in the illumination of the parts of the object. You do not need a halogen spotlight to see this effect in real life; the slightest reflections determine the depth, look around!
')
This sketch illustrates the concept simply: the object (sphere) is illuminated by a light source (indicated by an arrow) and this affects its color. The colors are lighter where the sphere is illuminated and darker in the shade. Note: I am talking here about light and dark colors, the next part tells more about how to choose them.
What is important to remember is that I chose a light source, and I placed shadows and light as a function resulting from this. If my drawing were more complex, I would have to pay attention to the light source on the set, so that everything remains consistent. Of course, you do not need to place the source at the top right, you can place it anywhere.
Things are not always as simple as this area for several reasons:
- Objects may be in the shadow of each other.
- Objects can have more complex shapes, and it is difficult to convey their volume accurately (especially in pixel art)
- Light has an annoying tendency to reflect on these objects, walls and floors.
As a result, the bottom of the sphere should look something like this.
2. And how to do it?
Good question! I will help you a little. The first thing you need to do is to place your light source (most often it is at the top right, or top left, as it is usually the sun):
Now you have to think about the volume of your object in 3 dimensions (as opposed to flat space on your screen) in order to successfully determine the illuminated areas (and how intensely the light affects them), and then color them using this information. To partly simplify this problem, you can think of the good old Playstation (Paupi, thank you for the image of the sphere in 3D) and mentally divide the object into different polygons and look at the lighting of each of them. Generally speaking, it is necessary to identify areas “predominantly in the shade” and “predominantly bright”, rather than directly addressing the details (a bad idea). Along the way, it would be nice to gradually replace the black outlines of the line drawing with useful colors and leave room for more detail (a pixel can be invaluable!).
For example, look at the dragon from the first part (and you will see it again). I applied shading techniques as described in this section to give it a volume. My light source is on the right and not very high; the entire left part of the dragon in the shadow, excluding the paw that is closer to you and part of the gray area created by the body. There is nothing more to say, it is just an upgrade of line art.
3. Avoid two mistakes
a. Pillow shading
Pillow shading is forgivable only in one case: if you have never read about shadows and light. This approach was used by people who noticed that others use light and dark colors, but did not really understand how or why. Instinctively, they begin to insert bright colors into the middle, and dark colors along the edges. The result is terrible.
The problem is obvious on simple shapes, such as a sphere or a cube, but be careful with more complex images. If you are not familiar with drawing shadows, you may have a natural tendency to cushion shading without realizing it.
b. Understanding without understanding
The second mistake that should be avoided is for people who read such articles (for you, for example). The reasons that cause people to make such mistakes are: “Well, I put my light source in the lower right below. Is done. Now the colors are brighter at the bottom right and darker at the top left, and everything will be fine. "
MISTAKE. The result is catastrophic, and has no volume. Why? Because in three dimensions, flat surfaces are illuminated uniformly, unless it is very dim and near light (like a street lamp). Under normal conditions, you will be dealing with a very distant light source, such as the sun, which illuminates flat surfaces evenly.
4. Ambient lighting
We will complete the lesson with good technique. Now you can control the light sources. Ambient lighting is the addition of a second light source to give your object or character more color. Preferably, the second source is not in the same direction as the first, for two reasons: it would be “muffled” by the first source, and frankly invisible, the beauty of the second source stems from the fact that it illuminates the shadows, and gives a very exciting shade scene.
Nevertheless, be careful: lighting the shadows does not mean that the shadows will become lighter. For best results, just highlight the edges of the shaded areas, and leave the rest of the shadows dark.
This is what happens to the face of our dragon lit by fire, and back lit by a mysterious blue glow. Of course, this technique should be used sparingly. Do not over-complicate your first steps by introducing too many light sources at the same time. Instead, add them after you complete the shading from the first light source.
Finally, as a small example of what can be achieved with this technology on a larger scale, here is a screenshot of Tales of Phantasia on the Super NES, in which the walls and columns are lit with torches, providing a beautiful demonstration of ambient lighting (the sky is the “main” light source) .
And we already (“already”, this is for you, it took me years) at the end of this part. As in the previous parts, if something seemed unclear to you, it was because I didn’t dive into the details of drawing in general, but instead focused on the pixel art. If you want to study the coverage, and know English, you can read this page .
Source: https://habr.com/ru/post/242925/
All Articles