How to make an isometric building| Game UI/Art for Game Designers [Tutorial]

Add to favorites

Welcome to the ninth tutorial of the UI/Game Art for Beginners series. In this tutorial, we will be learning how to make an isometric building in Adobe Illustrator.

BACKGROUND

1. Create a new document that is 1000 pixels wide and 1000 pixels high
2. Use the Rectangle Tool (M) and draw out a rectangle that is 1000 pixels wide and 1000 pixels high
3. Remove the border
4. Fill the rectangle with a light cream color (#fffeeb)
5. Open the Layers Panel and rename Layer 1 as “background” and lock the layer

GRID

6. Make a new layer above the background layer and name it “grid”
7. Use the Rectangular Grid Tool (under the Line Segment Tool) and click on the Artboard once
8. Set the width and height to 1500 pixels and set the horizontal and vertical dividers to 50
9. Align the grid to the center of the Artboard
10. Scale the grid (Object > Transform > Scale) – Non-Uniform with a vertical scale of 86.602%
11. Shear the grid (Object > Transform > Shear) – 30^o
12. Rotate the grid (Object > Transform > Rotate) – -30^o
13. Change the grid into guides (View > Guides > Make Guides)
14. Lock the guides (View > Guides > Lock Guides)

BUILDING

15. Lock the grid layer and make a new layer above it named “building”
16. Choose the Pen Tool (P)
17. Remove the stroke and make the fill a light gray (#eaeaea)
18. Draw out a rectangle using the grid as a guide (this will be the roof)
19. Use the Pen Tool (P) and draw out two walls
20. Select the left wall and change the fill to a darker gray (#d8d8d8)
21. Select the roof and make a copy (CTRL + C) and paste it in front (CTRL + F)
22. Offset the copy (Object > Path > Offset Path … -30)
23. Change the fill to a darker gray (#d8d8d8)
24. Use the Pen Tool (P) and draw a rectangle on the upper-right side of the roof (on top of the offset path)
25. Change the fill to a light gray (#dddddd)
26. Use the Pen Tool (P) and draw a rectangle on the upper-left side of the roof (on top of the offset path)
27. Change the fill to a gray (#c1c1c1)
28. Select all the sections of the roof and group them together (CTRL + G)
29. Use the Pen Tool (P) and draw a rectangle on the lower section of the right wall (this will be the door)
30. Remove the stroke and make the fill a light gray (#dddddd)
31. Use the Pen Tool (P) and draw a rectangle on the lower section of the left wall (this will be the door)
32. Make the fill a gray (#c1c1c1)
33. Select all the sections of the walls and group them together (CTRL + G)
34. Open the Layers Panel and lock the walls group
35. Use the Pen Tool (P) and make a rectangle on the left wall (this will be the window)
36. Remove the stroke and make the fill a gray (#c1c1c1)
37. Use the Pen Tool (P) and draw a rectangle along the inner-left-side of the window
38. Remove the stroke and make the fill a gray (#dddddd)
39. Use the Pen Tool (P) and draw a rectangle along the inner-bottom of the window
40. Select all the sections of the window and group them together (CTRL + G)
41. Make two copies of the window (CTRL + C) and paste the in front (CTRL + F) and space them out horizontally
42. Make a copy of all three windows (ALT + SHIFT) and move them down along the wall
43. Make two more copies of the windows (CTRL + D)
44. Select all the windows and group them together (CTRL + G)
45. Make a copy of the windows (CTRL + C) and paste them in front (CTRL + F)
46. Reflect the copied windows by 90^o (Object > Transform > Reflect … Vertical … 90^o) – choose Copy
47. Move the copies to the right wall

GRASS

48. Lock the building layer and make a new layer above it named “grass”
49. Choose the Pen Tool (P)
50. Remove the stroke and make the fill a light green (#8ec134)
51. Draw out a rectangle on the bottom of the building
52. Open the Layers Panel and move the grass layer below the building layer
53. Use the Pen Tool (P) and draw a rectangle on the left side of the grass area
54. Change the fill to a darker green (#76912d)
55. Use the Pen Tool (P) and draw a rectangle on the right side of the grass area
56. Change the fill to a green (#84aa31)