Repeating Seamless Background Image Tutorial Using Photoshop

A trick often employed on webpages is to use a seamless background that can tile both vertically and horizontally. If your website gets alot of traffic and you don’t like paying for extra bandwidth costs you need to optimize your site for every single kilobyte. This generally translates to NOT using a giant JPG as a background; (unless you’re doing silly myspace layouts). This tutorial will explain how to make seamless backgrounds for your webpages.

Step One - Identify image you want to use as your seamless background

In this case we’ve put together a 500x500 red and gray image that we think will work well as a textured background. It’s important to know the height and width of your image for the next step in the tutorial so be sure to write down or remember what your height and width are. 500x500 may be too large for some websites since you may want to use something more like 100-200px in height and width, but for this example we’ll use a fairly large image:

Step Two - Offset the image

The second step to properly making a tile-able background is to offset the image. My image is 500px wide and 500px high so I will be offsetting this image by 250px both vertically and horizontally. To do this I use the offset filter. (Filter>Other>Offset in Adobe Photoshop CS3)

I set the Horizontal and Vertical offset values to exactly 50% of my image height and width and set the undefined areas to wrap around. After clicking ok I get an image that looks like this:

This isn’t quite what we want our background to look like… Ideally our background has no seams in it and appears to be one large image which leads us into step three of the process

Step Three - Clone Stamp out the seams

One of my personal favorite tools that Photoshop has to offer is the Clone Stamp Tool (s key on keyboard to select it) I’m not going to go into great detail about how to use it except to say that if you’re not using the clone stamp tool then you need to start to.After selecting the Clone Stamp Tool you need to choose a sample area in the image. Hold the alt button, (or option on mac) and a crosshair will appear, you then need to click in an area away from the seems preferrably in the lower left or lower right area. After clicking you can release the alt/option button and your brush will appear again. You can at this time use the clone stamp tool just like you would a brush and draw over the seams. As you drag the mouse over your seams you will see that is has cloned the portion of the image you just sampled. Here’s a video on Youtube that outlines how exactly the Clone Stamp works in detail:

One trick I like to use when sampling the areas of the image is to use either a soft brush:

Or for instances like this where I have a textured image I like to use my textured brushes:

After you’ve clone stamped out your seems your image should look something like this:

Step Four - Check to make sure it tiles properly without seams

To make sure it will look alright for for tiling I recommend using the Offset filter again by hitting cntrl+F or apple+F or you can just goto Filter>Other>Offset and hit ok. The image should re-wrap itself by 250px vertically and horizontally and you should still not see any seams. If you do, repeat step three and clone stamp out the seams.

Step Five - Define Pattern to save for later use

If your image is going on the web you can export it now and use the necessary CSS code to tile your background either vertically, or horizontally and vertically as you can with our image and you can see your results on your webpage. Example:

background: url(path/to/image.jpg) repeat-x repeat-y;

If you want to use the tile-able seamless graphic in Photoshop then you need to create a defined pattern for your image.

To do this, select all (cntrl+a or apple+a) and goto Edit>Define Pattern… then name the pattern and hit ok.Step Six - Fill with Defined Pattern

To fill an area with your newly defined pattern goto Edit>Fill… and you should see the fill window popup. Set the “Use” drop down to “Pattern” and then select your pattern from the list below as I have:

After clicking ok you should see that the image (or selection) has been filled in with your seamless texture. You can see the result of my tiled image by clicking on the thumbnail below:

Conclusion

One thing you’ll notice about the image is that it will have a repeating area of lighter red texture and some gray splotches that may be easily seen when tiled over and over again. The way to get rid of this is to keep resampling the original image with the clone stamp tool in the begining steps to get rid of clearly noticeable areas of pattern. The less variation in the texture/colors of the image the less noticeable it will be that the image is a tiled graphic.

Posted in: Applications,Blogging Hacks,Tricks,Tweaking