18

I have a PSD file with a 96 px × 96 px resolution. Now I want to save this as four PNG files with different resolutions such as 36 px × 36 px, 48 px × 48 px, 72 px × 72 px and 96 px × 96px. Instead of adjusting the image size manually four times and saving as option, can I automate this somehow?

11 Answers 11

13

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.

  • 3
    I am amazed. I had never actually noticed the re-size option in Save for Web :o – Yisela May 7 '13 at 1:36
  • and you can also use Alt+Ctrl+Shift+S to launch Save for Web dialog in CS6. – Muhammad Saqib Jul 25 '16 at 10:49
5

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.

4

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.

3

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.

1

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.

1

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

1

Try this http://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.

1

I believe this is exactly what you want.

https://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.

0

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: https://itunes.apple.com/us/app/shipit!/id492043869

  • This app is no longer available in the Canadian and the United States iTunes store... or AppStore... – PatTheBeast Sep 23 '17 at 0:10
0

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 "$1" -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.

-1

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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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