Tiled backgrounds are great for both website backgrounds and in 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 tutorial I'll take you through taking a texture and turning it into a background image ready for seamless tiling. It's a useful little technique that's been around forever. We need this technique for today's other tutorial - How a Simple Layout Can Be Mixed 'n' Matched with Patterns, Photos and Backgrounds.
Why you can't just tile any old photo
So in this tutorial we want to create a tiled background of a grass texture. There's a fantastic photo of grass on Flickr by 100kr which we can use. However if we just tile the image as is, the result isn't very good. As you can see above 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.
Step 1
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 above.
Step 2
Here is our segment. I've actually shrunk it down a bit so that the texture isn't so oversharpened. Now 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.
Step 3
As you can see above the grass is looking a lot more uniformly coloured. But there is a little leaf in the top left, that is going to be a dead giveaway if the same leaf 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 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)
Step 4
So our background is looking pretty nice and uniform now. We just need to make the edges bleed into each other. So duplicate 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 right most edge of the first layer touches the left most edge of the second layer.
Step 5
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.
Step 6
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 7
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 8
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.
Step 9
And now we are ready for tiling!
The reason this will work is 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.
Step 10
So press CTRL-A to select everything and go to Edit > Define Pattern.
Step 11
Now we give the pattern a name
Step 12
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. In the image above you can see me applying the pattern into a website background.
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".
Finito!
Here's our tiled grass. As you can see there is 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.
Update - Filter > Other > Offset
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 by both horizontally and vertically. Thanks for the tip guys! I learn something new everyday :-)
Part of Web Design Week
This week our sister site ThemeForest launched a whole new category of items to sell that are particularly relevant to PSDTUTS readers - namely Photoshop Templates. The new category means you can now design and sell Photoshop designs, as well as regular Web Templates and WordPress themes to earn a side or even full income. And on the flip side if you're coming up short on inspiration, you can get a kickstart by grabbing a PSD design from ThemeForest. So to give the new category the launch it deserves, all this week I'll be bringing you articles and tutorials on web design as part of our PSDTUTS Web Design Week.
Related Posts
Keep reading with more great tutorials and articles!
Enjoy this Post?
We'd love your vote!
User Comments
( ADD YOURS )Ernest Ojeh December 2nd
looks cool. i’ll try it out right away
Ernest Ojeh December 2nd
without reading, my silly brain thought..never mind. But this could come in handy. Thanks
Steve Rynk December 2nd
Yes very cool
Abethebabe December 2nd
This is a really handy tip, thanks a lot
Yana December 2nd
Still looks “tiled” and NOT seamless.
Kai December 2nd
Superb!
Thanks for this helpful tutorial.
Matthias December 2nd
I use the Offset-Filter for that, but the result looks the same.
Dan December 2nd
A bit of tiling there, but the effect almost looks like rows of mowed grass. It looks like a bit of color correction in those ares would be sufficient.
mjmurdock December 2nd
A better way to do the tiling . . . instead of duplicating the layer and moving it is to use the OFFSET filter (filter > other > offset ) then you won’t have to merge the layers together after. Additionally, you can do both the vertical and horizontal tile at once and better adjust the tile point to minimize tiling artifacts. Then just patch it or select the tile point and clone out the seams.
hope that helps : )
Kevin May December 2nd
Though the example isn’t the greatest, the process is definitely good to know and can be helpful, thanks!
Matt December 2nd
Nice, a very useful tut. Thanks
Pat December 2nd
That duplicating layers part seems redundant. Why not just use the Filter -> Other -> Offset filter rather than duplicating layers? If you offset by either direction by half the size of the document, then you know the part will meet in the centre, and then you can use the patch tool.
Another thing I do to make it seem more natural is to minimize the “unique” features in a tiled image. For instance, there is a shadow happening in your tiled image that likely wouldn’t happen 4 times in a pattern like it has. Using larger images to tile will help with this as well.
Timothy Long December 2nd
Talk about a useful tut. Good work, guys!
Collis December 2nd
Hey guys! Thanks for the awesome tip about the Offset filter, I’ve never seen that before. Have updated the tutorial accordingly
Thanks Mathias, MJ and Pat!
Dan Crouch December 2nd
Great timing! I was able to apply this technique for a job today!
Thanks,
dc
J December 2nd
Using Shear is easier
tripdragon December 2nd
soooo not done. It’s all color shifted. True it’s hard to do. But that still screams tile
dlv December 2nd
really nice post again, i didn’t know it
and the last tip about offset is so good!!
also, i use “Seamless Texture Creator” for this kind of work
adeux!
insic December 2nd
nicely done. thanks
Soh December 2nd
This is awesome, Ive always had trouble getting this perfect, thanks~
Joefrey Mahusay December 2nd
Useful article thanks Collis!
fuqaha December 2nd
Useful for my 3D visualization.
thanks!
John December 2nd
But it still looks tiled?
Demian December 2nd
yo lo hice para una pagina hace un par de meses queda barbaro! es http://www.4×4necochea.com
………………………………………………………………………….
i am made for the web few month before, its great, the page is http://www.4×4necochea.com
Matt December 2nd
Great start collis. This week is gonna rawk!
Francisco Aguilera G. December 2nd
Excellent tutorial, thank you very much. This week will be very attentive to psd Tuts.
Markus Jonasson Nielsen December 2nd
That’s a nice grass texture you used there.. Thanks! ;D
felipexakal December 2nd
Cool!
Tanaka13 - Créations du Net December 3rd
nice and useful one! thank you for sharing!
Timothy December 3rd
Nice tutorial. And very easy. Although, you can still make out where you patched the grass. But a non-photoshop user would not have any idea…
Fumin December 3rd
Very nice tutorial! Thanks a lot!
Swapnil Sarwe December 3rd
Beautiful tutorial…. I always had a problem wit such images…
I’m tryin to imitate for some of the images…. hope I will able to learn the trick very welll….
thanx a lot.. w8ing for all the tutorials following…..
Moksha December 3rd
nice so start with, but how to make other pages,
thanks for this tutorial/.
Dennis December 3rd
Thanks for the tutorial
Jordan Payne December 3rd
Nice tutorial Collis!
This will definitely come in handy some time
Casey L. Jones December 3rd
Great as usual Collis!
Cam December 3rd
pretty dope
CMoore December 3rd
Very useful, I think this’ll come in handy when I need to splice some textures together for planet surfaces. Thanks for the tut!
Athens December 4th
I prefer to use Imagesynth but this is a decent way to do it for free. Thanks!
Josh Drake December 4th
Pretty basic - lots of other tutorials out there on this - but still a nice thing to know.
sean steezy December 5th
yeah man, thanks! its a good technique that i will try out on anything I can! it doesn’t look tiled to me anyway…
P. Nikita December 5th
Thank…Very good and usefully!
Jason December 6th
Always wondered how to do this the easy way instead of my own, wrong way.. Thanks!
Ace of Spades December 7th
Great tutorial. Had to do a cement background a couple of days ago. I like this offset technique makes things much quicker.
Raymond Selda December 7th
Can someone post a video tutorial on how to do this technique? I’m really at lost when it comes to step 4 and above. I’ve finished the tutorial but I don’t know if what I did was correct.
Thank you.
Ace of Spades December 8th
Raymond ….Setup up a page and put a background image to repeat on the body tag. You will then be able to tell if the image tiles properly.
Takumi86 December 9th
Shoot thats a magic dude, awesome
max - AgencyZebra December 9th
hey - i’ve been trying to do this for a while… thanks for the step by step - there’s nothing worse than a badly tiled background !!!
Nestor December 20th
Just what I needed, I have to tile some textures for a 3d model so I’ll follow this tute
dera December 23rd
Great tutorial!!! Thank you.
Sergio Almeida January 6th
I always use that filter. It’s very useful!
Add Your Comment
( GET A GRAVATAR )Your Name January 9th
Trackbacks