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

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

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

GRID

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

BUILDING

Lock the grid layer and make a new layer above it named “building”
Choose the Pen Tool (P)
Remove the stroke and make the fill a light gray (#eaeaea)
Draw out a rectangle using the grid as a guide (this will be the roof)
Use the Pen Tool (P) and draw out two walls
Select the left wall and change the fill to a darker gray (#d8d8d8)
Select the roof and make a copy (CTRL + C) and paste it in front (CTRL + F)
Offset the copy (Object > Path > Offset Path … -30)
Change the fill to a darker gray (#d8d8d8)
Use the Pen Tool (P) and draw a rectangle on the upper-right side of the roof (on top of the offset path)
Change the fill to a light gray (#dddddd)
Use the Pen Tool (P) and draw a rectangle on the upper-left side of the roof (on top of the offset path)
Change the fill to a gray (#c1c1c1)
Select all the sections of the roof and group them together (CTRL + G)
Use the Pen Tool (P) and draw a rectangle on the lower section of the right wall (this will be the door)
Remove the stroke and make the fill a light gray (#dddddd)
Use the Pen Tool (P) and draw a rectangle on the lower section of the left wall (this will be the door)
Make the fill a gray (#c1c1c1)
Select all the sections of the walls and group them together (CTRL + G)
Open the Layers Panel and lock the walls group
Use the Pen Tool (P) and make a rectangle on the left wall (this will be the window)
Remove the stroke and make the fill a gray (#c1c1c1)
Use the Pen Tool (P) and draw a rectangle along the inner-left-side of the window
Remove the stroke and make the fill a gray (#dddddd)
Use the Pen Tool (P) and draw a rectangle along the inner-bottom of the window
Select all the sections of the window and group them together (CTRL + G)
Make two copies of the window (CTRL + C) and paste the in front (CTRL + F) and space them out horizontally
Make a copy of all three windows (ALT + SHIFT) and move them down along the wall
Make two more copies of the windows (CTRL + D)
Select all the windows and group them together (CTRL + G)
Make a copy of the windows (CTRL + C) and paste them in front (CTRL + F)
Reflect the copied windows by 90^o (Object > Transform > Reflect … Vertical … 90^o) – choose Copy
Move the copies to the right wall