Illustrator Script – Export Android Multi-Res PNGs
**Updated to export Artboards as well as Layers with seperate scripts. Please download the latest version from GitHub**
I have recently been working on Android icons in Adobe Illustrator and quickly worked out manually exporting to mdpi, hdpi, xhdpi and xxhdpi is a lengthy process. Needless to say I wanted to remove this pain. Step in scripts to the rescue. After discovering Articmill’s script for iOS I decided to jump in and make my own for Android. I currently have a set of 23 icons which is exported to 92 PNG’s with one click!
What it does
- Exports Illustrator layers to mdpi, hdpi, xhdpi and xxhdpi PNG’s for Android
- Creates drawable-mdpi, drawable-hdpi, drawable-xhdpi and drawable-xxhdpi folders ready to copy/paste into your Android project
- Only exports layers with ‘$’ special char so you can keep working layers in your document
- Only exports unlocked layers so you can pick and choose what gets exported each time you run the script
View on GitHubDownload ZIP from GitHub
How to use it
Install
Copy/paste the downloaded ExportAndroidResPNGs.jsx into your presets folder. On Windows and using Adobe Illustrator CC (64bit) the path is below. You will need to find the equivalent on your OS and Illustrator version.
C:\Program Files\Adobe\Adobe Illustrator CC (64 Bit)\Presets\en_US\Scripts
You can also use the File > Scripts > Other Script… menu to run it from any location. Great if you don’t have admin rights!
Artboard setup
Your file should be set to the mdpi pixel dimensions (More info). In Android everything scales off this. For example, if you are making Actionbar icons then set your Illustrator Artboard to 32×32 pixels. The script will then take care of scaling up to 48×48, 64×64 and 96×96 to match the higher dpi images required. Please also note that this script will work for any Android image so long as you stick to the baseline mdpi pixel dimensions.
Layer setup
Setup your layers like in the screenshot below. Only unlocked layers with the ‘$’ special character will be exported.
Run the script
Run File > Scripts > ExportAndroidResPNGs from the menu. This will now start the script and you will layers being turned off and on as it goes down the layer tree. Once finished all layers will not be visible. The resolution folders are saved in the same folder as the AI file like below.
And in each folder you will have the saved PNG’s.
Done!
Hopefully this script helps you out as much as it has for me. Manually exporting PNG’s to different resolutions for Android should now be a thing of the past.
I am etremely impressed with yojr writing skills as werll aas
with the layout on your weblog. Is this a paid theme or did you modify it yourself?Either way keep up tthe nice quality
writing, it is rare to see a nice blog like this one
today.
Murdoch,
Just discovered your script. Awesome stuff. Is it possible to update this so I can use group names or sublayers to keep top-level chaos in the layer panel down?
Hi Asher
Glad you like the script.
I guess it’s possible but it might make the set up harder. It would need an identifier to know you want to go into sublayers and then the same naming convention on each sublayer that needs to be exported. And then I guess it’s a question of whether Illustrator lets you export sublayers or not. It’s a pity Illustrator doesn’t have folders like Photoshop to keep things tidy.
I will give it a try and see how it goes!
Hi Murdoch,
This is the best multi layer exporter script for mobile I’ve found so far, great job !!
Because I’m exporting the layers directly from the UI layout, instead of separating each asset on it’s own artboard, the exported images all have the size of the mobile screen. Is it possible to make it so the exporter crops the artwork to the layer content bounds ?
Never mind, just found it ! I only had to set exportOptions.artBoardClipping to “false”
I found that when exporting an icon, the rectangle that defines the icon area must have a fill color with 0% opacity. If it has no fill, the exporter will ignore it and the icon will end up being the size of the bound of the other filled shapes in the layer.
I also found that if the exported layer has a symbol, the exporter creates a slightly blurred image on the symbol. I guess it’s an Illustrator bug. So for pixel perfection, symbols must be expanded to normal paths before exporting the layers.
Again, thanks for the script !
Hi Joao,
Glad you like it and found it useful
Yeah that’s the problem with trying to export from a layout. you need to set a bounds shape for each icon anyway. Otherwise it will crop as illustrator sees fit! As you can see I get around this by creating my document to size and exporting from that. Then I never have to worry about the size being wrong. Glad you found the option you needed. I have the same problem with Photoshop generate function. It takes the bounds of the smart object, not the canvas, nightmare!
Cheers!
I was noticing that the icon was not being saved as a single PNG and instead multiple PNGs. This went away after creating a new file and trying again. The problem ended up being that, somehow, I introduced slices into my icon and hence the output wasn’t as expected. Now that I know why, I can see it as a useful feature of the tool. Just a heads up to people who are noticing this “unpredictable” behavior.
Hi Chris
Great tip! I have never noticed this behaviour as I don’t use slices in Illustrator. But I’m sure others will find it useful if they run into the same issue.
Cheers!
Wow! I just found your script by having the same idea to create a script like this, but too bad I don’t have the abilities to do it (I just started learning javascript to resolve this problem). Although, I modified it to suit my needs:
- added the tvdpi resolutions (tvdpi resolution as 130 percent)
- had to turn off artBoardClipping to export all my vectors as icons (if i didn’t had this turned off, it would only export the selected artboard, the rest of pngs will just show nothing in it)
I am using Illustrator CC2014.
Thanks a lot!
Glad you found it useful
Yes, if you’re not using layers then art board clipping false solves that. You are using multiple artboards right? I prefer to use layers so I can compare and visually centre icons. But I know some people still prefer artboards as per a few comments.
Cheers
Pingback: A Better Way To Design For Retina In Photoshop
Pingback: A Better Way To Design For Retina In Photoshop | DigitalMofo
Pingback: A Better Way To Design For Retina In Photoshop - Hawkart Design Services
Pingback: A Better Way To Design For Retina In Photoshop -
Pingback: A Better Way To Design For Retina In Photoshop | Web Technologies
Pingback: A Better Way To Design For Retina In Photoshop - Innovative Studio
Pingback: A Better Way To Design For Retina In Photoshop - Kreative Feed
Pingback: A Better Way To Design For Retina In Photoshop | Anthony O'Donoghue
Pingback: A Better Way To Design For Retina In Photoshop | Econeve Design Agency
Pingback: A Better Way To Design For Retina In Photoshop | Webammer
Pingback: A Better Way To Design For Retina In Photoshop | ShoutYourSite
Pingback: A Better Way To Design For Retina In Photoshop | The Web Geek
Pingback: A Better Way To Design For Retina In Photoshop | Premier Web Development
Pingback: A Better Way To Design For Retina In Photoshop - InfoLogs
Pingback: A Better Way To Design For Retina In Photoshop | Website Design Noosa
Pingback: A Better Way To Design For Retina In Photoshop | endlessness
Pingback: A Better Way To Design For Retina In Photoshop - American Fido
Pingback: A Better Way To Design For Retina In Photoshop | Top Tech Crush
Pingback: A Better Way To Design For Retina In Photoshop | Kyle W Krenik
Pingback: A Better Way To Design For Retina In Photoshop - Daniele Milana
Pingback: A Better Way To Design For Retina In Photoshop | WEB DESIGN
Pingback: A Better Way To Design For Retina In Photoshop | Isidore Magazine
Pingback: A Better Way To Design For Retina In Photoshop | MARTIN SKJÆRUP NIELSEN
Pingback: A Better Way To Design For Retina In Photoshop | PHOTO
Pingback: A Better Way To Design For Retina In Photoshop | UX ARC
Pingback: A Better Way To Design For Retina In Photoshop | Articles in IT and more
Pingback: Webmasters GalleryA Better Way To Design For Retina In Photoshop | Webmasters Gallery
Pingback: A Better Way To Design For Retina In Photoshop | Eyegaze
Pingback: A Better Way To Design For Retina In Photoshop | Designer News
Pingback: A Better Way To Design For Retina In Photoshop - Webnesday
This was really helpful. Thanks very much.
I noticed that whenever the script finishes running . .when I return to my .ai file, the visibility is switched off . . just showing me a blank canvas. This is not a huge problem as I can just switch it back on . . but it gets a but tedious after the 100th time or so : )
Is there a reason it does this or did you know it does this?
Anyway, thanks again. You saved me a bunch of time and aggravation.
Hi Michael
Yeah unfortunately this is how the script works. It turns off all layers and then turns on a layer, exports and repeats through the stack for each layer it finds with the special character. So at the end you are left with all the layers turned off.
It would be possible to store an array with the “before” script layer visibility and then remedy after the script has run. I may look into this when I have some spare time!
Hey Murdoch,
This is a super useful script! Saves me countless hours of time. I’ve edited the script a bit to now include the xxxhdpi resolution, and put everything under a parent “Output” folder.
https://github.com/berotburns/ai-export-android-res-pngs
Thanks!
Hi Justin
Glad it was useful for you, I found it saved me plenty of time also! Last time I used it I didn’t need xxxhdpi so should add that in also.
Cheers
Thanks for the script, i will try it now
Hi Murdoch,
Thank you so much for this script. I am running into a problem however with the exported files. They are all blank or look the same and there are no exported assets on them.
I am following all the steps mentioned above. Not sure what the issue is? I am using a PC and have the most updated version of Illustrator.
Hi Maria
I’ve just downloaded fresh from Github and used Illustrator CC 2015.2.0 on Windows. It exported perfectly. Have you saved the document and labelled the layers you wanted exported with a “$” character? Does it create the folders “drawable-mdpi” etc?
Hi Murdoch,
I am using the most latest updated version form Adobe. I am still having the problem when exporting multiple layers. There is also an issue with your XXXhdpi script. it is multiplied by a factor of 10, when in fact it should be 4. I was testing the export for XXXhdpi on my S6 and your calculation is off for that one.
Please look into it.
Thank you
Maria
Hi Murdoch Carpenter
Same problem happens me also.If I am choosing multiple layers only one layer is got exported rest of showing blank..Pls help
Hi Vivek, what version of Illustrator are you using? Are you using the latest version from github?
Hi Murdoch, thanks for your awesome scripts, however… how can in my illustrator the file seems blank? (i mean all the .png file exported separately but the icon is disappeared/leave only blank .png’s)
Thanks to Maria helping me find the issue some of you have been experiencing. Originally this script was only written for Layers. Though I have now made a new script that exports Artboards. So we both win
Please go to github and get the latest version:
https://github.com/murd/ai-export-android-res-pngs