Designing at Device Resolution

So, you work in Photoshop or some similar tool. All of us do, at least to put designs on the screen, or create raster production graphics. Eventually maybe we can get out of this and use almost all programmatic styles and vector art, then do design in vector programs, but we're not there yet.

If you are like almost every VizD I have worked with for a very, very long time, you are doing one key thing wrong. Just one. You are designing for pixels. Yes, even though you are a pixel-pusher by trade, you have to account for (and measure in) physical units. Here's how (all instructions for Photoshop, screenshots from CS6):

Go to Image > Image size...

This dialogue will open.

Photoshop Image size... dialogue at 72 dpi

Note the last field is labeled "Resolution"? That's the right way to use it. Resolution is not 320x480 but a pixels per physical size. So, we're gonna change that. Why? Because nothing is 72 dpi. Nothing! It was a pseudo-standard years and years ago, but in practice there were small variations in all the old CRT monitors that used that. And, even before it came out, there were very different pixel densities. I recall older versions of Windows even had a "96 dpi" setting you could use to make stuff on the screen readable.

Which is very much the point. No mobile phone is anywhere close to 72 dpi. That's really, really, crazy low resolution. I have a featurephone I use for testing out stuff, a Nokia C2-00. It's presumably nothing that whippy, and has about 208 dpi. But let's get to what you likely work on, iPhones.

Yes, you should be designing for something else, but also in my experience almost every VizD team is still stuck fast to iOS. So here's the pixel densities for those, and the Galaxy S3 as it's a crazy-popular Android and you should work on that also:

