Hello. In this session Illustrator CS4 will be the tool for recreating one of the very oldest and truly useful things mankind ever produced: a house.
Start with a 512 x 512 canvas. Vector artwork can be resized as needed, however this icon will need a couple of specific measurements in order to help to maintain its proportions.
1.
Select the Rounded Rectangle Tool (click and hold the Rectangle Tool button to make available the list of shapes) and click once on the document. A pop up window will open. Set the corner radius as shown in the picture and click OK. Any figure will appear; delete it and draw a square holding pressed the Shift key.
2.
Draw a normal square of the same size. Then rotate it 45 degrees (again, by holding pressed Shift) and place it as shown in the picture.
3.
Select both rounded and normal squares; press Shift+Crtl+F9 to open the Pathfinder panel. Press the Divide button, then ungroup the result (Shift+Crtl+G) and delete the parts that won’t be used. Select the remaining parts and press Unite. Press G to use the gradient tool and apply a neutral smooth lineal gradient with these color values: rgb (179, 190, 173) – (252, 255, 244).
4.
Now Crtl+F10 to open the Stroke panel and type 5 at the Weight field to give a convenient stroke. Then go to Object – Expand… menu and click on the option shown in the picture. This is to avoid scaling problems if the icon is to be used in different sizes. Finally apply a fill using rgb (134, 144, 132).
5.
Now that we have created the space for living, it would be nice to have some visits and occasionally to have a party there. Sharing is easy. Just hit M to select the Rectangle Tool. Draw the door and apply a gradient fill with these values: rgb (213, 203, 166) – (183, 173, 112). Also give it a 5 pt stroke just as done in step 4. Expand the stroke and fill with rgb (161, 98, 44). The knob is simply a circle (press L and draw using Shift key) with a horizontal lineal gradient. Colors here are black and (161, 98, 44).
6.
If you look at the first picture, you’ll notice that there are a couple of pixels of shadow under the roof. Although there could be more techniques for achieving this shadow, here we’ll follow an interesting technique which will be also used for the shine of the roof and chimney.Make a copy of the main body of the house (Ctrl+C, then Ctrl+F, to paste in front). Apply a bold stroke (about 10 pt.) and remove the fill (press F6 to bring on the Color panel and click on the white and red button on the left of the colored bar).Expand that stroke. Now choose the Group Selection Tool (available at the Direct Selection Tool button, as in step 1) and click on the inner edge of the figure as seen in the picture. Press and hold Ctrl, a bounding box should appear. Now, while pressing Ctrl, use the up arrow of your keyboard to move that internal edge upwards.You should have an L shape with vertical edges at both sides. Press C to select the Scissors Tool and make one click on each of the points which connect the L shape with the rest of the figure. See the picture for reference. CS4 will help you to locate the exact point with a light green “intersect” advice when you approach the pointer to those vertexes. After cutting with the scissors, a gray line between the two parts will appear. Now use the Divide button in the Pathfinder panel, and then ungroup. Delete the lower part.
7.
This is the resulting shadow. It has a black fill and its opacity has been set to 50% (press Ctrl+Shift+F10 to open the transparency panel).At this level one could need to take a breath before continuing…
8.
It could rain at any moment, so let’s do the roof. Use the Rounded Rectangle Tool and set the corner radius as shown in the picture. Trace a rectangle trying to approximate the proportions, some 8/10 of the house height. Copy it and paste in front. Rotate the new copy 90° (dragging any corner of the bounding box while pressing Shift). Place them making another L shape.
9.
Finish the roof by selecting both shapes and clicking the Unite button on the Pathfinder panel. Fill as shown in the picture using these values: (205, 0, 0) – (255, 26, 0). Apply the whole step 4 to this figure. The color here is (166, 18, 26).
10.
Now prepare 2 copies of the roof, without stroke, and paste one in front of the other. Select one of them and decrease its height by dragging downwards the upper handle of the bounding box. Then make it wider by dragging one side handler while holding pressed Alt. This difference between the two shapes will be the shine of the roof, so select both figures, and use the divide button, ungroup and delete unnecessary parts. When finished fill with white 50% transparent.
11.
The chimney is constructed exactly in the same way. Draw a rounded rectangle (and apply the gradient and stroke colors described in step 9. Clone it twice. The idea is to repeat step 10 with this couple of squares in order to get a shine for the chimney. Also use a white fill, 50% transparent. AT the end, sent it to the back (Ctrl+Shift+[)
12.
Now add some decorations to make this house more appealing. The series of bricks come from a rounded rectangle (12 pt radius) with the gradient fill of the door in step 5. The color for the stroke is (163, 154, 99).
13.
This house with a yard will be a pleasure to look at.The picture above shows the way one leaf is made. Simply draw an oval. Press A to change to the Direct Selection Tool and select the top and bottom points. As you work with points, Illustrator CS4 places special buttons in the Control Palette (just below the File – Edit menus). Click the button
to change the shape as in the picture. Then select the two points of the side and lower them using the down arrow. Green tones from the brightest to the darkest are: (179, 215, 67) and (103, 147, 23). Arrange bunches of leaves as shown in the picture.
14.
When having the two bushes on place, do a copy / paste in front for each group. Use Unite to merge all the leaves into a single shape and make a stroke as in step 4. The color here is (103, 147, 23).
15.
Unlike real world, we will add the foundations of this house at the end. A rounded rectangle with black fill (50% transparency) will be enough. And thus a new detached house has been built. In the real world, you know, it’s a huge treasure for millions of people around the world. Good job.
A house is not a home unless it contains food and fire for the mind as well as the body.
Benjamin Franklin
Hello. In this session Illustrator CS4 will be the tool for recreating one of the very oldest and truly useful things mankind ever produced: a house.
Start with a 512 x 512 canvas. Vector artwork can be resized as needed, however this icon will need a couple of specific measurements in order to help to maintain its proportions.
1.
Draw a normal square of the same size. Then rotate it 45 degrees (again, by holding pressed Shift) and place it as shown in the picture.
3.
Now Crtl+F10 to open the Stroke panel and type 5 at the Weight field to give a convenient stroke. Then go to Object – Expand… menu and click on the option shown in the picture. This is to avoid scaling problems if the icon is to be used in different sizes. Finally apply a fill using rgb (134, 144, 132).
5. 
Now that we have created the space for living, it would be nice to have some visits and occasionally to have a party there. Sharing is easy. Just hit M to select the Rectangle Tool. Draw the door and apply a gradient fill with these values: rgb (213, 203, 166) – (183, 173, 112). Also give it a 5 pt stroke just as done in step 4. Expand the stroke and fill with rgb (161, 98, 44). The knob is simply a circle (press L and draw using Shift key) with a horizontal lineal gradient. Colors here are black and (161, 98, 44).
6.
If you look at the first picture, you’ll notice that there are a couple of pixels of shadow under the roof. Although there could be more techniques for achieving this shadow, here we’ll follow an interesting technique which will be also used for the shine of the roof and chimney.Make a copy of the main body of the house (Ctrl+C, then Ctrl+F, to paste in front). Apply a bold stroke (about 10 pt.) and remove the fill (press F6 to bring on the Color panel and click on the white and red button on the left of the colored bar).Expand that stroke. Now choose the Group Selection Tool (available at the Direct Selection Tool button, as in step 1) and click on the inner edge of the figure as seen in the picture. Press and hold Ctrl, a bounding box should appear. Now, while pressing Ctrl, use the up arrow of your keyboard to move that internal edge upwards.You should have an L shape with vertical edges at both sides. Press C to select the Scissors Tool and make one click on each of the points which connect the L shape with the rest of the figure. See the picture for reference. CS4 will help you to locate the exact point with a light green “intersect” advice when you approach the pointer to those vertexes. After cutting with the scissors, a gray line between the two parts will appear. Now use the Divide button in the Pathfinder panel, and then ungroup. Delete the lower part.
7.
This is the resulting shadow. It has a black fill and its opacity has been set to 50% (press Ctrl+Shift+F10 to open the transparency panel).At this level one could need to take a breath before continuing…
8.
It could rain at any moment, so let’s do the roof. Use the Rounded Rectangle Tool and set the corner radius as shown in the picture. Trace a rectangle trying to approximate the proportions, some 8/10 of the house height. Copy it and paste in front. Rotate the new copy 90° (dragging any corner of the bounding box while pressing Shift). Place them making another L shape.
9.
Finish the roof by selecting both shapes and clicking the Unite button on the Pathfinder panel. Fill as shown in the picture using these values: (205, 0, 0) – (255, 26, 0). Apply the whole step 4 to this figure. The color here is (166, 18, 26).
10.
Now prepare 2 copies of the roof, without stroke, and paste one in front of the other. Select one of them and decrease its height by dragging downwards the upper handle of the bounding box. Then make it wider by dragging one side handler while holding pressed Alt. This difference between the two shapes will be the shine of the roof, so select both figures, and use the divide button, ungroup and delete unnecessary parts. When finished fill with white 50% transparent.
11.
The chimney is constructed exactly in the same way. Draw a rounded rectangle (and apply the gradient and stroke colors described in step 9. Clone it twice. The idea is to repeat step 10 with this couple of squares in order to get a shine for the chimney. Also use a white fill, 50% transparent. AT the end, sent it to the back (Ctrl+Shift+[)
12.
Now add some decorations to make this house more appealing. The series of bricks come from a rounded rectangle (12 pt radius) with the gradient fill of the door in step 5. The color for the stroke is (163, 154, 99).
13.
This house with a yard will be a pleasure to look at.The picture above shows the way one leaf is made. Simply draw an oval. Press A to change to the Direct Selection Tool and select the top and bottom points. As you work with points, Illustrator CS4 places special buttons in the Control Palette (just below the File – Edit menus). Click the button 
to change the shape as in the picture. Then select the two points of the side and lower them using the down arrow. Green tones from the brightest to the darkest are: (179, 215, 67) and (103, 147, 23). Arrange bunches of leaves as shown in the picture.
14.
Unlike real world, we will add the foundations of this house at the end. A rounded rectangle with black fill (50% transparency) will be enough. And thus a new detached house has been built. In the real world, you know, it’s a huge treasure for millions of people around the world. Good job.
August 29th
I like that quote as much as i like the details in gradients and the plants. Very cute!! n thanks again for the work to make this n share with us!
August 31st
Nice tutorial, I’ll try when I have some time
August 31st
Hi Jjay, thank you for your comment. We’re currently working on more tutorials. Ha ve a nice day.
September 2nd
I’d like to try it G but I can’t see any of the pics in this particular tutorial
I’ve refreshed and yes my Java’s enabled. 
Maybe next tut.
September 2nd
OK people, it’s fixed now.
October 23rd
Nice blog G. Thanks!