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?
-
Please try the answer @NickBeus gave, and give him the green checkmark if it works for you. This answer helped me so much. I can't tell you how many times I've opened the "Save For Web" dialog just to change the output size ONE MORE TIME. The "Image Assets" window lets you add all the sizes & filename suffixes you need and just export them all.– rgb_lifeDec 3, 2019 at 3:09
12 Answers
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.
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.
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.
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.
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.
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.
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.
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).
-
This answer is SOOO good. First you have to go to "FILE > GENERATE" and check "Image Assets". Then go to "FILE > EXPORT > EXPORT AS" and you'll get the best menu I've ever used in Photoshop, where you can add sizes and give them each a custom suffix! This is in Adobe Photoshop CC, of course. My CS4 died with a Mac OSX update, and so I have no idea about any version aside from the one I'm using now.– rgb_lifeDec 3, 2019 at 3:05
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.
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%.*}"
ext="${2:-png}"
while read -p 'width: ' -r && [ "$REPLY" -gt 0 ]; do
convert "$1" -resize "$REPLY"x "$oot-$REPLY.$ext"
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 any image:
$ 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. You can also change the output type by adding its extension as a second argument:
$ multi-resize.sh IMG_3456.JPG jpg
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... Sep 23, 2017 at 0:10
I tried using the 'Export as' dialogue. Can't believe there is a way to save things out of Photoshop I hadn't tried yet? Well it fails on two counts. First, the ratios are not very helpful when trying to hit certain targets. For example Album art template in Photoshop is 3000x3000. This is great for Apple Music. But Bandcamp wants 1400x1400. Some other services want 150x150 300x300, 500x500 and 1000x1000. Try hitting those numbers from 3kx3k without going under or over. A task which is made more difficult because Photoshop will not let you input ratios that use more than 2 decimal places. And even those it rounds up. Worst, you cannot save your settings here! So I have an established workflow where I am always going to need to hit 5 sizes of the same image every time. I am going to have to write those ratios and suffixes down on a post it and stick it to my monitor so I can get it right. Adobe won't save those values as a preset the way I can in other dialogues.
The better solution is just to record an Action where I save a 3000x3000 document to each size using Save for Web, or image resize and save for web.