How to Create an Isometric Pixel Art Neighborhood Block in Adobe Photoshop



Final product image
What You'll Be Creating
One of the best traits of isometric pixel art is its expandability; if you have already made basic, recyclable elements, you can reproduce them and put them all together in ever-expanding scenes.
That's what we'll be doing in this tutorial. We'll gather our assets and put them together to make a neighborhood block. You'll have a small environment, but with enough time and effort you should be able to eventually make a whole neighbourhood or city!
I've written three tutorials that precede this one. You'll need the tips and lessons from them as well as the assets created in them, so I advise going through them, preferably in this order:
If you're caught up, then congrats! you're ready to start!
We already have a decent number of assets from the previous tutorials. Remember to archive them; try to keep all the originals and any modified versions for any future reuse.
The items we've made are quite generic so they'll work fine for duplication. Our scene could look a lot more alive and thought out if we don't settle for only the generic elements and add a handful of unique items, be it funny characters, unusual vehicles, signs, graffiti or landscaping and architectural elements.
But for now we'll mostly use what we already have.
Here's what our elements look like together:

our previously created assets
We'll put three houses on our block, but we'll change their colors so no two houses are exactly the same, at least in that regard.
Luckily for the vehicle we already have a nice variety of colors, per the last step of that tutorial:

our collection of different colored cars
For changing up the houses we'll be working mostly on three color areas: the walls, the roof, and the door. We'll leave the white corners and edges and the windows the colors they already are.
Duplicate the house until you have four, all in the same layer. Now we'll select the areas to change across all of them. Let's start with the roof.
We had one basic color but in about four shades, so let's zoom in and select all shades. This is done with the Magic Wand Tool, leaving the Contiguous tool option unchecked. I like setting the wand at 0% tolerance because after I pick a color I make sure to reuse it in all related areas.
To select all shades you should be zoomed in. Start with one of the shades by clicking any part of the roof with the magic wand. Then, holding down Shift, you'll select more of the shades until the selection is a solid block that includes all the roof shades (but not the black, or near black, outlines).

making the roof selection
If the Contiguous tool option was unchecked, the selection will have been applied to all of the house copies. Now let's copy, paste onto a new layer, and go back to the houses layer to repeat the process, but this time for the wall. And then once more with the door.
You should end up with the houses on one layer plus another layer with just roofs, one more with walls, and another with doors.
Now with the Rectangular Marquee Tool select one of the roofs and alter its hue, saturation and/or brightness (Image > Adjustments > Hue/Saturation…) settings to your liking. This is much easier than filling it all with a new color that might not even look as good as originally thought. If the colors you end up with are nice but the textures and contrast get a little lost, then try adjusting their brightness and contrast (Image > Adjustments > Brightness/Contrast…) or use the Color Mixer and Paint Bucket to manually get each color right.
These are my roofs. They're not all that different, but then roofs will rarely have colors that aren't dark and low in saturation.

changing the roof colors

Repeat the same process for the walls, but now taking into consideration how these new wall colors complement the new roof colors.

changing the wall colors

And then the doors.

changing the door colors
We can now merge these layers into one to finish up the different colored houses.
I decided to use the three new houses for my block as I liked the new colors better than the original blue one.
Let's go back to focusing only on one for now to make the surface layout.
We'll need a driveway, and we'll have it line up with the small protruding section of the house. Draw a couple of parallel surface lines in a new layer like this:

first lines for the driveway
They should be long enough for the car to fit.

car should fit

Go ahead and close that area off at the length you like with a long perpendicular line. This will define the driveway and front lawn.

driveway and front lawn line

Now we'll add a few more lines for the edges of the property.
adding edges to the property
And one more line for the edge of the backyard.

adding property boundaries
Now we've defined the property entirely.
Let's add some color to our surface. It might be easier to make the foreground layers invisible for a while to add any lines or pixels missing to separate our areas. Feel free to try any shade of green for the lawn and some light grey for the driveway.

adding color

Now what's missing is a small walking surface that leads to the front door of the house. You can make this in many shapes, but just remember to add it; the front door shouldn't lead directly to the lawn.

front door path

It's time to set up some divisions between neighbors: we'll be adding a fence around the backyard.
We'll have to do it in two new different layers; one of them will be over the house layer and the other one under it.
Here's the one that's over the house layer. We can start our fence with a simple L‑shaped outline, coming out of the side of the house and then lining up with the edges of the property.

starting the fence

Here I've added a wood-like color and darker lines inside to denote some borders, as the fence style I've chosen to draw does have borders.

adding detail to the fence

Here I added a subtle texture of darker vertical stripes. The fence is a succession of wooden boards put together.

adding texture to the fence

We should add highlights to the usual areas: the top edges and the frontmost corner.

adding highlight to the fence

And because of the style of fence I chose to make, it also makes sense to add some darker lines. Fences are usually modular, and it's a nice detail to show the seams; it makes the fence less boring. Remember to keep the seams regularly spaced.

adding seams to the fence

