How to Turn a Texture Into a Seamlessly Tiled Background

Final product image — What You'll Be Creating

Tiled backgrounds are great for website backgrounds and all kinds of Photoshop work. They are particularly useful when working with textures where you need a larger overall background than the small image you have to work with.

In this quick tiling background tutorial, we'll take a texture and turn it into a background image ready for seamless tiling. It's a useful little technique that's been around forever. We can use this technique in this layout Photoshop tutorial as well.

But what if you don't have the time to make a repeating texture background from scratch? You can visit the Envato Elements library to find hundreds of seamless background textures with unlimited downloads!

Additionally, if you prefer to learn this cool Photoshop skill by watching a video, we've got you covered. You can learn how to make a tiled background by watching this new video from the Envato Tuts+ YouTube channel:

What You'll Learn in This Tiling Background Photoshop Tutorial

Why you can't use any image as a tiled background
How to crop and prepare the image
How to remove debris from the image (optional)
How to make a uniform grass texture
How to merge the grass layers
How to remove the edges with the Patch Tool
How to define a pattern
How to make a pattern overlay
How to add a flower pattern to the grass (optional)
How to offset the background using a filter

What You'll Need

1. Why You Can't Use Any Image as a Tiled Background

In this tutorial, we want to create a tiled background of a grass texture. There's a fantastic photo of grass on Envato Elements which we can use. However, if we just tile the image as is, the result isn't very good. As you can see below, it's very clear where the image is being repeated, and the dark patches look pretty weird. So to turn that photo into a tiled background, we need to first remove any irregularities, and then make the edges blend in to each other.

2. How to Crop and Prepare the Image

So the first step is to grab the main image and then Crop into a section that doesn't have the really dark corner patches. Something like the box shown below.

Below is our segment. I've actually shrunk it down a bit so that the texture isn't so oversharpened. Although it's mostly evenly coloured, we could do with lightening the edges. The more even we can get the image the better, as slight differences are quite glaring when the background is tiled.

So just grab the Dodge Tool (O) and, with a large soft brush, just gently brush over the left and right edges to lighten them up a shade. Don't go overboard, though, as the grass will look washed out.

3. How to Remove Debris From the Image (Optional)

Using a stock image of clean grass will always be ideal, but don't worry if your grass has debris in it! In the example below, there's a leaf that is going to be a dead giveaway if it appears over and over again, so we should get rid of it.

To do this, grab the Patch Tool (J) and draw a shape around the leaf, and then drag with your mouse to get an area nearby to patch it with. (Note that the Patch Tool should be set to Source and not Destination, otherwise you use it slightly differently.)

4. How to Make a Uniform Grass Texture

Our background is looking pretty nice and uniform now. We just need to make the edges bleed into each other.

To do that, start by duplicating the grass layer. Then move the first layer to the left and the second layer to the right. Keep doing this until you can see both layers with a white gap in between. Now bring them together so the rightmost edge of the first layer touches the leftmost edge of the second layer.

5. How to Merge the Grass Layers

Here you can see the two layers almost touching. Bring them together so there isn't any white in between, and merge the two layers into one.

6. How to Remove the Edges With the Patch Tool

Now, we again use the Patch Tool to draw a rough shape around the edge where the two layers meet. Then use your mouse to drag a nearby area over to patch it up.

Step 1

The Patch Tool makes this sort of operation really easy, especially with a background as noisy as this grass. As you can see, unless you look really carefully, it's not apparent where the blend line is. If you wanted to, you could go into fine detail and clone individual blades of grass, but this is fine for our purposes.

Step 2

Now we repeat the same process vertically. So duplicate the layer and move one down and one up until the bottom and top edges meet. Merge the layer together and use the Patch Tool to get rid of the edge.

And now we are ready for tiling!

The reason this will work is that we've effectively gotten rid of those edges. The new edges of the document already match up because we moved the layers equally left and right so that the right edge of this document actually is the next pixel along from the left edge.

7. How to Define a Pattern

