Use Photoshop to Create a Seamless Background that Tiles

Creating a background that will tile properly on a webpage can be tricky.  Just selecting any old photo will create ugly repetitive seams - you'll be able to see where one copy of the photo stops and another begins.  This photoshop tutorial will show you how to modify a picture so you can no longer see the borders, creating a seamless tiling background image.

Step 1. Before you even file up Photoshop, know that some images are going to be harder than others. Many images, especially photographs, are impossible to scale.  The image of yellow flowers, for instance, would be difficult because of the perspective.  The flowers in the from are much larger than those in the back.  They're also out of focus.  Try to picture what a picture would look like tiled - would it even work? For the best results, use an image that has a fairly even distribution of it's subject.  Everything is in focus, at the same angle, and easy to work with.  For this example we'll be using the white flower picture.

Step 2. Open the image in Photoshop and check its size.  The easiest way to do this is to go to "Images" in the menu bar and click "Image Size..." Remember the width and height.

Step 3. Click Filter in the menubar.  Go to "Other" and click "Offset".  You want to enter half of the images height and half of the width.  Because our original numbers were 1000 wide and 700 high, we're going to enter 500 horizontal and 350 vertical. Click the "OK" button and notice the four distinct sectors that appear.

Step 4. This is where the real work comes in.  The previous step created two seams - one horizontal, one vertical.  You have to blend those seams.  Depending on the type of graphic you're working with, there may be some tools better suited than others.  Here we used the cloning brush exclusively. Select it, alt+click to define a source and left click to brush.  If you've never used this tool it can take some getting used to.  You can also try the healing brush (band-aid icon) and copy/pasting pieces of the image from one area over the seam.  Work you way from left to right until you can't tell where one half ends and the other begins.  Then work on the vertical seam in the same way.

Step 5. Once you've removed any trace of the seam, your photo should look something like this.  Our example is a bit of rushed work, but you get the idea.  The more natural your photo looks in this state, the better you end product is going to look.  If you're not buying that this is one solid photo, work on it a bit more.  

Step 6. Once you're done, go back up to "Filter" in the menubar, go to "Other", and click "Offset". This restores your image to it's original form. You may need to touch up a few things here, but for the most part it should look fine.

Step 7. Go back to "Image" in the menubar and click "Image Size..."  Set the image to whatever size you'd like the background to be then save the image.  Keep in mind that tiling background shouldn't be very large or they can be a strain to load.

Step 8. Your image should tile together nicely! You'll notice that the seams you were working are the ones where the title background ends and begins.  Our example above shows four images displayed tiled together.  While it isn't perfect, it certainly looks better tiled than the original image did.  If you're unhappy with your results, you can open the image back up in photoshop, flip it inside out with "Offset" again, and make it look even better.

Remember, this isn't as simple a process as applying an effect to something.  While you could use a tool like Pattern Maker to scramble your image, this method requires some actual work.  At the end of the day it comes down to Step 4 - raw effort and talent.