7

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.

(Link to website) enter image description here

  • 1
    You're right that you need to use drop shadows. What part are you having trouble doing? I would screenshot the level and do a side-by-side comparison and just mess with the values. You can also find premade ones on the internet by searching Creating Material Design shadows in Photoshop – AndrewH Dec 20 '15 at 21:38
5

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 <paper-shadow> 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.

enter image description here

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:

  1. Use z-depth 1 and z-depth 5 as the values for the bottom and top elevations and extrapolate the values in between.

  2. 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.

  • I've assumed you are working on Android as the page you linked to talks about elevation in Android.. If you are working for web, just use the values in the image I posted. – Cai Dec 20 '15 at 22:01
  • I'm working for web design. Where I must look? – Gabriel Atanasov Dec 20 '15 at 22:13
  • 1
    In that case, googling 'Material Design Shadows Photoshop' brings up a lot of solutions. The top result even has a PSD: blog.omgmog.net/post/… – Cai Dec 20 '15 at 22:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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