The Photoshop Guru's Handbook - HOME
Session 3
Better Lighting for the Web

Drop Shadows
"Better Lighting
for the Web"

Supplies for this Session:
Patients and an open mind are what you'll need for this Session.

And:
A business card or a floppy disk or something similar that you might have handy.
Shadow Example #1  ||  Shadow Example #2
Things to think about  ||  End Quote  ||  The Edge

Preface

This month's Session is going to deal with a little talked about subject known as shadows.

What we will be looking at is how shadows are being used on the Web to make our images pop-out, sink-in, or float above our Web pages. This Session will not have any "create as we go" type of Examples. Instead I've decided to simply supply some information that you can take and apply to all those great & wonderful Web pages you're planning on creating.

Now I know that this may not be the ground breaking, jam-packed, smoke & fireworks kind of Session you may have been hoping for, but I've been getting more and more letters sent to me concerning this subject, and I think it's just about time we all got a handle on it.

NOTE: if you feel the need to print this material out you have my express permission to do so. But please do not redistribute it.
Thanx Much.

With all that said, I hope you enjoy this session!

1)

And Guru said "Let's have some light!... please?"

Properties:

Take a look at the shadow on this text.
Hard Shadow
= Example #1 =

First of all, you will see that the shadow is very dark. This means that the light source that is shining down on the text is very bright.
This also means that there is very little if no ombient light shining from another source around the text. In other words, there is no light shining underneath the text or in from the sides of it either.

Second of all, you will see that the shadow that this text is throwing is very close to the object that is throwing it; i.e the text.
This means that the text itself is not sitting very high at all off the surface of this page. That will also have an effect on how dark or light the shadow is.

If an object is elevated off a surface the light source shining on the object will then be able to get underneath the object. This will in turn saturate the shadow with light and cause it to become lighter in tone, as seen here:
Weak Ombient Light
= Example #2 =

Since the light source can reach the edges of the shadow best, because they are no longer directly under or protected by the object, it will make the edges of the shadow a bit lighter than the inner part of the shadow. This will result in the shadow's edges being slightly blurred or fuzzy. Thus if you have an object that is floating well above a surface it's shadow will be quite light and have very soft edges.
Soft, weak shadow
Lastly, you will notice that the edges of the shadow on Example #1 are very hard and clean.
This is a result of the first two elements combined. However, you could also have a strong light source shining on your page from the upper left corner and slightly in front of it, and that would make an objects shadow appear lighter, but still have a very clean and hard edge. The objects shadow would get lighter because the light shining from in front of it would saturate the shadow a bit more, thus lightening it's tone.

to the Top

2)

"Just the facts please ma'am..."

Basic characteristics:

  • When a light source is very strong or very close to an object it will cause the object to cast a very strong shadow. Also known as dark or heavy. This type of shadow may or may not have hard or soft edges. That would depend on the amount of ombient light around the object.

  • When a light source is very weak or very far away from an object it will cause the object to cast a very weak shadow. Also known as light or soft. This type of shadow also may or may not have hard or soft edges. This would also depend on the amount of ombient light around the object.
3) Things to think about...

Oh yeah... one more thing to take note of:
(and this is very often overlooked)

You will notice that if you look back at Example #1 again, at the part of the shadow that is just off the edge of the letters, you will see that there are gaps in between the text and it's shadow. Small bits of white area. This means that the text itself is paper thin. It has no apparent thickness to it at all. If it did, given the height that it is floating above the page, you would not see any white spaces between the text and it's shadow.
Take a look at this example:
Floating Button
We have here a very familiar object, a Web page button.

Look at the shadow on this button. This shadow would suggest that this button is 'floating" above the page. Why? Because one characteristic of the objects shadow tells us so. The blue arrows are pointing to the spots that gives this fact away. The gaps that the blue arrows are pointing to tell us that the object is either 'floating' above the surface, or has a base beneath it that we can't see that is smaller than the outer circumference of the button.

I want you to do a test yourself right now:
Grab a business card or a floppy disk or something similar that you might have handy.

