How to Create a Cute Illustration of the Janus House Using Adobe Illustrator

Hello there
fellow readers! In today’s tutorial you will learn how to create a San Fran
inspired house using some of Adobe Illustrator’s basic tools such as the Rectangle Tool, the Rounded Rectangle Tool, and the Pen Tool. We will see why using layers
can improve the speed and precision of our workflow, but most importantly how
simple geometric shapes can create detailed artwork in a matter of moments.

That being said, let’s power up Illustrator and
start building.

1. Setting Up
Our Document

The first thing I always do when I start working
on a new project is to make sure that my document is set up properly. That being
said, let’s create a New Document (File
> New or Control-N) and
adjust some of its settings as seen below:

• Number of Artboards: 1
• Width:
  800 px
• Height:
  800 px
• Units: Pixels

And from the Advanced tab:

• Color Mode:
  RGB
• Raster Effects:
  High (300 ppi)
• Align New Objects to
  Pixel Grid: checked

Quick tip: raster effects control the way drop shadows,
textures and other effects display on different mediums. If you start creating
for digital but at the end of the project you decide you want to actually print
the design on paper, you will need to make sure that the Raster Effects are set
to a minimum 300 ppi value. The quickest way to do so is to go to Effect > Document Raster Effects Settings,and
from the Resolution section change
it to 300.

2. Setting Up a
Custom Grid

Since we want our illustration to be as crisp as
possible we will need to set up a custom grid, to which we will snap our
objects. First, go to Edit >
Preferences > Guides & Grid and adjust the following settings:

• Gridline every:
  1 px
• Subdivisions:
  1

