1

I am designing an app for Android and as you may know that Android uses 6 different density buckets from LDPI to XXXHDPI.

Is there a way to save multiple outputs of different sizes from one design using either Photoshop, Illustrator, or another software?

If not will I have to resize it 6 times or is there an easy way?

Improve this question
2
  • 1
    My company provided me the new CC update and Photoshop CC has an 'Extract Asset' option, which can be used to output assets at multiple sizes. If you are not using CC then you can use scripts like @AlanGilbertson suggested.
    – Rahul A.kumar
    Commented Jun 5, 2015 at 1:57
  • If one of the below answers did answer your question please mark it as the accepted answer. If not, please make an edit with any additional information.
    – user9447
    Commented Apr 7, 2016 at 21:01

5 Answers 5

Reset to default
1

You can use this script to output all the icons in one shot. It was written for CS6, but should work fine in CC or CC 2014.

Another simple approach would be to record the process as an Action, so you can replay on any image.

Alternatively, with a bit of careful finessing you could use the Generator in CC 2014 to create them.

Improve this answer
1

Since you are using the image for an app, I assume you want to save the image in one of the web supported raster graphic formats (JPG, PNG or GIF).

If that is the case and you are using either "Save for Web" either in AI or PS, then you do the re-sizing directly on the "Save for Web" window by plugging the desired dimensions.

  1. Select file->Save for Web from the menu.
  2. The "Save for Web" window appears. Select the desired file format.
  3. Enter either the desired dimensions or a percentage. For example, if you want to save the image at twice its size, enter "200%".
  4. VERY IMPORTANT: Click somewhere else to make sure the window accepts this new dimensions. For example, if you were entering the Width, click on the Percentage box. Take a look at the preview and confirm the image has been re-sized. If you don't do this and you just click Save before the image has been re-sized, then the window saves the image at its current dimensions.
  5. Click Save.

enter image description here

Note:

  • This method is not 100% good if your image is raster (as in "not vector") and you want to save it at a larger size. In that case I would suggest to try it but if the result is not good then to do the re-sizing in PS more carefully, selecting the proper re-sampling algorithm based on the image.
  • You have to repeat these steps for every size you need, but at least your art stays at the original dimensions. Only the output gets re-sized.
  • If you are using always the same dimensions, then probably this method can be combined with "Actions" to save time.
Improve this answer
1

Here is a script that exports all artboards to Android and iOS resolutions: https://github.com/austynmahoney/mobile-export-scripts-illustrator

The name of the images will correspond to the name of the artboard. If the artboard is named app-icon, and you select all the available options, the script will export the artboard into the following directory structure.

Selected Directory
├───Android
│   ├───drawable-mdpi
│   │   └───app-icon.png
│   ├───drawable-hdpi
│   │   └───app-icon.png
│   ├───drawable-xhdpi
│   │   └───app-icon.png
│   ├───drawable-xxhdpi
│   │   └───app-icon.png
│   ├───drawable-xxxhdpi
│   │   └───app-icon.png
└───iOS
    ├───app-icon.png
    ├───[email protected]
    └───[email protected]

The baseline image used for Android is xhdpi, for iOS it is @2x. The script will scale up and down from these sizes.

Improve this answer
0

Adobe introduced a new feature in CC called Extract Assets. I haven't played with it yet, but it looks like it has options for exporting at multiple resolutions.

In the past I've used an app called Slicy (Mac only I'm afraid) which let's you output 1x and 2x resolutions. I still had to create a 1.5x version in the same file (which Slicy would output as a 3x version), so there was some duplication, but better than doing it all manually.

If you're doing 9-patch you'll find the guides are a bit trickier, since they shave to be 1px wide regardless of the resolution. I'd set them to be 1px at the lowest resolution, (At the time I was only going as low as MDPI). My guides would then be by thicker at the higher resolutions (2px at HDPI etc.) I'd pass these PNGs through a bash script to trim off the extra pixels using the mogrify shave command. Finally I'd automate it using Hazel (Mac app again) which would watch my folder for changes, and apply the script to any new PNGs. It shouldn't be too hard to find an equivilent solution for watching folders on other platforms.

Improve this answer
-2

In photoshop you can do it by using LAYER COMP and in Illustrator in by Using number of artwboards

Improve this answer
1
  • Hi mahak, welcome to GDSE and thanks for your answer. Could you please tell a bit more? Like, where to find these options and how to use them to serve the asker's needs? If you have any questions, please see the help center or ping one of us in chat once your reputation is sufficient (20). Keep contributing and enjoy the site!
    – Vincent
    Commented Nov 18, 2014 at 10:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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