: How to automate exporting multiple PNGs with different sizes from Photoshop? I have a PSD file with a 96 px × 96 px resolution. Now I want to save this as four PNG files with different

@Rambettina927

I found nothing simple in Adobe land to do this for me. If you have or are willing to install ImageMagick, and you're comfortable with the command line, then the convert CLI tool is great.

I wrote this shell script which accepts widths and resizes an image until you hit enter without a number:

#!/bin/sh

oot=${1%.*}
while read -p 'width: ' -r && [ "$REPLY" != '' ]; do
convert "" -resize "$REPLY"x "$oot-$REPLY.png"
done


I named mine multi-resize.sh and put it in ~/bin/ so it's available everywhere.

You'd then execute it in a shell like so on a PNG of the original resolution:

$ multi-resize.sh foo.png
width: 96
width: 72
width: 48
width: 36
width:
$


You'll have foo-72.png, etc. in the same directory.

Vote Up Vote Down

@Cody3331749

I believe this is exactly what you want.
github.com/austynmahoney/mobile-export-scripts-illustrator
If you are comfortable opening each .psd in Illustrator you can output to multiple sizes easily by tweaking the scaling factors in the .jsx file.


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

@Chiappetta793

There is a new option in Photoschop CC 2014. It's called "Generate Assets" it's under "file" and you can choose 0.25x, 0.5x, 2x, 3x and you can configure self the dimensions. It will export your layers to any fileformat and in different dimensions (if you want to).

Vote Up Vote Down

@Martha945

Try this blog.mready.net/2013/07/dg-photoshop-action-dpi-resizing/.
It's a plugin which can be used for I think your purpose with the resolutions that you say. I use it for Android icons.

Vote Up Vote Down

@Heady304

As Marc mentioned above, you're probably better off scaling vectors in the document and using sprite sheets.

The one thing you should avoid is scaling during Save for Web as Maxism suggests. I wrote a post comparing the results of different techniques and Save for Web consistently produced assets with artifacts and half-pixels: Scaling down and exporting assets in Photoshop.

I also made a Photoshop script that automates the process of exporting those assets: EXPORT TO ANDROID PHOTOSHOP SCRIPT.

Hope this helps.

Vote Up Vote Down

@Odierno310

A nice Mac Program called "Ship it" does exactly what you're asking: Export an image into Multiple Sizes/Formats. I've used it. Here's the link on the Mac App Store: itunes.apple.com/us/app/shipit!/id492043869

Vote Up Vote Down

@Nimeshi706

With Photoshop CC, there is now a feature called Photoshop Generator which is designed to create multiple images

You can read about Generator here.

An excerpt:


Generator allows you to create image assets in real time as you work, eliminating the tedious steps of copying, slicing and exporting each layer manually, and saving you hours of time. Simply add a file extension to the name of your layer or layer group, and Photoshop will automatically create a JPG, PNG or GIF from the contents of that layer. If you make a change to that layer, the file is immediately updated. This means that you now have a folder of images that are always up-to-date with your Photoshop design.

Vote Up Vote Down

@Cofer715

Not a complete solution, but this might help someone who's come here from Google.

If you save with File → Save for Web you can re-size during the saving process, the options are on the right-hand side under Image Size.

I do this quite often when I need a couple of different sizes for an image, although as the other responses have noted, if you are designing icons, use vectors, it’ll make your life so much easier.

Vote Up Vote Down

@Ravi4787994

Create your icons in mdpi and use this Photoshop Action to export it in ldpi, hdpi and xhdpi. From mdpi to xhdpi it works good, but ldpi and hdpi looks a bit blurred.

Link to the Article
Download the Photoshop Action

Vote Up Vote Down

@Rambettina927

There's no good way to go from 96 down to 36 automatically. Even at 48 you're going to see your design start to fall apart.

The only benefit would be if you have a lot of icons to export in this way and you plan to come back and clean them up. You can record it as an action or use jsx, if you're so inclined.

For your particular design, I would experiment with going down in steps or exporting each version from the original 96px version. Usually steps are best but on some designs it can introduce progressive amounts of distortion.

Vote Up Vote Down

@Carla748

How many times do you need to export the icon? If it's just the one icon, your best option is probably just to draw everything using vectors and layer styles, resize the document, make any adjustments required and save the PNG (optionally keeping the PSD for future exporting).

If you need to repeat the process many times, I'd recommend setting everything up as a sprite sheet with slices.

Here's something I wrote on the topic (includes many exporting techniques): Exporting from Photoshop.

When designing icons, you often need to manually tweak the smaller sizes individually — might be worth keeping that in mind as you build all the sizes.

Vote Up Vote Down