Photoshop Tutorial: Turning old letters into web page backgrounds.
Nothing beats old paper to create texture and "soul." Sometimes a battered piece of blank paper will do, but I love the feel of actual writing or print on old paper, but, without careful attention it can compete with your new text and drive your readers away.
If a page has writing on one side only, you can use the quickie method in the right sidebar. You can't do this with all old paper -- people frugally wrote on both sides. So what I try to do is fade the ink without bleaching away the texture and color.
Preparation
Source material. The biggest challenge is finding a suitable old document. Unless you're living in a college dorm, there are probably vintage papers tucked away somewhere in the house. I haven't tried scanning something from a book, but (if you can de-screen or blur the halftone dots away), it might work.
Scan at 300 dpi. This enables you to get a good sample of the ink color.
Save/Open in Photoshop.
Clean-up. If you want clean edges, use your Marquee Tool to mark off an oblong and Image>Crop.
If you want to preserve torn edges, you'll need a technique to select the background and modify it to coordinate or contrast with your design plan.
Gently Fade
Experimentation is key. The tradeoff is always between cool texture and the legibility of overlying text. It's important to test your results on a web page.
Square 1 below is the original old letter, scanned at 300 dpi. Enlarge to 100% (CTL-ALT-0).
| 1. Original | 2. Select ink color; fade with levels | 3. Add a gradient map, blended for Luminosity | 4. Blur the original first |
Bleach the ink. With the Eyedropper Tool, pick a dark area of ink. Then Select > Color Range... The idea here is to capture all the dark ink color in your selection. With the ink color selected, use Image > Adjust > Levels... to fade back the ink. (Square 2 above.) Save the selection in case you need it again.
Add a gradient map. Another experiment. Pick to shades from the stationery for your background and foreground colors. Add an Adjustment Layer > Gradient Map, with the blending mode set to Luminosity. (See Square 3 above.) Test this background. It may still be too intrusive.
Blur. Blurring the page (Square 4) might just do the trick (Filter > Blur > Gaussian Blur...) - and it puts some distance between the content text and the background. If blurring destroys your texture, try this on a copy of your original: Reload your handwriting selection from above; Select > Modify > Expand... by one or two pixels; add a 1-2 pixel feather; then try your blur. You'll need to play with the settings to get a good effect. The result should be a blurring of the handwriting without having the paper texture disappear too.
Lightness. If your background is still too distracting, the final cudgel in your kit is to lighten the whole thing with a Hue/Saturation adjustment layer, with the Lightness slider cranked up high. The tradeoff is always texture vs. legibility.
Use as background
Your final result is saved as a .jpg file in your website. Render the file as small as possible without introducing ugly artifacts.
For the final background settings, you want to turn off the property of the image repeating. Also, I like the effect of a fixed background, so that it looks like your content is floating above it. You can make these settings in HTML, but I like adding a bit of CSS code in the <Head> section. Here's the code used for this page:
<style type="text/css">
<!--
body {
margin: 10px;
color: black;
background-color: #ebe3c8;
background-image: url('../../images/OldPaper02-tan.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
bacground-position: center top
}
-->
</style>
Feedback
Did you try this tutorial? Did it work for you? Let me know if you have any suggestions.
Updated 12.17.05
QUICKIE
The background for this page was created by scanning a deteriorated typed page from 1941, stained at the top with remnants of Scotch tape.
Scan the backside, so that there is only a hint of typing.
Reverse it (Edit > Transform > Flip-Horizontal).
Note: if the paper is torn, scan it against a contrasting color and then delete that color as shown in my Rubber Stamp tutorial.
...