Introduction: Creating Seamless Tiled Wallpaper

Create a seamless tiled graphic that can be used as desktop wallpaper, a web page background or a texture map for 3D projects. Here's how.

There are many different image editing tools out there and so I leave it up to the reader to figure out how to perform these steps with your particular image editing software. These steps assume your editing software has the following features:
1) Layers.
2) The ability to create a custom canvas size. (we will use 200x200 pixels)
3) Cut, Copy, Paste, .....etc. (These are pretty much universal.)
4) The ability to paste or move to an exact pixel location. Gids or rulers could help with this.

Step 1: Choose Some Objects to Include in Your Tile

First choose the objects you want to include. To keep things simple I have chosen just three. Scissors, a carabiner, and a can opener. You can include as many as you like. You can also include more complex objects like stones, gravel, or whatever.

Step 2: Choose a Canvas Size and Scale Your Objects

Next choose a tile size and paste each individual object into it's own canvas (it's own file) of that size. I will use 200x200 pixels in this example. You can choose any size you like. Scale the objects so that they fit into the 200x200 canvas nicely with a bit of wiggle room to spare. At this point I have three files.
1)biner.jpg
2)opener.jpg
3)scissors.jpg

Step 3: Tile Each Object With It's Self (3x3 Matrix) to Form a 600x600 Pixel Image of Each Object

Next take each object and use it to create a 3x3 matrix. Shown below is the matrix I created from biner.jpg. The resulting matrix is 600x600 pixels. (not show to scale.) Perform this step for each object in your wallpaper. As a result I now have three new files:

1)biner_matrix.jpg
2)opener_matrix.jpg
3)scissors_matrix.jpg

Each will be pasted to it's own layer in the final combined image.

IMPORTANT!!! I'm showing the tic-tac-toe grid to emphasize the fact that each square of the matrix is an identical 200x200 image. In reality no grid is visible only the carabiners. If you pick any pixel and travel exactly 200 pixels in the X or Y direction you should land on the identical pixel in the adjacent image. THIS SPACING IS IMPORTANT!!!!!

Step 4: Here's the Trick and Why We Tile the Layers 3x3 600x600 Pixels

OK here's the trick and this is why the spacing is so important. We can now crop a 200x200 image from anywhere in this 600x600 matrix and the resulting 200x200 image will now be tileable. Here's why. Notice in the example below that any part of the scissors that travels outside the 200x200 crop box re-enters the box on the opposite side thus when the cropped box is tiled with it's self we have a seamless matrix of scissors. This is true no matter where we choose to crop as long as the crop size matches the matrix spacing. (200x200x pixels) If this doesn't make sense yet just hang on and it will when we are done.

Step 5: Import the 3x3 Tiled Objects Into Your Project As Separate Layers.

OK we're almost there! Next create a new 600x600 or greater image and paste in each 600x600 matrix image into it as a separate layer. It should now look like this. Notice we can't see through the scissors yet. We will need to erase each layer's back ground to make the other layers visible.

Step 6: Erase Each Layer's Background to Make It Tansparent and Arrange Your Layers

The next step is to clean up the layers and arrange them. Notice how the scissors in the above example have a background of their own which blocks the view of the layers below. For example notice how you can't see through the finger holes. Depending on the exact steps you took you might not be able to see the lower layers at all. The next step is to erase anything on the scissors layer that isn't scissors and do the same for the other layers. Erase anything on the opener layer that isn't a can opener and erase anything on the carabiner layer that isn't a carabiner. Each layer should be transparent except for the object it contains so that you can see the layers below it. After cleanup the layers should look like this.

Step 7: Arrange Layers and Crop and You're Done

Almost done! The final steps are arrange and crop. Slide the individual layers into a pattern that looks pleasing. This idea is to make it look random and natural hiding the fact that it's really a square matrix. Move the layers anywhere you like as long as there is a 200x200 crop zone that is completely covered by all three layers. The region highlighted below is completely covered by all three layers and so it's ok to crop a 200x200 section (shown in blue) from anywhere in that area. The blue square is our 200x200 crop area and can be moved anywhere in the highlighted region we choose.

Step 8: The Result Is a Tiled Graphic.

Here's what it looks like after being cropped and how it looks tiled.

Comments

author
Oblivitus (author)2009-05-24

Huh, it's a pretty simple concept, but it works great, it only took me about 10 seconds to figure out, thanks.

author
kamathln (author)2008-03-12

What I liked about this instructable is it does not tie the instructable to any particular product. You give generic steps and the users carry out in any product they like.. cool!

author
GorillazMiko (author)2008-03-04

That looks cool! Awesome job, will do this if I will need to for some stuff, great Instructable.

About This Instructable

14,257views

10favorites

More by sbennettinst:Creating Seamless Tiled Wallpaper
Add instructable to: