Let’s create one more building for our isometric pixel art collection, this time under the Wizard of Oz theme. We’ll make a farmhouse based on Dorothy’s.
We’ll finish it in a sepia tone to match the film, but we’ll make it in regular color so that the building is an easily recyclable element to be used if the need arises.
1. Define the Size
We should use our pixel art character to find a size we like for our building.
Step 1
We’ll start with a square and a simple demarcation of a door to get a better idea of proportions.
The square doesn’t need to be big at all, as we’ll add more of a footprint next.
Step 2
Let’s add another square, smaller, attached to one side of the original one.
Step 3
And finally this longer section that will go on the back of the house.
If you really want to be faithful to the movie’s house, check for reference images of Dorothy’s farmhouse. It’s not completely clear which side is the front, but I’m quite confident Ms. Gulch enters through this door.
Step 4
Now let’s give the house some height. Take the original square, and Alt-nudge or copy/paste it a good height above the footprint. The character should be useful for this.
Step 5
The other two sections of the house have lower roofs, so repeat the above but without reaching the same height.
Looks a little confusing. Let’s clean it up.
Step 6
Remove the lines that make it seem as if the larger cube is see-through. Let’s just make it a solid box, with vertical lines connecting the corners.
Step 7
And repeat the above with the other sections of the farmhouse.
I kept the line separating these two sections for future reference.
The volumes should be pretty clear now.
2. Create the Roof
Let’s do the outlines of the roof. The geometry here can get tricky, especially if we want to avoid jagged lines, but there are a few shortcuts and foolproof lines we can use.
Step 1
In a New Layer, let’s make a copy of these top squares, in the same place as they are but in a contrasting color for easier editing.
Remember that you can draw lines very easily by clicking on one point while using the Pencil Tool, and then clicking on another point while holding down Shift.
Step 2
Now let’s give the bigger, taller roof a slightly wider footprint than the walls below. Roofs will usually cover a larger area than the walls.
Do the same to the smaller square, with the difference that it should grow only on the three sides that aren’t connected to the larger section of the house.
Step 3
Now to start projecting the roof upwards we can simply take one of the sides of a square, starting with the largest one, from corner to corner, copy it and then rotate it (Edit > Transform > Rotate 90?), and then connect this new line with a corner of the square.
Step 4
To finish the first side of the roof’s wireframe, you simply need a 1:1 diagonal line. You can draw it with the Pencil Tool or with the Line Tool, making sure its weight is 1 px and that anti-alias is turned off.
Step 5
To finish the wireframe for this section of the roof, we just need to replicate this new triangle we made and add one line connecting the two tips.
Step 6
Let’s get that shape clean, removing the rear lines. We also won’t need most of the right-facing bottom line.
Step 7
Now repeat pretty much the same process for the smaller square.
Make the triangle.
Step 8
Copy the triangle and add the roof ridge.
Step 9
And clean up the lines.
Step 10
For the longer section we’ll add a roof with a different inclination. It should simply be a horizontal line that shoots right out of the corner.
You’ll want to add a bit of volume to it so the roofs don’t look paper thin. That’s why I put two horizontal lines here. We’ll also do it to the other roofs a bit later.
Step 11
These new horizontal lines should extend a bit past their corner of the farmhouse. And from their corner there should go a 2:1 line, covering the whole side until it meets the big roof.
Notice the two small green lines added here. They’ll be used to find the point where this new roof surface will intersect with the big roof. Right now they’re simply marking the correct width.
Step 12
Now if we move the two green lines up (simultaneously) to where the right one meets the horizontal roof line, that would mean the left green line has to be at the point where this new surface meets the wall and the big roof.
Then you simply have to add another horizontal line from the intersection point.
And then clean up the green lines at the corner of the big roof that we won’t need anymore.
Step 13
Now we add the width to the rest of the roofs; they’re a few parallel lines, separated from the original lines by just one pixel.
Step 14
To finish the most important volumes of the house, we’ll need to add a small porch.
We can start with its footprint.
Step 15
If you copy the footprint up to the level of the base of the big roof then you’d almost have the roof for the porch—you just need to give it an inclination.
It’ll be a gentler inclination than the one from the big roof. It’s done simply as a 1:1 diagonal.
This inclination actually corresponds to the inclination of the last roof we added. Basically, these are the only lines that can make symmetrical vertical triangles in isometric pixel art, without any jaggedness.
Step 16
Now make the whole roof of the porch align to this new inclination.
Step 17
Add a pair of posts, holding up the roof.
And you’re done with the roof and most of the volumes of the farmhouse. Moving on…
3. Add Colors and Textures
Enough with the wireframes! Let’s get some color in.
The farmhouse is black and white, even after it lands in Oz, but we don’t need to stick to that. We’ll give it some nice colors to keep it as a possibly recyclable asset in our library of isometric pixel art… which should be growing if you’re following this series of tutorials.
Step 1
Lo-sat blue for the roof seemed a nice choice. Use slightly different shades for the different inclinations.
Also, add a bit of light (almost white) grey to the edges of the roofs.
Step 2
I thought I’d give a light grey to the walls, with just a tiny bit of saturation (5%) of a greenish hue.
Add different shades; for some reason it seems logical to me to shade the left side lighter than the right one. At any rate, it’s ideal to keep this constant so that the lighting looks consistent throughout your pixel art.
Step 3
Let’s make the walls reach the roofs—it looks much cleaner.
If you like, you could merge the roof and walls into one layer at this point.
Step 4
Add some wood color to the floor of the porch. And fill in the posts with the wall color.
Step 5
Now let’s soften the dark lines in surface intersections, wherever you get “valley” corners. I like black outlines to exclusively denote freestanding volumes.
So these “valley” lines should be similar to their neighboring surface colors, darker than both of them, but not black.
Not all pixel artists do this, but I think it’s a nice touch.
Step 6
Now the opposite of the “valley” corners would be the “peak” corners. And we’ll want these to be highlights; lighter than the neighboring surface colors.
This is more universally applied in isometric pixel art.
Step 7
Now that we’re done with coloring, let’s add some texture. It’s pretty easy for the walls, because they’re just wood boards—parallel lines.
In a New Layer, you can start by drawing lines over the visible house footprint lines. You might want to use a contrasting color for now.
Step 8
Then Alt-nudge so that you get a whole bunch of these lines, going up on the walls, all regularly spaced.
Step 9
You won’t successfully cover all your walls this way, so add the extra lines you may need.
Step 10
Now color the lines black, using the Paint Bucket Tool with contiguous checked off.
And then remove any part of them that’s not over walls. You can do this by going into the walls layer and with the Magic Wand, selecting all of the wall colors (excluding outlines) and then going back to the texture layer, inversing the selection (Select > Inverse) and hitting Delete.
Step 11
Then lower the layer opacity to 10% or less. You can do this via a shortcut: while the Move Tool is active, press the number 1 (for 10%) or rapidly press 08 (for 8%), or try multiple opacities and see what you prefer.
Step 12
To finish the wall texture we may remove all parallel lines from the very corners of the walls and add some vertical lines, like corner frames.
Step 13
On to the roof. Let’s make a roof tile pattern.
You could make tiny L shapes, repeating along a 2:1 line. And then copy that down, aligning them like bricks on a wall.
Then replicate and replicate till you get a large patch.
Step 14
Use this to cover the roofs.
Step 15
And then repeat the process we did with the wall, leaving only texture on the surfaces we want to cover.
But let’s exclude the back piece of roof because the angle is very different for that.
Then lower the opacity and merge down, if you like.
Step 16
For the back piece of roof we’ll do this very simple parallel 2:1 lines texture.
Applied in low opacity.
Step 17
The porch floor should have a wooden boards texture. Start with parallel lines along the length of the floor.
And then some extra pixels to make the separate boards.
Step 18
Lower the opacity and apply.
The farmhouse textures are complete.
4. Add Finishing Details to the House
Let’s add some nice windows and other details to the building. They’ll be based on the ones from the farmhouse in the Wizard of Oz, but should still be reusable and very nice looking.
Step 1
The frontmost walls will have double windows. We can start those with a rectangle, centered on the wall, and in a New Layer.
It would be ideal to align this rectangle with the lines of the wall texture!
Step 2
Now let’s make a frame for the windows. It can be 2 px in width all around. Looks nice and chunky.
Let’s also add a break, splitting the windows in half.
Step 3
Finally let’s split the windows vertically as well, with more of the chunky window frame, and clean up the rest of the lines.
Step 4
Add some color. I’m giving the window frame a slightly lighter shade of the wall color.
Remember you can modify colors with Hue/Saturation/Brightness (Image > Adjustments > Hue/Saturation…). Try it if you haven’t—it’s easy and fun.
Step 5
Now let’s soften those harsh black lines.
And add an extra bit of dimension with some subtle highlights, a bit of shading on the window frame, and the glass effect of your choice.
Step 6
For the window on the other wall we can just Alt-nudge the first one, place it centered on the wall, and for the lighting to more appropriately match, lower its brightness by about 10% with Hue/Saturation/Brightness (Image > Adjustments > Hue/Saturation…).
Step 7
We’ll want more windows, but no longer double. So you can copy the existing ones and bring the ends together, getting rid of the break in-between. I made the window on the right a little bit shorter vertically, as suggested by the reference images I found.
Step 8
Finish placing the windows by removing the parts that should be obscured by the structures.
Step 9
Now let’s get to that door. Those vertical lines were starting to get annoying.
Start with a frame, very much like the window ones, except there shouldn’t be any frame at the bottom, parallel to the floor. Instead you may want to bring some of the porch floor up on that section just a little bit, to give the door a deeper look, a bit of extra dimension.
Step 10
Add some color and soften the corner lines.
Step 11
And now add some detail to the door, which is actually a screen door with some semi-circles decorating the inner frame corners.
Right now it’s all done with one color.
Step 12
But it becomes a more understandable and more 3D-looking with some softer shading in some areas and a bit of highlighting.
Here I added a tan color to the parts that would be the actual screen door.
Screen doors are see-through, but I think we might risk making the door too convoluted if we tried adding some see-through detail.
Step 13
Here I added a small square to help find a spot for the chimney.
Step 14
Here are the extra lines to define the chimney shape.
Step 15
Add some color.
Step 16
Highlight and clean lines.
Step 17
And now let’s add a brick texture, starting with parallel lines.
Step 18
And finishing with the individual bricks, give some of the bricks slightly different shades for that extra bit of detail.
And the farmhouse is done! Now we just have to land it somewhere. Witches beware!
5. Add an Environment
We’re going to make a little scene around the farmhouse. So, um… why not a farm?
Step 1
Let’s start with a background color. I landed on this because I thought it looked enough like soil and looked nice enough with the house colors.
Step 2
Let’s give it a subtle dotted texture. It’s pretty much a grid, so it shouldn’t be too distracting if you keep the contrast low.
Step 3
Let’s make one more edit to the house before it’s finally grounded. We’ll add a base to it, which should look pretty much as if the porch is a step above the ground.
To get it started I drew a line along the footprint of the house, in a New Layer (underneath the house).
Step 4
Clone that line down a few pixels, and give it a wood-like color and some outlines.
Step 5
And as usual: shade, highlight…
Step 6
… and soften the line colors where the surfaces meet.
Step 7
The house has landed, so let’s bring a tree into the scene.
Or have you not yet done the tree tutorial?
Step 8
It’s not much of a farm if it doesn’t have any crops. And to plant the crops we should first ready the soil.
Here’s a simple way to make a tilled soil pattern.
Alt-nudge that into longer and longer lines and then into multiple lines, like this:
Step 9
And then place it against the corner of the scene. Crop whatever’s out of the frame.
Step 10
As for the crops, let’s make them carrots—or basically some generic, leafy, vegetable thing.
You can start making a bunch of small and slightly different leaves. Then color them green, flip them horizontally (Edit > Transform > Flip Horizontal) and add shading.
And then put a group of leaves together and touch up the shading and dark lines to have one crop.
Ideally do a few slightly different crops, combining the multiple leaves, so you don’t have the same one thing repeating over and over.
Step 11
Crops placed! Looks like a good year for carrot-thing.
Let’s just hope the weather doesn’t turn.
Step 12
We’ll add a fence between the crops and the house. Here’s a pretty simple way to make one. This gets repetitive but: outline > coloring > highlighting > softening dark lines.
Oh! and also, make it easy to tile.
Step 13
Around the rest of the house we’ll have a picket fence. It can become overwhelmingly dark if we make each board of the fence freestanding, so instead we can just make them thin and bunch them close.
Then to go around the house, make a flipped (and shaded a bit darker) version, plus a smaller, more ornate piece that will become the entrance.
Step 14
We are so close, but let’s add one more bit of unnecessary detail: a path to the house (in a contrasting color at first).
Step 15
The path will simply have the same ground color but no texture.
Place the fences.
When placing the picket fence, make sure the gate lines up with the newly made path.
And that marks the end of the pixel work.
6. Add the Sepia Tone
Finally to give it that Wizard of Oz “back-in-Kansas” look, we’ll add a couple of effects.
Step 1
Over the drawing, in a New Layer, fill in with a dark, low-sat, tan color, covering the entirety of the illustration.
Step 2
Change the layer Blend Mode to Color.
Step 3
And your graphic should look like this:
You can easily modify your sepia with Hue/Saturation/Brightness (Image > Adjustments > Hue/Saturation…).
Step 4
And why stop there?
You can add an iris effect with a black radial gradient and rounded corners to make it really presentable and a bit more old-timey.
Gradients are usually a no-no in pixel art, but as part of presentation it should be cool.
For a smoother look I enlarged the illustration 2x before applying the radial gradient and the rounded corner crop.
There’s No Place Like Home!
It took a bit of heart, brains and courage, but we did it! It’s a pretty nice postcard type of pixel art illustration, commemorating a really great piece of cinema.
I hope this was enjoyable!
{excerpt}
Read More