: 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.

@Si6392903

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

Vote Up Vote Down

@Ravi4787994

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

Vote Up Vote Down