Im new in material design and I want to start new design in this style. My problem is I don't know how to reproduce Elevation (z-axis). In image below i see 12 levels of Elevation, but how to create this levels in Photoshop?
Btw: I know that I have to use Drop Shadow in Photoshop, but what values do I set for each level of Elevation.
Answer
I can't find anything regarding Android shadows on the Google design docs now, but there was apparently once upon a time a list of the values for Adobe Illustrator, but they seem to have taken it down.
There are a lot of resources that list 5 different shadow levels. The Google design docs link to the Polymer docs that say:
Note: The material design specification describes z-heights as being specified in display independent pixels (DIPs). The current implementation of
doesn’t correspond to the spec in this regard. The z-values are arbitrary values ranging from 0 (no elevation) to 5 (maximum elevation), and don’t correspond to DIPs.
This is for web development however, so not applicable to Android apps.
From what I can see, in Android, the shadows are created automatically from the elevation you set on an element.
So the only options I can think of without finding anything more specific are:
Use z-depth 1 and z-depth 5 as the values for the bottom and top elevations and extrapolate the values in between.
If you are developing the app, or can get your developer to do this for you. Quickly create a screen in Android with as many objects as you need set to the various elevations, take a screenshot and replicate the shadow in Photoshop with trial and error and note down the values for each elevation.
Note: I am not an Android developer, and have never used or read much on Material Design before now, this is just what I could find reading the various docs and searching Google.
No comments:
Post a Comment