Monday, February 7, 2011

How to Create Repeating Background Images

How to Create Repeating Background Images

Here's a quick, effective way to repeat an image such as a texture, pattern, image or anything else!

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!

The following tutorial assumes that you have a copy of Photoshop...if not, perhaps Gimp will do the trick (it's basically a free community-made version of Photoshop). As usual, I'll spare you a long intro What we're doing here is taking an image -- any image -- and modifying it so that it can be "tiled" like seamless wallpaper. Let's get started!

Repeat an icon

STEP 1: Selecting An Icon to Repeat 

Get your desired image ready

Select the image that you want repeated 
Here's the image I'll use for this tutorial. Note that you'll always want your target image to be an exact width. The one here is exactly 200px by 200px (you can use 100x100, 50x50, etc.) Otherwise, you'll get some undesirable results when you finally test it out as a repeating background image.

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!

In Photoshop, go to Filter » Other » Offset. You'll see the menu as shown above. Since our image is 200px by 200px, we'll want the settings to be half of that number. So, set the horizontal and vertical to 100px each (that's half of 200, of course).

Done! The Repeating Background: 

The Fruits of Our 30 Seconds of Labor

Repeating image background 
...the previous exercise should have created this image:
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

Let's try a repeating pattern on these lines 
Let's try something more difficult this time - how about a pattern of incongruent crinkly lines, overlapped with even more lines? Think this will repeat? There's only one way to find out!

STEP 2: Offset the Image 

Will the Edges Match Up?

Apply an offset to these lines to make it a repeating image
Just like before, we'll, go to Filter » Other » Offset in Photoshop, and set the horizontal and vertical to 50% less of its current size...then save.

What Went Wrong? 

When Non-Congruent Patterns Go Bad

Offset lines as a repeating background image 
This thing looks nasty. There's no way it's going to turn out looking can tell just from the offset image!

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?

Using carpet as a repeating background 
Now, let's try a REAL challenge - a photo-realistic texture that certainly is far from congruent, and is entirely random. In this case, a face-down picture of carpeting. The fibers are all random, and nothing lines up.

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!

Repeating a carpet texture
Here we go again: offsetting the image. In Photoshop, go to Filter » Other » Offset. Look closely this time, and you'll see the edges. They don't look so great, so, we'll have to Rubber Stamp them together. If you didn't know, the Rubber Stamp tool allows you to "pick" a spot anywhere on the image and "clone" it with the tool.

Using Photoshop's Rubber Stamp tool on a grass texture
Here, I used the Rubber Stamp tool in Photoshop to "clone" carpet over the big plus sign-shaped outline of carpet edges in center of the image. Note that the only thing I made sure not to clone over was the center point - you'll always want to leave that alone, or the image will look weird. Also, be sure to use a normal round brush and not a "feathered" one. Feathered brushes make the image look blurry.

Here's the finished product. It took me a whole 10 seconds to work on:

Looks Nice, But Still Not Good Enough 

When Shades Throw Off the Illusion

Here's the finished product:

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

Nice, now that's looking a lot more uniform because the dark spots along the right edge are gone. I brightened the entire image up, and rubbed the dark spots with the Dodge tool in Photoshop.

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!

Now, for the final tutorial - a logo! The same principles apply here. Here, I'll use the Dell logo and set it to be a repeating background. I started off with the logo, centered in a box:

STEP 2: Offset the Logo 

You Know the Drill!

Setting a logo as a repeating background
By now, you've probably memorized all of this! In Photoshop, go to Filter » Other » Offset. Offset the logo by half the horizontal and vertical size of its own size, and click OK. You've acquired your new repeating logo background.

Repeating Image...Accomplished! 

...and here's a test to make sure it works! The image we've generated can be seen on the right, and the tiled version can be seen below.

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.

Labels: ,


At February 11, 2011 at 7:50 PM , Anonymous Anonymous said...

To be honest I don't really get it.. Why do u need to offset the Dell logo and space invader, can't they be used as they are?


Post a Comment

Subscribe to Post Comments [Atom]

<< Home