Create Seamless Web Background Textures in Minutes

Step 1: New Canvas

Tiling backgroundimages can be fairly easy to spot when they’re small so I’m going to make minefairly large. We’ll be saving it as a JPG so the file size should stay plentysmall enough to load quickly on most connections. If you disagree with thelarge size, simply make yours smaller!

In Photoshop, create anew document that’s 800 pixels by 800 pixels at 72 DPI and in RGB.

Now fill your canvaswith a mid range to dark solid color. You can choose anything you like, but Iwent with #80ac4b.

Step 2: Create a Custom Brush

I’ve noticed thatbokeh textures seem to be really popular lately I decided to show you how tobuild one. It’s a good example because it’ll make a texture that’s a littletrickier to tile than most.

To start off, create anew document, grab a hard round brush and click once in the center of thecanvas to make a black dot. I’ve given mine a slight black outer glow to add tothe bokeh effect a bit. Now go to Edit>Define Brush Preset.

Name your brush, saveit and switch back to your other canvas.

 

Now select that brush,go to your brushes palette and apply the following options to give it a nicescatter effect.

Ste 3: Paint It

Now that you’ve got anice brush to work with, paint in some bokeh. Don’t get too carried away,remember that the more complex it is the harder it will be to go in and fixwhen we convert it to a repeating pattern.

Here’s the patternthat I came up with:

 

Step 4: Offset

This is the part where Photoshop takes over and does a neattrick that saves us a lot of time. First make sure your layers are merged intoa flat document. Now go to the menu and choose Filter>Other>Offset.

Setyour horizontal and vertical offset to half the pixel dimensions of your canvasand select the wrap around option

Voila! A seamlessbackground texture. Ok maybe not. However, much of the work has been done forus and we just need a little cleanup to make it work.

Step 5: Cleanup the Seams

If we were workingwith a photographic texture, we’d go in and clone along the seams to make sureeverything looked decent. However, here we’ve got a solid color background sowe can actually just paint with a green brush.

Go in and completelypaint over any problematic areas. It’s all right if you destroy some bokeh inthe process. As you can see in the picture below, I’ve flattened out one of mycircles a bit while repairing the texture. We’ll fix this in the next step.

Step 6: Adding Some More Bokeh

Now grab the bokehbrush that you made and turn off any scattering effects you turned on earlier.Add in some extra bokeh one click at a time where there are noticeable gaps inthe center of the image (stay away from the edges!). Use a few layers andvarying opacities to make it look nice and replace any circles you messed upwith the previous step by painting right over the top of them.

When you’re finishedwith this step, you should have a beautiful and perfectly tileable backgroundgraphic. Now save that out as a JPG, keeping your file size as low as possiblewhile maintaining a crisp image. I decided to save mine out at 500px by 500pxso I could easily spot the repeating pattern and look for troublesome areas.

Next we’ll test it outin a web browser to be sure it works.

Step 7: Throw it in a Web Page

The best way to testout the texture is just to create a quick web page. Create an empty HTMLdocument and style the body with the following CSS:

1

body { background-image: url(yourFilenameHere.jpg); background-repeat: repeat; }

Now preview it in yourbrowser to see how you did. Don’t worry if it’s not perfect, just go back andtweak any areas that need to be fixed. As you can see in the image below, we’retiling pretty well! Not bad for only a few minutes of work.

Organic Textures

Just to be thorough, Iwant to also show you how this works with a texture that’s a little moretypical with the resources you’ll find online. Here’s one that I grabbed fromFlickr.

First cut off theedges, they’ll be too easy to spot in a repeated pattern. Then run the offsetcommand like we did before.

As you can see in theimage above, this texture is so perfect for this technique that it’s hard tospot the seams even before we do any cleanup! Still, go along the seams witheither the clone tool or healing brush to make sure the transitions are niceand gradual.

When you’ve done that,save it out and load it up in the browser like before to see if you’ve got anyugly areas.

The image above showsmy final product. Going through it a second time with a much easier texture towork with I was able to cut my time down to about two minutes!

Conclusion

This method is soquick and easy you really have no excuse not to give it a shot the next timeyou want to spice up your web design’s background. Creating your own tiledtextures rather than grabbing a ready made one will help keep your site lookingunique and gives you a lot more freedom in what type of texture you want.

Let us know in thecomments below if you were able to come up with a decent tile using thismethod. Leave a link to your final product so we can check it out!