We draw in Photoshop street in the style of pixel art

Final result:

One of the biggest advantages of isometric pixel art is extensibility. If you already have a base and basic elements, you can duplicate them and then put them together for a very good result.

This is what we will do in this lesson. We will collect our raw materials and put them together to create a small quarter. You will get a small environment, but if you spend enough time and effort, over time you can create a huge street or a whole city!

This article is a continuation of the series about pixel art. You will need advice from past lessons, as well as the materials received, so I advise you to carry them out, preferably in this order:

  1. Isometric pixel art in photoshop
  2. Draw a house in the style of pixel art
  3. Pixel art machine

If you are ready, we can begin!

1. Collect raw materials

We already have a decent amount of materials left over from past lessons. Remember to save them; Try to keep the originals and all modified versions, as they may be needed in the future.

The created objects are monotonous, so they are perfect for duplication. Our landscape will look more vivid and thoughtful if we don’t place completely identical objects and add some unique touches, be it funny characters, unusual cars, signs, graffiti or any architectural elements.

But now we will use the existing materials.

This is how our set of elements looks like:

We will put three houses in the block, but change their color so that there are not two similar buildings.

2. Change colors

Fortunately, for cars we already have a great variety of colors, obtained in the last step of the relevant lesson:

To diversify our houses, we will work on three color zones: walls, roof and doors. We will leave the corners and windows of the houses with the colors that they already have.

Step 1

Duplicate the house until you get four copies, all on one layer. Now we will select zones to repaint each of them. Let’s start with the roof.

We have one primary color with about four shades, so let’s zoom in and select them. To do this, use the tool Magic wand (Magic Wand Tool). At the same time you need to uncheck Adjacent pixels (Contiguous tool). I prefer to set the parameter Tolerance (Tolerance) on 0%, This allows you to select all the necessary areas.

To select all shades you need to zoom in on the image. Start with one of the shades by clicking on any part of the roof. Magic wand. Then hold down Shift, select more shades until the entire roof is highlighted (with the exception of the black stroke).

If tick Adjacent pixels (Contiguous tool) has been disabled, the roofs of all copies will stand out. Now, let’s copy and paste the selection onto a new layer, and then go back to the houses to repeat the process, this time for the walls. And then again for the door.

The result should be a layer with houses plus another layer with only roofs, another with walls and another with doors.

Step 2

Now with the tool Rectangular area (Rectangular Marquee Tool) select one of the roofs, and then change the hue, saturation and / or brightness settings to your taste. To do this, go to the menu Image> Correction> Hue / saturation … (Image> Adjustments> Hue / Saturation …). It is much easier than filling it with a new color that may not look as good as it was originally intended. If the colors that end up look good, but the texture and contrast are a bit lost, try adjusting the brightness and contrast by going to the menu. Image> Adjustment> Brightness / Contrast … (Image> Adjustments> Brightness / Contrast …) or use Color palette (Color Mixer) and instrument Fill (Paint Bucket) to manually enhance each color.

These are the roofs turned out for me. They are not very different, but in general they are rarely painted in bright colors with high saturation.

Step 3

Repeat the same process for the walls, but now you need to take into account the fact that their color should be combined with the color of the roof.

Step 4

Now the doors.

Now you can combine all these layers into one, to finish with decorating houses.

3. Plan the location

I decided to use three new houses for my quarter, as I like fresh colors more than the original blue.

Let’s go back and focus on one building to create a surface layout.

Step 1

We need a path that we attach to a small bulging part of the house. Draw a pair of parallel surface lines on a new layer, as shown:

They must be long enough for the car to fit.

Step 2

Continue by closing this zone with a long perpendicular line where you like best. This will determine the path and lawn in front of the house.

Step 3

Now let’s add some more lines to limit our property.

Draw another line for the backyard.

Now we have fully defined the boundaries for the yard.

Step 4

Let’s add some color to our surface. It will be easier if you make the layers in the foreground invisible for a while to be able to add lines or pixels that are missing when dividing our zones. Feel free to try any shade of green for the lawn and a little light gray for the driveway.

Step 5

Now we are missing a small path leading to the door of the house. You can give it any shape, but don’t forget to add it; the front door should not go directly onto the lawn.

4. Divide and multiply

It’s time to add something to divide the land between the neighbors: we will draw a fence around the back yard.

Step 1

We will need to do this on two different layers; one of them will be above the layer with the house, the other – under it.

Create a layer above the house. We can start the fence with a simple L-shaped contour that comes out of the wall and is built along the border of the yard.

Step 2

Here I added a color similar to a tree and darker lines inside to mark the borders, since the fence style I chose has them.

Step 3

In this step, I added a subtle texture consisting of dark vertical stripes. The fence itself is a lot of wooden planks brought together, so why not display it in our drawing.

Step 4

We need to add highlights to the corresponding zones: the upper edges and the very front corner.

Step 5

Because of the style of fence I chose, it is wise to add some dark lines. Fences are usually made modular, and the joints are an excellent detail; This will make the fence not so monotonous. Do not forget that the distance between the seams should be the same.

