Okay… this will be my first attempt at describing how to create seamless tiles from photographs for web backgrounds or other types of media. I will try to describe as best I can the methods I am using, but I am assuming here that you know Photoshop or other image-editing software well enough to create/manage new layers, alpha masks, etc. I am also NOT an instructor, so my methods probably won’t conform to standard ‘teaching’ practices.
The reason for using seamless tiles is to make the graphical appearance of a page, document or 3-d model richer and more dynamic than a solid color, without using some large, bandwidth heavy, slow loading image. Now granted, you can make a monsterous seamless tile that can be as large or larger than a photograph, but that defeats one of the main purposes for using them. It must be said, however, that when making seamless tiles from images, the larger (pixel dimensions) you make the tile, the more difficult it is to see where the pattern repeats on the page.
Realize also that not every image will work as a seamless tile, either. Base images with patterns already in them, such as corrugated/stamped metals, fabrics with textures/patterns and images with perspective in them just don’t repeat across and down without showing where you’ve spliced the edges together. There are ways to make certain images work, but I will cover more advanced tricks of using CSS, DIVs and repeat-x/repeat-y methods in other tutorials. What I’m going to cover here is just an overhead shot of rusted metal, designed to fill an entire background of a web page.
OK.. so here’s the image we’ll start with: (right click to save to your local computer and follow along)
The first thing we want to do (besides SAVING OFTEN) is determine where the origination point is, which will vary by image, but with this one, I would use the top left corner. Then, turn on your rulers within Photoshop (CTRL-R) and drag out a guide from the left to 450px and a guide from the top to 350px. This will be a large tile, yes, but it will be effective.
Next, you will want to make a selection of the area to the right of the Y guide all the way to the right edge, and down to where the X guide starts. Check the snapshot to the right.
After you have made the selection, right click and choose “layer via copy”. This will make a new layer with your selection, but as a copy of what you had selected, leaving the background image intact.
OK… do the same for the area below and to the leftside of the Y guide, but make sure you have the background layer selected before trying to “layer via copy”, or you will get an error that there wasn’t anything to copy. (This is what I was talking about with knowing/managing layers)
Now you will have a document with 3 distinct layers - background, layer1 (rightside) and layer2 (bottom area). Drag layer1 straight over to where it snaps into place along the left side of the document. Do the same with layer2, but to where it snaps into the top of the document.
Now, this in itself might be close enough to ’seamless’ for some, but not me… I like realism, and I can pick up on the lines where these overlap, so what we are going to do here are some layer masks to ‘feather’ these layers into the background. With layer1 selected, click the layer mask icon in the bottom of the layers palette, as shown to the right. You will then be working inside the layer mask for layer1, and what you want here is an alpha mask, created with the gradient tool. A straight black to white linear gradient from the left edge of the document to the right edge of layer1. (with the left edge being white inside the layer mask) You’ll see the effect the second you apply the gradient to the mask, and that left edge will be truly ‘feathered’ into the base texture.
Do the same layer mask effect for layer2, (top edge) but with the gradient feathering the texture from the top down.
Depending on what texture you have chosen to make the tile from, you may need to ‘clean up’ some of the alpha gradient mask to get it to look right when it tiles… work within the mask layer and use the paintbrush tool. This is where a Wacom tablet really comes in handy, as it acts like a paintbrush with pressure sensitivity, and you can shift from one brush to the next quickly to change the effect you are adding/subtracting from the gradient mask. The area you usually have to focus on is the top left corner, subtracting from each of the top and left layers’ masks, chiseling out a 45 degree angle from the top left corner in the alpha mask…
Now, the last step is to SAVE, if you havent already, and then drag out a slice box of that top left area you defined with the guides. Doing this will make publishing/making changes easier into the future. Double click on the slice and name it ‘rustyTile’ or something similar, and then use the FILE>>SAVE FOR WEB and save just that slice as JPEG. I typically save them as 40-60 quality, but it will depend on both the image size (pixels) and required detail you are after. The file here ended up being 45k when saved at 40 quality, which in the grand scheme of things is pretty large, but so were the pixel dimensions of the final - 450X350. (Save for web works way better than SAVE AS>> JPEG because it strips all the extra data out and minimizes filesize)
Then, to use this as a background of a web page, just upload the image to your webhost and add this code to your CSS file for the page:
body {
background:url(’/path/to/file.jpg’) top center;
}
Here’s a sample box with the tile set as the backdrop:
As I mentioned, I will be elaborating on this idea and the use of CSS to create some really dramatic effects with minimal bandwidth and cross-browser compatibility.
Hope you enjoyed the tutorial, and please… if you found this to be even somewhat useful, drop me a comment below.
Loading ...