5.3. The third house
Moving on to the third house layer, let’s start building some of the basic shapes that will form this part of our illustration.
First, create a 144 x 160px rectangle (#D46363) and position it to the right of our previously created house, making sure to bottom align the two. Add three shadow segments to the top, left and right side, keeping a constant width of 6px.
Move onto the roof section and create a 144 x 56px rectangle, which we will color using a darker shade (#914444). Adjust the top anchor points by moving them by 24px towards the inside (select > Object > Transform > Move and enter the value in the Horizontal field, leaving the Vertical one at zero).
Add some complexity to the roof by creating seven 144 x 4px darker rectangles (#7A3939) distanced at about 4px from one another, group them (Ctrl + J) and then vertically and horizontally align them to the roof.
As you might have noticed, the lines are actually going outside our little roof, which is something we don’t want them to do. To correct this, simply copy (Ctrl + C) and paste (Ctrl + F) the roof on top of the lines, and then with both of them selected, right click > Make Clipping Mask.
Next, let’s build our little chimney with the help of a three different sized rectangles:
- first rectangle: w: 18px / h: 8px / color: #C7BABA
- second rectangle: w: 18px / h: 4px / color: #B3A6A6
- third rectangle: w: 22px / h: 6px / color: #EADADB
Positioning them as in the image bellow.
Add a couple of different sized circles (#F0F0F0) on top to create the smoke.
Quick tip: as you can see, one of my circles has its bottom anchor point removed, so that I wouldn’t have to position it under the chimney element and the rest on top. You can do the same by selecting the anchor with the Direct Selection Tool (A) and pressing Del, uniting the remaining ones with Ctrl + J.
To create our little windows, we will actually copy one duplicate from the first house layer, as it has the exact size and colors that we need, and then place it using these coordinates:
- X: 597px
- Y: 438px
Adjust the height by selecting the top anchor points of the glass and frame using the Direct Selection Tool (A) and moving them down by 8px. Add some details to make it stand out by creating lighter (#D6E5FC) 20 x 24px section for the glass and a six 20 x 2px rectangles (#F0F6FF) positioned at 2px from one another, making sure that the inner frame section sits above all of the other elements. Also duplicate and move the bottom wider section to the top.
Once you have your new window, group its elements (Ctrl + J) and then create a duplicate by selecting and dragging to the right while holding down Alt. Distance the copy at 30px from the original. Create another duplicate using the same process but this time position it under the original at 26px.
Now we need to take a step back and move up onto the roof again and create the middle window. First grab one of the ones we already have and position it using the following coordinates:
- B: 632px
- Y: 360px
Adjust its appearance by removing the top wider section, and adding a triangle that keeps the same width but a different height, and a 32 x 3px shadow underneath. Modify the colors to make it a little lighter using the values you see below.
To finish our house copy the door from the first house and adjust the width and height of the two rectangles to make it a little bit narrower and smaller.
5.4. The fourth house
Assuming you’ve moved up to the fourth house layer, create a 100 x 180px (#E96D6E) rectangle, positioning it exactly on the right side of the previously created house.
Add a 108 x 6px wider section (#A55559), then a 100 x 50px (#D46363) taller one, a secondary 108 x 6px one and then finish the shape by creating a triangle like roof (#7A3939) with a width of 100px and a height of about 22px. Once you have these, create a subtle shadow underneath the top grid of the roof by drawing a 100 x 4px rectangle and coloring it using #BD5859.
Next, we need to create the window. Grab the Ellipse Tool (L) and create a 30 x 30px slightly darker tinted frame (#A55559) aligning it both vertically and horizontally to the rectangle underneath it.
Add a bluish 18 x 18px circle exactly in the middle and two 4 x 28px rectangles aligned in a cross on top of it.
To finish up the top section of this house add a couple of darker tinted bricks (#C25B5B), with a width of 16px and a height of 8px.
Focusing on the lower section of the building we need to create the stacked horizontal lines. To do so create two 100 x 2px shapes, color them using a lighter shade #EF787E and position them as follows:
- X: 754px
- Y: 380px
- X: 754px
- Y: 553px
Once you have them locked in place we need to create a blend of 28 steps between the two.
First select the two lines, go to Object > Blend > Blend Options and change the Spacing to Specified Steps entering 28 in the value field. Then go to Object > Blend > Make to actually create the blend.
Now let’s create the middle window. Grab the Rectangle Tool (M) and draw a 50 x 44px darker shape (#A55559), which we will position using these coordinates:
- X: 754px
- Y: 420px
Next create three bluish (#CCE1FF) rectangles with the following values:
- left side top rectangle: width: 5px / height: 28px
- left side bottom rectangle: width: 5px / height: 6px
- right side rectangle: width: 10px / height: 38px
We will align each segment at a distance of 4px from one another and once we have our left side rectangles we will drag and create a duplicate for the right one, making sure to group and reflect them horizontally.
Lastly copy and paste the bottom wider section, the sill from the second house and widen it until each side goes about 4px outside of the window frame.
For the door section, simply copy the one from the third house and adjust its width until the frame has 38px and the inner darker part 26px. Then position it using the following coordinates:
- X: 754px
- Y: 506px
Once you have the door in place, we need to create the stairs and the railing.
Start with the base and create three rectangles with the following values stacking each one on top of the other:
- first rectangle: width: 56px / height: 6px
- second rectangle: width: 50px / height: 6px
- third rectangle: width: 44px / 6px
Then we need to create four 4 x 14px taller rectangles which we will position at 6px from one another, making sure to left align them to the base of the stairs once we have them grouped (Ctrl + G).
The last piece of the rail will be a wider 34 x 4px rectangle which we will position exactly on top of the previously created objects. Color all the elements in #FCC8D1 and then create one big group so that they won’t get lost if you move something by accident.
5.5. The fifth house
Moving on to the fifth and last house, we will start by creating a base of 216 x 160px and position it on the right side of our previous building. Give it a slightly darker color #D46363, and then add two shadows (#C25B5B), one on the left and one at the top keeping a constant width of 6px.
Add a darker (#914444) 220 x 8px segment on top of the base, and then another taller one of 194 x 100px (#D46363) which we will vertically align.
Once we have our second section of the building, of our second floor if you want to name it that, we need to add a shadow to this as well by drawing a 194 x 6px rectangle (# D46363) and a roof section represented by a 202 x 8px shape (#914444).
Next, we will copy the water tank from our first house and position it on right side of our roof, adjusting both the tank’s width and height so that it will be slightly wider and shorter.
While we’re still at the roof section, we need to create the rail. We will do so by creating a 42 x 30px darker object (#C7BABA) to which we will add a group of four 6 x 24px rectangles distanced at 6px from one another. To finish the rail simply add a 48 x 6px segment to the top of the previously created shapes.
Group all the composing elements of the rail and position them towards the left side of the roof.
Our next step is creating the windows. To make things easier, we will copy one from the third house and position it using the following coordinates:
- X: 852px
- Y: 338px
We will then adjust our little window, by removing the horizontal lines and second blue segment, then we will move the inner frame section a couple of pixels down, and change the tint of our blue to #D6E5FC.
Great, now all we need to do is create two copies towards the right side, at a distance of 20px from one another making sure to group all three of them (Ctrl + G).
Once we have our first row of windows, simply drag and create two copies towards the bottom section of our house, keeping a distance of 20px from each other, making sure to delete the middle one for the second row.
Add a little TV antenna to the top row of windows, by creating a 20 x 20px circle, color it using #EADADB and then add a couple of details as in the image bellow.
Lastly, but not least, we need to complete our little house by adding the door. As it has the same exact dimensions and colors as the one from the third house we will copy (Ctrl + C) and place (Ctrl + F) it on our last building making sure to vertically center it.
Once we have all of the houses done, we will add a couple of details to finish our illustration.
Step 6 – adding the final touches
6.1. The street lights
Hop onto the street lights layer, and using the Rounded Rectangle Tool create a 8 x 25px shape, color it using pink (#FCC8D1) and then position in front of the second house, a few pixels shy from its left side. Using the Direct Selection Tool get rid of the bottom anchor point by selecting and deleting it, uniting the remaining ones (Ctrl + J). Add a 4 x 122px rectangle, color it in a darker shade (#EDBCC5) and then center bottom align it the previously created shape. Finish the piece by adding a 12 x 12px circle on top and coloring it in the same color as the base (#FCC8D1). Select all three components and group them together (Ctrl + G).
Create a copy of the street light and position it in front of the fourth building.
6.2. The trees
Start by building the base, using a 42 x 8px rectangle, which we will color using #BFB2B3. Then, create one 6 x 15px shape with a corner radius of 3px and using the trick with the Direct Selection Tool (A) remove its bottom anchor. Create three new duplicates from it, and position them at 4 px from one another. Group them, and then vertically center them to the base.
Next, create another 26 x 4px section (#BFB2B3) which will go underneath the previously created elements.
Draw a 10 x 100px object which will act as the trees main body, and color it using #936161, making sure to position it under the little fence right at the top of the wider rectangle.
Then using the Pen Tool (P) create a shape similar to the one I have and color it green (#91DBA6). Add a subtle shadow (#704A4A) underneath the green section of the tree and you’re done.
Group all the elements of the tree and fence together, and then create a copy which will go in front of the last house towards its right.
6.3 The clouds
The final piece of our illustration, the clouds are probably the easiest to make. Using the Rounded Rectangle Tool create a 32 x 10px shape, color it using #DEEBFF, and then add a smaller 8 x 8px circle and finally a larger 14 x 14px one and position them near one another on top of the first created shape, making sure the bottom halves of the circles are inside the base shape.
Group all of the composing elements of the cloud and then sprinkle a couple of copies here and there.
That’s all folks!
I hope you enjoyed this tutorial, and managed to learn something new along the different steps of the process.
P.S. Thanks for being extremely patient, as this tutorial has been one of the longest I’ve ever done, but I hope that all the information was put to use by all of you readers out there.