Game Art

How to make isometric game tiles

Game UI/Art for Game Designers [Tutorial]


Share
FavoriteLoadingAdd to favorites

Welcome to the tenth tutorial of the UI/Game Art for Beginners series. In this tutorial, we will be learning how to make isometric game tiles 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)

GRASS TILE

  1. Lock the grid layer and make a new layer above it named “grass tile”
  2. Choose the Rectangle Tool (M) and click on the Artboard once
  3. Make a rectangle that is 210px wide and 210px high
  4. Fill the rectangle with a green color (#7e9b2d)
  5. Use the Selection Tool (V) and rotate the square 45o
  6. Align the green square with the horizontal center of the grid
  7. Use the Direct Selection Tool (A) and align the green square with the grid
  8. Choose the Rectangle Tool (M) and click on the Artboard once
  9. Make a rectangle that is 210 pixels wide and 55 pixels high
  10. Change the fill color to a darker green (#687a25)
  11. Use the Direct Selection Tool (A) and align the dark green rectangle with the left-side of the original square
  12. Choose the Selection Tool (V) and click on the Artboard to deselect everything
  13. Use the Selection Tool (V) and select the dark green rectangle
  14. Make a copy of the dark green rectangle (CTRL + C) and paste it in front (CTRL + F)
  15. Change the fill color to a lighter green (#798e2b)
  16. Reflect the light green rectangle along the vertical axis 90o (Object > Transform > Reflect)
  17. Use the Selection Tool (V) and align it to the right-side of the original square
  18. Use the Selection Tool (V) and select the dark-green rectangle
  19. Make a copy of the dark green rectangle (CTRL + C) and paste it in front (CTRL + F)
  20. Change the fill to a dark brown (#8c692c)
  21. Align the dark brown rectangle with the bottom of the dark green rectangle
  22. Make a copy of the dark brown rectangle (CTRL + C) and paste it in front (CTRL + F)
  23. Change the fill color to a lighter brown (#af8735)
  24. Reflect the light brown rectangle along the vertical axis 90o (Object > Transform > Reflect)
  25. Use the Selection Tool (V) and align it to the bottom of the light green rectangle

WATER TILE

  1. Open the Layers Panel and make a new layer above the grass tile named “water tile”
  2. Select the entire grass tile layer and copy it (CTRL + C)
  3. Select the water tile layer in the Layers Panel
  4. Paste the copied layer (CTRL + V) on the water tile layer
  5. Lock the grass tile layer
  6. Use the Selection Tool (V) and move the copied grass layer down away from the original grass layer and align it to the grid
  7. Choose the Selection Tool (V) and click on the Artboard to deselect everything
  8. Use the Selection Tool (V) and select the top square and change the color to a blue (#4fdbdb)
  9. Use the Selection Tool (V) and select the dark green rectangle and change the color to a dark blue (#40adaa)
  10. Use the Selection Tool (V) and select the light green rectangle and change the color to a light blue (#4fc6c0)
  11. Use the Selection Tool (V) and select the dark brown rectangle and change the color to a different dark brown (#997631)
  12. Use the Selection Tool (V) and select the light brown rectangle and change the color to a different light brown (#c19340)
 

Join us!


How about writing your own piece for IndieWatch?


Tags
#Art #tutorial design 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 Game Tiles 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