: Photoshop: How far can I reduce something while maintaining legibility? when designing iphone icons,but in general designing something that is bigger or smaller than my screen size, I have problems

@Kevin459

In most cases specific to iOS there's more involved than just resizing your high-res images down to the lower-res dimensions.

For example, you may have a nicely detailed image for your high-res @2x app icon but you may take a lot of those details out of the low-res version because those details start to get muddy or illegible when simply resized at the smaller dimensions.

It might be necessary to do pixel-level manipulation on the lower-res version that you wouldn't do on the high-res version.

It sounds simple, but in the end you just have to ask yourself if you can clearly make out and read what you've created. It's okay to have wide variation between the normal image and the @2x image.

Vote Up Vote Down

@Heady304

It sounds like you're having issues with target devices having a higher pixel density, or PPI, than your monitor. It's a confusing topic but there are a few things to keep in mind and a few options to help.

Basically, we design for the screen at 72dpi because there are 72 "points" in an inch. This makes 1pt in your document equal to 1 "pixel", theoretically. Unfortunately most screens nowadays are 96 or higher pixels per inch, so working at 72 dpi is mostly helpful only for specifying pixel based type sizes.

The reason it's hard to estimate a design for an iPhone 4 or other high resolution device is that the design will appear literally 2-3 times smaller than it does on your monitor. Regardless, when designing for the screen changing dpi (dots per inch...for printing) in your document has no effect on anything but point size ("a pixel is a pixel"). You can never change PPI on a document.

Now, with that understood, there are a couple ways to be able to preview what you're making at the actual target size:


export images and view them in the device if possible (guess and check)
if designing for iphone and you have one, liveview is indispensable
if you don't have the target device, But you know the resolution, you can set that as the dpi in your document and try printing to get an approximate mockup of actual screen size
the most low tech method is zooming out to the target size in your document window...this can be a good quick check for button and icon sizes


Hope that helps!

Vote Up Vote Down