#Gamedev Tutorials

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

Share
FavoriteLoadingAdd 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

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

BUILDING

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

GRASS

  1. Lock the building layer and make a new layer above it named “grass”
  2. Choose the Pen Tool (P)
  3. Remove the stroke and make the fill a light green (#8ec134)
  4. Draw out a rectangle on the bottom of the building
  5. Open the Layers Panel and move the grass layer below the building layer
  6. Use the Pen Tool (P) and draw a rectangle on the left side of the grass area
  7. Change the fill to a darker green (#76912d)
  8. Use the Pen Tool (P) and draw a rectangle on the right side of the grass area
  9. Change the fill to a green (#84aa31)
 

Join us!


How about writing your own piece for IndieWatch?




Tags
#Art #design #tutorial game design #gaming #2D game development game art Illustrator Game Asset Digital Design Graphic Design Game UI Game UX UI Design UX Design Level Design Isometric Building Game Tiles

Jen S Abbott

Jennifer S. Abbott is a digital graphic designer & illustrator and 3D artist. I love teaching and communing with nature. I am a contributor to Indie Watch (https://indiewatch.net/members/jen-s-abbott/) and Blender Nation (https://www.blendernation.com/author/jsabbott/). **FOR HIRE**

Leave a Reply

Your email address will not be published.

Back to top button
feedback_mix.png