6

Google says that Key lights create directional shadows, and Ambient light create soft shadows from all angles.

Referring specifically to the image below, where are the Key & Ambient Light sources located, that have created both directional & soft shadows around the material?

enter image description here

Source: https://material.google.com/material-design/environment.html#environment-light-shadow

3 Answers 3

4

It is actually 45 degrees altitude and 90 degrees angle. You can see it in the video @Cagrigk posted. (this is the link with the exact timing).

These images posted in Material design:

The following example shows the card with a height of 6dp.

Which implies a conversion of 12px:

xhdpi (2x) @ 6.00dp = 12.00px

So the card real size is 320*320px and the shadows are 12px size (6dp at 2x = 12px), and as the shadow is placed at 45 degrees, the distance value is also 12px.


On the images the right bottom corner is the customized one, and the rest is the original image.

Shadow cast by ambient light (this one doesn't have any angle):

ambient light

ambient light presets

Shadow cast by key light:

key light

key light presets

What I am not sure is with which blend mode to combine both styles.

2

It's located on the top of the square with an angle of about 15 degrees. The misc shadows can be seen as "ambient Occlusion"

Check out this video for more info:

Making Material Design: https://www.youtube.com/watch?v=rrT6v5sOwJg

1
  • It may not be 15° as that depends entirely on the relative or in this case, perceptive distance between the object and the background in which the shadow is perceived to be cast upon.
    – Leviscus Tempris
    Commented Nov 22, 2016 at 15:01
1

Looks to me like the key light is above and maybe to the left a bit. And ambient light, by definition, is everywhere. That's the light that's bouncing around the room.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.