How to make isometric game tiles

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

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)

GRASS TILE

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

WATER TILE

40. Open the Layers Panel and make a new layer above the grass tile named “water tile”
41. Select the entire grass tile layer and copy it (CTRL + C)
42. Select the water tile layer in the Layers Panel
43. Paste the copied layer (CTRL + V) on the water tile layer
44. Lock the grass tile layer
45. Use the Selection Tool (V) and move the copied grass layer down away from the original grass layer and align it to the grid
46. Choose the Selection Tool (V) and click on the Artboard to deselect everything
47. Use the Selection Tool (V) and select the top square and change the color to a blue (#4fdbdb)
48. Use the Selection Tool (V) and select the dark green rectangle and change the color to a dark blue (#40adaa)
49. Use the Selection Tool (V) and select the light green rectangle and change the color to a light blue (#4fc6c0)
50. Use the Selection Tool (V) and select the dark brown rectangle and change the color to a different dark brown (#997631)
51. Use the Selection Tool (V) and select the light brown rectangle and change the color to a different light brown (#c19340)