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:
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.
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:
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