At some point in your life as a web designer you’ll have more than likely used a feature that comes with Adobe Photoshop known as ‘Drop Shadow’. Why do we use this? The answer is simple. As web designers our job is to inject an element of 3D space on a flat screen. At times this can be quite challenging depending on the theme of the website. If your new to Photoshop and have not yet seen the layer styles palette, then it’s worth checking out.

To begin exploring the features of the Layer Styles ‘Drop Shadow’, you’ll need fire up Photoshop, create a new file and unlock the base layer. Once you’ve done this, draw a new shape using the shape tool, double click directly on to the new layer to open up the ‘Layer Styles Palette’ and navigate down to ‘Drop Shadow’.

Tip: An alternative method to activate the ‘Drop Shadow’ is to to navigate to the bottom of the layers tab and look for the ‘FX’ icon, simply click this and you will reveal a drop down menu displaying a range of layer styles, click ‘Drop Shadow’.

So what can we achieve with this style of style?

Usually with each drop shadow effect (using layer styles) we can apply 1 directional light source. Although this is can be limiting in terms of the range of shadow possibilities it’s usually my first port of call for putting a nice bit of consistent lighting on all of elements within my websites.

I would suggest when experimenting with this feature, and all Photoshop layer style features for that matter, you don’t use default settings. Default layer styles look terrible, the settings are there to clearly show you a drastic look of the style so you can begin to tweak the effect, track your progress and nurse the style to suit your situation. Customise customise and customise!

One way to customise is with the ‘new’ shadow effects. I think these are really cool, quite clever and work really well. Believe it or not they are also extremely simple to create.

Using a variety of shapes with block colour fills and the ‘Gaussian blur’ Photoshop filter we are now able to create dynamic shadows that really add an element of 3D to websites. As long as you observe the light sources and keep it consistent you can make a website look really great using this method.

As a web designer you can also combine the shadow effects to create dramatic lighting effects. Not always realistic but it’s good fun! Enjoy, Experiment and Share!

Check out a couple of sites using similar methods.

http://www.jojoglassdesign.co.uk/

http://www.koderapp.com/

http://www.goslingo.com/

http://www.eurorscgcolombia.com/medellin

http://dribbble.com/

http://www.wallt.be/

Written by Warren Jerzyszek, a Web Designer at Creare; a Website Design company who also specialise in SEO, Internet Marketing, E-Commerce solutions and Web Video.