Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I am a web dev and competent in Fireworks but not so much in Photoshop.

I have just received a layered PSD file to turn into a web page. Can anyone tell me the easiest way to export all layers to individual png files?

There are lots of layers and doing this manually seems wrong.

I have seen this but it does seem there should be native functionality for this in PS.

I have access to Photoshop CS4. Any pointers appreciated.

share|improve this question

migrated from photo.stackexchange.com May 10 '11 at 18:18

This question came from our site for professional, enthusiast and amateur photographers.

    
Is there any way to avoid having the .pngs turned into Index mode? I need them RGB. I could probably just create a droplet for it, but didn't know if there were an easier way... Thanks for the tip though, this is great! –  user2995 Nov 25 '11 at 23:17

4 Answers 4

up vote 66 down vote accepted

Method 1: The Built-In Script from Adobe

File >> Scripts >> Export layers to files...

enter image description here

Here are some related questions...

Exporting individual layers in Photoshop, keeping their sizes

Export Layers to Files exports only 4 png files from 100 layers


Method 2: Custom Script

I spent some time and wrote my own script file to automate this process. This process is much faster than the built-in script mentioned above.

Get the script now on Github!

Special thanks to escalation746 for doing some clean-up work on my script (it was really bad).

Performance

I ran this script on a 100 layer, 450MB file in under 60 seconds. Running the built-in script on the same file takes me about 30 minutes.

When testing with nest layer groups, I found that my script runs in about 90 seconds whereas the built-in script takes about 27 minutes (and actually exports it wrong).

Please note that these results will vary depending on the complexities of the files as well as the hardware on your computer. It also wouldn't surprise me if it varied between versions of Photoshop.

Please let me know if you run into any issues with the script. My contact info may be found here.

Instructions for use: File -> Scripts -> Browse... (then find the script).

Here are screenshots to help if you need additional help.

IMPORTANT: The images will automatically be saved in whatever directory your multi-layer file is contained in! Feel free to make any adjustments to the script as needed.

Disclaimer: Please use script at your own risk. I have not tested it thoroughly enough to guarantee that it is in fact bulletproof.

share|improve this answer
    
Thank you for your answer and this does seem to work on simpler files...but... the more experience I have of this the more laggy it seems. The PSD files I get arent massive maybe 100 layers tops but running the above technique seems to take hours (literally) and hangs and errors quite a lot. My PC is half decent but this process seems to run it into the ground - am now on CS5 but this has become unworkable any more suggetions please? –  user256888 Aug 29 '12 at 22:03
    
I wrote my own script that does this process much faster. Let me know how it goes! Cheers. –  Johannes Sep 1 '12 at 3:18
    
+1 For coming back and providing the script - it sounds great. One thing when I run it on a psd with multiple layers it always throws an alert saying ".....this document contains 1 layer continue?" but it actually contains many more layers? I think I might be missing something as mentioned I'm not a PS expert! Thanks –  user256888 Sep 4 '12 at 10:41
    
That's weird. What version of Photoshop are you using? Could you give me more information on the types of layers they are (regular raster layers, text, masks, etc.)? I can't seem to replicate your problem. –  Johannes Sep 5 '12 at 2:11
    
It looks like your script does not handle layer sets, so it will only output the layers that are direct children of the document. –  nEx.Software Nov 16 '12 at 15:52

I updated the script to use the core BackgroundLayer of the doc. So that each jpg that exports is compiled with it.

Would be great if someone added tagging to layers to make them Master layers instead of the default BackgroundLayer ;-)

full script:

    // NAME: 
//  SaveLayers

// DESCRIPTION: 
//  Saves each layer in the active document to a PNG or JPG file named after the layer. 
//  These files will be created in the current document folder (same as working PSD).

// REQUIRES: 
//  Adobe Photoshop CS2 or higher

//Most current version always available at: https://github.com/jwa107/Photoshop-Export-Layers-as-Images

// enable double-clicking from Finder/Explorer (CS2 and higher)
#target photoshop
app.bringToFront();