Now hold that card just above a surface that's handy, say a table or desk if you're at one. Stand up and look down at the card, so you're on the same perspective to it that you are when you're looking at pictures on someone's Web page.
Make sure that the light source in your room is not coming from directly above you though. It must come from either side of you. Does the shadow of your card have a similar appearance to this button's shadow? Can you see the same spaces that the blue arrows are pointing to? Then you should understand what I mean by "floating" above the surface or page, right?

Now just imagine if that card you're holding was a lot thicker and it was just sitting on the surface of your desk or table. What do you think the shadow would look like?

Those of you who said to yourself "it would probably look the same as the Web page button's shadow"... BEEP! Ooooh, I'm sorry, no toaster oven for you.

Go ahead and get a big thick book and lay it on your surface. A telephone book would be good.
Now angle yourself so you can see the front edges of the book. Can you see how the shadow is still attached to the book? There are no gaps at the corners of the book.

This kind of shadow effect will make objects look like they have depth. If you do this with a Web page button you get this effect:
Anchored Button
Now the button no longer looks like it is floating, but instead looks "anchored" to the surface or page. Your eye tells you that the button must have a thickness to it, because of the characteristics of it's shadow.

I have very (and I mean VERY) rarely seen this effect used on any sites I have ever been to. I'm not sure why. I use it, and like to use it, because it gives a different sense of depth to a page when your buttons and pictures and image maps are firmly fixed to the surface of your page instead of everything floating around in space.
Even more depth could be achieved on a Web page by combining anchored objects and floating ones.

But when all is said & done... It's just another trick to put in your bag of Web page design techniques, that's all.

to the Top

4)

End Quote:

"on the 'lighter' side..."
Personally, I'd like to see the shadows on Web pages lighten up a bit.

There are a lot of sites on the Web that seem to be "lit-up" by only one very strong light source! And that's it. I think we could all use a little more light in our sites, so people can read our content more easily without having to squint all the time or shine a big flash-light on their screens. {;^)>

For those of you unfamiliar with the natural properties of light & shadows, there are probably going to be some unanswered questions running through your mind after you've read all this. I am intentionally leaving out some information on this subject because I know you will discover them for yourselves after trying out a few of the things mentioned here.

I'd also really like to know that you will now go ahead and EXPERIMENT! with this aspect of your drawings, pictures, buttons, bullets, image maps, and whatever else you do in Photoshop from now on!

NEWS FLASH!

Just in case you hadn't noticed...

When you save your gifs and jpgs in Photoshop using a Medium compression setting (and I hope you are?!) your images tend to get 10-15% darker.
The more optimizing you do when saving the more highlights will be sucked out of your images and pictures.

Has anyone else noticed this? I'm not the only one am I?

This means that if you want your pictures & buttons, & whatever else you make for the Web, to be as close as possible to your original image you did in Photoshop before saving, you will have to "lighten" them up a little first.
Especially your shadows.
Try setting your shadow layers opacity level to about 50-60%. If you find that to be too light for you then try 60-70% instead.

The amount that you lighten your images and pictures by will vary from one computer to the next. You should experiment to get the optimal amount for your own system.

to the Top

 

Step over The Edge!
(Experiments)

Here's one easy way to brighten up your Web pages:

  1. Try turning your shadow layer's opacity setting down to about 60 or 70% tops. It really does lighten up the look of your images. Which in turn will make your whole site more bright & cheerful looking too!


By lightening up your shadows you are then suggesting to the reader's eye that the light source on your page is coming from somewhere out in front of your page. Not from the upper-most left corner and flat along the surface of your page, as if it were hiding around the corner!

I hope you've all discovered something new here. If not, then just consider this a 'brushing-up' of old techniques.{;^)

Until next time...
Onward'n'Upward!
theKeeper


HR
"The Photoshop Guru's Handbook" ™ and all contents of this site
are copyright 96/00 Mark Anthony Larmand - (aka theKeeper) all rights reserved.
HR