Esporta in batch i livelli di Photoshop in singoli file PNG

Sono uno sviluppatore web e competente in Fireworks, ma non così tanto in Photoshop.

Ho appena ricevuto un file PSD a più livelli da trasformare in una pagina Web. Qualcuno può dirmi il modo più semplice per esportare tutti i livelli in singoli file PNG?

Ci sono molti livelli e farlo manualmente sembra sbagliato.

Ho visto questo, ma sembra che ci dovrebbe essere funzionalità nativa per questo in PS.

Ho accesso a Photoshop CS4. Qualche suggerimento apprezzato.

Metodo 1: lo script integrato di Adobe

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

Ecco alcune domande correlate ...

Esportazione di singoli livelli in Photoshop, mantenendo le loro dimensioni

Esporta livelli in file esporta solo 4 file png da 100 livelli

Metodo 2: Script personalizzato

Ho trascorso un po 'di tempo e ho scritto il mio file di script per automatizzare questo processo. Questo processo è molto più veloce dello script incorporato sopra menzionato.

Scarica subito lo script su Github!

Informazioni aggiuntive

Ho eseguito questo script su un file di 450 MB da 100 strati in meno di 60 secondi. L'esecuzione dello script integrato sullo stesso file richiede circa 30 minuti.

Durante i test con i gruppi di livelli nido, ho scoperto che il mio script viene eseguito in circa 90 secondi mentre lo script incorporato impiega circa 27 minuti (e in realtà lo esporta in modo errato).

Si noti che questi risultati variano a seconda della complessità dei file, dell'hardware del computer e della versione di Photoshop. Ulteriori dati sulle prestazioni .

Questa sceneggiatura ha (negli ultimi anni) ottenuto vari miglioramenti da vari collaboratori. In caso di problemi con lo script. È possibile archiviare problemi con lo script qui .

Si prega di leggere il read-me per ulteriori informazioni aggiuntive.

Dichiarazione di non responsabilità: questo script non è associato ad Adobe in alcun modo. Si prega di utilizzare lo script a proprio rischio - effettuare sempre un backup del proprio PSD prima dell'uso. Non sono responsabile per eventuali dati danneggiati o persi.

Ho aggiornato la soluzione di Johannes di un anno fa con molti miglioramenti. In modo significativo:

• I gruppi di livelli ora sono gestiti correttamente in modo che tutti i livelli vengano scritti.
• I nomi dei file vengono incrementati automaticamente per evitare collisioni (ciò accade quando più di un livello ha lo stesso nome).
• Le prestazioni sono aumentate. Lo script può salvare 500 semplici livelli in pochi minuti.

Oltre a questo, il codice è stato ripulito. Ad esempio, le variabili globali sono state integrate in un singolo array.

Nota che il messaggio popup iniziale ti dirà solo il numero di livelli di livello superiore . Questo per evitare il degrado delle prestazioni. Non riesco davvero a immaginare un caso in cui non sai nulla del file con cui hai a che fare, quindi questo non dovrebbe essere un gran compromesso.

Prendi la sceneggiatura qui . Grazie all'autore precedente per aver aperto la strada.

IL CREDITO VA A JOHANNES PER CONTRIBUIRE IL FILE. GRAZIE MILLE!

Ho aggiunto una funzione che mi ha aiutato a passare attraverso il mio file di livello 2448 in circa 3 ore.

Ecco il link al file modificato Scarica qui

Ho aggiornato lo script per utilizzare il BackgroundLayer principale del documento. In modo che ogni jpg che esporta sia compilato con esso.

Sarebbe bello se qualcuno aggiungesse tag ai livelli per renderli livelli Master invece che il BackgroundLayer predefinito ;-)

sceneggiatura completa:

    // 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();