Now in order to make sure that the snapping is
actually active, we need to go to View and
then click on Snap to Grid
(Shift-Control-").

Quick tip:
you should know that the Snap to Grid option
will transform into Snap to Pixel
every time you enter Pixel Preview Mode,
but that’s totally fine, as most of the time you will be going
back and forward with this display mode.

You can learn more about the Grid and how it
works by reading these two articles:

• Understanding
  Adobe Illustrator’s Grid System
• How to Create Pixel Perfect Artwork Using Adobe
  Illustrator

3. Layering Our
Document

Layers are
probably the most useful feature that Adobe has incorporated into Illustrator, and I find myself using them almost all the time. They give you total control over
your artwork, letting you display and position different sections onto one
another, but most importantly they enable you to focus and adjust specific parts
and elements really quickly without needing to ungroup or isolate those
objects.

Since our current project has a lot of details,
I found that we could split it into a couple of sections and layer their
elements using four layers which we will name as follows:

1. boardwalk
2. bottom section
3. middle section
4. top section

Quick tip: as we move through the different layers I
recommend you lock the ones you’re not currently working on so that elements
from one layer won’t end up on another one.

4. Creating the
Boardwalk

Let’s start
simple, by creating the boardwalk onto which we will position the different
sections of our little house. First, make sure you’re on the appropriate layer,
lock all the other ones, and then grab the Rounded
Rectangle Tool and create a 280 x 4
px shape with a Corner Radius of
2 px.

Color the object in a darkish shade of blue (#192C3B)
and using the Transform panel
position it using the following coordinates:

• X:
  400 px
• Y:
  686 px

5. Creating the
Bottom Section of the House

Since we created
our boardwalk fairly quickly, we can move on to the bottom section layer and start
building the lower part of our illustration one step at a time.

Step 1

Using the Rectangle
Tool (M) create a 210 x 120 px shape,
which we will color using #192C3B. Then, with the object still selected,Horizontal Center Align it to the
boardwalk, making sure their bottom edges touch.

Quick tip: If yourAlign
panel isn’t showing all the options as in my reference image, simply click on
the down-pointing arrow from its right top corner, and hit Show Options.

Step 2

Create a smaller 198 x 108 px rectangle, color it using #2C4251 and then both
horizontally and vertically align it to the previously created shape.

Step 3

Start giving the illustration some depth by
creating nine 198 x 2 px rectangles,
which we will color using #192C3B and distance from one another leaving a gap
of 6 px between them. Then group the
shapes (Control-G) and position them
towards the top section of the building’s inner rectangle,
leaving yet another 6 px gap.

Step 4

Create a copy of
the grouped lines that we’ve just created (Control-C > Control-F), change their color to white (#FFFFFF)
and then move them towards the bottom by 2
px so that they stick right under the original ones.

Since these will act as highlights, change their
Blending Mode to Overlay while lowering their Opacity level to 40%.

Step 5

Next we will add two 6 x 108 px vertical dividers, on each side of the structure we
currently have built, making sure to leave about 36 px between them and the house’s bottom section outline.

Step 6

Once we have our
dividers positioned, we need to add two 4
x 78 px black (#000000) rectangles on each outer side of them, making sure
to top align them.

Since these will act as shadows, we need to
change their Blending Mode to Multiply and lower their Opacity to 14%.

Step 7

Add a couple of highlights between each of
the horizontal lines, by creating a bunch of 2 x 4 px and 2 x 1 px smaller
segments, giving them the same Blending
Mode and Opacity level as we did
for the previous ones.

Quick tip:
As you might have noticed, the top highlight segments are slightly smaller in
terms of height (just 2 px tall)
since we will add an overlaying shape in the following steps.

Step 8

Next, let’s start working on the horizontal
dividers, by creating a 216 x 16 px
Rounded Rectangle with an 8 px
Corner Radius. Color the shape using #192C3B and then position it just
under the last pair of highlights, making sure to Horizontal Center Align it to the larger shape of this section of
our house.

Step 9

Once we have the “outline” for our divider, it’s
time to add the inner fill segment. To do so, create another204 x 4 px Rounded Rectangle with a Corner Radius of 2 px. Color the shape using #405866 and then position it on top of
the previously created shape.

Step 10

Start adding details to the divider by creating
a top half highlight by duplicating (Control-C
> Control-F) the inner lighter segment, and then selecting and deleting
(Delete) the bottom centered anchor
points using the Direct Selection Tool
(A).

Once you've removed the anchors, press Control-J to unite the remaining ones, and then change the shape's
color to white (#FFFFFF) setting the Blending
Mode to Overlay and the Opacity level to 40%.

Step 11

Add two smaller 6 x 16 px vertical dividers onto the horizontal one, positioning
them towards the outside by about 6 px.
Then add a shadow and a highlight to each side, using the same values we used
for the other ones.

Step 12

Grab the Rectangle
Tool (M) and create a 198 x 4
px shape, color it black (#000000), change its Blending Mode to Multiplyand its Opacity to 24%, and position it right under the outline of the horizontal
divider.

Once you’ve done that, select all the composing elements of the
divider and group them together using Control-G.

Step 13

Add taller highlights and shadows segments
underneath the horizontal divider shadow, one for each side and the center.

Step 14

Since the left and right narrower sections
should be darker, we need to cover them up with two 36 x 108 px rectangles (#192C3B) which we will have the Blending Mode set to Multiply and the Opacity level to 14%.

Now, remember I told you to group the horizontal divider? Well that’s because
we need it to be positioned on top of these two shadows that we’ve just
created. To do that, simply select the divider andright click > Arrange > Bring to Front.

Step 15

Switch over to the Rectangle Tool (M) and create a larger 216 x 18 px shape (#192C3B) which will act as the outline and a
slightly smaller 204 x 6 px one (#2C4251)
which will act as the fill. Select and position the two towards the top side of
our house’s bottom section so that
the outlines overlap each other.

Step 16

Next, create a smaller 204 x 2 px rectangle which will act as a highlight and another 198 x 4 px one which will act as a
shadow. Use the same values as before in terms of color, Blending Mode and Opacity levels,
and position them as follows.

Step 17

Add the rest of the highlights onto the piece,
making sure to push them a little towards the outside to give the illustration
some dimension.

Step 18

Create a copy of the bottom horizontal divider
by selecting and then dragging it towards the top while holding down Alt (to create the duplicate) and Shift (to drag perfectly straight).

Position the copy so that its bottom outline section overlaps that of the
top side of the second divider, and then isolate it (double click on the
group). Then, adjust the width so that the outline and fill protrude towards
the outside by a couple of pixels.

Step 19

Add two 6
x 28 px vertical dividers (#192C3B) and some shadows to each side of them.
Once you have all the elements of the second topside divider, group them (Control-G) so that things won’t
accidentally get misplaced.

Step 20

Start working on the window by creating one 50 x 72 px rectangle (#192C3B) which
will act as the outline or frame, and another smaller 38 x 60 px one (#DDDDBF) which will serve as the glass. Center the
two, group them (Control-G) and then
position them between the first and second divider.

Step 21

Start adding details to the window such as the
vertical and meeting rails (2), highlights and shadows (3), horizontal bars
(4), horizontal bar shadows (5), the sill (6 and 7), sill highlights and
shadows (8 and 9).

Once you have all the elements of the window
grouped together (Control-G), you should
be done with the bottom section of the house, which means we can start working
on the middle one.

6. Creating the
Middle Section of the House

Step 1

Assuming you’ve already moved up to the
middle section layer, and locked the one underneath, grab the Rectangle Tool (M) and create the fill
and outline by drawing one larger 210 x
156 px shape (#192C3B) and one smaller 198 x 144 px one (#536D7C).

Group the two (Control-G) and then Horizontal
Center Align them to the bottom section of the house, making sure that the
outline overlays that of the topmost horizontal divider.

Step 2

Add two 36
x 26 black (#000000) rectangles on each side of the lighter blue section of
the house to add more dimension to it. Once you have them positioned in place,
change their Blending Mode to Multiply,lowering their Opacity levels to 14%.

Step 3

Start working on the horizontal decorative lines,
by creating six 198 x 2 px rectangles
(#192C3B), which we will distance from one another by about 2 px using the Align Panel’s Vertical
Distribute Space option.

Once you have them distributed, group them (Control-G) and then position them towards
the bottom of the larger shape underneath them, leaving a gap of about 2px.

Quick tip:
If you’re new to Distribute Spacing you
should know that in order for it to work you must first select the elements
that you want to space out, and then select one of them as the Key Object to which all the other ones
will be distributed.

Step 4

As we did with the bottom section of the house,
we will now start adding highlights, which will be slightly shorter. So using
the Rectangle Tool (M) create six 198 x 1 px shapes, color them using
white (#FFFFFF) and then position each of them underneath the previously
created lines, making sure to change their Blending
Mode to Overlay while lowering
the Opacity levels to 40%.

Step 5

Next, start adding the vertical highlights,
making sure to align them to the ones from the bottom section of the house.

Step 6

Add a set of two 6 x 26 px vertical dividers (#192C3B) to delineate the surface of
the building, and add two 4 x 26 px shadows,
one on each side. Also since we will be adding another horizontal divider for
the window, we will need to add a 198 x
2 px shadow as well.

Step 7

Start working on the first horizontal divider
for the window, by creating one 216 x 16
px rectangle (#192C3B) which will act as the outline and another 204 x 4 px one (#2C4251) which will act
as the fill. Add the top half highlight and then the three vertical pairs.

Step 8

Create the second horizontal divider by drawing
one larger 222 x 14 px rectangle (#192C3B)
and one smaller 210 x 2 px one (#2C4251),
applying the same type of highlights as we did for the previous one.

Step 9

Finish off the two dividers by adding two 6 x 24 px rectangles (#192C3B), one on
each side, and the shadows formed by them onto the shapes underneath.

Step 10

Start filling up the empty section of the house
with decorative lines, as we did a couple of steps ago, making sure to add the
side highlights.

Step 11

Start working on the window piece by creating
the base outline and fill which will hold all the rest of its elements.
Using the Rectangle Tool (M) create
one larger 126 x 106 px shape (#192C3B)
and one smaller 114 x 94 px one
(#2C4251). Center the two, and then position them onto the last horizontal
divider so that their outlines overlap.

Step 12

Draw the actual glass of the windows by creating
two narrower 18 x 78 px rectangles
(#678391) and one slightly wider 26 x 78
px one (#7A99A7). Horizontally and vertically align the middle piece to the
window’s outline, and then use the Vertical
Align Center option to align the other two, positioning them at about 22 px from the Key Object (the center glass piece).

Step 13

Next we need to start adding the top and bottom
casings by drawing two 114 x 4 px rectangles
(#192C3B) which we will position next to the top and bottom sections of the
glass pieces. Then we need to add the lateral ones by creating two 2 x 78 px rectangles (#192C3B) for each
of the glass pieces, making sure to position them on the sides.

Step 14

Using the Rectangle
Tool (M) add a bar across each glass panel, by creating two narrower 18 x 6 px shapes (#192C3B) for the left
and right ones, and a wider 26 x 6 px one
(#192C3B) for the center piece.

Then create the inner fill sections by drawing
two 18 x 2 px objects (#2C4251) and
one 26 x 2 px one (#2C4251) which
will go on top of the previously created ones. Group the elements together (Control-G) and then position them
towards the top side of the glass panels, leaving a gap of about 30 px.

Step 15

Start creating
the decorative corners which go underneath the bars, by drawing a 7 x7 px square (#192C3B) for the
outline (1) and a smaller 3 x 3 px one
(#2C4251) for the fill section (2). Since the shape will need some adjustments,
we will switch over to the Add Anchor
Point Tool (located under the Pen
Tool) and add two anchor points on the bottom and right side of each square.

First let’s add the anchors for the outline, at
about 3 px from the lower right
corner (2 – the green dots). Then using the Direct Selection Tool (A) remove the bottom right anchor point (2 –
the red dot) by selecting and deleting it (Delete). Now apply the same process to the fill section (3).

Once
you have adjusted both shapes (4), we need to add a small 3 x 1 px rectangle towards the top section of the fill which will
act as a subtle shadow (5). Finally change the Blending Mode of the shadow to Multiply
while lowering its Opacity level
to 24%.

Quick tip:
for a level of maximum precision you can switch over toPixel Preview mode (View > Pixel Preview or Alt-Control-Y) and zoom in on the
shapes. This way you will see the anchor points more clearly and most
importantly have more control over them.

In our present case, since we need to add a
bunch of new anchor points at a specific distance,Pixel Preview mode is the way to go.

Step 16

Once you’ve created the corner pieces, simply
position them onto the illustration right under the horizontal bars, making sure to add
a pair for each glass panel, reflecting the copies for the right side (select
> right click > Transform >
Reflect > Vertical).

Step 17

Next we need to add the inner styles between
the main glass piece and the side ones. To do that, simply grab the Rectangle Tool (M) and create one 14 x 106 px shape (#192C3B) which will
act as the outline, and then another smaller 6 x 94 px one (#2C4251) which will serve as our fill. Group the two
(Control-G) and then position them next
to the lateral casings, leaving a gap of 2
px between them.

Step 18

It’s time to give you a little bit of freedom
and let you get creative by adding details to the windows. Start by creating
highlights, shadows and reflections onto and under the different composing
elements. Take your time and be as detailed as possible in order for the
illustration to be more interesting.

Step 19

Cast two side shadows one on each side of the
windows, by creating two 4 x 94 px rectangles,
which we will color using #192C3B, setting their Blending Mode to Multiply while
lowering the Opacity levels to 34%.

Step 20

Finish of this section of the house by creating
a duplicate (Control-C > Control-F)
of the horizontal dividers from under the window, which we will position towards
the top. Since this section will goslightlyunder the one above, we need to
make sure to adjust the fill color of the first divider to #2C4251 and remove all
the vertical highlights.

7. Creating the
Top Section of the House

Step 1

Position yourself onto the last layer, the top
section one, and using the Rectangle
Tool (M) create a 222 x 32 px shape
(#192C3B) that we will use as an outline and another 210 x 20 px one (#536D7C) which will act as our fill. Center align
one to another, and then position them on top of the last horizontal divider so
that the outlines overlap.

Step 2

Add a couple of details to this part of the
illustration by creating a 210 x 4 px rectangle
(#192C3B) which we will position towards the top since it will act as a shadow
(Blending Mode set to Multiply, Opacity level lowered to 24%).

Next draw a 2 x 16 px and a 1 x 16 px rectangle, leaving a gap of 2 px between them. Group them (Control-G) and position a pair on the
left and on the right side of the base we just created, leaving an empty space
of 21 px between them and the
outline.

Step 3

Add a decorative section on each bottom side of
the fill shape, by creating nine 2 x 2
px squares, distanced at 2 px from
one another, and then add a 36 x 1 px rectangle
on top. Group the shapes (Control-G)
and then create a duplicate (Control-C
> Control-F), reflect it (right
click > Transform > Reflect > Vertical) and position it in place.

Step 4

Start working on the decorative piece that will go above the windows, by
creating one 136 x 8 px rectangle
and another slightly taller 136 x 12 px one
(1). Color the shapes using #536D7C and then unite them with the help of Pathfinder’s Unite option.

Now since the shape needs a little touch up, switch over to Pixel Preview mode, zoom in on it, and
then select the bottom anchor points (one at a time) using the Direct Selection Tool (A) and move them
towards the inside by 4 px (2).

Since we need to add an outline, simply create a copy (Control-C > Control-F) of
the shape that we have, change the color to #192C3B and then go to Object > Path > Offset Path and
enter 6 px into the Offset field, leaving all the other
options as they are. Once the offset is created, send the shape to the back by right
clicking > Arrange > Send to Back (3).

Next start adding little details to the piece
such as highlights (4), the vertical (5) and horizontal dividers (6), the
subtle shadow (7) and the round decorative elements (8 to 11).

Step 5

Using the Rectangle
Tool (M), start by drawing a 222 x 6
px shape (#536D7C) which we will position on top of the decorative piece we’ve
just created. Then, add another 222 x 16
px one which we will need to adjust by moving the top anchor points towards
the inside by 12 px. Finally create
a 198 x 103 px rectangle on top, and
then select all the objects and unite them together.

Step 6

With the previously created shape selected,
create a copy (Control-C > Control-F),
select it and then go to Object >
Path > Offset Path and give it an offset of 6 px. Since the top side of the roof won’t be flat, but rather
pointy, we need to select the top anchors of the duplicate using the Direct Selection Tool (A) and move them
down by 6 px so that the top section
of the outline is aligned to that of the fill.

Step 7

Let’s start adding some details to the lower
section of the roof by creating a 222 x
4 px rectangle (#192C3B) which we will position towards the center of the
outline, leaving a gap of 4 px between
the two (1). Next add a smaller 222 x 1
px rectangle (#192C3B) above the previous shape, leaving a gap of 3 px between them (2). Add a subtle 222 x 2 px highlight just under the taller line, while adding a 222 x 1 px shadow
under the shorter one (3).

Finish off by adding a bunch of 2 x 4 px vertical lines (#192C3B) with
a gap of 2 px on each side (4).

Step 8

Since we’re not quite done with the details, we need to focus on adding the
cross diagonal lines, which we will then group (Control-G) and mask using the fill shape from underneath.

First create a 1 x 9 px rectangle
(#192C3B) (1), select its top anchor points using the Direct Selection Tool (A) and push them towards the right side by
right clicking > Transform > Moveand entering 7 px in the Horizontal input field (2).

Switch over toPixel Preview
mode and with the shape selected, hold down Alt and Shift while
dragging to the right to create a duplicate at a distance of 4 px from the original shape. Press Control-D about 43 times to
repeat the duplication and create the rest of the elements (3). Once you've finished doing that, group them (Control-G)
and create a copy of the shapes which we will reflect vertically (right click > Transform > Reflect
> Vertical) (4).

Finally position both groups onto the thinner horizontal decorative line
that we created a few steps ago (5).

Because some of the diagonal pieces will go outside the surface of our fill
shape, we need to copy the shape underneath (Control-C) and paste in front (Control-F)
of the decorative strips that we’ve just created. Then with both the larger shape
and the two diagonal sets selected, right
click > Make Clipping Mask (6).

Finish off this part of the illustration by
adding a 210 x 4 px rectangle (#192C3B)
and positioning it on top of the diagonal strips (7).

Step 9

This one is a little bit tricky since we will need to create the
triangle-like roof which will have round sections towards the bottom sides.

Let’s start simple by creating a 164
x 66 px rectangle (#536D7C) and then adding an anchor point (1 – green circle)
right in the center of its top side using the Add Anchor Point Tool. Next remove the left and right anchors by
selecting them using the Delete Anchor
Point Tool (1 – red circles).

You should now have a nice-looking triangle, which we will adjust by adding two
more extra anchor points on each side of the shape (at 4 px from the sides) (2). Then select these points using the Direct Selection Tool (A) and drag them
towards the top by about 6 px so
that the distance between the anchors and the bottom side of the triangle is about 10 px (3).

Since the bottom corners of the triangle aren’t what we would want them to
be, we need to adjust them. Using the Direct
Selection Tool (A) select each of the added anchor points at a time and
then use the Convert selected anchor
points to smooth option (which will become active in the left side of the
top toolbar) to create the handles which we will use in order to smoothen out
the corners (4).

Finally position the shape onto the fill section
of the house’s roof (5).

Quick tip: since it’s
usually hard to replicate an adjustment for an object that has duplicate sides,
it is easier to apply the adjustments on just one side, and then cut the shape in
half, duplicate the modified section, reflect it and position it in place.

Step 10

Start adding the horizontal decorative lines by
creating about 26 rectangles(#192C3B)sized198 x 2 px, which we will vertically distribute at 4 px from one another. Then add a 198 x 1 px highlight under each line to give it more depth.

Step 11

As you can see, the lines that go over the
triangle-roof section need to be contained within the shape, since we will be
adding an outline. To fix that, select the roof shape from underneath and create a copy on top of the lines (Control-C
> Control-F). Then, with it and the lines selected, right click > Make Clipping Mask.

Step 12

Once you’ve finished masking the lines, start
adding the vertical highlights.

Step 13

Let’s start working on the diamond-shaped decorative pieces by creating a 26 x 38 px rectangle (#192C3B) which we
will transform by adding an anchor point to the center of each side using the Add Anchor Point Tool (1 – green circles).
Then delete the corner anchor points using the Delete Anchor Point Tool (1 – red circles) so that you get a
diamond shape (2).

Next create a smaller 16 x 24 px rectangle
(#2C4251) and repeat the same process of adding and deleting anchor
points as before (3). Position the smaller object onto the larger one (5) and
then start adding details such as the highlight (6), the crossed lines (7) and
finally the shadow lying underneath (8).

Once you’ve finished, group all the elements
together by selecting them and pressing Control-G.

Quick tip: as you can see, at point 7 the crossing lines
protrude outside the surface of our lighter diamond shape, which is something
we don’t want. To correct that, simply create
a copy of the diamond (Control-C),
paste it on top (Control-F) and then
create a clipping mask by right
clicking and choosing Make Clipping Mask.

Step 14

Create a copy of the diamond decorative piece (Control-C > Control-F) and place one on each side of the
house, leaving a gap of 20 px towards
the bottom and 13 px towards the outline.

Step 15

Add a smaller window by creating a base outline
of 78 x 66 px (#192C3B). Then add one
smaller 66 x 54 px one (#2C4251) on
top, making sure to center align the two. You can group (Control-G) and position the shapes by vertically aligning them to the
house, leaving a gap of 12 px towards
the bottom line section of the crossed decorative strips.

Step 16

Next add the glass panels by creating two 18 x 38 px rectangles which we will
color using #7A99A7. Once you have created the objects, use the Vertical Align Center option from the Align panel to position them in line
with the underneath shape, leaving a gap of 4
px towards the sides of the outline.

Step 17

Start gradually adding details using the first
created window from the middle section of the house as a reference.

Step 18

Add the girder
that goes underneath the window by creating a 28 x 16 px rectangle with a Corner
Radius of 6 px,and then color it
using #192C3B. Add another 16 x 4 rectangle
with a Corner Radius of just 1 px (#2C4251) and position it on top
of the previous one.

Now, create the
vertical section of the girder by adding a 16
x 18 px rectangle (#192C3B) with a 5
px Corner Radius and a smaller 8 x
10 px one with a Corner Radius of
1 px on top. Group the two (Control-G) and then send them to the
back (right click > Arrange > Send
to Back) of the horizontal section that we started out with.

Cast a couple of shadows where you see the
elements overlapping, and you should be good to go.

Step 19

Position the girder towards the bottom of the window so that the
outlines overlap.

Step 20

Add two horizontal dividers towards the top side
of the window frame.

Step 21

Finish off the window by adding a rounded
rectangle of 22 x 36 px with a Corner Radius of 11 px (#192C3B) for the outline and a smaller 10 x 24 px one (#2C4251) with a 5 px Corner Radius for the fill. Add a couple of inner shadows and
three vertical lines (10 x 2 px) to
give it more complexity, using the same values for the Blending Mode and Opacity levels
as before.

Step 22

Group (Control-G)
and position the shapes towards the top side of the window frame, right
underneath the last horizontal decorative segment.

Step 23

Using the
triangle-like section of the roof, create a copy (Control-C > Control-F) and then change the shape's color to #405866.

Next, grab the Add Anchor Point Tool and add an anchor
to the center of the bottom section of the copy. Select it using the Direct Selection Tool (A) and press Delete to open up the shape. Now using
the Pen Tool (P) draw a roof similar
to mine, making sure to close the path at the end.

Once you have
the fill section, you need to duplicate it (Control-C
> Control-F) and apply an offset of 6
px by selecting the shape and then going to Object > Path > Offset Path. Position the offset underneath
the fill, and change its color to #192C3B.

Next start adding details such as the highlights,
the tiles and finally the two girders.

Step 24

Create the center decorative piece for the roof by using the Rounded Rectangle Tool to draw a 24 x 52 px shape (#192C3B) with an 8 px Corner Radius which will serve as
an outline. Next add a smaller 12 x 40
px one (#536D7C) with a Corner
Radius of just 2 px, on top of
which we will add two 12 x 4 px rectangles
(#192C3B).

We will then need to add the highlights (Blending Mode set to Overlay,
Opacity level lowered to 40%) and shadows (Blending Mode set to Multiply,
Opacity level lowered to 14%).

Once you’ve finished adding details to the center section of the piece,
start working on the bottom by adding an 18
x 18 px circle (#192C3B), on top of which we will add a smaller 6 x 6 px one (#2C4251).

Work your way through the rest of the detailing
stage, and once you've finished, select all of the composing elements and group
them together using Control-G.

Step 25

Position the whistle-like element onto the roof,
so that half of it overlaps the house while the other goes outside its surface.

Step 26

Finish off the illustration by casting a subtle
shadow underneath the roof onto the house. To do that, simply select the
outlines for the roof, girders and the top decorative piece (the whistle),
duplicate them (Control-C > Control-F)
and then move them towards the bottom by about 4 px. Make sure to change their Blending Mode to Multiply and
then lower their Opacity levels to 34%.

Wrap Up

That was it! I hope that you made it all
the way through, as I tried to include as many details as possible. In case you
got stuck along the process I’ve attached the illustration so that you can load
it up and play around with it, as this could help you understand some steps
better.