#GIMP Template for #MaterialDesign

Following my previous popular post about #MaterialDesign I decided that there was a need for a Launcher Icon template for #GIMP. This post describes two new tools I've created:

1. A GIMP template for Material Design
2. An updated Android Icon Image Export Script for GIMP

A GIMP template for Material Design

In many cases it may be safest to create your icon as vector art. But it will also frequently be more convenient to use GIMP.

Launcher icons are 48dp x 48dp in size, which means they are 48 x 48 pixels for mdpi screens. However you will want to create icons for different screen pixel densities, and hence different pixel sizes. Typically you will need sizes up to xxx-hdpi, with a pixel size of 192 x 192. You will find other templates are created at this size so they can be down-scaled to smaller screen sizes.

However, If you want to reuse your launcher icon for the Google Play Store, you will also need a high resolution graphic at 512 x 512 pixels. You could use a different graphic entirely, one with more detailed lines and features, or you may want to create a single original with high enough resolution to be used for the Play store and downscale it for your launcher icons.

The GIMP template I have created is 576 x 576 pixels (an even 12 times 48). This means you will need to downscale for the Play store icon, but down-scaling a bitmap is better than up-scaling right? The following describes it's key features:

• The template file has a pre-defined grid interval of 12 pixels (1dp), corresponding to one pixel in the down-scaled 48x48 pixel icon. You may need to turn on the grid from the View menu.
• It also has vertical and horizontal guidelines pre-configured for the same positions as the Google example here.
• The template includes the diagonal guidelines, the small circle guideline and the four basic template shapes (square, landscape rectangle, portrait rectangle and circle) as paths. You can use the paths to create objects. To do this, open the paths dialog window (from the Windows - Dockable Dialogs menu), right click on your chosen path and select "Stroke Path." You can then fill the outline that this creates.

Download the template here:

Material Design Template for GIMP

Android Icon Image Export Script for GIMP

If you are making Launcher icons with the template above, you'll be needing to resize and export for a number of graphic sizes, and you'll need to move those graphics to various folders for your Android project. 

To simplify this, you can use the Android Icon Maker GIMP Script that I posted previously. 

I have updated the Script making the following changes:

• I've now added a "custom" option for the graphic size in dp units (previously it was pre-configured for three image types). 
• I've added a 512x512 pixel image option. This option is independent of the graphic size and is designed for Play Store launcher icon graphics. It will be copied directly into the assets\_Pre_Production folder in your project (so it is not included in your APK). 
• I've changed the folder location that the script needs to be pointed to. Previously you pointed it to your res folder. Now you point it to your project folder, and output is placed in the res folder or the assets folder (depending on your chosen options). 
• Finally, I removed some of the options I felt were too complex for this tool. 

Both the new and old versions are available:

New Android Icon Maker GIMP Script

Old Android Icon Maker GIMP Script

Instructions for installing a script-fu plugin can be found here

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.

What is #MaterialDesign ?

I tried to learn a bit about Google's #MaterialDesign this evening following some criticism of my first icon design for my next app SiteSnaps.

So what is Material Design? Don't ask me! I spent an hour reading about it on Google's documentation pages and I still don't get it. I mean does this mean anything to anyone?

...The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics...

Well not to me.

So I have some issues with Material Design.

Firstly as highlighted above, it seems like Material Design is the invention of a new language. I think this language is designed to monopolise the vocabulary around and as a result the approach to graphic design - Soon everything will look like it was made by Google.

Secondly, Google is trying to make us conform to a narrow design envelope. Where's the freedom and space for creativity? If all app designers use the fixed colour palettes and strict rules provided by Material Design, things will become quite predictable and boring.

Thirdly, who's judgement of good design are we trusting? There are a whole selection of Do's and Don'ts. Some of the Don't actually look OK to me.

And another (I quite like the off-center folds):

Finally, There's #contradiction. Material Design says in a number of web pages:

 A folder corner, or dog-ear, is used with forms associated with documents or traditional paper-based metaphors...Don’t use a dog-ear treatment in the upper-left of an icon. The cast shadow from this position interrupts the harmony of the icon.

... Google's Newsstand is probably the most heavily used app on my phone. Take a look at it's icon:

So that's clear. #WellDoneGoogle.

All this said, I don't claim to have good a good eye for graphic design, and I do like the look of Material Design icons. I expect I'll be a full convert within a month.

I'll post tomorrow about the useful Material Design related resources I located online.

Keyword ranking improves

A couple of days ago I was a bit put out by a sudden drop in keyword ranking for Float. I was at a loss to explain it.

Now just as suddenly, my ranking has returned. So what happened? Perhaps Google changed an algorithm then changed it back?

Even so, me restored ranking is still very low. I suspect I need more positive ratings to boost it up higher. But I have issue with this. Have you looked at the reviews of indie apps? All 5 stars and all genetic text like "great app, just what I needed!" And "this app is perfect. Outstanding work." These reviews could be for any app, and I suspect have been posted to many apps. Its a buddy system, and means nothing to the quality of an app, only the skill of the marketer.

I guess I need  to apply the same strategy...

Sensor Tower Keyword Analysis Revisited

I'd love to know what caused this sudden loss of keyword performance...

I'm getting that sinking feeling again.

(Statistics from sensortower.com)

Hiatus end

I was just getting going with  Float, having released my first version and maintained it with a few upgrades in its first month. But then the burden of marketing and a full time job, and international travel, and Christmas, and various other excuses, go tin the way.

The end result: a few months with no development and no promotion.

This has had the disappointing consequence of a complete drop off in use of Float, and thereby a reduction in add revenue (from a few pence per month to no pence per month).

I guess I'm picking it up off the ground to try and build something with momentum this time.

What is reassuring though is that a few months of inactivity can limit new users, but it seems active installs can weather the storm:

So I've been hard at work these last few nights on the next major release. And the good news is I've got something exciting to show for it. Last night I played the first ever game of Float 3D:

The only final comment I'll make is... Coming Soon to an app store near you!