2

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 256x256 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.

5
  • Not sure if I understand you correctly! When you design for digital, you don't use DPI. You only prepare the file in its 'natural' size, and in double that size for retina screens. So your icon would be 250x250 for web, and 500x500 for iPhone.
    – Yisela
    Mar 16, 2015 at 14:23
  • I believe I understand. Then the resolution will always be 72pixels/inch?
    – Gian
    Mar 16, 2015 at 14:37
  • Yes. You only use DPI for print :) This link might help: line25.com/tutorials/…
    – Yisela
    Mar 16, 2015 at 14:38
  • It really helped me a lot, thank you. If you can post an answer so I mark it correct please. Best regards
    – Gian
    Mar 16, 2015 at 14:44
  • I thought Apple products used 92px/inch as a baseline. Windows products are 72ppi.
    – Voxwoman
    Mar 16, 2015 at 20:30

2 Answers 2

3

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 250x250 for web, and 500x500 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

1

The best way to create icons for all PPIs would be to create vector graphics and export as SVGs or create an icon font. Since the pixel density of devices change, you can't easily plan for them all so you'll be providing many duplicate images at different sizes.

Though, if you do, saving a web and a retina sized one will cover most of your bases. And for even higher pixel densities, a retina quality image would show up decently. Vector is definitely a necessity for perfectly quality all the time. As well, providing vector-based icons through SVG or an icon font would allow people to use your icons at any size (not just the sizes you saved the image as) and they could use CSS to change things like the icon color (would be helpful for hovers because otherwise a regular and hover version of the icon need exist).

If you feel comfortable in Photoshop you can use this hack to export SVG graphics from vectors drawn in the program- http://hackingui.com/design/my-workflow-to-export-svgs-out-of-my-photoshop-design-files/

Though, the process of drawing vectors in Photoshop isn't all that different than using Illustrator.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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