Images brought onto a web page via CSS as backgrounds have the advantage of automatic tessellation: they tile both horizontally and vertically by default. This makes them very suited for fluid designs
Before we get to the sequence of making a tiled image, there are five unspoken rules:
- Determine that you have rights to the image; both of the images I use here are licensed under Creative Commons.
- Always use the highest resolution version of the image available.
- save a copy of the original image in the originals folder of your site.
- Set up PhotoShop correctly.
- Crop the image so that it only shows the part of the image you wish to use: anything that is a pure color (such as black or white) can be replaced by using
background-color
Now the steps to make it a tessellated image:
Determine that the image is suitable for tiling.
An image with a significant singular feature – a visible sun or moon in the sky, for example – is likely to be inappropriate as a tiled background image without considerable editing. In addition, the horizon of the image must be horizontal, as the right and left edges of the image (or top and bottom, if you are tiling vertically) must match. The best way to check this is to turn on rules (CMD-R) in PhotoShop and drag out a guide across the horizon line.
Preview the tiling of the image
Adobe has the Pattern Maker plugin for PhotoShop (now an optional download for CS5), but I’ve never found it terribly useful. Instead, I use this tried-and-true technique:
From the menu bar, choose Filter / Other / Offset…
Offset the image in the direction you wish to tile it by approximately half the image’s width. You will see PhotoShop move the image across the canvas, wrapping the excess around the other side.
If the wrapped image looks seamless, it is good; either cancel the filter, or move the invisible "join" via the Offset filter to an aesthetically pleasing position, click OK, resize the image, and use Save for Web and Devices. You may find that you will need to use a slightly higher quality level than normal if saving the image as a JPEG (50 – 60), due to the fact that the JPEG algorithm tends to introduce artifacts in the edges of the image. These artifacts will not be seen until you tile the image in the web page itself, so you may need several go-rounds of compressing and saving, experimenting with different levels of compression.
If the wrapped image is not seamless, move the offset to a round number that is easily remembered and press OK, then use the appropriate tools to smooth the transition between the left and right edges. I would suggest the Clone Stamp tool, but the Healing Brush and Patch tool, among others, could be equally appropriate.
As before, either reset the Offset of the image, or move the now-invisible join to another location, resize the image, and export the image in a web-ready format.
The image should now be ready to use as a tiled background in a web page via CSS.
City skyline photograph taken by Jonathan Zander; image of Baltimore, Maryland by 3 Sons Productions
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
