
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) – 30o
- Rotate the grid (Object > Transform > Rotate) – -30o
- 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 45o
- 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 90o (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 90o (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)