How to create Android PNG Icons from an SVG using GIMP

Question

I'm pretty much a graphics design noob, as you can tell by this very basic question. What I am trying to achieve is to create a set of Android icons from an SVG file that I have. In case you didn't know, in order to support the different device sizes, I am supposed to create an icon for MDPI, HDPI, and XHDPI screens. More detailed information can be found here

Here is the recommended dimensions for each size:

• MDPI - 160dpi, 48x48px
• HDPI - 240dpi, 72x72px (1.5x MDPI)
• XHDPI - 320dpi, 96x96px (2x MDPI)

As I said before, I am starting with an SVG file that I have. The first thing I am doing is opening the SVG file using GIMP. Here is where I start to get confused. What value should I put for the pixels/in? The default is 90.

After I get past that screen, I pretty much just export it right away to a PNG. When I do that, I am prompted with another screen with a bunch of different options. Usually I just leave it as the default, but I'm not sure if that's the best idea. Anyways, when I go through this process, my icons still look really blurry on my Nexus 4.

Any help is greatly appreciated.

Answer 1

The Android Developers link is a bit confusing because it mentions DPI, but you shouldn't be worrying about that. DPI is important for the devices, but it's not necessary for designing the icons (I don't normally use Gimp so I don't know if it has an automatic way of preparing files for different resolutions, but I'll assume you want to do it manually and will create copies for each size).

The important part is the following:

To create an icon for different densities, you should follow the 2:3:4:6 scaling ratio between the four primary densities (medium, high, x-high, and xx-high, respectively). For example, consider that the size for a launcher icon is specified to be 48x48 dp. This means the baseline (MDPI) asset is 48x48 px, and the high density (HDPI) asset should be 1.5x the baseline at 72x72 px, and the x-high density (XHDPI) asset should be 2x the baseline at 96x96 px, and so on.

Now to your problem:

You have an SVG file with a set of icons. The documentation says the recommended size for the biggest density is 96x96px. This is because smartphones have double the pixel density of desktop monitors.

That's why a 48x48px icon will look ok in your computer but blurry in your nexus, because your nexus needs more quality to fill the same space. It needs exactly 2x quality, because it's a 2x MDPI screen (it has double the amount of pixels per "pixel space", while 1.5 MDPI has 1.5x density).

In short: You will need 3 icons. The sizes are 48x48px, 72x72px and 96x96px. In the devices, your icons will all look the same size, because they are being scaled to keep a good quality when the screen has more resolution.

The pixels/in issue you mention is for printing, and not for digital, so you don't need to worry about that. Just make the icons those sizes, and you will see it looks good in the Nexus.

These are some other questions that discuss working with app icons:

• Best workflow for icon design: Start big, or start small?

• Scale layers in a psd file by 200% for retina iPad

• Photoshop: How do I keep 1x and 2x (for retina display) images in the same document?

• Highest voted retina questions