How do I make a seamless parallelogram tile?

This post explains how you could make a seamless tile in the shape of any parallelogram. You can use this method for creating seamless isometric or diamond tiles, and even triangular tiles (just cut the parallelogram along a diagonal).

Start with a base image larger than the parallelogram shape you want to create. In the steps below I indicated which programs I use to do the step, but of course you can use any program that can do the desired operations. I chose the second image so that it is easier to see what is happening with the texture.

grass color0

[dropcap style=”dark”]1[/dropcap](Inkscape) Crop the parallelogram shape from your image.

grass1 color1

[dropcap style=”dark”]2[/dropcap](Inkscape) Shear the parallelogram into a rectangle. Be careful not to stretch the image: only shear. Do not worry if you are not 100% exact; this will be undetectable in the final result. This step distorts your texture; following steps will correct this.

grass2 color2

[dropcap style=”dark”]3[/dropcap](Gimp) Make the image rect-tileable using any standard method. Make sure that the size of the resulting rectangle is the same as it was before this step. If your filter or algorithm reduces the image size, make sure it does so in the same width-to-height ratio as the original rectangle. That way, you can scale it back up to the correct size without distortion.

grass3 color3

[dropcap style=”dark”]4[/dropcap](Inkscape) Shear the rectangular image back to the desired parallelogram. I usually just zoom in and do it by eye. In Inkscape, I align the centers of the rectangle and the parallelogram shape. Then as I shear the rectangle, the bounding box aligns with the corners of the parallelogram when the shearing is the right amount.

grass4 color4

And now you have a seamlessly tileable image:

grass_res
color_res

1 thought on “How do I make a seamless parallelogram tile?”

  1. Pingback: Tiles | Pearltrees

Comments are closed.

Scroll to Top