Want to make your own background tiling image? Dawn makes it easy with a few quick graphic tips and tricks for making simple Web site and Blog background images.
For the last few weeks, I've been doodling, creating layout thumbnails and quick sketches for the eventual design of my company brochure. I've been playing with pattern and repetition. One of my sketches, an asymmetrical pattern, really appeals to me: the 6x6 tile block on the right.
My thought is that not only will this make a good repeating block of tiles for a brochure, it will work as a website tiling background.
First, I scan the image into Adobe Photoshop and save it. Then I open it up in Adobe Illustrator. I save the file as an Illustrator file, lock the layer with the scanned image, and create a new layer above it for my Pen Tool drawing.
I loosely draw the lines of each square, keeping the curves and the sketchy look of the image. For squares that won't have a fill color, I can leave unconnected corners as seen in the original drawing.
Eventually, I've got all the squares outlined.
Then I identify a fill color for the shaded squares.
Now, everything's looking very good and sketchy. One problem I can predict is that when this image tiles, there will be lots of gaps because the sides are all out of alignment. I pull out a bunch of guides and get each square center-aligned with its neighbor. Now it still looks hand-drawn but a bit more careful.
It's ready to test! I Save for Web and reduce the image size to 50%. I create a new HTML page in Dreamweaver, and set this image as my background.
I'm unhappy with the first try, because those two dark squares next to each other at the top make themselves too much of a focus. I swap two tiles.
Also, I need more of a gap between tiled images. I create a new layer under the image layer. On the new layer, I draw a boundary square that leaves a little space around the outside edges. I'm shooting for a space that's half of the gap I need between tiles.
I set the stroke for the boundary square to invisible, and Save for Web again at 50% size.
Here's the second try. This is looking much better, but now reminds me too much of bathroom tile. I take three squares out of the set to decrease the similarity.
That's the stuff. Let's see what it look like with web content above it.
Here's a page with a placeholder block of text. The text block has a background tiling image of its own - a very faint echo of the main background tile. I've aligned the text block using CSS absolute positioning so that its background looks like a continuation of the main background. This gives the text block the appearance of having a semi-transparent background. Nice!