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.

Create Isometric Mazes with Mazes 2D Tiles

In this tutorial we’ll show you how to create isometric mazes with Puzzle Maker Pro – Mazes 2D Tiles. We recommend you start by reading Getting Started with Mazes 2D tiles, so you understand the basics of this program.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/wuGqS3zSeN/resources/HvD7TPK5AE/Mazes-2D-Tiles-Isometric-Mazes-Steps.jpg (Mazes-2D-Tiles-Isometric-Mazes-Steps)

First Steps

To create an isometric maze, select “Isometric – Classic” from the Grid Type dropdown menu. You’ll see a preview of the maze, using the current settings (1)

To use your own tiles, click “Browse” (2). To select a folder, just select one of the images in that folder, and click “Open”. That will select the entire folder, not just the single image.

If the preview panel is not centered, you can do so by moving the mouse wheel when you hover over the image.

Isometric - Full Square

The diamond shaped maze is what we call the ‘Classic’ variation of isometric. This is the isometric style you often see in video games. However, we also offer the option to fill the entire canvas with isometric squares. This option is called "Isometric - Full Square". This will add more cells to create a square maze, as seen in the picture below. We also recommend this option if you want to work with masks. Below is an example of a maze generated with the Isometric Full Square option selected.

Creating and Using your own tiles

It is possible to use your own tiles for Mazes 2D Tiles. You can find this information at Mazes 2D Tile Format and Naming Conventions.

Making isometric tiles yourself sounds more difficult than it really is. There are multiple ways you can go about it:

You can use regular square tiles, and our Tile Multiplier Add-On. With this method, you will only really need 5 or 6 square tiles for the maze, and two additional images for a start and end point. This can even be done in powerpoint if you don't have Photoshop or equivalent. Here is a video on How to Create Square Tiles with MS Powerpoint. Do note that while the tile multiplier will rotate images for you, it does not add the suggested depth shown in the example images on this page.
You can draw the isometric tiles yourself. We have tutorials on how to do this in Adobe Illustrator, but this can be done in other graphic programs as well. A Video on making Isometric Tiles with Adobe Illustrator, The Text for making Isometric Tiles with Adobe Illustrator
Last but not least, you can find isometric tiles on the web. There are both free and paid options available, although most free sets seem to only be available in 32 or 64 pixels. Depending on your maze and your image settings, this could lead to a blurry final maze. An example of other tiles can be seen below:

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/wuGqS3zSeN/resources/FaHK2YMRM4/Mazes-2D-Tiles-Kenney-Roads-example-1024x545.jpg (Mazes-2D-Tiles-Kenney-Roads-example-1024x545)

Isometric maze using public domain tiles (Tiles downloaded from https://opengameart.org/users/kenney)

As you can see in the image, there are some 'holes' in the maze. We have selected 10 Empty Cells, and because there is no '0' image, which would be an image with 0 connections to the tiles surrounding it, these are left empty. This can result in a 3D effect when you use isometric tiles.

How to Create Isometric Tiles with Adobe Illustrator

Create Isometric Mazes with Mazes 2D Tiles

Creating Isometric Tiles with Adobe Illustrator (Video)