How to Do Tessellations in Photoshop
Tessellation is the mathematical term for an infinitely repeatable pattern, and tessellations are a common way to make tiled textures in video games. They are made from base images that have patterns replicated and copied around all four edges in Photoshop. Creating these tiled images, called tiles, is a basic skill for video game artists.
Other People Are Reading
Instructions
-
-
1
Open your base image in Photoshop. It needs to be square: the same number of pixels wide as tall. This will become a repeatable tile for your tessellated pattern.
-
2
Go to the Filter menu. Select "Other" and "Offset." Enter half the width of your graphic in the horizontal and vertical offset boxes that pop up. Check the option box, Wrap Around. Click "OK" to apply the filter.
-
-
3
Enter half the width of your graphic for the horizontal and vertical offsets, and make sure that the Wrap Around option is checked. You'll see two lines forming a cross down the middle of the image. These lines used to be the edges of the image; they wrapped around on the 'inside' of the image, and can be used to compare how different edges match up to one another.
-
4
Select the Clone tool (it's the one in the toolbar with a rubber stamp icon). Click on a part of your graphic that's away from the cross and has the color and shading that roughly matches an area near the cross itself. This will copy that part of the image.
-
5
Click on a part of the image near the cross that has a part of the pattern you want to change; this will paste (clone) the image you selected earlier. The goal is to make sure that parts of the image near the cross are continuous patterns that don't have breaks or mis-alignments or changes in brightness or hue.
-
6
Go to the Filter menu and select "Other" and "Offset" again, and enter the same width you entered last time. This will remove the cross and show you the modified image with its edges in the 'right place'. Look for places where you need to blend the pattern, or use the Clone tool to adjust things. Then re-apply the Offset filter again, and see if this fix broke anything on the edges of the tile. Expect to go back and forth with this a couple of times fixing ever smaller errors.
-
7
Open a second Photoshop document that's three times the height and width of your original. This second Photoshop file is for testing only; your actual tile is the finished artwork.
-
8
Copy and paste your tile into the second Photoshop document. It will appear in the center of the new document. Drag the tile to the upper left corner, and paste a new copy of the tile in. Drag the second copy of the tile to the upper right corner, and paste a third time. Drag the third copy of the tile in between the other two copies. Repeat the cutting and pasting until you have nine copies of the tile in this new document, arrayed in a three by three grid. You're looking for places where the pattern doesn't quite line up in the vertical and horizontal axis, and looking for places where the pattern looks 'off' on diagonals between tiles, usually because of differences in brightness or colors not matching.
-
1
Tips & Warnings
When doing this sort of work, it's useful to ask yourself what size someone will see the tile at. While this process can encourage perfectionism, part of the job requirement of being a video game artist is knowing when "perfect" is the enemy of "good enough" and moving to the next piece of art needed.
