Question 1

How to Create Isometric Tiles with Adobe Illustrator

Accepted Answer

Creating Isometric Tiles with Adobe Illustrator

In this tutorial we'll teach you how to create an isometric tile from a square tile, so you can use it in Puzzle Maker Pro - Mazes 2D Tiles.

You can use these same techniques in other drawing programs as well, such as Photoshop, Affinity, Canva, et cetera.

Step 1: Rotate the Image

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/wuGqS3zSeN/resources/HSIlqrXVM7/Create%20Isometric%20Tiles%20Step%201%20Copy%20and%20Rotate%20a%20Square%20Tile.jpg (Create Isometric Tiles Step 1 Copy and Rotate a Square Tile)

Create Isometric Tiles - Step 1 - Copy and Rotate a square tile

In this tutorial we'll be using separate artboards in Adobe Illustrator, so you can see the before and after images. When you create tiles yourself, it's not necessary to keep track of every step.

For Step One, make sure you rotate the image exactly 45 degrees clockwise. Otherwise you'll get unpredictable results in Mazes 2D Tiles.

In the examples we use a square around the tile, which is clearly visible in the rotated image. There are two reasons we do this:

The lines make it easier to rotate and scale the image, allowing you to better see what you're doing. If you don't want these lines in the final image, you can always remove them.
For isometric tiles, especially when you want to add depth to the tile, it can be a stylistic choice to keep these lines in the final image.

Step 2: Scale Down

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/wuGqS3zSeN/resources/lug90weVzx/Create%20isometric%20tiles%20step%202.jpg (Create isometric tiles step 2)

Create Isometric Tiles - Step 2 - Scale Down to fit the tile

In this tutorial we assume that the new tile size will be based on the size of the square tile you were using. If the square tile was 200x200 pixels, you'll want to scale the rotated image down, so the width is exactly 200 pixels. In the image you can see it's scaled down to fit the artboard.

Step 3: Scale Vertically

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/wuGqS3zSeN/resources/WHNvOdqN80/Step%203%20Scale%20vertically.jpg (Step 3 Scale vertically)

Create Isometric Tiles – Step 3 – Scale Down Vertically (Flatten the image)

The next step is to flatten the tile. This is done by reducing the height by 50%, while keeping the width at 100% (which means there should be no change in the width). Depending on your program, you may need to unlink horizontal and vertical scaling to enable this.

You can tell from the picture that it already looks very close to isometric.

Step 4: Reposition the Tile

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/wuGqS3zSeN/resources/KeE42IxIze/Step%204%20reposition%20the%20tile.jpg (Step 4 reposition the tile)

Create Isometric Tiles – Step 4 – Reposition the tile

The final step is to reposition the tile. It's also possible to resize your artboard or canvas to the correct height/width ratio. You can tell in the image that the new isometric tile covers exactly 50% of the square artboard.

Now you can save the image as a .png file. Make sure that all the areas that are not part of the tile (the parts between the diamond and red rectangle) are transparent, and not white.

But wait, there's more...

Step 5 (Optional): Add Depth

The result from step 4 is already a good result, and can be used in mazes 2D Tiles. However, in some cases you may want to add some suggested depth to the tiles, for an even better result.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/wuGqS3zSeN/resources/lChVd3XiFG/Step%205.jpg (Step 5)

Create Isometric Tiles – Step 5 – Add Suggested Depth

In this step you can add two slightly skewed rectangles, or even just lines, to suggest a sense of depth. The exact way to do this depends on the tools you're using. Adobe Illustrator offers advanced options to move or add individual points to a path, or to move just one side of a rectangle, to create the skewed appearance.

After adding the skewed rectangles to the image, you can give them each a different colour. In the example we've used two shades of grey, suggesting a light source that comes from the right, and a bit more shadow at the left. This increases the 3D look and feel of the tile.

There are many styles and options here:

The example shows a 3D cube, used in games like minecraft. It is completely up to you to choose how much depth you want to add. You could go from a thin line, to as long as a cube or even longer.

In the example, the top layer stops at the edges. It's also possible to copy those colours to the top 5% or top 10% of the depth. In a colour maze, you could make it look like the top is grass, the top 5% of the depth would also be grass, and below that could be brown for dirt.

Creating Square Tiles for Mazes 2D Tiles

Tiles for Mazes 2D Tiles have to be saved in a .png format.

Naming conventions

We've set up a simple standard, where each side of a tile gets a number. The code consists of the numbers for the sides that are connected. The name of the file (the image file for the tile) has to start with this code, followed by a dash ("-"). The dash is required to let the software know where the code ends.

For example, a tile with a corner that connects sides 1 and 2, has code 12. The filename for this image can be something like "12-top right corner.png" or "12-corner with tree.png". You can also have both names, the software will randomly pick one of them each time this type of tile is needed.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/wuGqS3zSeN/resources/pgaxGX167f/Square%20Tile%20Numbering%20convention.jpg (Square Tile Numbering convention)

There are 16 possible codes for square mazes:

0 – optional, empty square. You can use this for embellishments, like trees, your logo, etc

1, 2, 3, 4 – Dead end

12, 23, 34, 14 – Corners

13, 24 – Straight connection

1234 – Crossing (all sides connected)

123, 124, 134, 234 – Split / three-way connection

