- Case Study: Symmetry Is Death - Entropy8
- Technique: Analog-esque Background Textures
- Commercial Applicability
- About This Article
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Technique: Analog-esque Background Textures
As with some other styles in this book, much of the "art" of gothic organicism is just that, the ability to create beautiful art. I can't teach you how to create beautiful art in half a chapter. But I can point you in some specific directions regarding this style. The goal of gothic organicism is to come up with textures and images that don't look digital. It helps to start with objects in the real world that have some wear on them. A macro lens for your camera is a plus. Get up so close that the objects themselves become indistinguishable. In other words, stop taking pictures of objects, and begin taking pictures of textures -- the veins of a leaf, flaking paint, the psychedelic swirl of spilled oil.
To further "age" your pictures, print them, physically crumple them, and then scan the crumpled print. Or write on your prints. Or scar them. Or apply any number of other analog collage techniques that designers practiced before there were computers. This analog "tweak" phase adds a bit of real-world "wear" to your images prior to their journey into the machine.
Then in Photoshop, use noise filters and other filters to get a grainy, worn look. Experiment with duo-tone and tri-tone treatments. Add the proper amount of visual noise, and a duo-tone image can start to look antique. If HTML text needs to appear on top of your backgrounds, take care to leave some negative space for that to happen).
Harvey herself suggests keeping a texture library. Here is a tile she made early in her web design career by experimenting in Corel Painter ( Figure 11). She confesses to having used this same single texture as a base element in numerous pages. Her advice is to mess around in an image generation program, keeping an eye open for interesting developments, mindful to not to go overboard and muddy everything up. When you come across a texture worth keeping, archive it and use it.
){kind=link}
Figure 11-entropy8 texture
Although most of Harvey's backgrounds are large and not meant to "tile," she does sometimes use tiny background images that do tile repeatedly, causing a seamless texture effect (Figure 12). Creating such seamless tiling backgrounds is relatively straightforward.
){kind=link}
Figure 12-entropy8.com
Start with a tiny square image of the texture you want to tile. Let's assume your image is 90X90 pixels. In Photoshop, under Filters - Others, open the Offset filter. Under Undefined areas, choose Wrap around. Then, in the Horizontal and Vertical fields, enter half the dimensions of your image (so in this case, you would enter 45 and 45.) Click OK.
There should now be two objectionable lines on your image, one running down the middle horizontally and the other running down the middle vertically. Choose the rubber stamp tool from the tools menu. You are going to "lift" some texture from near the line and "stamp" it on the line. To lift your desired texture, put the stamp tool over the area you wish to lift, hold down the Option key, and click. To stamp that texture, put your stamp tool on the line and click.
This is a hack, so just keep at it until the lines seem to disappear. You may have to lift a bit from one side of the line and stamp, then lift a bit from the other side of the line and stamp, but eventually you should get it. Save this 90X90 image as a gif or jpeg, call it into your page as a background image, and observe. If the seams are still too obvious, return to Photoshop and repeat until seamlessness is achieved.