Wednesday 28 January 2015

Tools for #MaterialDesign

Last night I promised a follow-up post about some of the resources I found to assist in designing for Android's Material Design. I'm focusing on #Inkscape because it's free and I've chosen to learn with this, though some things here relate also to #GIMP, another free program I make use of. So here it is:

Design template

If you are going to follow the Material Design guide lines for launcher icons, you'll want this template file



It's certainly helpful, though there are perhaps a few improvements that could be worth making. It lacks the main keylines on Google's reference image (below). It's easy enough to add this but they could be there in the template to start with.

Also, it is pre-configured for the pixel size of the largest icon you will need for your app, but neglects to cater for the 512px by 512px icon size needed for the Play Store (see Android documentation). The first thing you'll want to do is make this larger.

Colour Palettes

If you are going fall inline with the colour palettes of Material Design, you're sure to want to have these easily accessible. Google provides files for Adobe illustrator and Photoshop, but if you are on my budget try the .gpl file of the same palettes available here for GIMP and Inkscape. This page from +dominoc925 gives you instructions to add the palette to GIMP if you need it.

Drop Shadows

Material Design talks a lot about lighting, shadows, tinted edges, and shaded edges. Do you know how to implement all of these in your graphic editor? What? You're an experienced graphic designer aren't you? Aren't we all? Well no, of course we are not. I hardly knew where to start. That's why this resource from +Shining Wing was very helpful to me. It provides objects with pre-defined drop shadows for various depth levels. These filters can be instantly applied to your own objects. 


My only issue with this (and it may be an Inkscape issue rather than an issue with the filters) is that I found the lower edge of my shadows were truncated. 

Summary

These were all the resources for Material Design in GIMP or Inkscape that I located in one evening of searching. I'd be really keen to know of others. If you have your own or know where I can find more please comment on this post or private massage me and if I have enough I'll do another post.



No comments:

Post a Comment