: How to output multiple image sizes from one design? 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

@Marchetta832

Here is a script that exports all artboards to Android and iOS resolutions: 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
├───app-icon@2x.png
└───app-icon@3x.png



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

Vote Up Vote Down

@Alves566

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.


Select file->Save for Web from the menu.
The "Save for Web" window appears. Select the desired file format.
Enter either the desired dimensions or a percentage. For example, if you want to save the image at twice its size, enter "200%".
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.
Click Save.




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.

Vote Up Vote Down

@RJPawlick971

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.

Vote Up Vote Down

@Karen819

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

Vote Up Vote Down

@Tiffany317

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.

Vote Up Vote Down