Here's a list of many devices. Here's a more readable, useful list. It is still unaccountably hard to find the physical size of screens in useful dimensions. Diagonal is not easy to use (rather: it's impossible unless you know aspect ratio also) so it would be nice to have height and width listed in physical sizes, not just pixels for when you lay out non-raster designs, but oh well.

Now pick the one you work with, and change the Resolution number to that. But first... we're not changing the image itself, but just the way we measure it. So you first uncheck "Resample Image" down in the lower left. Now check it out.

Photoshop Image size... dialogue at the right resolution

Note how the pixel dimensions are the same, but the physical sizes changed. Go ahead, press OK and commit the change. Now start measuring. On any iPhone, you will find the screen is now 50 mm (or 5 cm if you must) wide. When you edit type, the size will be accurate. Are you shocked to find you are giving your users 4.25 pt type? You should be. Fix that.

Etc. Happy pixel pushing!

Work in Photoshop in Android DPs

Well, sorta. If you follow this math put forth by Roman Nurik and Peter Ng, you can use points in Adobe Photoshop to emulate density-independent pixels (dp). You can show all dimensions in density-independent units while still maintaing pixel precision during editing and exporting. Simply change Photoshop's ruler units to points, choose the right document resolution and from then on, think of points in Photoshop as Android's density-independent pixels!

Read the whole article with pictures.

While useful, do be careful you don't loose track of real world scales, and make your text too small to be readable, etc. See the above section as well, or just design in a pure-vector tool and export using the procedure in the below section.

Turning Vector to Raster for Android Apps

If you have to export raster images for Android, you better do it right or everything will end up fuzzy and/or mis-sized. Note that Android considers density to also loosely map to screen size. MDPI is not just 160 dpi, but also expects a 3.5-4" screen. This seems to have either broken down or I cannot find a new translation table. The original XHDPI assumed something like 10" screens but that's clearly untrue now.

Generalized Density

Constant Name

Actual Density

Physical Size

Scale Factor

Notes

LDPI

DENSITY_LOW

120 dpi

2-3"

25%

Almost legacy even by the time Android 1.3 was launched. Small and crappy screens. But, they exist still, a lot, and there are some uses of lower resolutions for wearables. So, I still export to this density.

MDPI

DENSITY_MEDIUM

160 dpi

3.5-4"

33.34%

The classic medium size, though now a pretty small resolution.

TVDPI

DENSITY_TV

213 dpi

?

44.37%

Yes, for TVs. You probably don't need it, but smart TVs will come up sometime.

HDPI

DENSITY_HIGH

240 dpi

?

50%

The big terribly shiny screens... from 3-4 years ago. Pretty average now.

XHDPI

DENSITY_XHIGH

320 dpi

?

66.67%

The start of the stupid labels by adding Xs. Everything good is Extra High density now.

XXHDPI

DENSITY_XXHIGH

480 dpi

?

100%

First used on the Nexus 10, and now being used quite a bit. Largest size I support, at least for now.

XXXHDPI

DENSITY_XXXHIGH

640 dpi

?

N/A

I am not yet generally exporting for this scale, but Nexus 6 and 9 are sort of this density. They can mostly scale up XXHDPI items, but you need to at least make app icons in XXXHDPI to support this really well.

All icons are drawn in vector programs. Usually InDesign for workflow reasons, but Illustrator is fine also. They are drawn to a physical scale so I know how big they need to each be in the final render.

Export that page to a PDF.

Go into the Photoshop document and add guides to be used as crop lines. Leave a bit of space around items. Remember anti-aliasing; it can easily need 2 pixels past the hard image edge for this. If you don't provide that, the image will look odd. Provide more for shadows, and be sure to use the eyedropper to make sure you aren't missing any shadows.

Repeat till done.

Turning Vector to Raster for iOS

Protip: Skip the below and if you already are exporting for Android, just turn:

They are very, very close in size, much less work for you. But here's the long version, or the sizes if you are just making an iOS app (hint: you really, really should not be doing that).

Build icons in a similar way to above: Create them in vector at scale, export at the highest resolution then scale down. Internalize the @2x & @3x terminology instead of thinking of vague things like "retina." This will help your conception of design, and even make things clear when pixel pushing your exported icons.

The iPhone 6 Plus appear to make things confusing and there is internal scaling. Still working on the results of all this but I think you just make @3x images (489 ppi) and they appear larger. I think because it's so hard to tell what is actually happening just by looking at the output, even with a loupe. And the screenshot tool LIES. Did you know what? The 6+ screenshot doesn't include the last downscaling so is not what your eyeballs see.

Except I have some people saying the opposite. Web guys say the 4.7" uses 326ppi @2x and 5.5" uses 489ppi @3x. Webkit device pixel ratio is definitely 3 on these. So... confused still. https://medium.com/@brucewangsg/the-curious-case-of-iphone-6-1080p-display-b33dac5bbcb6

Apple likes to mostly pretend there are just phones and all have the same density, though they do not. Even with the iPhone 6 series, they are (I think) fudging into one new pixel size, like they did with iPad Mini. This does no favors to their users.

App Icons:

Spotlight & Setting Icons:

Settings Icon:

Toolbar & Nav Bar Icon:

Tab bar icon:

Web clip icon:

Launch Images (and total screen size?):

iPhone 6: 750 x 1334 (@2x) for portrait 1334 x 750 (@2x) for landscape

For iPhone 6 Plus: 1242 x 2208 (@3x) for portrait 2208 x 1242 (@3x) for landscape

iTunes:

Total list of sizes for icons (all square): (Through @3x needs)

Turning Vector to Raster for Windows Phone Apps

First, a dire warning. Microsoft branding is confusing at best. It's easy to stumble into WinDOWS (desktop and tablet) standards, and become baffled. So, double check everything you read.

Windows Phone is very similar to the other major OSs in that it classifies devices into a few scales by device pixel density ranges. These are:

Resolution

Screen Pixel Dimensions

Aspect ratio

Scale from Windows Phone 7.1

Scaled resolution

WVGA

480 × 800

15:9

1.0

480 × 800

WXGA

768 × 1280

15:9

1.6x scale

480 × 800

720p

720 × 1280

16:9

1.5x scale, 80 pixels taller (53 pixels, after scaling)

480 × 853

1080p

1080 x 1920

16:9

1.5x scale, 80 pixels taller (53 pixels, after scaling)

480 × 853

The 1080 scale only tells you it is 1.5x, but is 2.25x internally. You cannot provide 2.25x images, and have to rely on the handset to scale it properly.

Both PNG and JPG are supported for most images.

Name images by ending in a hyphen, then the scale such as 'SplashScreenImage.Screen-WVGA.jpg'

App icons and tiles only have to be provided at WXGA resolution. I think this means you only /can/ provide WXGA, and the phone always scales, which makes me a little sad. The complete list of supporting images for Windows Phone is:

You'll note that I didn't list sizes for tiles. Because this is fraught with peril again. It's not a simple checklist, and you get to pick which ones you want to provide. Read the MS documentation on it instead: http://msdn.microsoft.com/library/windows/apps/hh202948(v=vs.105).aspx#BKMK_Tilesizesandresolutions

Exporting Raster Files


Next: Documentation Templates


Discuss & Add

Everything you want to add goes down here.

Reference Info

Weird chart of Android scale ratios and the dp sizes for various elements. Interesting. http://www.emirweb.com/ScreenDeviceStatistics.php The Point of Resolution Independence: iOS and iPhone 6 Plus: http://coronalabs.com/blog/2014/10/23/the-point-of-resolution-independence-ios-and-iphone-6-plus/

When do we get vector?

I love SVG, WebFonts, etc. for the web, but why can't mobiles support this instead of making zillions of different images? Well, they are getting there on Android at least. Soon. Soon... https://developer.android.com/training/material/drawables.html#VectorDrawables

Raster Design Tips (last edited 2021-02-16 14:59:47 by shoobe01)