
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) – 30o
- Rotate the grid (Object > Transform > Rotate) – -30o
- 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 90o (Object > Transform > Reflect … Vertical … 90o) – choose Copy
- Move the copies to the right wall
GRASS
- Lock the building layer and make a new layer above it named “grass”
- Choose the Pen Tool (P)
- Remove the stroke and make the fill a light green (#8ec134)
- Draw out a rectangle on the bottom of the building
- Open the Layers Panel and move the grass layer below the building layer
- Use the Pen Tool (P) and draw a rectangle on the left side of the grass area
- Change the fill to a darker green (#76912d)
- Use the Pen Tool (P) and draw a rectangle on the right side of the grass area
- Change the fill to a green (#84aa31)