Contents
Introduction
In this tutorial, we will be going over several methods for cropping existing textures into usable Isometric Tiles or shapes. As always, we will be using our favorite free image editor, GIMP, since it has the option to work with image layers. There are several ways to approach cropping Isometric Tiles, so you should choose the one that works best for you and your workflow.
Wall Tiles
We need to start with a texture that has already been internally rotated (by this I mean that a Cartesian Transform operation has been performed on the texture, rather than a standard Rotation) First you want to begin by either downloading the Isometric Texture Packs from my Itch.io, or by following the Isometric Textures Tutorial to learn more about how to make these types of textures. By removing a triangle from the bottom of the texture and sliding it to the top edge, you can create a basic Isometric Wall Tile, as seen below:
Isometric Wall Texture Cropping
This process can also be done in reverse, to convert any of the wall tiles in the Isometric Tiles – Wall Pack into a square Isometric Texture, if the need arises. For this, you merely cut the triangular segment from the top of the wall and slide it back down into place at the bottom.
How might we do this conveniently, and repetitively, without having to manually draw a triangular selection area every time we want to crop out a triangle? The answer is simple: Masks!
I’ve gone ahead and made several Cropping Masks specifically for this tutorial that you can download right HERE for your convenience! Each Mask is labeled with a corresponding size for making tiles of 128×128, 256×256, or 512×512. Let’s go ahead and open our isometric texture in GIMP. For the sake of this tutorial, I am going to be using the largest texture size (512×512) in order to show more detail.
Internally Rotated Isometric Wall Texture
With the texture loaded, we now need to import the appropriate Wall Cropping mask. Since we are using a 512×512 texture, we need to use the Wall Crop 512×512.png mask. Import or copy and paste the mask into a new Layer above your existing texture.
Cropping Mask imported as an Upper Layer
You might already start to see where this is going if you have used GIMP or Photoshop in the past. Simple enough, all you need to do is choose the Magic Wand selection tool and select the White area of the mask and then press delete to erase it. You should be able to see the texture below the mask now.
Triangular Selection Made by the Mask
Now we want to select the bottom layer, with the triangular selection still active. This will allow us to use the triangular selection area to cut the triangle from the canvas and store it in our clipboard. At this point, you can also delete or hide the Mask Layer so you can see the original texture. Now to make the image large enough to hold our entire wall texture, we need to increase its height by 1/2 the size of its original height. To find this, just divide the height of the image in half (In this case, since our texture is 512×512, we need to increase the height of the image by 256 pixels) Click on Image -> Canvas Size to bring up the Canvas Size menu. We want to increase only the height by 256 so that our new height will be 768. The second thing you need to do is set the Offset Y to the same value we just increased the size by (256) so that it shifts the texture to the very bottom border of the canvas, like below:
Canvas Size Settings
Now all that is left is to paste the triangular selection that we cropped previously so that we can align it with the top of our texture. Simply use the move tool in conjunction with the CTRL key to move along straight lines, which makes it easier to line up with the edge, like so:
Completed Isometric Wall Tile
That’s all there is to it! Now you can save and export your new tile to whatever format you prefer. The very same method is used to crop Floor Tiles as well, so continue reading below if you’d like to know more!
Floor Tiles
If you are using one of the larger, internally rotated square textures from the Isometric Textures Tutorial, the only thing we need to do is crop a diamond from the center of the texture. Once again, the Cropping Masks from the previous section of the tutorial will come in handy here. Open your Isometric Floor Texture in GIMP to start.
Internally Rotated Isometric Floor Texture
Choose the corresponding Cropping Mask that matches the size of the texture you would like to crop. For the sake of this tutorial, I will again be using a 512×512 image for the most detail. So I need to use the Floor Crop 512×512.png mask. Import the Cropping Mask into a new layer, just like we did when working with walls.
Isometric Floor Cropping Mask
Choose the Magic Wand selection tool, use it to select just the White area of the mask and delete it. This time, instead of deleting your mask entirely, right click on the layer containing the cropping mask and select Merge Down to combine the two layers into one. Now, using the Magic Wand selection tool once again, select the black area of the mask and delete it. The end result is a clean, seamless isometric floor tile!
Finished Isometric Floor Texture
The very last step is to crop the canvas down to the size of the tile so we can get rid of all that extra space. Click on Image -> Canvas Size again to bring up the Canvas Size menu. The reason we do not want to use the Crop to Content option here is because there is a 1px gap at the top of the tile that we want to remain there. Using the Canvas Size menu, set the Height to 1/2 the size of the image. For this 512×512 tile, that means we want the image dimensions to be 512×256. Lastly, set the Y-Offset value to 1/2 the new height. Again, divide the new height (256×256) by 1/2 to get 128.
Canvas Resize Settings
The final tile will have a width that is twice its height. The typical sizes usually being 256×128, 128×64, or 64×32. If you used a seamless texture, the resulting isometric tile will also be seamless.
Completed Isometric Floor Tile
Combining these techniques allows for some more interesting designs, such as rooms or dungeons. Another small thing to notice about the Wall Texture Pack is that every texture is available in Shaded and Non-Shaded versions. These shaded textures are useful for simulating lighting or depth, as shown in the image below.
There are shaded textures included for both lighting directions, so it is possible to make a series of tiles that can be used to simulate a map rotating, or just different directions of sunlight or internal lighting. You can read more about lighting effects and shading in the Isometric Lighting Tutorial.
From here, you can arrange these into tilesets or design entire scenes using a program like GIMP or Photoshop. I would also recommend a tool like Tiled Map Editor, which is a free utility for making tile-based maps and tilesets that allows for the use of Isometric Tiles.
Cropping Masks
Another useful technique is to convert custom cropping masks into isometric versions of themselves, so you can apply different effects to your existing tiles. It is helpful to save all of your cropping masks so they can be used again later, especially when trying to maintain consistency across your tile-sets. For example, let’s say you want to create a doorway in your isometric tiles. Start by creating a new image in GIMP with the same size as your original tile texture. We are going to create a simple mask that we can convert into an isometric cropping mask with a doorway. For the sake of this tutorial, I will be using a 512×512 canvas, but you can use whichever size works best for you.
Doorway Cropping Mask
For a simple rectangular doorway, simply draw a black rectangle somewhere in the center of the canvas. I would recommend turning on the Snap to Grid so that your shapes remain lined up exactly. I’ve gone ahead and drawn the rectangle around 128 pixels from the top edge and 128 pixels from each side. It is good to use multiples of 2 (Such as 16, 32, 48, 64, 128, etc.) when creating your cropping masks, to keep things simple.
Using the techniques outlined in the previous tutorial on Isometric Textures, quickly convert the selection mask into an isometric version of itself using either the formulas for the Left Wall or Right Wall tiles and you should end up with something that looks like the example below.
Converted Isometric Doorway Mask
The trick here is to use the doorway cropping mask in a similar fashion to the way we used the Isometric cropping masks in the previous section of the tutorial. First, make sure the Selection Tool is active while viewing the doorway mask and press Ctrl+A to select the entire canvas. Now press Ctrl+C to copy the mask to the clipboard. Open the Tile you wish to crop into a doorway, then right click on the Layer and select Add Alpha Channel if there isn’t one already. Next, right click on the Layer once more and select Add Alpha Mask. This is where we want to place our doorway mask, so press Ctrl+V to paste the doorway mask as the Alpha Mask.
Isometric Cropped Doorway
When the Mask has been pasted into the Alpha Mask channel, all parts of the Tile below the black part of the Mask will be cropped out, leaving only the areas below the white part of the Mask visible. This technique can be used to make windows, doorways, arches, or other more complex shapes, depending on the Masks you create.
When converting a mask that has a side wall, for adding thickness or depth, there is a simple rule to follow. You need to draw your lines at a 45 degree angle using 1px steps, as shown in the example image below.
45 Degree Pixel Line
The conversion process will actually redraw the mask at the correct 2:1 pixel ratio once you apply the isometric rotation to the image. The single pixel ‘stair’ will be stretched so that it moves over by 2 and up/down by 1, and can be used to properly crop textures into side walls.
Converted Mask
This technique is useful for creating different types of cropping masks or selection masks that can be utilized to split textures down into smaller components. These components can then be further assembled into more detailed tiles, such as thick walls or objects. These types of masks are also great for combining different textures or tiles together, which is another tutorial in itself.