Step 5 – creating the houses
At this point in our process, we will start working on the little red houses, building them one by one.
5.1. The first house
Make sure you’re on the first building layer, and after selecting the Rectangle Tool (M) create a 144 x 276px object, making sure to color it using a darker red tint (#D46363). Position it using these coordinates:
- X: 286px
- Y: 418px
Now that we have our base shape it’s time to start adding some details to it so that it will actually look like a house and not a box.
First, let’s create the roof section, by drawing a 148 x 12px rectangle, coloring it using # 914444 and positioning it right above the object we created a few moments ago, making sure to right align the two.
Add some shadows by creating a 138 x 6px rectangle which we will position just underneath the roof, and another 6 x 276px one which will go on the right side of our house. Use the same # B35353 darker color value for both and then group them using Ctrl + G.
Next, we need to add the windows, which will be fairly simple to do.
Grab the Rectangle Tool (M) and create a 32 x 44px shape (#A55559), and position it using these coordinates:
- X: 254px
- Y: 334px
Now, we need to add some details to it. Again, using the Rectangle Tool (M) create another 20 x 38px shape, color it using # B2C7E6, and then bottom center align it to the window’s base form.
Add a middle divider to the glass, by creating a 20 x 4px rectangle, and both vertically and horizontally aligning it.
Create the window sill by drawing a 40 x 8px slightly lighter colored (#EB6D6D) rectangle, and positioning it just under the window’s base shape. Add a small highlight by creating a smaller 40 x 3px shape and vertically top aligning it to the previous one.
To finish up our little window, simply add a small shadow underneath the sill, by drawing a 32 x 4px object and coloring it using # 9E4A4B.
Group all of the window’s elements (Ctrl + G) and then create a copy of it by selecting and then holding down Alt while dragging to the right.
Select both of the windows, making sure to click on the first one to make it the Key Object and then align the second one at about 16px from it.
Once again group the two windows, and then repeating the same duplicating method create another row underneath at a distance of about 24px.
For the last window, we need to copy just one of the instance from the second row and position downwards at the same 24px distance.
Now that we have all of our windows, we need to add the door so that people can actually look at this and say it’s a house.
Create the base shape of our door by drawing a 44 x 72px darker rectangle (#A84F4F), and positioning it using the following values:
- X: 256px
- Y: 508px
Add the inner section by creating a 32 x 66px object, color it using #7A3939 and bottom vertical align it to the previously created shape.
Next, using the Ellipse Tool (L) create a 6 x 6px circle that will act as our door knob, color it in #F9BD82 and then position it using these coordinates:
- X: 266px
- Y: 521px
To finish our door simply create a 52 x 12px rectangle, color it in a light red (#EB6D6D) and then position it under the door’s main shape. Then create another smaller 52 x 4px shape, color it using # 9E4A4B and vertically and horizontally align it to the previously created shape.
Our first house is now almost complete, I say almost as we need to add the little colored bricks here and there to give it a more interesting feel.
Using the Rectangle Tool (M) create a bunch of little rectangles with various widths but a constant height of 8px and position them after your own taste as I want you to get a little creative.
5.2. The second house
Once you’re done with the first building, move up onto the second house layer, and create the base structure by drawing a 202 x 296px shape and coloring it using # E96D6E. Bottom align the object and position it exactly after the first house.
Next, as we did with the first one, we need to add a roof over our little building. Using the Rounded Rectangle Tool create a 218 x 18px object with a corner radius of 4px and position it exactly on top of the house.
Once you’ve positioned our little roof, it’s time to make some little adjustments to its top side, as we need it to be flat, without the round corners. To do so, grab the Direct Selection Tool (A) and select the two top center anchor points and erase them using Del.
As soon as you’ve gotten rid of the the anchors, press Ctrl + J to unite the remaining anchors and make the shape hole.
Add a slight shadow just underneath the roof, by creating a 202 x 8px object and coloring it using #C95E5F.
Now, we need to add a darker inner section (#C95E5F) to the roof by creating a 202 x 6px object which will go just above the adjusted part of the roof, and another 226 x 14px rectangle (#A55559) on top.
To finish the roof we need to add the little water tank. First let’s take care of the feet by creating two 6 x 9px rectangles which we will position at about 36px from one another. Color them both using #CCBEBF, group them (Ctrl + J) and then position them using these coordinates:
- X: 395px
- Y: 221px
Add some slight shadows by creating two 6 x 4px rectangles and positioning each onto the water tank’s legs towards the top side.
For the actual water tank, create a 48 x 54px object, color it using #EADADB, and then vertically align it to the feet, positioning the shape just above them.
Create the top section of the tank by drawing a 22 x 9px rounded rectangle, with a corner radius of 2px and repeating the same process of removing the bottom centered anchor points, making sure to unite the remaining ones and change the color to #CCBEBF. Once you have the shape simply vertically align it to the top of the tank.
To finish up the tank, simply add three horizontal lines (48 x 2px), color them using #CCBEBF and position them as you see bellow.
Once we’ve finished the top section of the second house, it’s time to start adding the windows. As the windows will be almost exactly the same with the ones from our first house, we will simply copy and paste on instance onto the second house layer, making sure to position it after these coordinates:
- X: 406px
- Y: 300px
Adjust the colors as indicated bellow:
Add one horizontal (20 x 4px) and vertical (4 x 38px) section to create the inner sections of the frame making sure to position the horizontal one a little more towards the top.
Next, assuming you have the first instance of the window grouped (Ctrl + J), create two copies and align them to the right at a distance of 16px from one another. Again group them, and duplicate the row two times keeping a distance of 24px between them, deleting the left side windows on the third row to make room for the door, making sure to group all the windows together (select them all > Ctrl + G).
Once we have our windows positioned, we can move on to the door. As before, we won’t actually create this part from zero, instead we will simply copy the one we already have on the first house layer, and position it on our current layer (second house) using these coordinates:
- X: 400px
- Y: 514px
Next, adjust the colors using the values shown.
Moving on to the bike stand, grab the Rounded Rectangle Tool and create a 92 x 28px shape (#FCC8D1), flip its fill with its stroke (Shift + X) and then change the stroke’s weight to 4px. Position the stand using these values:
- X: 490px
- Y: 540px
Quick tip: when dealing with stroke based shapes – that have no fill just an outline – I usually tend to expand them (select the shape > Object > Expand) when I know that I won’t be making any changes onto the stroke’s weight, so that if I copy it to another illustration it won’t get modified.
To finish the stand, simply create eight 4 x 24px rectangles distanced at 6px from one another, group them (Ctrl + J) and then vertically and horizontally align them to the frame. Add a 92 x 4px shape (#9E4A4B) under it to give it some depth, and group the elements together so they won’t go flying around.
Once you’ve finished the bike stand, add a bunch of bricks to the building, using simple rectangles of different lengths but with the same height (18px) and color (#C95E5F).
To finish up our second house, we need to create the right signboard which will go over the third and upcoming house.
Grab the Rounded Rectangle Tool and draw a 22 x 100px shape with a corner radius of 11px. Color it using a light shade (#EADADB) and then position it after the following coordinates:
- X: 578px
- Y: 325px
Create another smaller instance (10 x 88px with a corner radius of 5px) color it using a darker tint (#C7BABA) and then both vertically and centrally align it to the one we created before.
Add two 7 x 6px feet between the sign and the building, color them using the same #C7BABA and then distance them at 60px from one another.