This is one of a series of articles about IsometricPixelArt pixel art.
If you like to play like a child (or you still like to play when you grow up), pixel painting may be your dish; It can be very scientific, and it feels more like architecture than illustration, because this thing has no perspective, and you can arrange it according to your idea.
In the next tutorial, we will make a pixel figure together. It is a logical starting point in pixel painting, because it can help us define the proportion of elements to be done next. However, before being a pixel villain, we must first understand the basic knowledge of pixel painting; If you want to start making pixel maps directly, you can skip to step 3. Next, let's begin.
These lines are the basis of pixel painting, and they are also the most common (and interesting) part of equidistant style pixel painting. We will use the following:
This type of line consists of two pixels superimposed downward, which looks relatively smooth and is usually used to make a square surface.
The most commonly used structural lines are as follows, but they look more uneven and use more pixels in each part.
On the contrary, here are some irregular lines:
Very jagged lines, very ugly. Please try to avoid this situation.
Our pixel graphics will not strictly follow all the rules of isometric view, so first make a simple cube to grasp the sense of volume.
exist
AdobePhotoshop
middle
newly-built
A 400pxx400px file.
Usually I like to open the same window (
Window > arrange > XX's new window
), one shows about 600%, and the other keeps it at 100% to check the progress. It's up to you whether to use the pixel grid or not, but I think it's sometimes distracting. Now, let's zoom in and start making a line 2: 1:
I like to use 5% gray instead of pure black, so that I can add some shadows at the back (use black to reduce transparency) and choose colors separately with the wand tool.
Here are some ways to make lines:
Method 1. choose
Linear tool
choose
pixel
Mode, uncheck it.
Anti-confusion
, select
1px thickness
. When drawing, the line tool will prompt us for the angle of the line and select it.
26.6_
. (Sometimes, the straight line tool is not very reliable. The angle is wrong, the drawn line may be messy, so you need to pay attention. )
Method two. Create a rectangle with 40x20px pixels and select.
Pencil tool
(It still is.
1px thickness
), draw a single pixel in the lower left corner, and then hold down the shift key to draw a single pixel in the upper right corner. PS will automatically connect a line between these two points. In my experience, you can make these lines very accurate (or almost accurate, just fine-tuning) without using the rectangle selection tool.
Method three. use
Pencil tool
Draw two connected pixels, select them and hold them.
Mid-tenor
, use the keyboard arrow keys or mouse drag (referred to as
Alt- move
) until the new pixel and the previous pixel are connected end to end. Next, check the existing pixels and repeat the operation to make the line longer.
According to the above method, we got the first line. We choose, and then
Alt- move
It, or copy it, paste it and merge layers. Turn horizontally. (
Edit > transform > flip horizontally.
)。 I use this to operate a lot, so make it a shortcut key! PS: Here you flip horizontally with F5 and vertically with F6.
Let's connect two wires together:
Then, select all the line segments again.
Alt- move
, flip vertically, and then put the two paragraphs together, so that we have a square plane (perspective surface haha):
It's time to join the third dimension.
Alt- move
or
copy
Square plane, put the copied surface 44px on the original surface:
Tip:
If you hold down shift while using the arrow keys to move, you can move 10 pixels at a time.
In order to create a neat cube, next we connect the leftmost and rightmost pixels of the cube. After that, fill the middle vertical line:
Now erase the lines behind the cube. It's time to add color. Choose a color you like (try to choose a bright color) and fill it at the top of the cube.
Now increase the brightness of 10% to the color.
Now increase the brightness of the previous color by 10% (I suggest using the HSB slider on the palette).
Fill in the highlighted area in front. We draw the edge of the cube and fill 1 pixel with the bright color on the black line, and the effect is the best, like this:
Now, remove the black line under the bright blue.
Hold down the shift key and use a pencil.
These tips also apply to erasers. You can choose an eraser (
Pencil mode
,
1px thickness
), click the starting point, hold down shift, and then click the end point, and the connecting line in the middle will be erased.
use
Straw tool
Draw the color from the top (when using a pencil or fill tool, the shortcut key of the eyedropper tool is
Mid-tenor
), turn the black line in the middle of the cube into bright blue. Then reduce the brightness of blue by 15% and fill the left side; Then reduce the brightness by 10% and fill the right side.
So our cube is finished. It should look clear and smooth at the size of 100%. We can move on.
Character style depends on personal preference, and you can adjust it according to the proportion and elements you think are appropriate. I tend to be thin and have a big head. A thin figure can make lines look simple/direct.
Start with the eyes. Strictly speaking, the eyes of the pixel characters on the screen are not at the same height, but this trick can make our characters look more beautiful and ensure clarity in a small size.
We will be a nobody, because in the back, we may give it a car, a house, a square or even a city. At that time; In this case, the persona should be the smallest element in the illustration.
For graphic efficiency: You should use as few pixels as possible to create a beautiful character (with some facial details). Small size is much easier than large size. Unless you want to draw a beautiful and realistic portrait or something, we are good at small sizes.
Let's create a new layer. We use two pixels as eyes; One on each side with a pixel gap in the middle. Draw a vertical line at the pixel on the left:
Now, create a new layer and draw a 2-pixel horizontal line under your eyes as your mouth. Move it below the position you think is appropriate, and then merge the layers down. You can make your chin in the same way, but with a slightly longer horizontal line:
Do the same for the hairline and the top of the head, and then connect the edges more roundly like this:
Now, on the right eye side, leave a pixel space, increase the sideburns (which also helps to shape the ear part of the character), and move the sideburns to match the hairline. Then leave a pixel blank in the ear area, connect the corners with lines, and close the head edge:
Add a pixel above the ear and change the head shape of the character in the way you like; The head is usually narrower at the neck;
Draw a line under the chin as the chest. The neck part is to draw a set of pixels under the ear, and then draw a diagonal line as the visible part of the character's shoulder:
Now draw a vertical line segment of 12px under the shoulder as the arm, and the distance on the other side is 2 pixels. Connect a set of pixels at the bottom to make it look like a hand/the first step (to be honest, these hands have no details, but the problem is not big). Draw two horizontal pixels of 2: 1 at the bottom and top of the hand as the waist, and then complete the line of the chest. Now you have the outline of the whole upper body. There is actually an arm on the left side of the body, but it is blocked by the chest and can't be seen, so it is ok. When finished, it looks like this:
This should be:
Of course, you can also choose different proportions according to your preferences; I like to try different options before I decide to do it.
Now, we can add several vertical line segments as the lower body. I like to leave a gap of about 12px between my shoes and my waist. The foot is very simple, just one pixel higher than the leg, and according to the axonometric drawing, the right foot on the screen is one pixel lower than the left foot.
Now, let's color the villains. It's not easy to find the right color for the villain. If you want to choose the same skin color setting as me, try #FFCCA5. It is easier to add color to other parts of the body. After that, you should make clear the sleeve length, the position and style of the collar, and add some deep shadows to distinguish the clothes from the body. I like to make the lines inside brighter than pure black (especially when different blocks are at similar levels, such as the junction of clothes and skin, or the junction of clothes and pants), so that the contrast of each line will not be too strong, and the different sense of volume will be more obvious.
You can add some highlights to each different color block. Avoid too many shadows or use gradients to represent shadows; A few strokes (10% to 25%) or bright or dark colors can help elements jump out instead of looking flat. If you want to add 100% lightness color, try to reduce its saturation. In some cases, such as hair, it may be a good idea to change the saturation between colors.
You can try all kinds of hairstyles. Here are some suggestions:
If you want to be more villains, some small changes, such as changing the style of clothes, the length of sleeves, the length of trouser legs, accessories, clothing, skin color, all kinds of roles are also within reach.
Now there are only a few steps left, that is, to gather all kinds of elements together and see how they are displayed in the same environment:
If you want to export, PNG format is the best.
I hope this tutorial is not too complicated; I think I have tried my best to explain the steps and styles I need. We will continue to explore the world of pixel art; Buildings, vehicles, interior and exterior. Pixel painting has unlimited possibilities and fun, but it may be a bit difficult.
RenéAlejandroHernández lives in El Salvador and has been engaged in pixel art (especially equidistant pixel style) for more than 10 years.
-dividing line.
I think it is difficult to draw a group of such small people with different movements with AI. What's the trick? The main thing is to finish painting the face and body first, so I just change different movements and expressions. Actually, it's not difficult. In this picture, there are only shapes and colors, and there are not many gradients. As long as you use the pen tool well, it is very simple. There is no trick to drawing illustrations. The key is proficiency. As long as you work hard, even the most difficult patterns will come out ~
How to draw young people to look good? 1. First, draw the outline of a human head.
2. Then outline the hair outline of the head.
3. Then draw people's ears.
4. Then draw a pigtail.
5. Then draw your eyes and mouth.
6. Then draw the human body.
7. Then draw human arms and hands.
8. Then draw people's legs.
9. Finally, we can draw people by coloring them.