Here are all the icons that we used for our apps at FauDroids:
Notice something? About half of the apps have a small shadow starting in the middle of the icon and going to the bottom right. This is what I call the material shadow or that big looooong shadow making the icons look awesome (checkout the Google design guidelines for details).
Anyways, while I love designing icons, creating that shadow is a little tedious and starts getting annoying if the icon shape keeps changing. So far I have used Inkscape for all my icon / art needs and I am quite happy with it. In Inkscape there are two ways of creating a material shadow that I know of:
- Duplicating + moving the icon along a path. Pretty simple, but requires you to clean up the resulting path after merging all those copies.
- Manually placing and adjusting rectangles that together make up the shadow form. Takes longer but tends to create a cleaner final path.
Long story short, I was done with exams and decided to build an Android Material Icon Generator which does just that for you: create material shadows! You can either upload your own SVG images or select one from the Google Material Icon collection.
Here are some examples I created:
How does it work? Thanks to the great guys from Paper.js working with SVG files within a canvas is pretty comfortable. My first version used the copy + translate icon approach to create the shadow. In addition I threw in some path traversal magic which managed to smooth out the edges of the shadow. The result was something like this (left without smoothing, right with):
That didn’t last very long though, since it is pretty darn slow (typically 5 to 10 seconds for 200 iterations / copies on my machine), and more importantly the shadows are just an approximation of the real thing, meaning removing artifacts will never be possible (take a close look at the mouth of the werewolf icon, see how the shadow edge is not straight?).
Next I tried calculating the shadow directly (no more iterative stuff, yay!) by finding tangents along the shadow path which have an angle of 45 degrees. Once you have those, it’s simple to subdivide the path along these points and “extend” those sub-paths down to the bottom right, essentially creating a bunch of sub-shadows which together form the real thing.