: What are the traditional rules for drop shadow direction / light source? When creating a drop shadow for objects, what is the traditional / classic "rule" for the offset direction? I see so

@Nimeshi706

Our brains naturally process images as either concave or convex depending on the illumination direction. Most observers process shaded relief maps of topographic features correctly if the illumination source comes
from the NW direction (top left). If the illumination is from the SE, the terrain will typically appear in reverse (valleys to mountains and mountains to valleys). While most observers can mentally reconcile topography regardless of lighting direction when given a point of reference, this ability has to be taught and practiced. For the casual observer, this becomes impractical and cartographers
therefore consider the illumination of shaded relief maps from the NW as a standard. I am guessing our idea of correct 'shadowing' would come from the standard of visualizing maps. That said, I personally would choose to shadow an object or image from the top left, and text from the top right. The reason being, the way we read images and text. For an image, the shadow would act as a stop and keep you within the image. For text, a shadow on the right side may disrupt the flow of text.

Vote Up Vote Down

@Mendez620

I come more from the 3D CG realm, and when doing 3D work, you are attempting to create something that very much resembles reality. Rarely do shadows consistently fall in the same direction, not only because the shape of the objects can alter shadows a bit, but also because no light source behaves that way since their light is emitted radially from a single point in space -- or at least, in the case of a light bulb, a relatively small object, and the objects in view represent a significant variance in their respective direction from the light source. The only reason you don't see this type of behavior from the Sun is that the angular difference between two objects that are 10-ft apart here on Earth represent an indistinguishable difference in their direction from the Sun. The Sun and the Moon are the only common examples of this phenomenon in which the angle of the incoming light vector is consistent across our field of view, but light is so diffuse and scarce at night that you might as well not even talk about "consistent shadow angles" at night. Every day, we are presented with hundreds, if not thousands, of examples where shadows are not consistently cast in the same direction due to significant variance in incident light vectors or otherwise irregular lighting. (Examples: hebbylaya.deviantart.com/art/Stone-3d-Design-102879441 [d shadow off to left, n shadow off to right], fc00.deviantart.net/fs47/i/2009/216/4/b/3D_by_luiggi26.jpg (L shadow off to left, k, TM, and 3D shadow off to the right)

In Photoshop, however, reality is irrelevant. Name one thing in Photoshop that's realistic, and I bet I can find something wrong with the algorithm. In fact, the major reason to use the "consistent" shadows is precisely because Photoshop is nearly incapable of doing anything else. And don't get me wrong, I don't think the shadows that you see on the web look terrible, but they're not realistic either.

Even if Photoshop really could make realistic shadows, starting tomorrow, I don't think most people would use them because they wouldn't "look right" since we have already had certain ideas about what "looks right" for a web site or a logo engrained within us.

The bottom line is do what "looks right" because pretty much none of this stuff is realistic.

BTW, here's an example of a web site that is neither consistent nor realistic, but it still looks perfectly fine: us.battle.net/wow/en/services/ The "HOME/GAME/COMMUNITY/MEDIA/..." menu has a long highlight going across the top, but the entire centered div has a thin diffuse shadow around it, in all directions (if the light source were truly at the top, there should be no shadow at the top.) Furthermore, there's a little sub division under the menu that you might call the "content div". It's embossed a little, but instead of a long highlight at the top, it has two highlights at either corner, and then magically disappears after about 30 pixels. Completely inconsistent upon close inspection, but it looked perfectly fine at first glance!

Vote Up Vote Down

@LarsenBagley460

From kindergarten to elementary school the majority of my (and other kids') drawings had a thing called "corner Sun" which was a quarter of the Sun filling the upper-left corner. At first this analogue might sound far–fetched or tongue–in–cheek, but I think the concept of corner Sun points to the source where the idea of ideal drop shadow comes from.

Now, I was about to post a Google image search on the topic to enhance my point, but noticed a notable amount of drawings having the corner Sun in the upper-right corner! So generalizing directions ought to be taken with a pinch of salt* . I have a hunch that there might be either cultural or even left/right handedness connections—but I have no studies concerning the origins of the corner Sun. Definitely would read those.



What is the most common, however, is that the light is coming from upper left.

I think the main reason for this isn't derived from the concept of an ideal drop shadow, but from the cold fact that Photoshop has the default drop shadow direction set to 120° by default or to be more specific: the global light value is set to 120°. This looks adequate for most cases so why bother questioning the value every time. Adobe's reasoning for this very angle value would be interesting to hear.

*) Well, duh, as always

Vote Up Vote Down

@Michele215

In your designs of your own devising, be consistent. If one object has a top-left light source, then all of your objects should have a top left light source.

In designs of others's devising, you need to be consistent with their format. In the case of Apple's Mac OS X (per the HIG), drop shadows come from the top-center, and actually a bit on the front around a 45˚ angle, and not from the side.

As for the direction, that is largely dependent on the effect you are trying to achieve, but as an informal rule based on not-so-casual observation, the light-source is typically on the top-left casting a bottom-right shadow. David Siegel may technically be correct, but it is almost entirely subjective in the end.

Vote Up Vote Down

@Holmes874

Typically, light source in most situations is upper left, casting drop shadows to lower right.

The only other 'rule' is that you should make whatever types of shadows you are using relative to each other (meaning there should be one light source for the document, not each individual element).

I can't imagine any sort of shadow 'enhancing' text readability.

Vote Up Vote Down