Tileable textures are easy to make. But suppose you have a vertical or horizontal stripe pattern (or any other pattern that only repeats in one direction) and you wanted to rotate it so that it is tilted at an angle while maintaining the ability to tile it (perhaps as web page background). To make such a tileable rotated pattern, you need to do a little bit of math to figure out how to get the pattern to repeat properly. To make it clear, take a look at the following images. The first image is a stripe pattern that is unrotated and tiling is easy. The second image is rotated and you can see that the pattern on each edge no longer lines up with the opposite edge.
This tutorial shows how to make a tileable rotated stripe pattern for arbitrary rotation angles. Although this tutorial is written for the GIMP, there are actually very few GIMP-specific instructions. It is therefore applicable in Photoshop or any other paint program.
The technique shown here is built upon for arbitrary tileable patterns in my rotated tileable patterns tutorial.
The strategy is simple:
This produces the tileable rotated texture. You can accomplish the same thing as this tutorial by visually by looking at the rotated pattern and cropping an area that is tileable, but I am showing the math because it can be built upon to tile other, more complex patterns.
The way to do this is really easy with just a bit of math, as shown below:
The stripes pattern has a period of w pixels (number of pixels it takes to repeat) and is rotated by an acute angle measured from the horizontal. The image size you need to make a tileable version of the rotated texture is shown in the figure. The math shown here simply ensures that the texture repeats an integer number of times horizontally and vertically.
The trig functions sin and cos will produce not produce nice, round numbers for the image size but this is OK because we are working on pixels; all you have to do is round it to the nearest pixel and when you crop the image, you just have to make sure you select +/- 1 pixel for best repeatability.
The math works best when you use an acute angle, so if you are rotating the other way, then measure the angle as shown below:
To actually make the rotated texture, follow these steps:
The basic principle behind this technique is that you can create a large, rotated texture and then select the smallest image that contains a repeatable unit of the rotated texture.
Final result for w = 100 and 30 degree rotation angle is shown below:
Discussion