Android Photoshop script to export to ldpi hdpi and xhdpi

androidscripten

[UPDATE] These actions are pretty old now, you might want to take a look at the update
Android Photoshop actions to export to mdpi hdpi xhdpi xxhdpi and xxxhdpi


When I create Android Apps, I usually start with mdpi, and then export to ldpi, xdpi and xhdpi to follow android guidelines. It’s a pretty long job, there are tools like assets studios  but if you give those tools the mdpi version as start version, the xhdpi version will look ugly and rasterized.

android resize script
I created a set of Photoshop actions, to make the process easier. I assume for this that you also start with a mdpi version. Those actions will convert and export drawables using this ratio :

Android drawable RatioThis means that you can use them for any drawables, not only icons.
The three first actions resize and export individually each size, the last action is a “one fits all” that will enable you to create all the sizes in one click.

Also note that it’s better to use vector layers and vector masks that will scale nicely in xhdpi instead of raster layers that will get ugly.

 

 

How does it work ?

  1. Download the files, install the actions (drag and drop in Photoshop)
  2. Create your folders :
    res/drawable-ldpi/…
    res/drawable-mdpi/…
    res/drawable-hdpi/…
    res/drawable-xhdpi/…
  3. Launch the action
  4. At the end of the resizing, the script will save for the web the drawable in PNG24 format, you will then get the pop-up to give the file a name and choose the right folder.
  5. The last script does the 3 resizings in one action in the following order : ldpi, hdpi, xhdpi. Between each resizing you’ll be asked where and how you want to save the file..

script android resize en action

You can download and test the scripts. Feel free to ask any question if the explanation is not clear enough.

Android export action

Looking for a Web or UI designer, for a site or mobile application ? Looking for a logo designer, or simple want to know more about me ? You can take a look at my portfolio and contact me.

22 thoughts on “Android Photoshop script to export to ldpi hdpi and xhdpi

  1. Thanks for the actions, these will be really helpful. Just one question though. I was told to design at 240dpi (ppi) to cater for the ldpi. I would have thought I needed to change my screen resolution with each version of my icon too, otherwise it could look blurry on certain devices?

    • hum good question. I tried to create a 72 and 240 ppi 90px image, exported both, tried to zoom : the blur was the same. I think the propotion they give in the android documentation (0.75 1 1.5 and 2) are actually how the image would change regarding to dpi of the device. I tried creating some icons for an app, using those ratios, so the *2 ratio for xhdpi and I did not get any blurry effect :)

  2. Very good article!
    I think you should rename your article. You mention “XDPI”, should be “HDPI”. Oh god all this is soooooo… confusing !

  3. Hi Stéphanie,

    This is really a time saver the way you explained. I have downloaded the action and tried some snapshots. However, since you mentioned “I usually start with mdpi” do you mean to say we have to complete 4 sizes of mdpi (as per android screen guidelines such as 320×480, 480×800, 480×854, 600×1024, 1024×768, 1280×768 etc) since they all fall under mdpi.

    may be i am missing out something :)

    kindly suggest

    • Hum kind of complexe subject here :) I was more talking about general elements such as icons that are independant to screen size, but depend on density. For example, when I create an icon, I create it in the mdpi size described in the guidelines, and then convert it in the other resolution. I usually create part of the design as stand-alone views and export them one by one, the only part where I can’t apply this rule is the background. This gets complicated, since as you mentionned they are many screen size that can under mdpi resolution, so I tend to avoid complex image backgrounds and use patterns that can be repeated, again to be as indenpendant as possible regarding to resolution.

    • hum good question. I tried to cterae a 72 and 240 ppi 90px image, exported both, tried to zoom : the blur was the same. I think the propotion they give in the android documentation (0.75 1 1.5 and 2) are actually how the image would change regarding to dpi of the device. I tried creating some icons for an app, using those ratios, so the *2 ratio for xhdpi and I did not get any blurry effect

  4. Pingback: How To Design Android UI for Best Result « Ui Design « Lufti Nurfahmi

  5. This is very usefull for me,
    Thanks for share.
    I agree with Thomas, You should change your title, it confusing. I think the title should export to ldpi, mdpi, and hdpi.
    Cause I creating the icon with the big size first (xhdpi) then i use this actionscript.

    Anyway it helpfully.
    :)

    • Hum, if you start with XHDPI then this script is no use for you, since it is based on a mdpi baseline, for example if you start by xhdpi and then use the script to export to hdpi, you’ll have 1.5x the xdhpi size :/

  6. It’s important to note that designing some of the assets in xhdpi will yield better results on higher definition screens, though this will naturally increase file sizes. Therefore icons and elements with text would be best created in xhdpi.

    Hope that helps!
    Nick

  7. Sorry about this dummy question, but why starting with the mdpi version of the image ? In my POV I thought it was better to start with max resolution and then reduce icon size rather than increase it.

    • They are no dummy questions :) As a matter of fact it’s more flexible to start with mdpi and twice the size. The problem if you start in xhdpi and divide by two is that you might encounter semi pixels for odd numbers. If you start with mdpi and double size, you won’t. You’ll still have problem with hdpi with is x 1.5 in both cases :/

  8. @Stephanie I am not agree with you I always work in xhdpi or retina for iOS but I am careful that all items are divisible by 2. If you work in high definition your job is more precise, textures are beautiful, effects are more nice… You can really work in details…. And on your device the result is really whaouu!

    • Yes, and then you divide by two and all the nice effects and textures gets sloppy :) It’s a question of workflow, I prefer to work in mdpi, and then add more details for the @2x version instead of working directily in high def and then have to reduice / eliminate some effects.

  9. Thanks for this!

    If I could make two requests for an update, please:
    1. Include a save prompt for the original mdpi
    2. Include an export for the xxhdpi

    Thanks again!

    • Hi, this script was for my personal use and I shared it as it is with no support. If you want you can change the script and send me a link to your updated version I’ll be happy to add it to the article :)

  10. Pingback: Ramblings from an Android Designer | Building Blocks: What Developers Wish Designers Knew

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment validation by @