Press Control-A to select everything, and go to Edit > Define Pattern.

Now we give the pattern a name.

8. How to Make a Pattern Overlay

Now, on any layer, if you select blending options and tick the Pattern Overlay box, you can choose from your set of custom patterns as shown, including the grass one we just made.

Of course, you should also save the pattern image as a PSD or JPG itself as you may need it as a standalone image. For example, if you were to use it as a background image in an HTML document, you'd need the single JPG image, not a Photoshop "Pattern".

9. How to Add a Flower Pattern to the Grass (Optional)

If you'd like to add a flower pattern to your grass, place a white flower PNG onto your finalized grass texture.

Next, use the Rectangular Marquee Tool to split the flower in half either vertically or horizontally. It does not need to be perfectly split in half. I have placed two flowers as examples.

Next, on the horizontal flower, drag the bottom half up and the top half down so both pieces are touching the edges of the screen. Make sure they stay perfectly parallel to each other.

Do the same with a vertical split, only bring the left half to the right, and the right half to the left.

Go to Edit > Define Pattern one more time and use your new flowery grass texture.

10. How to Offset the Background Using a Filter

Here's our tiled grass. As you can see, there's a bit of a dark patch that gives it away, but because I'm going to be using this as a background to a website, it's not a big deal as there will be stuff over the top. Nonetheless, you could easily go back and patch up that spot to make it more seamless.

Thanks to the commenters who pointed out that there is in fact a simpler way to offset the background using a filter! Just go to Filter > Other > Offset and select a pixel amount to move the image both Horizontally and Vertically. Thanks for the tip! I learn something new every day.

That's It! Your Tiled Background Image Is Ready!

I hope you liked this tutorial on how to make a tiled background. We learned how to turn an image into a seamless background texture, how to define a pattern, and more. And while this tutorial can come in handy, sometimes you won't have the time to create a repeating texture background from scratch.

Next up, we'll review some textures and tiled background images from Envato Elements that you can download and use right away!

5 Top Seamless Background Textures From Envato Elements

If you use Photoshop and design software on a daily basis, you need to visit Envato Elements. The subscription-based marketplace offers you unlimited downloads of digital creative assets for a flat monthly fee.

You can get unlimited graphics, textures, add-ons, fonts, stock photos, and more! Here are five top tiling background textures you can use right now in your projects:

1. Exotic Foliage Seamless Pattern (JPG)

Looking for a cute tiled background that's nature-inspired? This is a beautiful option! The download includes a high-definition tiled background image (5906x5906 px).

2. TERRAZZO Natura Seamless Pattern (AI, EPS, JPG)

You can also get this cool pack of repeating texture backgrounds. The set includes six individual designs, each as light and dark versions. The cute tiled backgrounds come in AI and EPS files for Illustrator and JPEG files for Photoshop.

3. Animal Print Patterns for Photoshop (JPG, PSD)

Animal prints are very popular as seamless background textures, and this set is perfect if you like this style. The download includes ten cute tiled backgrounds. Each pattern was exported at a high-res 1800x1800px, so they'll work for screen and print projects.

4. Geometric Play Patterns and Tiles (AI, EPS, JPG)

This kit is for the geometric pattern lovers. These minimal and elegant tiled background images look fantastic on a variety of projects.

You'll get 20 pattern swatches for Illustrator, 20 high-res tiling backgrounds (JPEG files), and 20 non-tiling digital papers in JPG.

5. Studded Leather Patterns (PNG, PAT, PSD)

Do you like ultra-realistic seamless background textures? This pack is for you. You'll get 14 unique seamless patterns of studded and buttoned leather.

Explore More Photoshop Tutorials and Resources

Looking for even more cool Photoshop tutorials? Envato Tuts+ has dozens of tutorials and resources you can explore for your next projects! Check some of them out:

Editorial Note: This post has been updated with contributions from Abbey Esparza and Maria Villanueva. Abbey is a freelance instructor for Envato Tuts+. Maria is the Associate Editor of the Tuts+ Design channel.