How to design with density pixels in Photoshop?


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?

4/6/2016 7:30:00 PM

Accepted Answer

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.

10/5/2014 4:53:00 PM