: 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

@Margaret771

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.

Vote Up Vote Down

@Sue6373160

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)

Vote Up Vote Down

@RJPawlick971

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.

Vote Up Vote Down