I found this tip from a Sitepoint newsletter, describing a nifty CSS trick: if you layer up background elements in your style sheet, you can generate what appears to be non-repeating backgrounds for your website. The site describes the process in detail, but in summary you simply create different sized seamless tiles, then let them fill the page, one layer on top of the other. Each tile higher than the background should have some transparency so you can see the lower elements, letting them interact.Quite some time ago, I stumbled across this as a way to generate ‘random’ background graphics in Photoshop. While I can’t remember who pointed it out to me, I do know I thought it was a cool way to avoid repeating patterns without spending too much time. But I haven’t thought about it in years. I was pretty jazzed not only to rediscover this, but to see it used for more interesting website backgrounds.
Since this is a photography and Photoshop blog (for the most part), let’s think about how you can use this same idea for design. Of course, the basic method for CSS doesn’t let you blend layers, but we Photoshop users certainly can! This yields so many possibilities that you really need to go do some tinkering on your own. The basic recipe is to create your tiles, make patterns out of them, then filling empty layers with those new patters.
From there, play with blend modes and opacity, and be sure to add some filters to the filled layers. So far, I’ve had the most luck with variations on striped elements, but you can see on the Sitepoint page that you can take it much further.
I’m starting with two general ideas: using text elements; creating 3D textures.
The first one is more difficult than I expected. Certainly, you can come up with some great glyph-based designs, but I was kind of hoping to use words that would tile in unexpected ways. I haven’t really put much energy into that, but the idea keeps floating around in my head. This is one that will pay off big if I can better predict how to set it up.
Creating 3D textures is kind of a red herring in PS, though. Sure, you can generate much larger textures, but there are functional limits to texture document dimensions. The way to approach 3D textures with this technique is to focus on finer materials. Rough or coarse fabric would be a good candidate, but so would skin. In fact, you could generate some great stock textures for retouching in general, not just 3D.
To do this, you need to flatten the layers or save out to another texture-only file. In fact, all the usual best-practice tips of non-destructive editing apply: keep your original; use masks; apply adjustments as layers. One reason this particular little trick can be so handy is you can get virtually infinite variations from the same source layers just by changing transparency and blending. Through in adjustments, and you have powerful template tool.
Look for a video on this topic soon! Head over to the Cicada Project site and read up, then start working on your own textures. I’d love to see what you come up with, so drop a link in the comments here, or write on my Facebook wall.
