Fantastic Web Site Design Tips 1 - Shadows down the outsides of your webpage

The best place to start this tutorial is at the very beginning as Mary Poppins would probably have said. Let’s assume that you have made your web page or are in the process of making it with css. You've opted to build the webpage 780px wide and centered it on screen. You have made the background both sides of your webpage a light gray. For the sake of this article I am going to imagine that your primary page style is called .wrapper and you have created the wrapper div in your body. The curly braces do not show in this article but I am sure you realize that they belong at the begining and end of each style. It seems okay I suppose but how much better would it look if it had a shadow along the length of each side of the white web page? I will refer to Photoshop for this particular tutorial since it’s something I use but I assume you can use pretty much any graphic editor and adjust the following instructions to suit. Open Photoshop. Create a new file and make it 820px wide and 200px high. The height is merely to make sure we are able to see what we’re doing but the width is 40px wider than our page - 780px plus 20px on each side. Color the whole background light gray so it's the same color as the background of the web page. Create a new layer and with the rectangle marque tool create a rectangle on the gray background 780px by 100px high, color it black. Now go to select and choose all. Go to Layer and choose Align Layers to Selection - Horizontal Centers. This should move your black rectangle into the center of the background from left to right, the top and bottom doesn’t make any difference. So now choose the black rectangle layer. Double click the thumbnail or open the blending options any other way you prefer. Go to Outer Glow, set the screen mode to normal, set the opacity to around 70%. Make the size 20px which is the width either side of the rectangle. And in the colored square click and select black from the swatch. Your graphic should now be 820px wide with a black rectangle 780px wide in the center with fuzzy edges. OK the blending panel to close it. Now the good bit, if the image has dotted lines around it press ctrl d to remove them, now go to Layers - Flatten Image. Select the cropping tool and crop a region the entire width of the image and as narrow as you comfortably can. Press enter to confirm the selection and you will be left with a wide strip of the picture. Go to File - Save As and save it as a jpg file. Return to the page and add the graphic. To include it you must wrap your wrapper div with shadow div. In the css add