How to Create a Flat Cityscape in Adobe Illustrator

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

Positioning the base

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.

Adding the roof

Newsletter Template Builder

With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.

Try FreeOther Products

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.

Adding shadows

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

Creating the first

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.

Adding details

Add a middle divider to the glass, by creating a 20 x 4px rectangle, and both vertically and horizontally aligning it.

Bootstrap Template Builder

With Startup you can build a website online using the Bootstrap builder with ready-made designed and coded templates and themes.

Try FreeOther Products

Adding the window divider

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.

Creating the window sill

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.

Duplicating the window

Once again group the two windows, and then repeating the same duplicating method create another row underneath at a distance of about 24px.

Adding another row

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.

First house

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

Creating the first door

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

Positioning the door knob

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.

First house finished

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.

First house with bricks

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.

Positioning

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.

Adding a roof

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.

Delete these anchor points

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.

Adding the top shadow

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.

Second house

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

Positioning the water tank

Add some slight shadows by creating two 6 x 4px rectangles and positioning each onto the water tank’s legs towards the top side.

Water tank

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.

Aligning

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.

Water 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.

Water tank finished

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

Positioning the second house

Adjust the colors as indicated bellow:

Window color values

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.

Second house first window

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).

Positioning the second house's windows

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

Positioning the door on the second house

Next, adjust the colors using the values shown.

Color values

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

Positioning the bike stand

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.

Bike stand finished

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).

Second building almost finished

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

Positioning the sideboard

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.

Building sign finished

1 2 3
Andrei Ștefan

Just another young gun coffee fanatic from Europe, designing colorful worlds one pixel at a time. When I'm not "making stuff" you can usually find me at my place, flipping news and catching up on all the crazy things happening in both the tech and design realms. If you want to drop me a line you can easily reach me on Google+ or Dribbble.

Posts by Andrei Ștefan

Never miss an article or news again.

Sign up to get fresh stuff in your email monthly. For those who want to keep in touch with web design and development trends and tools.

Learn More About Newsletter
Cookie Icon
We use cookies to ensure that we give you the best experience on our website.
  • I disagree
  • I agree