Building the Simple Page Background in Photoshop

What follows here, for anyone who might be interested, is the method I used in Photoshop to create the backgrounds. Photoshop can be a complex graphic tool, so there are often more than one way to do things with it. The only right method is the one that works, so with that in mind you will understand that there are different ways to do this: this is just the way that works for me. You will need to know some basic Photoshop skills to follow this tutorial.

Step 1:

Decide how wide your “page” should be, then create a new document in Photoshop that is exactly that wide. Height is not as important, but note that before we are done we will be trimming the hight a little bit.

Step 2:

Fill Layer one with White (or whatever color the “page” will be. This will be our Page Layer.

Step 3:

Create a New Layer (layer 2). Drag this layer below Layer 1. This will become our Background Layer.

 

 

Step 4:

Go to menu Image>Canvas Size… and reset the document width. The object is to make the image just wider than the widest possible browser window. I don't know how wide that is, so I just guess. In this case, I just added a two before the current width. Because we are resizing from the image center, our “page” on Layer 1 will be centered.

 

 

Step 5:

Fill Layer two with whatever color the “background” will be. ( Leave it transparent if you want to make a transparent .png image of the page and shadow only. )

Step 6:

Now select Layer 1 and go to menu Layer>Layer Style>Drop Shadow… to set the page shadow effect just as shown. The effect looks something like this (Layer 2 has been colored to show the different layer):

 

 

 

Step 7:

Before leaving the Layer Style window, add another style by clicking Outer Glow. Change the settings to those shown, then exit the Layer Style window. This will give the “page” an edge. Here is the result:

 

 

 

 

Step 8:

Go to menu Layer>Layer Style>Create Layers. This will render the layer styles into their own layers. Select the Layer 1’s Drop Shadow layer and link it to the Layer 1’s Outer Glow layer. Merge the linked layers (command-e). This will combine both effects layers into one.

 

 

Step 9:

We now need to correct the way Photoshop applies the drop shadow style so our image will seamlessly tile vertically. Select menu Filter>Blur>Motion Blur… and set the angle and distance. Then go back to menu Image>Canvas Size… and change the vertical size to 6. This will trim some pixels from the top and bottom of the image, improving its ability to tile vertically.

Step 10:

Save the image for Freeway by going to menu File>Save for Web… and choosing .gif or .jpg settings. Choose PNG 24 to make the background transparent (you must first turn the visibility of layer 2 off before this step).

THE END