Giving Depth To Web Design With Drop Shadows

Two dimensional mediums are flat. Flat is boring. The web is a two dimensional medium, so websites are boring. OK, not always true, but pretty often! Artists over the centuries have developed many ways of giving the illusion of depth to two dimensional art. The same methods can be used to give depth and visual interest to a website. One of the quickest and easiest to implement is a drop shadow.

Drop Shadows For Static Elements

Photoshop is your friend for making drop shadows. A static graphical element is the easiest, because you can just save the graphics file with the drop shadow included.

Making The Graphic Element

Creating a graphical element with a drop shadow is easy with Photoshop.

1. Create a new file, with a canvas size that’s larger than the graphic you’re using.
2. Copy and paste the graphic (e.g. a logo, a box) to a new layer in the file.
3. Select Layer > Layer Style > Drop Shadow. Play around with the settings until you have a result you like. I usually drop the 75% opacity to around 60%, and increase the Distance and Spread a little.
4. Right click on the Layer in the Layers box, and ‘Convert to Smart Object’.
5. Copy the layer to a new document, which will be the size of the graphical element plus the drop shadow.
6. Save it as the required file type.

Implementing Over Solid Color Backgrounds

Choosing how to save the file is important. If your site background is a solid color, then you can save the graphical element with a background of that color as either a .GIF or .JPG. I don’t use .PNG for this because it renders differently on different monitors and can cause inconsistencies with a background color set with RGB values in CSS.

Implementing Over Background Images Or Textures

If you have a background image or texture, you can’t save the file with a solid background. You have to use a transparency effect.

You could just use a GIF file, and set the Matte to a similar color as the background when you ‘Save For Web And Devices’. This ensures the transparency is compatible with Internet Explorer 6. Use this option if the element is going to be included in the page code and not the CSS.

<img src="elementgraphic.gif" alt="alt" width="x" height="x" />

If the element is included in the CSS as a background then a better alternative is to save two versions of the file. Save a PNG-24 format file and a GIF file. In the main CSS set the background to use the PNG-24 file.

#divname

 {

 background: url('elementgraphic.png') no-repeat;

 }

Then use conditional comments to make Internet Explorer load a seperate CSS that overrides the background to use the GIF file:

#divname

 {

 background: url('elementgraphic.gif') no-repeat

 }

This ensures that each browser uses the highest quality file that it is compatible with.

Drop Shadows For Variable Size Elements

Drop shadows for static elements are cool but not flexible. You can’t use them if you wanted to have drop shadows on a DIV element that varied in size. The DIV size would change and so a static background image wouldn’t work.

There’s a technique that works great for creating drop shadows for flexible elements. There’s no need for me to tell you how to do it. The tutorial at A List Apart remains the best introduction to creating flexible drop shadows.