Design resources

Make a texture tile cleanly: a repeatable editing workflow

Turn a suitable surface photograph into a restrained repeating texture, then test its seams, scale, and contrast in a real layout.

A seamless texture has matching edges, but that alone does not make it convincing. A distinctive knot, shadow, or stain can reveal the repeating grid from across the room. Good tiling starts with choosing an image that has even lighting and a relatively consistent surface.

This replaces the second historical stock.xchng roundup at its original URL. The old set of 111 files is unavailable here. The workflow below helps you produce a new texture from an image you are permitted to edit.

Prepare the photograph

Start with a straight-on image, correct obvious perspective, and crop away objects that should not repeat. Normalize a strong lighting gradient before working on the seam. If the left edge is much brighter than the right edge, cloning only the join will not solve the larger problem.

Keep an untouched original. Work in layers in your preferred image editor; GIMP’s documentation is a useful reference for an open source workflow. For an existing material library, inspect ambientCG rather than downloading untraceable “free texture” archives.

Bring the edges into the middle

Offset the image by half its width and height, wrapping pixels around. This brings the original boundary into a cross at the center. Repair that cross using cloning or healing while keeping the outer edges unchanged.

Use several sample areas and vary the brush size. Repeatedly cloning the same patch creates a new visible pattern. Work at 100% zoom for local detail, then zoom out to check the overall rhythm.

Test more than one tile

Create a 3-by-3 preview. Look for stripes, repeated dark spots, and an obvious checkerboard of color. If you see the grid, return to the source and reduce the distinguishing feature; do not just blur the entire surface until it loses its character.

Test at the size the design will display. A texture that looks like paper at one scale may look like stone at another. In a webpage, compare the effect behind real headings, buttons, and photographs instead of judging it on an empty canvas.

Export for the job

Use an appropriately sized image format and compare the exported file with your working copy. Check the seam after compression. Keep license information and the editable master with the project, then add the final asset only where it helps the design. A texture should support the content, not compete with every element on the page.