Designing icons for devices with different PPI

I’m having some problems on the icon PPI. For example, when I make an icon for an iPhone 6 application I know that the icon will be 326 PPI. But if I do a 256×256 px icon that can be used on iPhone, Android and on the Web at different screen resolutions, which one PPI I use? Is there a “formula” to calculate the PPI based on the size of the image?

I want to make one set of icons for sale, but I want to avoid creating multiple equal with different PPI so I can sell unopened packages. I am using Photoshop CC as not yet acquainted with Illustrator.

Answer

When you design for digital, you don’t need to use DPI. You only prepare the file in its ‘natural’ size, and in double that size for retina screens.

So your output icon would be 250×250 for web, and 500×500 for iPhone.

You can do with only the high res one, resizing it. But when you work for web it’s important to keep a small file size (mobile networks are expensive!), so it’s recommended to make two copies and use CSS to target the screen density.

You can find more information about preparing assets for higher pixel density screens here: How to Create Retina Graphics for your Web Designs

Attribution
Source : Link , Question Author : Gian , Answer Author : Yisela

Leave a Comment