2

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?

6

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.

  • So... I have to design/resize for few kinds of screens. Oh dear... – Kamil Oct 5 '14 at 21:29
  • 2
    Screen sizes are an entirely different issue. This is about screen density which can be, but isn't necessarily related to screen size. – DA01 Oct 6 '14 at 1:09
  • Screen sizes are an entirely different issue. But isn't screen density a function of screen size? – pulp_fiction Oct 1 at 5:50
  • @pulp_fiction screen size is a physical dimension. The screen then has any number of pixels (resolution). They are independent variables. Simple example: There are HDTV screens that are both larger and smaller than 4K screens. – DA01 Oct 1 at 14:51
1

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)

1

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.

  • Thanks for the contribution! If you have any questions let us know. Welcome to GraphicDesign! – Zach Saucier Feb 9 '15 at 18:49
  • This is post is outdated. xxxhdpi is used i.e by Nexus 6, 5x, etc. – Paul Woitaschek Apr 7 '16 at 9:24
  • @PaulWoitaschek Do you have a link to support the xxxhdpi requirement? My post may be outdated, but then so is the Android Developer Guide that I cited (developer.android.com/guide/practices/…). It still indicates that xxxhdpi is only necessary for an app launcher icon. – Nathan Diesel Apr 9 '16 at 22:52
  • @NathanDiesel sure: android-developers.blogspot.de/2014/10/… – Paul Woitaschek Apr 10 '16 at 16:18
  • @PaulWoitaschek Thanks for the link, though I wouldn't suggest my post is outdated. Use of xxxhdpi assets is limited to the Nexus 6 and it will scale them down regardless because the screen is in between xxhdpi and xxxhdpi. Their recommendation is, "Choosing to add xxxhdpi versions for the rest of your assets will provide a sharper visual experience on the Nexus 6, but does increase apk size, so you should make an appropriate decision for your app." – Nathan Diesel Apr 11 '16 at 19:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.