iBlog

That home made paper look

Part of the popularity of drop shadows and the wicked worn look is due to texture. Adding subtle details such as these to a design lifts it out of the ordinary and makes it interesting and unique.

Until everyone else starts doing it…

The key in adding these details is subtlety—a little goes a long way. Don’t drop your shadows too far, and don’t add too many of them and you’ll go a long ways to assuring that your site still looks unique and stand out in the crowd. And when adding some wear and tear to your design remember, less is more. Too much and you’ll end up with garbage.

More texture

Another way to add texture is to create a subtle background image reminiscent of home made paper. The kind of paper I am thinking of is flecked with pieces of paper—pulp—of various sizes in random places throughout the paper. If you look close, you may notice the effect on this blog. One way to create such a pattern it by scanning in some sample paper. But you may not have a ready supply, or if you do, it is likely not in the right color.

Photoshop to the rescue

Here is how I do it. Create a new image in Photoshop, and fill it with a color that fits your color scheme.

Duplicate this layer and Add Noise (Filter > Noise > Add Noise…). I use an Amount of 1 or 2%, either Uniform or Gaussian distribution and check Monochromatic. Leave Monochromatic unchecked if you want multi-colored flecks.

Next we’ll add a Paint Daubs filter (Filter > Artistic > Paint Daubs…). Settings here will depend on the base color you have chosen. A Brush Sharpness of 40 and a Brush Size between 2 and 5 usually does the trick. Use Light Rough for the Brush Type. Experiment until you see something you like in the preview window. We’re looking for smallish flecks on a bright background.

Once you are happy with the results you’ll want to add the flecks to your original color swatch. To do this simply change the Blending Mode from Normal to Multiply.

The bright areas go away, leaving the darker, random flecks.

Depending on how dark the starting color is, you may need to add one more step to the process. If you find that the “flecks” are too overwhelming, adjust the Levels (Image > Adjust > Levels…) until you get something you like.

One of the nice side effects to this technique is that it adds weight to your page. I’m not talking about the extra bytes it will add to the file size of your background gif. What I am referring to is the fact that most paper that contains these flecks is thicker and heavier than your standard white copy paper. That feeling comes across subconsciously to the viewer. Combine it with some judicious drop shadows and you’re on your way to creating the illusion of substance (something has to have some mass to create a shadow, after all). This, in turn, reinforces your message as having more substance. It’s the same reason respected companies will choose a heavier weighted paper, and quite possibly one with some texture, for their letterhead.

Lights, camera, action!

Although this technique is pretty simple, I’ve created a Photoshop Action to make it even simpler. It assumes you have your color swatch ready, and will pause at each filter, allowing you to tweak it to your specifications and design sensibilities.

Download home-made-paper.atn [653 bytes]

Enjoy!