Awesome Web Page Design Hints 1 Shadows Down The Outsides Of Your Web Page

by

Elba Chumbley

A good place to start this tutorial is at the very beginning as Mary Poppins would probably have said.

Let s assume that you\\’ve made your page or are in the process of making it with css. You have decided to make the page 780px wide and centered it on the screen. You have made the background both sides of your web page 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 the body.

The curly braces do not show in this article but I am sure you understand that they belong at the begining and end of each style.

It looks OK I suppose but how much better would it appear if it had a shadow along the length of both sides of your white webpage?

I am going to talk about Photoshop for this particular tutorial since it s what I work with but I assume you can use pretty much any graphic editor and adapt the following information to suit.

Start Photoshop. Create a new file and make it 820px wide and 200px high. The height is just so that we can see what we re doing but the width is 40px wider than our page – 780px plus 20px on either side.

Color the whole background light gray so that it is precisely the same color as the background of our webpage.

Make a new layer and with the rectangle marque tool produce 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 will move your black rectangle into the middle of the background from left to right, the top and bottom doesn t make any difference.

So now select 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 both sides of the rectangle. And in the colored square click and select black from your swatch.

Your graphic should now be 820px wide with a black rectangle 780px wide in the center with blurry sides.

OK the blending panel to close it. Now the good bit, if the graphic has dotted lines around it press ctrl d to get rid of them, now go to Layers – Flatten Image.

Select the cropping tool and crop an area the full width of the image and as narrow as you easily can. Press enter to confirm the selection and you\\’ll be left with a wide strip of the image.

Go to File – Save As and save it as a jpg file. Go back to your web page and add the image.

To include it you must wrap the wrapper div with shadow div. In the css add