Then, what’s wrong in the guidelines?

1. Metrics written in terms of dp instead of px

Dp means density independent pixels, a metric used to create graphics for devices of all screen densities.

To convert dp into pixels, use this simple conversion scale:

ldpi = dp * 0.75

mdpi = dp * 1

hdpi = dp * 1.5

xhdpi = dp * 2

xxhdpi = dp * 3

xxxhdpi = dp * 4

App iconography is always made in a 48dp workspace, which means

ldpi = 36px

mdpi = 48 px

hdpi = 72 px

xhdpi = 96 px

xxhdpi = 144 px

xxxhdpi = 192 px

This means that everything in the Guidelines should be scaled to 400% because the workspace should be a 192x192 px one. But that’s wrong. They actually referred to pixels, and not dp, and that’s what I’ll explain in more detail next.

2. Edges

Tinted and shaded edges metrics are supposed to be 1 dp in a 48×48 px workspace, i.e., 4 px in a 192×192 px workspace (according to the guidelines on the Google Design site).

Well, that’s incorrect, because, as you see, the result isn’t the same as Google’s app icons. And Check all those icons, and you’ll notice that they’re just 1 px in a 192×192 px workspace.

Similarly, they’re just 1px in the 192×192 px workspace Product Icons sticker sheets, which few people notice.

Check it here.

Close-up of a tinted edge. White, Opacity 20%, and 1px height.

Close view of shaded edge. Blue Grey 900 (in this case because the background is a shade of green), Opacity 20%, and 1px height.

3. Drop Shadows

According to Google, drop shadows for raised elements should have these metrics:

Mode: Normal

Opacity: 20%

X offset: 0 dp

Y offset: 4 dp

Blur: 4 dp

Color: Refer to tint, shade and shadow values.

Once again, they used dp instead of px.

Note that I mentioned raised elements because these drop shadows metrics don’t apply to the background shape.

And the other thing Google missed there is that they said the light source comes basically from the top left corner, which means it will generate a 4px (px, not dp) X offset too.

Which change the metrics to…

Mode: Normal

Opacity: 20%

X offset: 4 px

Y offset: 4 px

Blur: 4 px

Color: Refer to tint, shade and shadow values.

If you check the raised element in the icon, it has a tinted edge, and a shadow below, but not really a shaded edge.

It’s just a drop shadow, different from the original drop shadow, and its metrics are:

Mode: Normal

Opacity: 20%

X offset: 0 px

Y offset: 1 px

Blur: 0 px

Color: Refer to tint, shade and shadow values.

Note: If your raised shape color is darker than the background shape color, then create a shaded edge for your raised shape, along with the 1px 0blur drop shadow. Also do this if your raised shape goes outside of the background shape.

How do you create 2 drop shadows in the same element in Illustrator? Create 2 fills for the element and apply every drop shadow to every fill. But, the 1px shadow should go in front of the other one.

Close view of raised elements drop shadows with no background.

Close view of raised elements drop shadows with background.

Close view of raised elements drop shadows with background and long shadow.

4. Finish layer metrics

Finish layer metrics are mostly right, but when you create a radial gradient, it starts from the center. Not mentioned was that you have to manually make it start from the top left corner, in a 45° angle, similar as the long shadow for the raised element.

Additionally, guidelines say, finish layer metrics are:

Type: Radial

Angle: 45º

Color: White (#FFFFFF)

Midpoint Location: 33%

Slider 1

Opacity: 10%

Location: 0%

Slider 2

Opacity: 0%

Location: 100%

Well, there is not a single icon, made by Google, that uses the midpoint location at 33%, they all use 50% instead. (I recommend to do it too).

Close view of icon without finish layer.

Close view of icon with finish layer.

5. Background shape silhouette drop shadow

You can’t make this the same way as in a raised element. It’ll look not only different from what Google made, but just bad in general. Here’s how you do it:

After a long process of trial and failure (not by me, though), it appears that you need 2 drop shadows. How do you create them in Illustrator? Create double fills for the background shape, in the same way the 2 fills for the raised elements are made.

What are their colors and metrics?

The metrics for the one in the front are:

Mode: Multiply

Opacity: 12%

X offset: 0 px

Y offset: 0 px

Blur: 2 px

Color: Black #000000 always. Regardless of background shape color.

There’s no X or Y offset; the shadow will still be visible because of its blur.

And the metrics for the one behind are:

Mode: Multiply

Opacity: 24%

X offset: 0 px

Y offset: 4 px

Blur: 2 px

Color: Black #000000 always. Regardless of background shape color.