Tutorials Photoshop Web Layout Creating a Notebook Background

Creating a Notebook Background Web Layout Aug 18, 2006

What is this for?

Webmasters who look to create a professional looking Notebook or Journal themed website, often run into problems with a repeating background that is believable to the user. This tutorial will teach you how to create a notebook or journal background, and we will soon publish a tutorial on how to make it nicely repeat in a website layout with CSS.

Here is an example of what is being created:

image 1


There are several styles of notebook paper that are commonly used on websites following this theme. The two most notable will be discussed in this lesson. Those two include "Lined Paper", and "Aged Paper" effects. We will begin with Lined paper, so if you are going for a more aged look, simply skip ahead.

Lined Paper

Step 1: Creating the Background

To begin, create a new document with the width and height of your choice (I will be using 600x800), and then fill it with your background color of choice.

In your document, create a new rectangle object using the rectangle tool. Select a white fill color. Try to take up a good portion of the canvas you are working on, since this will be holding the content of your site.

image 2

Step 2: Rasterize the Layer

Rasterize this layer so that it will become editable rather than a vector object. To rasterize a layer, right click it in the layers palette, and click rasterize.

Step 3: Roughing up the edges

Now that it is editable, select your eraser tool from the toolbar. From the Brushes menu, select a brush with jagged, or rough edges, and start going over the top and bottom (perhaps the sides as well) of your rectangle.

image 3

Select a rough brush from your Brush Presets

Start erasing parts of the top and bottom (and even the sides) of your paper.

image 4

Select another brush, and continue to rough up your paper as you see fit. I typically go for a type of ripped effect, but the style is up to you really.

image 5

As you can see, I added a bit of a slant to the top and bottom of my paper, but again, this is just something I am doing for my own personal style.

Step 4: Adding Lines to the Paper

Now that we have our ripped paper, we need to add the lines. Create a new layer set. After you have created it, make a layer mask for the paper in this set. To create a layer mask for the paper area, first select the paper (Ctrl + Left Click the Paper Layer), then select the layer set, and finally, click "Add Layer Mask.

image 6

With this layer mask on the layer set, anything within the set will only be viewable inside of the paper area. Go ahead and create a new layer in your layer set. Select the Brush tool, and pick a small "Hard Round Brush" 2px in diameter, and 100% hard.

For your foreground color, select a light red. While holding shift, drag a line across your canvas in your new layer.

image 7

Duplicate this layer several times, and move them so that they go down the paper.

image 8

Merge these layers together into one layer (Ctrl + E to merge layers), and then lower the opacity as needed (if needed that is).

image 9

If you want to be a bit more creative, you can try to rotate your lines a bit. Go to Edit > Transform > Rotate, and then try rotating the lines a bit.

image 10
Click to enlarge

At this point we are essentially finished with the paper. If you wish to add a shadow or anything else, feel free to. The next part of this tutorial will go over the "Aged Paper" look.

Step 5: Starting the Aged Paper

Create a new 600x800 Document (or if you would rather, pick a size of your own). Fill the document using the Paint Bucket Tool (Shortcut Key is G) with a dull color of your choice. I am going to use #634931.

Now create a new layer, and using the Rectangular Marquee Tool (Top left of the toolbar) make a large selection, and fill it with a lighter color (such as #e4d0b5):

image 11

Step 6: Wearing out the Paper

Now select the eraser tool from the toolbar. Using grunge brushes, or some rough brushes from the Photoshop Defaults, go over the edges of your document.

Keep all of the eraser marks very subtle. Just go over the edges a bit. Make the eraser marks heaviest on corners since that is where most "Wear and Tear" is usually.

image 12

Step 7: The Blending Options

Now go into the layers blending options. Go to the pattern overlay tab, and select the pattern "Fibers", or if you would prefer, another pattern that looks nice. You may need to load these patterns. To load a pattern, go to the pattern picker (The small drop down box next to the current pattern), and click the small round arrow to the right of the picker. Then select "Grayscale Paper". It should load up some nice presets. Set the pattern of your choice to Overlay in the Blend Mode Options, and then set the opacity somewhere between 5% and 20%:

image 13

Now go to the Drop Shadow Tab, and create a small shadow for your paper layer. Use small values, and do not overdo it.

image 14

Finally, add an inner shadow with the following settings to give your paper some darker edges.

image 15

You should now have some nice looking "Aged Paper" that you can work with. Your results should look somewhat similar to what I have below:

Creating a Notebook Background
Click to enlarge

subscribe to newsletter