Step 6

The two sides of the fence are located in different directions, so they must have different lighting so that everything looks realistic. Do the same lighting as the house: if the right side of the house is darker, the right side of the fence should be the same.

Step 7

Now we need to draw a fence for the rest of the backyard. We will do this on a new layer, which we will place under the layer with the house.

Since you have already drawn a fence, you only need to copy, paste and make some changes. The result should be something like this:

The front portions of the fence, touching the house, should be at the same level.

Step 8

Now we are duplicating the whole yard. You can merge all the layers into a folder and then move the whole group while holding down the key Alt, to make copies on the fly.

Do it twice to get three houses. That should be enough for a fairly large quarter.

Step 9

Now we need to replace the houses with their multi-colored copies, which we already have. Just paste them into the desired layer.

Do the same with the machines. We already have a lot of different colors, so let’s include them in our work. One of the houses should be without a car to break down the monotony. You can add a character standing in front of the door.

Such a landscape may look a bit monotonous, however, it is not uncommon for a suburb. We will add some features to each home.

5. Finish the surface

Now we need to give all elements the appearance of one single environment.

Step 1

We start by removing all the unnecessary dividing lines (i.e., the lines at the junction of the surfaces).

I recommend combining all surfaces in one layer and then covering the black lines that separate them with green.

I prefer to achieve maximum organicity in the work. Sometimes, the results can be almost invisible, but thanks to them the effect is neat and clean. The lines at the junction of the fences should not be black, the lines between the grass and the concrete should be painted over dark green, the black lines in front of the path are not needed. All the lines at the junction of horizontal and vertical surfaces, even if they are of different colors or made of different materials, I prefer to soften.

Step 2

To soften the lines between grass and concrete, we better round these corners:

Step 3

We can give the grass a subtle illumination to make it look as if it grows slightly above the level of concrete. This can be easily done by selecting the dark grass trim with the tool. Magic wand (Magic Wand Tool), then move the selection up one pixel and eventually fill it with a light green color (check mark Adjacent pixels (Contiguous tool) tool Fill (Paint Bucket tool) should be removed).

Step 4

We already worked with textures, but edited them manually for better accuracy. Here, accuracy does not matter, since we just want to make the grass less uniform, so we will create a pattern.

Draw a few alternating dark (or light) pixels. If you may want to see how they look in the finished form before defining the pattern, look at the screenshot below. The drawing I use is simple:

To create it, you need to select a part of the pattern as shown above (one edge starts where the opposite ends), and then go to the menu Editing> Define Pattern … (Edit> Define Pattern …)

Then use the tool to apply it. Fill (Paint Bucket tool) and select Regular (Pattern) instead Main color (Foreground). Select the newly created pattern among the rest and fill it with a grass zone (tick Adjacent pixels (Contiguous tool) should be unchecked).

This is the effect. Perhaps my design is barely noticeable, but I do not want to create a high contrast here. I just need to get rid of the monotone color.

Step 5

We will need a sidewalk to walk around the block. Let’s start with the contour; it should not be far from the edge of the lawn, but should be ideally at the same distance from each face.

Step 6

Fill it with the same gray color that was used for the driveway and round the corners.

Step 7

Add some curb volume. You can move the entire surface a few pixels down, and then, by applying the alt offset, bring it back and paint the pixels between the contours. I hope you now know what to do: the lights on the front corners, the darkening on the sides.

Step 8

Machines will need help getting to the driveways. We need to make them biases.

This is the zone that will be required for each slope. We can start with a few simple lines, just to determine where our oblique entry will be.

Step 9

Here I made the whole bias a little brighter, as it receives a bit more light from a different angle. I also rounded the corners and added a line to merge both surfaces. We got a torn line, and this is not very good, but we will reduce the contrast and soften it to get an excellent result.

Step 10

This is what the final bias looks like. Most of the lines were softened in tone, since the entire surface is rather flat, so it should stand out a bit. I added anti-aliasing to reduce bumps and contrasts, but perfect anti-aliasing should not add too many colors; do not use the tool Gradient (Gradient Tool).

Step 11

Copy and paste bias for all homes.

Step 12

It’s time to add roads: first fill the background with asphalt color. This is best done on a new background layer.

Step 13

Add a little road marking around the block, placing it either on a new layer or on the same lawn.

The road should be wide enough for cars to fit. Dashed lines should be ideally distributed. Intersecting lines may have a different style, but two parallel lines will keep everything clean. Also, I do not use white color, because I do not want to give prominence to this road marking.


Quarter is over. If you want to propagate quarters, you can select everything, remove the visibility of the asphalt layer and copy everything (Ctrl + Shift + C), and then insert, align and correctly arrange the layers, and then repeat this process until you get the required number of streets.

Well, if you already have more models and types of cars, more house designs and other buildings, more characters, unique details, trees and bushes that will make the situation more rich. But all this takes time and effort! I hope that this lesson pushed you to the idea of ​​how to continue expanding your virtual pixel world.

Hope you enjoyed it, good luck!

Like this post? Please share to your friends: