Where are the light sources located in Material design?

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

Answer

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.

Attribution
Source : Link , Question Author : Saurabh Kautilya Gupta , Answer Author : Alvaro

Leave a Comment