Home Sweet Home
In this part of the graphic guide, I'd like to show you step by step how to pixel a building.Step 1: What does a house look like?
That sounds silly, but really, what does a house look like? Thinking of a house yet? Maybe like that?
Yes, obviously you can see that this is a "house", even though it has a high degree of abstraction. Everything you wish for in a house is there: A wall to protect you from the outside, a roof to protect you from rain and snow, there is a door so you are not locked in, there are windows so there is light inside, and the chimney says it's even warm inside. So yeah, people who think of a "house" often have an image similar to that in mind, they don't even realize the degree of abstraction. However, if you start just with that image in mind, you'll get a result somewhat like that:
...and that does not quite reach the quality we want
So first of all: You can not create "any" house. "Any" house is a generic prototype with no details and does not look like a real house. Google is your friend: There are more then enough real estate agencies which put pictures of their rentals on the internet, just search for "house" on google images. For this tutorial, I chose a prefabricated house that was on the first page when googleing "haus".Step 2: Scale & Proportion
One floor is 20 pixels high. Nobody will remeasure it once you are done (an obvious lie, I will), and the bigger the building, the lower floors can be. Still, too much deviation will be noticed.
Use the 20px floor high to measure your original. It does not have to be exact since your house is allowed to be bigger or smaller then the original, and later it's all about the impression it makes. It's usually enough to measure with your sense of proportion.
By the way, "Pak192" means that one of the isometric tiles has 192 px on it's broadest poing - from the southwest corner (left) to the northeast corner (right). One of the tile boarders is thus 96 px broad and 48 px high. But you have to think with the perspective: A horizontal line of 100 px lenght would be 72 px broad and 36px high once you put it in perspective.
The following image shows two things: On the bottom, it's a common sidewalk tile, a nice base for city buildings (please don't copy that, it's an old version). On top you see an arc that should explain how lines of the same 'real lenght' behave in perspective. To get such an arc, use an ellipse tool and make the shape twice as broad as high.
Thinking about scale and proportion before you start pixeling also precents another common beginners mistake: Cubic buildings which are as big as the tile, so that the buildings walls are at the boarder of the tile. Why would you bother to put a window in if 5cm beyond the glass you only see the neighbours wall? You need a little distance between buildings, gardens and greenery.Step 3: First Pixels
Before we start putting pixels together just a really short digression about software, since you might not even know what you can use. It's quite simple, though: Use what you can use. There is no need to use GIMP of Photoshop if you are not already using these programs, they are hard to learn and have not that much benefit for beginning pixelers. For first steps MS Paint is enough, but I'd like to recommend aseprite
, because it is just as simple, but with layers.
First thing to do with any building ist starting with it's basic shape. That's usually one or several cuboids, sometimes also cylinders.
Note that the line in the foreground is two pixels broad. Later there won't be a black outline at this spot, so you want the ledge to be inbetween two pixels, not on a pixel.
The cuboid is best placed somewhere in the northwest of the tile. That way you can see the garden in front of it. Also, remember that the sun is in the south, you wouldn't build your house in a way that all your garden is in constant shadow, would you? Anyway, if you are smart enough to put the cuboid on a different layer, you can move it around later.
Next you extend the basic cuboid to look more and more like your original house.
I like to use several different colors, just so I know what's what. Once the gridwork is done, you can fill in the surface. You don't use the color you want it to have in the end and don't care for any texture, but you want to use different shades according to the light already. It comes from the south or southsoutheast, so the southern facade is brighter then the eastern facade. On the roof, the 'backside' (west and north) parts are darker then those in front.
This might be a good time to add the garden, in a similar provisional way. A place to park a car should use the sidewalk pattern or a soft transition to/from it.
Obviously, a wall like this is rather useless, since you can just go around it. However, you usually don't want high walls on the south or east side of your building since they obscure a lot. Because of that, we'll use a fence instead. Since a fence would be partly transparent, we don't want to do it just yet - first everything behind it should be finished.Step 4: Color & Texture
Quite often a rather simple pattern is enough to show some structure and therefore plasticity. A good example is a brick-structure for walls. The contrast between the colors used for it should not be too high, you don't want people to see the pattern, they should rather see a more vivid but unified surface.
As for the choice of colors, I like to pick a handful of shades beforehand and stick to them.
As you can see, the garden wall and facade of the house got a brick texture (that texture can be seen in the upper left corner, but scaled and with high contrast) - this is a cheap method, it allready looks better then one solid color. But it's still too sterile, so now you can tweak the colors in parts of the walls, as can be seen in the next image (take a close look).
It's the same for pretty much any structure, next we do roof and wooden terrace. Note that while this method yields good results, often it's a good idea to add irregularities as well. The more you pixel by hand instead of trusting textures, the more vivid your result will look. However, literally placing each single pixel by hand is a lot of work. You need to know for yourself whether it's enough to look good or strife to look great
Windows are more then empty holes. There is a window frame, often wooden, and quite often the window sits a bit inside the wall.
In this case, the window frame is on the same level as the wall, but the glass is a bit deeper inside. This is but one method of doing it, just look at (newer) buildings in the pak to see different methods.
I magnified the windows with higher contrast to make it a bit easier to understand. The window frame is one pixel broad, and the window sits one pixel deeper inside. The cube is just to understand which shade is which direction.
To display ground you have two possibilities. The first is to just leave that part transparent, #E7FFFF, so you can see the though to the ground. However, you could also argue that a well-groomed lawn looks the same everywhere. If the whole garden is fenced in, you can green it yourself. It's probably easiest to just take a screenshot of the ground in the game and put it in, but you can also draw your own. (make sure it fits, though)Step 5: Finishing Touches
After everything got some color you may think you are done. Nope, not at all. Building a house is just a bit of construction work, now the really creative part starts: Details. Those are not bound to any raster and quite often even perspective gives up on them. You are astonishingly free in doing them, which also means you need to experiment what looks good and what does not.
It makes sense to borrow small parts from other pixelers, especially trees. Once you put some stuff in, it should get easier to add something on your own or modify others work to fit your needs. Just don't get lazy, if everyone would just borrow from others and never create parts on their own, we would be stuck with what we have now.
Now to add the fence. I just made two vertical lines and joined them with some pixels inbetween, then copied it. There were no special thoughts put in it, though - I did it once, and it did not look good, so I did it a second time and it worked. That's how many details come to life
What's special about this fence is that it does not use a black outline. This is okay for really filigree objects in a dark color, but don't use that too often.Step 6: Winter Wonderland
I often had the problem that I thought I was done already, only to remember that I need a snow image as well.
The first thing you do when you convert to a winter graphic is to remove everything that's not there in winter. This includes trees which look completely different. It's really easy to do if you thought of doing several layers.
After that, the rule of thumb is: "upside is snowy", although some parts might be cleared from snow. Flat roofs are completely covered by snow, steep roofs may have less on them.
(Note: I don't like how it looks, nowadays I'd do it in a different way. However it's 'good enough' for the pak
)Step 7: There shall be light!
If you want your windows to glow in the night, you need to use special colors. I usually use #57656F and #4D4D4D for windows. As a start, just make all your windows these colors.
What we need next is the "Glowworm Hunter" - the Tool Shades.
With that, you can load a png file and see how it would look at night.
We did a good job there, no glowworms. (= stray pixels which accidently got a special color. Especially common with snow images)
But it's still not good. Electricity isn't cheap, who'd have all the lights on all the time? With the "special color ereaser" you can shut off the lights and help the owner save some money. But think about how the rooms are distributed. Quite often, neighbouring windows belong to the same room, so they are either both on or off.
Obviously, you do the same with the summer graphic. The next step is presenting your work on the forum and starting your next building/learning how to use makeobj