While prototyping I was trying to simulate the z-axis, or elevation and objects according to google material design.
You can’t find any information about it anywhere and google does not provide the exact values for it either.
Fortunately enough, I ran into this on some forum:
Great! Our graphic designer finally can stop stealing elements from google provided templates and actually start thinking which elevation we are using!
But another problem – recreating those shadows in Justinmind prototyper. They do have a tool called “Edit shadow” as part of the properties tab.
It uses different lingo than Adobe Illustrator tho, so here how to correctly translate it:
12% black – there’s no such thing in Justinmind, so you have to use a reference guide. First one I came across was this one: http://www.december.com/html/spec/colorcodes.html adn what you’re looking for is the CMYK code, last percentage says what number of % black is that color. HEX code is on the left.
x-offset – is that weird green circle with a pointer. I played around with it for a bit and 0 seems to correspond to 90 degrees.
y-offset – corresponds to distance.
blur – corresponds to Blur.
Now how do you create top shadow and bottom shadow when all we have is one shadow per element?
Easy- create two elements with 1 shadow each and just stack them on top of each other.
(In theory. I haven’t figured out if it works or not yet. But it makes sense, right?)
I wasn’t able to recreate a perfect match so play around with it a bit. It’s a handy starting point though. When I tried to assign a higher dp value to blur it seemed to look more like the real deal. It won’t be perfect. But at least you have some control over it and it looks way better than the predefined material design widgets Justinmind uses.
Also, If unsure about the dp = px conversion, I’ve written about it in my last post.
EDIT: Google added guidelines for Sketch, Photoshop and Illustrator to its Material Design guide: https://material.io/guidelines/resources/shadows.html#