#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

Android Icon Maker (free script for GIMP)

I discovered the joy of script-fu for GIMP today.

One thing I've found time consuming and irritating about android app developing is creating graphics for the various screen densities that are out there. Every graphic has to be created for the highest density, then scaled. Using GIMP for my originals, this previously meant I would have to scale the image, export the image, scale the image, export the image etc. until all drawable folders were populated with the icon. And if I then make a small change to the graphics, I have to repeat the process.

Then of course, there is still the task of putting the right file in the right folder with the right name.

So I discovered there is a script for GIMP  (specifically "script-fu-save-icons-png") available from the GIMP Plugin Repository (written by Jan Pavelka) that allows icons at multiple sizes to be created from the current GIMP image in one step.

That was great, but it didn't support all of the sizes I needed, and the images all had different file names (because the pixel size became part of the name). Plus, they still needed moving into sub-folders, so no major help.

I then decided to modify the script to suit my needs. I came up with the UI below, which I think would be helpful for other developers. The script gives an option of (currently) three different graphic sizes in dp units (suitable for launch icons, action bar icons, and notifications) and it allows a range of pixel densities to be specified.

When executed, it calculates the pixel size for each pixel density, and outputs the icon graphics (all with the same name) in the correct drawable subfolders for an android project.

Now with one press I can generate all of my icons from a single source file.

I've used this with much success on Float.

I will ultimately upload this to the GIMP Plugin Repository, but in the mean time it can be sourced from here: script-fu-android-icon-maker.scm