function main() {
    // two quick checks
    if(!okDocument()) {
        alert("Document must be saved and be a layered PSD.");
        return; 
    }

    var len = activeDocument.layers.length;
    var ok = confirm("Note: All layers will be saved in same directory as your PSD.\nThis document contains " + len + " top level layers.\nBe aware that large numbers of layers may take some time!\nContinue?");
    if(!ok) return

    // user preferences
    prefs = new Object();
    prefs.fileType = "";
    prefs.fileQuality = 12;
    prefs.filePath = app.activeDocument.path;
    prefs.count = 0;

    //instantiate dialogue
    Dialog();
    hideLayers(activeDocument);
    saveLayers(activeDocument);
    toggleVisibility(activeDocument);
    alert("Saved " + prefs.count + " files.");
}

function hideLayers(ref) {
    var len = ref.layers.length;
    for (var i = 0; i < len; i++) {
        var layer = ref.layers[i];
        if (layer.typename == 'LayerSet') hideLayers(layer);
        else layer.visible = false;
    }
}

function toggleVisibility(ref) {
    var len = ref.layers.length;
    for (var i = 0; i < len; i++) { 
        layer = ref.layers[i];
        layer.visible = !layer.visible;
    }
}

function saveLayers(ref) {
    var len = ref.layers.length;
    // rename layers top to bottom
    for (var i = 0; i < len; i++) {
        var layer = ref.layers[i];
        if (layer.typename == 'LayerSet') {
            // recurse if current layer is a group
            hideLayers(layer);
            saveLayers(layer);
        } else {
            // otherwise make sure the layer is visible and save it
            layer.visible = true;

    // NEW MASTER BACKGROUND LAYER -- comment this line if u dont want to see that layer compiled in the jpgs
       activeDocument.backgroundLayer.visible = true;

    saveImage(layer.name);

     layer.visible = false;
        }
    }
}

