How to design with density pixels in Photoshop?

Question

I'm programmer, not graphic designer, but I have to design some Android application interface in Adobe Photoshop (or Illustrator).

I want to follow Google resources/guidelines for new Android applications.

Unfortunately - everything in these guidelines is measured in dp (denisity pixels). I know what a denisity pixel is, but I don't know how to deal with that in Photoshop (or Illustrator). I used to pixels, I have some experience in web design, I was always using pixels. I guess this is why my approach is wrong.

First - I created 1280x720 image and started drawing stuff but... I feel I'm doing it wrong. This is really painful. I have to calculate every size, margin, line spacing etc., I also have problem with setting up grids.

How can I improve my productivity?

Answer 1

Density Pixels are virtual pixels, equivalent to Apple's 'points'.

Depending on the density of the display, a density pixel will contain more or less real physical screen pixels.

There are calculators out there that will help you with the math.

For example, 100 density pixels translated into real pixels on a variety of screens:

ldpi @ 100.00dp = 75.00px

mdpi @ 100.00dp = 100.00px

hdpi @ 100.00dp = 150.00px

xhdpi @ 100.00dp = 200.00px

In this example, if you want to support all 4 screens with a custom image for each, you'd first create a photoshop file at 200px x 200px. Export that. now resize down to 150px. Tweak as needed. Export that. Now open the original 200px one again and resize that to 100. Tweak as needed. Repeat.

Alternatively, consider just making one 200px version and let the app resize as needed. Sometimes that's sufficient, saves on file size, and also makes your job a whole lot easier.

Answer 2

This may help improve your workflow: current versions of Photoshop come with the ability to generate multiple assets from a single layer. In Photoshop, go to File > Generate > Image Assets. Then, name your layer or group accordingly, e.g:

icon-mdpi.png, 150% icon-hdpi.png, 200% icon-xhdpi.png

Photoshop will then save these images into an assets folder (e.g. your_file_name-assets/icon-mdpi.png)

Answer 3

DA01 said it well. When designing in Photoshop for Android applications using density-independent pixels (DPs) as units, start at a high resolution, resize your file down, and tweak as needed to avoid artifacts before saving out.

However, what we do is design in xxhdpi resolution (we use HD 1080 x 1920) and divide all pixel measurements by 3 to get DPs. It is best to create an object's pixel dimension in sizes that are easily divisible by 3.

If an engineer asks for an asset in a particular size (let's say 100 DP) then we multiply that by 3 and deliver a 300 px image for their xxhdpi resource folder.

The xxhdpi size is the highest you need to go. The Android Developer's Guide explicitly says "You do not need to provide xxxhdpi assets for all your app's images." The xxxhdpi format is only used for launcher icons.