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!)
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!
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
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!
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
...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.
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 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?
What Went Wrong?
When Non-Congruent Patterns Go Bad
This thing looks nasty. There's no way it's going to turn out looking right...you 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.
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?
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.
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!
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.
...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!
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!
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.
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: Design inspirations, photoshop tutorial
1 Comments:
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