function saveImage(layerName) {
    var fileName = layerName.replace(/[\\\*\/\?:"\|<> ]/g,''); 
    if(fileName.length ==0) fileName = "autoname";
    var handle = getUniqueName(prefs.filePath + "/" + fileName);
    prefs.count++;

    if(prefs.fileType=="PNG" && prefs.fileQuality=="8") {
        SavePNG8(handle); 
    } else if (prefs.fileType=="PNG" && prefs.fileQuality=="24") {
        SavePNG24(handle);
    } else {
        SaveJPEG(handle); 
    }
}

function getUniqueName(fileroot) { 
    // form a full file name
    // if the file name exists, a numeric suffix will be added to disambiguate

    var filename = fileroot;
    for (var i=1; i<100; i++) {
        var handle = File(filename + "." + prefs.fileType); 
        if(handle.exists) {
            filename = fileroot + "-" + padder(i, 3);
        } else {
            return handle; 
        }
    }
} 

function padder(input, padLength) {
    // pad the input with zeroes up to indicated length
    var result = (new Array(padLength + 1 - input.toString().length)).join('0') + input;
    return result;
}

function SavePNG8(saveFile) { 
    exportOptionsSaveForWeb = new ExportOptionsSaveForWeb();
    exportOptionsSaveForWeb.format = SaveDocumentType.PNG
    exportOptionsSaveForWeb.dither = Dither.NONE;



    activeDocument.exportDocument( saveFile, ExportType.SAVEFORWEB, exportOptionsSaveForWeb );
} 

function SavePNG24(saveFile) { 
    pngSaveOptions = new PNGSaveOptions(); 
    activeDocument.saveAs(saveFile, pngSaveOptions, true, Extension.LOWERCASE); 
} 

function SaveJPEG(saveFile) { 
    jpegSaveOptions = new JPEGSaveOptions(); 
    jpegSaveOptions.quality = prefs.fileQuality;
   activeDocument.saveAs(saveFile, jpegSaveOptions, true, Extension.LOWERCASE); 
} 

function Dialog() {
    // build dialogue
    var dlg = new Window ('dialog', 'Select Type'); 
    dlg.saver = dlg.add("dropdownlist", undefined, ""); 
    dlg.quality = dlg.add("dropdownlist", undefined, "");
    dlg.pngtype = dlg.add("dropdownlist", undefined, "");


    // file type
    var saveOpt = [];
    saveOpt[0] = "PNG"; 
    saveOpt[1] = "JPG"; 
    for (var i=0, len=saveOpt.length; i<len; i++) {
        dlg.saver.add ("item", "Save as " + saveOpt[i]);
    }; 

    // trigger function
    dlg.saver.onChange = function() {
        prefs.fileType = saveOpt[parseInt(this.selection)]; 
        // decide whether to show JPG or PNG options
        if(prefs.fileType==saveOpt[1]){
            dlg.quality.show();
            dlg.pngtype.hide();
        } else {
            dlg.quality.hide();
            dlg.pngtype.show();
        }
    }; 

    // jpg quality
    var qualityOpt = [];
    for(var i=12; i>=1; i--) {
        qualityOpt[i] = i;
        dlg.quality.add ('item', "" + i);
    }; 

    // png type
    var pngtypeOpt = [];
    pngtypeOpt[0]=8;
    pngtypeOpt[1]=24;
    dlg.pngtype.add ('item', ""+ 8 );
    dlg.pngtype.add ('item', "" + 24);

    // trigger functions
    dlg.quality.onChange = function() {
        prefs.fileQuality = qualityOpt[12-parseInt(this.selection)];
    };
    dlg.pngtype.onChange = function() {
       prefs.fileQuality = pngtypeOpt[parseInt(this.selection)]; 
    };

    // remainder of UI
    var uiButtonRun = "Continue"; 

    dlg.btnRun = dlg.add("button", undefined, uiButtonRun ); 
    dlg.btnRun.onClick = function() {   
        this.parent.close(0); 
    }; 

    dlg.orientation = 'column'; 

    dlg.saver.selection = dlg.saver.items[0] ;
    dlg.quality.selection = dlg.quality.items[0] ;
    dlg.center(); 
    dlg.show();
}

function okDocument() {
     // check that we have a valid document

    if (!documents.length) return false;

    var thisDoc = app.activeDocument; 
    var fileExt = decodeURI(thisDoc.name).replace(/^.*\./,''); 
    return fileExt.toLowerCase() == 'psd'
}

function wrapper() {
    function showError(err) {
        alert(err + ': on line ' + err.line, 'Script Error', true);
    }

    try {
        // suspend history for CS3 or higher
        if (parseInt(version, 10) >= 10) {
            activeDocument.suspendHistory('Save Layers', 'main()');
        } else {
            main();
        }
    } catch(e) {
        // report errors unless the user cancelled
        if (e.number != 8007) showError(e);
    }
}

wrapper();
share|improve this answer

I have updated Johannes' solution of a year ago with many improvements. Significantly:

  • Layer groups are now properly handled so that all layers get written.
  • File names are auto-incremented to prevent collisions (this happens when more than one layer has the same name).
  • Performance is increased. The script can save 500 simple layers in a few minutes.

Besides this, the code has been cleaned up. For example, global variables have been integrated into a single array.

Note that the initial popup message will only tell you the number of top level layers. This is to avoid performance degradation. I can't really imagine a case where you don't know anything about the file you are dealing with, so this should not be much of a compromise.

Grab the script here. Thanks to the previous author for leading the way.

share|improve this answer

CREDIT GOES TO JOHANNES FOR CONTRIBUTING THE FILE. THANK YOU SO MUCH!

I have added a function that helped me go through my 2448 layer file in about 3 hours.

Here is the link to the modified file Download Here

share|improve this answer
    
Glad to have helped. I assume the change is that you hide all other layers? –  Johannes Sep 2 '12 at 4:48
    
Yes cause with a big file like that it would take forever to manually hide all layers. For some reason when i tried your original script it would save the files with all the layers visible which would have a output png with all layers visible. Which was weird. So i added the function to hide all others layers except current one then save then hide it. –  Mike June Bug Captain Sep 2 '12 at 8:10
    
Oh my! I forgot to take into account transparency, you're right. I just have it turn off the top-most layer. I'm actually building a slightly more customizable script, and I'll add your transparency thing in. –  Johannes Sep 2 '12 at 9:21
    
+1 For broadening on the answer - thanks. –  user256888 Sep 4 '12 at 10:39

protected by Community Nov 1 '12 at 5:29

Thank you for your interest in this question. Because it has attracted low-quality answers, posting an answer now requires 10 reputation on this site.

Would you like to answer one of these unanswered questions instead?

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