How to Create a Flat Cityscape in Adobe Illustrator

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.

Creating the base shape

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

Adding a roof

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.

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

Adding details 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.

Clipping mask to the roof

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.

Creating the chimney

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.

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 smoke

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

Positioning the first window

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.

Adjusting the window

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.

Positioning the rest of the windows

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.

Adjusting the roof window

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.

Third house finished

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.

Creating the fourth house

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.

Positioning the window

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.

Adding details to the round

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.

Adding the bricks

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:

first line:

  • X: 754px
  • Y: 380px

second line:

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

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

Creating the middle window

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

Positioning the fourth house door

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.

Creating the stairs

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

Creating the fifth building

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.

Building the second water tank

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.

Creating the second rail

Group all the composing elements of the rail and position them towards the left side of the roof.

Positioning the second rail

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

Positioning the window for the last house

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.

Adjusting the window for the fifth house

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.

All the windows

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.

Creating the antenna

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.

Finished

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

Creating the street lights

Create a copy of the street light and position it in front of the fourth building.

Positioning the street lights

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.

Creating the trees

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.

Trees added to the illustration

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.

Creating the clouds

Group all of the composing elements of the cloud and then sprinkle a couple of copies here and there.

 

How to create a flat cityscape in Adobe Illustrator

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.

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

Super-Intuitive Drag & Drop Template Generator

Create beautiful responsive emails and newsletters easily.

Learn more Try Free
Cookie Icon
We use cookies to ensure that we give you the best experience on our website.
  • I disagree
  • I agree