Pixel Isometry Part 6: Building an Isometric House

By using the techniques we were talking at previous chapters we will draw an isometric building. I have decided to build a video games shop called "Marsh's Loft". Surely, you can build whatever you want.

1. Start with building a main outline of the rectangle. This will help to define the right scale for your building.

2. As the basic form of the cube looks quite dull, I have decided to add a more interesting upper section. This section is made from 3 slim squares, placed one on the other and then combined on its edges.

3. As we already have a base for our building, we can easily fill it with the selected color.

4. In order to make it more interesting I have added the cavity at the top of the building. Now we have a so called terrace on the roof and just an interesting detail.

5. Again we use the upper left source of light and select three variants of color: a basic color, and its light and dark tints. By using these three tones we fill in the each side depending on how the light hits our building.

6. Now let's add some details to the edges. The lightening of the inside edges of the building creates a cold effect. The effect from black outlines may be absorbent but adding these details indeed helps to impact the effect of completeness to our building. Note that I have also changed several black outlines with dark blue shadow.

7. I have added the window by drawing the rectangle and then just the same but less inside of the first one. This gave the effect of cavity and has created the outside window-sill.

8. The door was created according the same technology.

9. The shop is called "Marsh's Loft" but people won't know it without any sign. Here goes a small digression from our subject in order to know how to create an isometric sign.

10. Type a symbol in order to select the font type. I have selected the third one. Make sure that anti-aliasing function is disabled. One can download a great amount of fonts from the Internet. Such a collection of raster fonts will be much useful at pixel graphics.

11. At Photoshop menu select Edit-Free Transform-Skew and move your symbol to the isometric angle. You may do it approximately or use 25.565 degree angle.

12. Now use Marquee tool in order to select the symbol and then on the new layer select Edit-Stroke. Make sure that the size is of one pixel as well as its location is at the centre. This will give you the outline of your symbol.

13. Now copy the layer and move it a little bit behind in order to create two sides of our isometric symbol. Combine every edge by means of one upward and two lengthwise.

14. And now fill in each side with color and paint the pixels which won't be visible through our isometric symbol over.

15. And again by using the upper left source of light select dark and light tones and fill in the appropriate sides using these colors.

16. Highlight the edges by using lighter tint from the selected colors.

17. Add pure white pixels at every edge.

18. So now when we know how to create an isometric letter we can create the whole sign. I have created my sign "Marsh's Loft" and have placed it on the right edge of my building.

19. Last touches - I have added several details out of glass and several signs and titles above the door and on the windows.