Photoshop Tip #20 - Vertical Backgrounds for web pages

Vertical Backgrounds in web pages are nothing but a long rectangle graphic. Since it can't tile to the right & down, it only tiles down the page & creates this cool vertical effect. Take for example my jagged line on the left side of my pages, here is the original graphic that creates that illusion.

Below is an example of how to make a simple vertical background. There are endless possibilities on these, so be creative.

	Create a new document & fill with any color.
	To add some texture to it, go to FILTER...NOISE...ADD NOISE. I checked the "monochromatic" box & played with the slider bar until I liked the texture.
	Now make "white" your foreground color & double-click on the gradient tool. Select the "Foreground to Transparent" option. Now click on the edge of the image and drag about 1/4 of the way in. Let go of the mouse & repeat this step with the black on the opposite side.
	Now make your background color the same color as what your web page background color will be. Now increase the image size (ALT+I+S)...click on the left-middle square in the grid & increase the length of the image by about 40 pixels or so, hit OK. Now select the new area in your image with the magic wand tool and fill with a gradient to imply a shadow.
	Now you need to increase the image size one more time to make it a very long graphic. I usually make mine at least 1200 pixels long to make sure that there is no unwanted repeating of the background. Many people make these short, and when the web page is viewed with a larger monitor, there is tiling of the background that looks ugly. To see image this as a finished background click here.