Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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.

share|improve this question
add comment

1 Answer

up vote 3 down vote accepted

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.

enter image description here

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:

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.