Repeating Backgrounds

Posted by on Jun 5, 2011 in CSS Style HTML, Web Design | 5 comments

Repeat BackgroundI was asked how to make a background that is seamless by 3 different people. So, in this tutorial I’ll show you how to make repeating backgrounds.

Seamless website backgrounds are useful because they allow a developer to use beautiful backgrounds without worrying about the websites file size.

There are numerous ways to make a seamless tile background, but I’ll show you the easiest way I have found using Photoshop.

I’ll demonstrate how to create increasingly complex background images that repeat without seams in this video. To read the steps used see the article that follows.

What Type of Image Makes a Nice Seamless Background

Any image can be made into a seamless background, but some look better than others. The image above for example is great because:

  • It is complicated
  • There are no repeating images
  • It is very irregular

Metal Background Seamless

As you saw in the video,to the right is harder to work with, but is still a good image to use. The only real problem you face is that the contrast and brightness must be adjusted to hide the inner seams.

It works because of it’s complexity. This is the reason why most people struggle creating repeating backgrounds. They think they should use uncomplicated starting images. As you see, the opposite is true.

Here is a prime example of what you wouldn’t want to use (the clay picture below).

It has all of the bad qualities. While I could make it seamless, it will just look weird.

Bad Repeating Background

Step-by-Step Process of Creating a Seamless Background

Get a perfectly square image. The dimensions should be even and small (60×60, 150×150, 300×300) for example.

In Photoshop click on Filter -> Other -> Offset. Then enter 1/2 of the images dimension width or height  in the Horizontal and Vertical boxes.

If you have lighting issues, like I did with the metal background, I like to:

  • Select each of the 4 squares and increase their brightness until it matches the surrounding squares
  • Image -> Adjustments -> Brightness/Contrast
  • Make sure you don’t overlap your selections

I also smooth the contrast problems using the High Pass Filter and the Luminosity option in the Layers panel.

Just create a new layer and then select Luminosity instead of Normal in the layers panel. They then select Filter -> Other -> High Pass. This may work for you, but I’ve never liked this filter. That doesn’t mean I’m right for all situations.

Then click on the Healing Brush in your toolbar. I normally use a small brush around 5 pt. I use the following settings Hardness 100 and Spacing 25.

Then go in and remove the lines leftover. I like to zig zag as I’m healing the lines. This seams to make things look more normal. If you are drawing on rocks, or whatever it is better to redraw the rock pattern in irregular ways.

More Photoshop & Illustrator Tutorials

That’s All Folks

So, that is how you create Repeating Backgrounds that are seamless using Photoshop. If you have any questions or comments, leave them in the comment section below.

Till Next Time

Think Tank

5 Responses to “Repeating Backgrounds”

  1. LeslieC says:
    July 10, 2011 at 3:34 pm

    Thanks for the tut 🙂 This is the easiest way I’ve seen how to do it 🙂

    Reply
  2. rafi says:
    March 8, 2012 at 4:25 am

    very nice

    Reply
  3. Sharif says:
    May 27, 2012 at 5:27 am

    Nice Share. Thanks

    Reply

Leave a Reply

Your email address will not be published.

Google+