The two sides of the fence are facing in different directions, so they should have different lighting, lest our fence lack dimension. Keep the lighting in keeping with the house's: if the right side of the house is darker, the right side of the fence should be as well.

adding shading to the fence

Now we'll need to fence the rest of the backyard, we'll do this in a new layer under the house's layer.
Since you already have drawn the fence, you only need to copy, paste and alter it and you should end up with something like this:

adding the fence for the back
The front parts of the fence, the parts that reach the house, should be at the same level.

fence for the back complete

Now we'll multiply the whole property. You'll want to group all layers into a folder, and then you can move the whole group while holding down Alt to make a duplicate on the fly.

repeating the whole property
Do it twice to get to three properties. This should make for a pretty nice block size.
Now we should replace the copied houses with the different color houses we have already made. Simply paste them into the proper layer.
Do the same thing with the cars. We already have a bunch of different colors so let's switch them up. One of the houses could be without a car to break up the repetition even more. We could have our character standing by the front door.

differentiating the three houses
It may still look a bit monotonous but that's not rare for a suburb. We have given all of the houses some nice differences.
Now we should make all elements look like part of one unified environment.
Start by removing all the unnecessary dividing lines (the lines where surfaces meet).
I recommend pasting all the surfaces onto one layer, and then covering the black lines that separated them with more green.
I like to apply a similar notion to many more lines. It may be subtle but I think it's for the best: the lines where the fences from different houses meet don't need to be black, the lines in between the grass and concrete can be a dark green, the black lines in front of the driveway won't be needed, and for all lines where vertical and horizontal surfaces meet, even if they're different colors or materials, I like to soften them if they're in direct contact.

neighborhood with softened lines

To prettify our concrete vs. grass lines we should make these corners round:

neighborhood with rounded corners on lawns

We can give a tiny highlight to the grass, so it looks as if it rises just a bit from the level of the concrete. This can be done quickly by selecting the dark grass outline with the Magic Wand Tool, and then moving that selection up by one pixel and finally filling the selection with the highlight green (with the paint bucket contiguous option checked off).

Grass highlight added

We've done textures before, but have applied them manually for more precision. This precision won't matter, because we just want to make the grass look less solid, so we'll make a pattern.
Draw some alternating darker (or lighter) pixels. You might want to try and see how they look when tiled before making the pattern. The pattern I'm using is as simple as‑this:

Tile pattern for grass
To create it, you would to make a selection as shown above (one edge should start where the opposite ends) and then go to Edit > Define Pattern…
Then to apply it, you'll take your Paint Bucket and select Pattern instead of Foreground in the tool settings. Search for your newly created pattern among the pattern gallery and fill the grass area with it (contiguous should be checked off).

Grass pattern added to lawns
Here it is already applied. Maybe my pattern is too subtle, but I don't really want high contrast there. I just don't want it to be a solid color.
We'll need a sidewalk to go all around the block. Start with an outline; it doesn't need to be far from the lawns' edges, but it should ideally be at the same distance on all sides from the lawns' edges.

Sidewalk added

Fill with the the same grey color of the driveways and round those edges.

Sidewalk with grey fill and rounded corners

And add dimension to the curbs. You can nudge the whole surface down a few pixels and then Alt-nudge it back up and fix all the pixels in between. I hope by now you know the drill: highlights on the frontmost corners, darker shading on the sides.

Add dimension to the curbs

The cars will need help to get to the driveways. We'll have to make ramps for them.
This is the area that each ramp will use. We can start with some simple lines just to denote where the ramp will go.

LInes added for car ramps

Here I made the whole ramp a slightly lighter grey, as if it's catching the light a bit more because of the different angle. I also rounded the corners and added a line to unite both surfaces. It's jagged, which isn't ideal, but we'll make it low contrast and dithered so it'll look fine.

Ramp finished

Here's the finished ramp. Most lines were softened in tone because the whole thing is quite flat and should barely stand out. I added dithering to reduce the jaggedness and contrasts but ideally the dithering shouldn't add too many colors; don't use the Gradient Tool.

Heres the finished car driveway ramp

Copy and paste the ramp for all houses.

Ramp added to all driveways

Time to hit the streets: we should have some asphalt color as background. Best apply it on a new background layer.

Asphalt color as background

Add some street lines all around the block, either on a new layer or on the same one as the lawns.
The should be just wide enough for cars to fit. The dashed lines should ideally be evenly spaced. The crossing lines can have different styles but two parallel lines keep things clean. Also I don't use white because these lines aren't details I want to have much strength graphically.

Streets added

The block is finished. If you want to tile your block you can select all, uncheck visibility to the asphalt layer and copy all (Command-Shift-C), and then paste and align and order the layers correctly to get infinity blocks.

Completed neighborhood drawing in isometric pixel art
It would be great if we already had more models and rear views of cars, more house designs and other buildings, more characters and unique details and trees and bushes to make our scene much richer. But that all takes time and effort! I still hope this tutorial gives you a pretty nice idea of how you could continue to grow your environments infinitely.
Hope you enjoy, and good luck!

TDasany

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

 

Copyright @ 2013 KrobKnea.

Designed by Next Learn | My partner