Make it worn – part 2: Adding texture and detail

Posted on 24 April 08, in design, tutorials

This is part 2 in a series of 3 titled Make it worn, in which I'm talking about designing a website with a worn look. This second part covers the stage of making things worn.

Once again, all of the materials I use are available for download, you'll find them in a zip at the bottom of this article.

Applying (repeatable) texture to the background

Now that all preparation is done, it's time to get dirty! The first thing I do is create a basic texture for the background of my page. I want it to be repeatable throughout the whole page, so I'm going to make a pattern that I can use for that later on.

I first select a source to start from. I've picked a page from an old book that has a nice texture, and scanned it.

Fig 5 – Scanned image from an old book

Next, I cut out a sample and copy it to a new document to start creating my pattern.

Fig 6 – Cutout of the scanned image

Next, I have to make the cutout ready to repeat in all directions. I want my background image to look as a solid textured surface, rather than an indivudual image being repeated continually, like it would in figure 7:

Fig 7 – Repeating the initial cutout: not good

To make the image repeat without seeing any borders I first line up four copies of my image, as shown in fig 7. I then flip the top right one horizontally, the bottom left one vertically and the top right one both horizontally and vertically. That way they're all mirrored, and the obvious borders start to disappear.

Fig 8 – All four copies flipped so they mirror each other

That's already better, but not nearly good enough. You can now see that a single imge has been mirrored, and that doesn't look realistic. To get rid of the overly pronounced border areas, I am going to use parts of all four versions in order to lessen the overall amount of darker and lighter areas so that it becomes a more flat surface. In order to do so, I will overlay the images on by one, each time erasing most of the overlayed image and merging it with the previous. Now let's see how that works.

First, I select the top right image and put it exactly over the top left one. Next, I am going to erase most of the overlaying image with a big round eraser, hardness set to zero, leaving only the right part intact.

I've tried to visualize what you should end up with below. I've made the top layer darker so yo can see what part of it is left.

Fig 9 – The darker area shows what's left of the mostly erased top layer

I merge the two layers, and continue with the bottom right image. I basically just repeat the same process, though now I erase the top area and leave some of the bottom part intact. I merge that one with the previous, and test again to see how it repeats. It's mostly good for me now. I round up with a few quick fixes around the edges using the clone tool, to get rid of some small dark dots that look odd. Repeating my pattern now, it looks like shown in figure 10:

Fig 10 – Not much mirroring left to see

While you can still see the mirroring in this small version, the actual size hardly gives it away. And since I will be adding more layers of textures over it, I decide this is good for now. Time to test it in my design!

I define a pattern from the image I created, and apply that to the background of my page design. It looks a bit blurry, so I revisit my original pattern image and sharpen it with a subtle unsharp mask from the filters menu, and re-define the pattern. Once again, I apply it to my page design, which now looks like this:

Fig 11 – The background pattern aplied

I am happy with the basic background pattern I now have, so I continue to the next step: adding more worn details to the background.

Adding details to the background

The second layer of texture will add extra detail to only parts of the background. The goal here is create a richer, visually more interesting textured background. Because I am going to add much more detail, I couldn't apply it directly to the background pattern. A repeating background image with a lot of detail in it in terms of texture, color, and shape would either be too unrealistic as you'd see the same details repeated over and over, or it would become a huge file as I'd have to make it really big not too see it repeating too obvious. Neither of which desirable, so I add detail to other layers that I can apply to specifc HTML DIV's when coding the pages.

For these detailed textures I'm going to use a variety of source files from my personal library ( I collect materials that I think can be useful; scanned paper, books, parts of old boxes and packaging, photos of all kinds of textured surfaces, etc. Most of it is digitally, but I also have several boxes filled with these type of materials).

This part of of adding texture is trial and error, not everything works, and basically I just try different kind of textures and overlay styles to see what looks good in my design. I try to place additions to the background in such a way that they complement the content and add emphasis to specific areas, because as artistic as the worn look sometimes may seem, it's still design, and not just decoration. Well, partly it is, but hopefully you'll catch my drift.

I've picked the following source files to implement:

Fig 12 – old paper

Fig 13 – dirty paper

Fig 14 – more dirty paper

Fig 15 – paint on paper

I've copied these files into my design one by one, and arrange them across my design. I use overlay styles and the eraser tool to blend them in smoothly. As my background is rather light, most of it will be darker so I've picked darker textures areas on white that I can easily blend in setting the layer overlay style to linear burn, and set the fill very low (somewhere between 4 – 20, depending on how much of the texture I want to see). I try to keep different color tones intact and visible, because in reality worn surfaces usually have different color tones as well.

While adding detail, I keep in my mind that whatever I design now has to be implemented later, so I arrange everything in such a way that I can easily apply parts of it the the background of my DIV's once I'm coding it (this might not be so easy if you're not so experienced in coding HTML/CSS, in which case I'd advise you to sit down with a front-end coder at several stages during the design process in order to see what areas might prove to ve difficult to implement).

While working on the texture of the background, I also continue adding detail to my type, as I start to get a better idea of how everything will blend in and how the final piece should look. I also turn of the layers that contain the various vertical and horizontal lines I added to my wireframe to add visual guidance, as I start emphasis different area with textures. This really is an organic process, so again,different approaches are possible, really just go with your own flow.

I finalize this stage of adding texture by tweaking my colors a bit, especially for the background, that I want to be closer to what initially started with. Below is where I leave for this 2nd part of my series on making it worn.