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

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)

GRASS TILE

Lock the grid layer and make a new layer above it named “grass tile”
Choose the Rectangle Tool (M) and click on the Artboard once
Make a rectangle that is 210px wide and 210px high
Fill the rectangle with a green color (#7e9b2d)
Use the Selection Tool (V) and rotate the square 45^o
Align the green square with the horizontal center of the grid
Use the Direct Selection Tool (A) and align the green square with the grid
Choose the Rectangle Tool (M) and click on the Artboard once
Make a rectangle that is 210 pixels wide and 55 pixels high
Change the fill color to a darker green (#687a25)
Use the Direct Selection Tool (A) and align the dark green rectangle with the left-side of the original square
Choose the Selection Tool (V) and click on the Artboard to deselect everything
Use the Selection Tool (V) and select the dark green rectangle
Make a copy of the dark green rectangle (CTRL + C) and paste it in front (CTRL + F)
Change the fill color to a lighter green (#798e2b)
Reflect the light green rectangle along the vertical axis 90^o (Object > Transform > Reflect)
Use the Selection Tool (V) and align it to the right-side of the original square
Use the Selection Tool (V) and select the dark-green rectangle
Make a copy of the dark green rectangle (CTRL + C) and paste it in front (CTRL + F)
Change the fill to a dark brown (#8c692c)
Align the dark brown rectangle with the bottom of the dark green rectangle
Make a copy of the dark brown rectangle (CTRL + C) and paste it in front (CTRL + F)
Change the fill color to a lighter brown (#af8735)
Reflect the light brown rectangle along the vertical axis 90^o (Object > Transform > Reflect)
Use the Selection Tool (V) and align it to the bottom of the light green rectangle

WATER TILE

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