How To Create Repeating Texture & Pattern Images

Line25 is reader supported. At no cost to you a commission from sponsors may be earned when a purchase is made via links on the site. Learn more

Repeating background images are safest method of styling up your website background other than a plain old CSS background color. Websites are viewed in all types and sizes of browser these days, so a repeating background ensures the whole of the user’s screen will be filled with your design, unlike a static image that can often end up being cropped off or lost in a sea of flat colour. Let’s take a look at how seamless or repeating textures and patterns can be created in Photoshop.

Creating seamless textures

Anyone who’s followed any of my tutorials or seen my work before will know how much I love using textures in my design work. Textures really help add a tactile feel to an otherwise flat and digital design. Open up a texture file and crop it in Photoshop to exclude any marks that would stand out when repeated.

Go to Filter > Other > Offset then enter a figure in the Horizontal and Vertical fields that’s half the dimensions of your image. My texture file is 800x800px, so I enter 400px in the fields.

The offset filter will show obvious lines where the file is repeated, but these can be blended in using the Healing Brush. Hold ALT while selecting a sample area, then draw over the lines with a soft brush. Photoshop will disguise the hard lines to blend the four corners together.

Give the new file a test in a new document by duplicating and butting up the copies against each other. You should be left with a seamless file that doesn’t leave any obvious gaps.

Creating repeating patterns

Repeating pattern files are also a popular choice for website backgrounds. Patterns come in all shapes and designs, from vintage wallpaper to simple stripes like these. Whatever pattern you’re creating the same simple steps apply.

Zoom in and pick a focal point on the design, in this case it’s a point in the design where the pink line changes to yellow. Drag out a marquee until you reach the same point elsewhere on the design.

Crop the image to size then make duplicates to check whether the file tessellates and creates a seamless pattern.

Creating pixel patterns

Pixel patterns have been popular in web design since the early days of Photoshop designed table layouts. They really help add subtle detail to your website background or page elements. Create a new document at 3x3px.

Zoom as far into the document as possible, then use the Pencil tool to fill three pixels to create a diagonal line.

When this pattern file is applied to an element at normal zoom it creates an intricate diagonal line pattern. Check out my pack of free pixel patterns, containing similar diagonal lines amongst other pattern swatches.