We draw in Photoshop a multi-storey building using pixel art.

Other lessons in pixel art:

  1. Isometric pixel art in photoshop
  2. Draw a house in the style of pixel art
  3. We draw in Photoshop street in the style of pixel art

Perspective

We will use the character to correctly calculate the height of the floors. The perspective should not be as realistic as possible, let the building be slightly smaller than it should be, so that the character stands out from its background.

Step 1

Draw a diagonal line that will be the surface of the earth, and place it next to the character. Duplicate the line and arrange copies at the same distance from each other (in this case, 3 pixels). Duplicate until we get the desired floor height.

Step 2

Having decided on the height, we decide how wide the house will be. In determining the width based on the number of doors and windows that we want to draw.

We color the windows and the door with a contrasting color in order to have a clear idea of ​​their size. At this stage, the color does not matter.

Step 3

On the side wall add one window to give asymmetry.

Step 4

Having finished with the first floor, we copy it necessary quantity of times. I made four floors so that the house looked quite realistic.

Step 5

We finish the house by adding vertical edges and a roof.

We could create a more comprehensive building in the shape of the letter H, L or T, but within the lesson we will focus on a simple rectangular shape. Later we will add textures and small details.

Texture

Now add a brick texture. The process is not the easiest, but the result is worth it.

Step 1

For convenience, we will ignore openings for doors and windows and draw solid lines. Take Magic wand tool (W) (Magic wand) (option Contiguous (Adjacent pixels) should be inactive), select windows and devices, copy and paste on a new layer. Temporarily turn on the visibility of this layer so that it does not interfere with us. Thus, we have a backup, which we can use in the future.

In the screenshot above, I filled all the holes with lines.

Step 2

We will make a texture with colored bricks. Try to keep each brick not too small, but you shouldn’t draw too large ones. We will duplicate the created texture area to fill the entire area of ​​the house, so the texture elements should not be small, otherwise they will be repeated too often and this will be noticeable. I used the size of 12 bricks horizontally and 24 vertically.
On the new layer draw a horizontal line. The screenshot shows the texture of 25 lines with a length of 134 pixels.

Step 3

Add vertical lines to close the two rows of horizontal. Alternate the vertical lines through one.

Add another row of vertical lines, but to the right of the previous ones. In the screenshot below, the distance between the lines is 3 px.

Then simply duplicate the first two rows and fill them with the whole texture, keeping to the same distance between the lines.

Now we have a foundation that we fill with color.

Step 4

Via Bucket Tool (G) (Fill) fill the texture with any bright color (option Contiguous (Adjacent pixels) must be inactive). Then using Magic Wand Tool (W) (Magic wand) (optionContiguous (Adjacent pixels) should be active) select the area outside the texture and press Delete.

Then we change the dark stroke of the bricks to the same color (in this case blue), only paler.

Step 5

Now randomly paint the bricks with a different color. In total, we will use three colors for bricks, therefore, if there are 12 pieces in each row, then there should be four bricks for one color.
Add four bricks of a contrasting color for each row, trying to place them randomly.

Step 6

Repeat the process with the third color. Do not forget to use a contrasting color.

Step 7

When finished, we can propagate the texture and analyze the result. The edges of the texture should fit tightly together.

If there are duplicate elements on the texture, a grid will appear that will spoil the work. Try to make the texture seamless so that the joints are invisible.

We can add more colored bricks to improve the result. Please note that you should have the original texture saved separately, where we will make changes, and with the help of copies we just analyze the result, so after work you can delete them.

Step 8

If you have any area glued from copies of the texture turned out better than the original, then leave it. To do this, simply copy (Ctrl + C) a good area and delete the excess.

Step 9

Bricks come in different colors. I chose two shades of orange. Paint over the first color, for example, green bricks (parameter Contiguous (Adjacent pixels) at the instrument Bucket tool (G) (Fill) must be inactive).

The darkest shading is painting the contour of the bricks.
The remaining two shades fill the remaining bricks:

Duplicate the texture so that, just in case, we always have the original on hand.

Step 10

Copy the texture and flip it horizontally to make the side of the house, which we darken slightly. To replace the color you can use all the same Bucket tool (G) (Fill) or just reduce the brightness Image – Adjustments – Brightness / Contrast (Image – Correction – Brightness / Contrast).

Step 11

We continue to copy the texture to such a height that it was enough to fill the whole house. Try to connect the textures on the corner neatly and without gaps.

Step 12

Add a highlight on the corner. Please note that the outline of the bricks should be visible, do not paint it completely. We can fill 1-2 bricks, then duplicate the highlight and distribute it over the entire height of the house.

Step 13

Now paste the texture on the building.
To make it easier for yourself, reduce the opacity of the texture so that the outline of the house can be clearly seen. Place the texture so that the lines on the building coincide with the horizontal contour of the bricks.

