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 of2 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 your Align 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 another 204 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 Multiply and 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 and right 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 2 px.

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 Multiplywhile lowering its Opacity level to 24%.

Quick tip: for a level of maximum precision you can switch over to Pixel 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 go slightly under 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 > Move and entering 7 px in the Horizontal input field (2).

Switch over to Pixel 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) sized 198 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 maskby 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 of1 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.