How to Create Repeating Background Images
This tutorial will let you create repeating background images for websites or anything else (like your Twitter account, desktop, video game or 3d graphics, and anything else you can imagine!)
Repeating Background Images Is Super Easy!
Repeat any image or texture, easily!
Repeat an icon
STEP 1: Selecting An Icon to Repeat
Get your desired image ready
Feel free to copy this image to your desktop and follow along with the tutorial!
STEP 2: Offset the Image
Tiling the image in preparation for repetition!
Done! The Repeating Background:
The Fruits of Our 30 Seconds of Labor
Ouch - it looks ugly...but don't worry, we did everything right.
Take a look at what happened: it bumped the image up and to the right by 50% of its width and length, wrapping the image across to the other ends of the box, so that all four of its parts appear in each corner of the image. If you placed four versions of this box against all four sides, and you'd see how it will become a seamless, repeating background image!
Here we go: the repeating background image in all its glory (or something like that). Note how the image looks kind of ugly at the top, starting with the first repeat? You'll want to experiment with your images. Some look better than others when repeated.
If you're using CSS to tile an image, you have a lot more options available to you: CSS background commands let you specify the starting point of the repeating background, and many other options. Check out this tutorial on CSS backgrounds to learn more about this stuff.
Sometimes, It Doesn't Work So Well...
STEP 1: Selecting a Pattern to Repeat
Trying Something Much More Difficult
STEP 2: Offset the Image
Will the Edges Match Up?
What Went Wrong?
When Non-Congruent Patterns Go Bad
Just look below. Yup...just as expected, this one didn't work out.
Why? Well, the image wasn't congruent. It didn't have any conceivable "center point." Everything from the center outward was non-uniform, so, it wasn't destined to work from the very start.
In order for this one to have worked, all four corners would have had to "complete each other" if placed next to each other. Let that be a lesson when it comes to tiling or repeating patterns!
Some images simply cannot be repeated - and this was one of them. You'll find that shape patterns (especially spirals, anything circular, or anything involving lines whose edges do not match up) will be impossible to set as a repeating background. In order for it to work, the edges on all four sides of the square must "match up" if met. Kind of like folding a square piece of paper with a perfect plus sign drawn on it - the edges of the plus sign meet when you fold it in half.
How About A Repeating Texture?
STEP 1: Find A Photo-Realistic Texture
Are You Ready for A Little Photoshop Work?
There's going to be a trick this time around - we'll have to do a little Photoshop work to match up the edges. The end result: an area of carpet that looks like one big image (even though it isn't!)
If you ever attempted to tile this image as a repeating background, it wouldn't look right. For your reference, this is exactly what it would look like without any work done to it, to make it a proper repeating background image:
It doesn't look TOO horrible, however - look close enough and you can see the edges, making the image look like it has a tic-tac-toe board in the middle of it. Let's get rid of that.
STEP 2: Offset the Image, Rubber Stamp the Edges
A Little Manual Labor Needed After Offsetting!
Looks Nice, But Still Not Good Enough
When Shades Throw Off the Illusion
...compared to the old version:
Note how the bottom one (the old image) has that feint "grid" showing in the middle of it? That's what we were trying to get rid of. Before you use an image like this for a final production, you'd want to spend a little more time working on the pattern. Since this picture is of carpet, and the fibers are so tiny - it's very "forgiving." You'll notice it being much more difficult with more complex textures, like burlap cloth or blades of grass.
Notice how areas of the carpet appear a little darker? Those details become blaring when you repeat a texture like this, because they'll appear over and over in each repeating texture, making it obvious to the eye. The resolve would be to use the "Dodge" tool in Photoshop to lighten up that dark spot, and to also work on it a little more with the Rubber Stamp tool.
Brighten the Dark Areas...
Remove the Eye-Catching Repetitiveness
An important tip here is to do some heavy Rubber Stamp work directly against the far edges of the square. That's where you really want to remove any traces of dark lines, which will make the final image look like a grid.
Once you clone out the dark spots and the dark edges, the final result looks a lot more believable. If you can really master the art of retouching patterns for repeating backgrounds, most people won't even notice that it's just one tiny square of an image being repeated over and over!
Repeating a Logo
STEP 1: Select a Logo to Repeat
Make Sure It's Centered!
STEP 2: Offset the Logo
You Know the Drill!
Different logos will have different outcomes. You can also play around with the positioning of a repeating logo by moving the original image around, rather than making it centered, before you apply the Offset to it.
Repeating background logos make awesome backdrops for any Twitter account or blog! Just make sure to fade them out so that they're darker and not too overwhelming in contrast of your actual content.