In addition to those 16 codes, you’ll need two additional images:

s – start image (this will be printed over the start tile)

e – end image (this will be printed over the finish tile)

Image Size

The image size (or canvas size) for your tiles depends on the size of the mazes you are going to generate:

If you’d be creating a maze of 40 by 40 on that canvas, each square would be just 50 by 50 pixels.

When the squares are printed on the canvas by Mazes 2D Tiles, they will be resized to fit.

The default tiles in Puzzle Maker Pro were created at 500×500 pixels.

Drawing the Tiles

Drawing the tiles is actually very easy. The important thing to do is make sure that the connections, at the edges of each square, are at the same place for each tile. Below is the template we used for Adobe Illustrator:

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/wuGqS3zSeN/resources/xqzaVE3Tmn/Adobe%20Illustrator%20template.jpg (Adobe Illustrator template)

This template has several options for each tile. If you don't have the option to create multiple artobards, it's best to create a template that has all sides connected, and use that for all other tiles as well.

While we use Illustrator for the example, any editing software will do, such as Adobe Photoshop, Corel Paint, Affinity, Canva, or even the software that comes with your computer, such as MS Paint.

To summarise, you'll need 16+2 Tiles for your maze:

1-top.png
2-right.png
3-bottom.png
4-left.png
12-topright.png
23-rightbottom.png
34-bottomleft.png
14-topleft.png
123-toprightbottom.png
124-toprightleft.png
134-topbottomleft.png
234-rightbottomleft.png
13-topbottom.png
24-rightleft.png
1234-allsides.png
0-blank.png (optional)
S-Startsymbol.png
E-Endsymbol.png

For each of the files, the code at the start (the numbers plus the dash) have to be there. The rest of the filename can be omitted, or changed to something else if you want to. You can also create multiple tiles for the same code, for extra variation.

Creating Isometric Tiles for Mazes 2D Tiles

The standard naming convention for isometric tiles looks a lot like the square tiles: the code for each tile consists of the numbers for the sides that are connected. The tiles are just rotated 45 degrees.

1 – Top Right (instead of top)

2 – Bottom Right (instead of right)

3 – Bottom Left (instead of bottom)

4 – Top Left (instead of left)

Again, the name of the file has to start with that code, followed by a dash (“-“).

For example, a tile with a corner that connects sides 1 (top right) and 2 (bottom right) has code 12. The filename could be something like “12-simple corner.PNG”

For isometric mazes there are 16 possible codes as well:

0 – optional, empty square. You can use this for embellishments, like trees, your logo, etc

1, 2, 3, 4 – Dead end

12, 23, 34, 14 – Corners

13, 24 – Straight connection

1234 – Crossing (all sides connected)

123, 124, 134, 234 – Split / three-way connection

In addition to those 16 codes, you’ll need two additional images:

s – start image (this will be printed over the start tile)

e – end image (this will be printed over the finish tile)

(The list of files that are required for isometric mazes is identical to the list for square mazes, although the tiles look different.)

Drawing the Tiles

For Mazes 2D Tiles we follow the isometric ‘standard’ that is used by most game developers: For the basic tile, the width is twice the height. In addition to that, you can add depth to the tiles, by drawing ‘suggested’ depth below the tile.

It’s usually easiest – but not required – to start with square tiles, and then rotate and resize them. There are other options, depending on the tools you have. For example, in Photoshop you can use ‘smart objects’ to do the transformation for you (after you set it up just once).

The steps to transform a square tile into an isometric tile:

Rotate the tile 45 degrees clockwise
Scale the tile to fit onto the canvas – if you have a 200×200 pixel tile and rotate it, it will be approx 280 pixels wide, so scale it back to have a total width of 200 again
Re-scale the tile – Horizontally to 100%, vertically to 50%. Immediately you’ll see the isometric look of the tile.
You can save the tile as PNG image. If you started with a 200×200 pixel tile, the canvas should now be 200 (wide) x 100 (high).
Optionally add additional lines and colors to suggest depth.

For an in-depth tutorial on how to do this, you can look at our tutorial on how to create isometric tiles with Adobe Illustrator, where we go into detail on the creation of isometric tiles.

Image Size

The image size of the files for isometric tiles depends on the embellishments you use:

The size of the basic tile should have a 1:2 ratio for the height:width sizes. If the tile is 200 pixels wide, it should be 100 pixels high. (The proper working of Puzzle Maker Pro – Mazes 2D Tiles depends on this, otherwise the results will not look right)
If you have added depth to the tile, either by adding additional lines or shading at the bottom, or by placing objects on the tile that stick out on top (e.g. towers, persons, arrows), the tile size can be larger. If you add depth suggestion at the bottom, each tile should have the same additional depth!
Mazes 2D Tiles will use the height of the smallest tile to determine the depth of the tiles. and align the tiles according to that height
If you have objects sticking out on top, these should be drawn over the tiles behind it. Mazes 2D Tiles will take this into account when setting up the canvas dimensions and margins

How to Create Isometric Tiles with Adobe Illustrator

Mazes 2D Tiles - Tile format and naming conventions

Creating Isometric Tiles with Adobe Illustrator (Video)

How to create your own SVG files with Adobe Illustrator (for use in Connect the Dots)