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!
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
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.
( )Justin March 22nd
How so? There is no edge..
Also, they’re not creating an image for you to download, but a technique for you to try. Maybe you have a better method?
Get that negativity out of here..
( )Silver Firefly April 13th
Actually, the negativity came from you, Justin, more than it came from Yana. Why are you being so defensive?
Back to the tutorial, I found it kind of helpful. I think I’ll stick with optimized large images for my website’s background for the time being until I get better with this sort of thing.
DMC May 11th
It’s not negativity, it’s simply correct. The finished image won’t tile correctly.
It’s a helpful tutorial for sure, but there’s nothing wrong with constructive criticism Justin. I’d hate to think we live in a world where criticism is always taken as negative.
Christiano July 25th
Yana didn’t say wrong and it didn’t disrespect anybody. He just showed your opinion. Which the problem? Those critics help to improve the presented works…
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!
( )Patternhead January 13th
+1 for the offset filter
( )KSiimson January 22nd
In the GIMP, do this:
1) Crop the area that is going to be your texture
( )2) Filter > Map > Make Seamless
3) Done
xenocide702 January 23rd
i just use gimp’s make seamless for tiling, then move it back to photoshop for touch-ups
true it’s not perfect, but looks good enough, thanks for the post
( )CgBaran Tuts April 9th
Very useful tutorial thanks
( )AhmadAboBakr April 20th
Very useful.
( )okan özkan April 24th
Very very thanks.
( )Dario Gutierrez April 28th
Cool tutorial dude!
( )Brandon April 28th
Thanks for this!
With a bit mucking around it can look really good in final designs.
( )diezko April 29th
Very very nice, thank you very much.
( )Snurf May 7th
This has been a great help for me thanks.
( )Master June 8th
Effect > Shear
Rotate 90
Effect > Shear
done
( )Amine June 19th
I really loved that tutorial … but too long for me ^^’ so i used your final render, i’ll put the link and precise that i took it from PSDtuts .. take care ô/
( )OSoSLO July 19th
For a much faster and easier way to generate seamless textures, check out the free, fully-functional 30-day trial of EZTiler. It can create seamless textures from virtually any photograph or graphic image.
( )Rob July 28th
Very nice! Will be trying that asap!
( )nexo August 18th
Very very nice, thank you very much.
( )Egypt Web design company August 22nd
wow thanks so much , very nice
( )That one guy August 22nd
To get rid of most of the lighting seams you can use “Filter > Other > High Pass” and then “CTRL-Shirt-F” with the Luminosity mode. But it might look better if you do this about 2-3 times.
( )And as a final action, it might be better to downsize the texture.
Cybernoxa September 27th
Hi there,
( )Gr8 tut
I think there’s a faster and better way to ‘lighten’ the edges. Just use Clone Stamp Tool [S] and grab some grungy brush – then with chaotis movements stamp the darker areas
someone or anyone September 28th
Nice!
but not all textures could become that great
it need something like grass or maybe fur but
some other textures cant be done by that way
but anyway your tut is great thanks
( )