Illustration of the method of drawing pixel icons

Small make up again to small partners to share an article about pixel, hope that small partners with a good childhood memories in the new Year, Happy heart.

If you want to draw such an icon directly, I think it's a bit difficult. Next we start with the first pen to teach you to complete this icon. Of course all you have to learn is to draw a method instead of a mechanical imitation.

The whole process of drawing the entire icon

It is certainly not conceivable to draw such a building. For a clearer understanding of the structure of the building you can draw the following sketch. This just helps to better understand the structure.

Four images in different directions

1. Draw the bottom of the building with the help of lines and pencil tools: a cube

For pixel painting, not all angles are good for the performance of cubes. (The figure below has 11 different angle cubes for your reference) but the angle of the 45-degree perspective just shows.

Cube graphics for pixel display

Complete the first step of drawing

11 graphics of different angle cubes

2. Now, on the first floor, we're going to cover another layer, of course, a cube and keep the same angle.

The line that overlaps the first cube is deleted after the second layer is drawn. Set aside a clear picture. The pixels that have been marked out in the figure below are planned for drawing windows.

Draw Complete Second cube

3. Add a two-sided sloping roof to the two cubes so it looks like a house at least:

The roof is slightly more difficult to master than the cube, and the same must be done to ensure that the angle is consistent.

Will not remove the line to ensure that the screen is refreshing, do not be too harsh on the details this is just a sketch like a shape, now the details of the painting is perfect, if found to do such as height adjustment will be redone.

In short, drawing the icon is like drawing the same time remember "from the whole."

Complete the drawing of the roof

4. Draw the window separately on the two sides of the second cube. There are also differences in the size of the windows that are drawn because of different angles.

The front window is 4 pixels wide and the window on the side wall is 3 pixels wide.

Windows are not difficult to draw, but be careful to avoid a few easy mistakes.

　　3-pixel Wide window painting

　　4-pixel Wide window painting

Draw the first attention to the line of the angle of unity, each window spacing to be consistent. You can't connect to the top or bottom edge lines or you can easily spot problems when you zoom out.

　5. Then draw the window well, I do not have to religious how to draw it? Draw your own door!

Of course the door can not be like a window on the wall, so to open a doorway for it on the floor, see the figure below. Now it's time to make an adjustment to the shape of the house and revise the less desirable parts. (If the height of the first storey is raised so that the house looks more sturdy and beautiful) add a small tree:)

A house painted with windows and doors

A house decorated to the door

　　6. To the House with "force state" paint brush again, the effect is much better.

Of course, the color of the wall can not be used in one, according to the different walls of the surface of the color is divided into "bright color" "middle color" "Dark color", the cube's front for the middle color, the side of the dark part of the color, the top side for the bright color.

Use the Tim tool to add color to the walls of different parts of the house. (as shown in the picture)

The roof, the doors and windows also want to paint, first evenly added monochrome to show a whole color effect.

Coloring is also the phrase "everything starts from the whole".

Fill in the color and color version of the house

　　7. The second floor platform of the House has to be processed in order to show the sunken effect.

The upper eaves of the first floor are illuminated with white lines to distinguish the height from the platform. Add a shadow to the right of the platform to highlight the sunken effect.

Similarly, the front and side lines of the two floor of the building are outlined in bright colours, but note that the two-layer border is different in color because the second layer is in the shadow of the eaves so the color is darker. You can compare the differences shown in the figure (1) (2).

The processing of the platform and the description of the junction line

　8. It's time to treat the window well.

In the different surface of the window glass of course there will be differences in color, the bright part of the bright, dark part of the dark.

First, the different sides of the glass to add light and shade of different colors. Windows should have a window frame, this will take into account a number of minor changes, the picture shows the different surface of the window frame and glass mechanism of detail analysis.

According to the results of the analysis of the House window frame to increase the three-dimensional sense of the window.

Take into account the appearance of the screen except for the side of the bottom row of a window.

Detail analysis and drawing of Windows

　9. It's time to repair the roof.

With the angle of two slopes of the roof, each pixel is painted with a scarlet line to draw the eaves ' ups and downs.

Finally, don't forget to outline the shadow of the eaves with darker colors under the eaves. This makes the sense of three-dimensional and light better.

To paint the roof with corrugated and shadow.

　11. This is the last step!

Now do almost all the "finishing touches" of the work, first of all, the color of the roof transition more mellow, the platform is also used to outline a bright, concave effect. After the bright surface of the glass plus light and shadow effect, the picture on the black line completely covered. Then use the same color of the dark to describe.

Make a final adjustment

With the first house, "architectural experience," it's not a problem to build a few more buildings?

The icon after changing the color

Classification:

• PS Getting Started Tutorial
• ps icon making tutorial