Then delete the excess.

Excess vertical areas can be easily removed with Marquee tool (M) (Rectangular selection). To get rid of the rest, select the area around the building usingMagic wand tool (W) (Magic Wand) and, moving the selection to the extra areas of the texture, click Delete.

Set the texture opacity back to 100% and merge it with the building.

Details

After finishing with the texture, we will deal with the rest of the details.

Step 1

Make windows visible again.

We are determined with the size of the windows. Experiment with different sizes and choose the most suitable. Only the height of the door remains the same.

Step 2

Having decided on the size, we continue to refine the windows.
Remove the blue fill and close the contour.

Step 3

Now we will draw a window sill. In the center, I drew a gray line, but you can fill the element with one color.

We’ll use this shade of gray for materials such as concrete, cement, and gypsum. But using the same color all the time can be a boring job.

Step 4

Now add the volume. The sill is submerged slightly inward, creating a depth effect. To show the thickness of the wall, draw a vertical line.

Step 5

Now fill the wall with brick texture. The color of the texture does not need to change. All we do is add two bars at the edges to show the shadow and highlight. Also paint over the contour of the window sill with a dark brown color (with which we applied a strip of shadow).

Step 6

Now we draw the glass. Along the left and bottom edges we add lines of different shades to show the volume.

Step 7

Finish the frame by adding a transverse line.

Step 8

We finished one window, but we need two more types: wide (with additional vertical lines) and for the side wall, the color of which we adjust a little.

Notice that the window sill on the right wall is darker, as is the window frame. But the bricks on this side should be lighter, as the light falls on them.

Step 9

Copy windows and distribute them around the house.

Step 10

Now we go to the door. To speed up the process, take the door from the previous lesson on drawing at home.

Step 11

And repaint it.

To easily match the color, you can use the setting. Hue (Color tone) – Image – Adjustments – Hue / Saturation (Image – Hue – Saturation).

Step 12

On the door-posts, I added gray stripes, like on a windowsill, so that the whole building looked complete.

Step 13

Now move the door a little inward to give depth.
To easily remove extra pixels, select the door, invert the selection (Ctrl + Shift + I) and move it two pixels to the right and one down, then press the Delete button.

If necessary, fill the right places with color. Also, do not forget to shade the area where the door jamb is connected to the door.

Step 14

Now draw a ledge on the roof. In fact, this is the same window sill, but a little wider and darker because it has a different angle of inclination.
We start with the parallel lines of gray and dark gray colors.

Step 15

Make the right side darker, and draw a highlight at the junction of the two sides.

Step 16

Making the beveled edges on the ledge. Similar details are found on real homes. Such a projection in form resembles an inverted ladder.

Step 17

The roof area should be larger than the house. Close the roof contour and fill it with gray.

Step 18

Now add the inside corners.

And fill a large inner rectangle in dark gray. It may be tar or gravel.

Step 19

We also add a translucent texture to create a gravel or resin effect.

Step 20

Next we draw a foundation with several steps at the front door.
Draw the contour of the first stage, as close as possible to the house. On the sides we put two points, which we will later use to draw the railing.

Step 21

The following steps are drawn on the same principle, just move them slightly forward and lower.

Step 22

Fill the steps with color.

We also fill in the color of the angle between the steps and the foundation.

Step 23

Finish the base and draw a bright line between the brick and the foundation.

Step 24

On the new layer draw the outline of the railing. Please note that the angle of the railing is different from the whole house.

Step 25

Fill with color.

Step 26

Copy the first railing (Ctrl + C and Ctrl + V).

Few edit the copy.

Step 27

You can combine the entire foundation in one layer (Ctrl + E). The outline of the base of the foundation is painted gray (but darker than the foundation itself).

Step 28

Now add some additional details on the roof.
The house is depicted in an isometric view, so there is a lot of empty space on the roof, which we will fill now. At the beginning, I wanted to add a terrace, but on ordinary buildings they are quite rare, so I limited myself to standard elements that are everywhere on the roofs.

Perhaps this is part of the air conditioner …

Which looks like a regular box …

With air vents or something similar.

Step 29

Also, we can add a couple of chimneys.

To achieve the effect of the metal, use gray-blue for the shadows and yellowish-gray for the highlights. When finished, duplicate (Ctrl + J) the pipe and place it next to the original.

Step 30

Also draw some pigeons. This will make the work a little more interesting. Keep in mind that pigeons do not sit on each roof, so try to make them look as natural as possible. In addition to birds on the roof, you can draw a basketball basket, a sunbathing girl or boyfriend, paper airplanes, an eagle’s nest, flower pots, etc.

Fill with color.

That’s all!

Like this post? Please share to your friends: