How to Create Gradient Website Background (y axis)

This tutorial will walk you thru the basic steps required to create a background gradient similar to the one used on this site (and contained in the Bex01 serendipity template). Once you have completed this tutorial you will understand the principals involved and can make your own variations.

********** STEP 1: CREATE OUR .PSD INTERFACE FILE **********
Create a new file 120 pixels wide and 5 pixels high. Put the Resolution at 72 pixels/inch.
Set the background color to White. Name it something appropriate ie: backgrad.psd.

********** STEP 2: CREATE OUR GRADIENT LAYER **********
In the layers palette double click on the text "Background" (not the thumbnail). This will generate a pop-up window which will allow you to rename the layer and it will simultaneously unlock the layer. For the sake of simplicity, I’ve left the layer name default to Layer 0. With Layer 0 selected, choose edit --> fill (Shift F5) and fill the layer with black. If you wish to create your own gradient, in this step fill your layer with the general background color you desire on your website.


********** STEP 3: CREATE OUR GRADIENT **********
At the bottom of the layers palette is the cursive F (contained in a circle) which enables you to apply layers styles to your layer. Click on this cursive F and from the drop down menu associated with it, select "Gradient Overlay".



With the layer Style window open, click directly on the Gradient that is represented. This will pop-up the gradient editor. Choose a gradient (usually the second choice from the top left) from the presets which represents Foreground to Transparent. This specific gradient is a part of the default gradients that ship with Photoshop. If you have messed around with your gradients previously and do not have this gradient available as an option, in the gradient editor click on the small right pointing arrow to the far right of the word "presets" and from the drop menu choose "Reset Gradient".

Once your Foreground to Transparent gradient preset is selected, it will appear in the window under the preset choice. The color represented in the gradient is derived from your existing choice of foreground/background colors. Since my foreground/background colors are white/black - I will see white moving into transparency. Look at the image below to get a good handle on this.



Now click on the far left stop that appears under the gradient in the gradient editor. We need to change this color. By clicking on it, the color swatch appears referenced under Stops (directly below it). Click on the color swatch in the color picker pop-up enter the following: #2b646b. Click OK to exit the Color Picker. Your gradient should now show that color fading to transparent. Leave everything the way it is and click OK to exist the Gradient Editor. In the layer style your gradient should appear in the gradient overlay. Check the box next to the word Reverse. This will flip the gradient. Now change the Angle to 0.

We want the gradient "flipped" because on our website, we want the light color extending for the box area that defines the content of the website out to the edge of the browser. In effect, we need our background color to get lighter as it approaches our site (which is centered on the page).

Click OK to exit the Gradient Overlay style.



********** STEP 4: DUPLICATE OUR GRADIENT LAYER **********
With Layer 0 selected, right click on it and choose duplicate layer. Call this new layer "grad right". Now with the grad right layer selected, from the layers palette window choose the cursive f at the bottom and select "Gradient Overlay". Deselect the check box next to reverse. Your gradient flips. Click OK.

You should now have two layer files, both with identical gradients except than in grad right the gradient is opposite to layer 0.


********** STEP 5: SET OUR FILE UP FOR THE WEB **********
Now here is where the fun starts. In the case of Bex01, I know that my website is centered in the browser. I know that the width of my website is fixed at 750px. The width of my graphic is 120 pixels. I want the gradient appearing on the left side and the right side. The formula is simply 120 + 120 + 750. So the minimum width of my graphic needs to be 990 pixels. However, I don’t want my background to repeat on a screen both on the x and y axis, so I’ll extend that width to 1000 pixels.

In Photoshop go to Image --> Canvas Size. Enter a width value of 1000 pixels and select the box so that the pixels will be added to the right side.




Select the Move Tool and then select the "grad right" layer. holding down the shift key drag that layer until it is positioned to the far right.

You will notice that the area in the middle is transparent. We need to fill that area with our teal green color. To do this, create a new layer (Shift Ctrl N on the PC | Shift Command N on the Mac) and fill it (Shift f5) with #2b646b. Drag this layer in the layers palette window to the bottom of the stack. Your layers palette should resemble the following.



You are now basically finished. Save your file as a .psd. Once you have it saved, choose "save as" and save it out as background.jpg or choose save for web and save a copy as .gif.

********** STEP 6: ADD THE CSS TO OUR WEB PAGE **********
On your webpage put the following html in your css. For your background color specify the general background color you choose in Step 2.



body {
margin:0 auto;
padding:0px 0px 0px 0px;
background:#000000 url(yourpicture.jpg) top center repeat-y;
}