Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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

share|improve this question
add comment

9 Answers

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

Try this script: http://www.appsbynight.com/2012/09/17/create-every-ios-icon-for-your-app-with-a-photoshop-script/

It's designed to create Apple icons, but the developer provides the source. You could easily modify it to fit your needs.

Here's the direct link to GitHub: https://gist.github.com/appsbynight/3681050

This is an ExtendScript file. Extendscript is a variant of JavaScript that allows you to manipulate Adobe applications. In the case of this script, it essentially runs the Save for Web command for each item in the icons list.

For your needs, you can simply edit the icons variable like so:

var icons = [
{"name": "Icon_36", "size":36},
{"name": "Icon_48", "size":48},
{"name": "Icon_72", "size":72},
{"name": "Icon_96", "size":96},
];

Then place the file in the Scripts directory within your installation of Photoshop, e.g Applications/Adobe Photoshop {version}/Presets/Scripts (Mac)

OR

C:\Program Files\Adobe\Adobe Photoshop {version}\Presets\Scripts (Windows)

Restart Photoshop after adding the file.

Run the script from File > Scripts within Photoshop. The Script file name will appear in the list (minus the .jsx extension).

share|improve this answer
    
Even though the link may help the OP do you mind posting a little bit about the link you provided? We try to stay clear of just posting links in case the site goes down or is taken down in the future your answer will become useless. –  Gramps Oct 8 '13 at 19:38
    
The code is a bit long to post here, hopefully the edits above help to clarify. –  Justin Putney Dec 2 '13 at 21:26
add comment

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

You can read about Generator here:
http://blogs.adobe.com/photoshopdotcom/2013/09/introducing-adobe-generator-for-photoshop-cc.html

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.

share|improve this answer
add comment

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

If you save with the Save for Web dialog 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.

share|improve this answer
2  
I am amazed. I had never actually noticed the re-size option in Save for Web :o –  Yisela May 7 '13 at 1:36
add comment

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

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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