f w h

Make Your Own Repeatable Pattern or Texture in Photoshop

With so many new websites relying on textures, many designers may be wondering how to create patterns or textures that repeat. Repeatable textures are easier to use in flexible layouts. Creating repeatable patterns and textures is surprisingly easy in Photoshop.  Here’s how:

The first step is to choose your texture. I have chosen the following texture, created using the Florabella Collection, for this example.

Textured pattern based on Florabella Petite textures

Next, double the width and height of the canvas, using the “Canvas Size…” dialog under the “Image” menu, or press CTRL+ALT+C on PC. Change the settings as indicated below.

Make your own repeatable texture

Once you have the canvas sized, duplicate the the layer 3 times. To do so, right-click the layer, and choose “Duplicate Layer…”

After the layers are duplicated, arrange them so they fill the entire canvas, as depicted below.

Make your own repeatable texture

Once you have covered the canvas, merge all of the layers.

Make your own repeatable texture

Next, using the Marquee Tool (M), create a rectangular selection from top to bottom around the seam in the middle. Using the patch tool, drag the selection to the right and let go.

Make your own repeatable texture

Then, do the same along the horizontal.

Using the “New Guide…” option under the “View” menu, add guides at 25% and 75% on the vertical and horizontal.

Make your own repeatable texture

Using the Crop Tool (C), crop the image down to the square created by the guides.

That’s it. Using the “Save for Web & Devices…” dialog (CTRL+ALT+SHIFT+S on PC), save the image as a PNG file.