Batch-Export von Photoshop-Ebenen in einzelne PNG-Dateien

Ich bin Webentwickler und kompetent in Fireworks, aber nicht so sehr in Photoshop.

Ich habe gerade eine mehrschichtige PSD-Datei erhalten, die in eine Webseite umgewandelt werden soll. Kann mir jemand sagen, wie ich am einfachsten alle Ebenen in einzelne PNG-Dateien exportieren kann?

Es gibt viele Ebenen und es scheint falsch zu sein, dies manuell zu tun.

Ich habe das gesehen , aber es scheint, dass es dafür eine native Funktionalität in PS geben sollte.

Ich habe Zugriff auf Photoshop CS4. Alle Hinweise geschätzt.

Gibt es eine Möglichkeit zu vermeiden, dass die .pngs in den Indexmodus versetzt werden? Ich brauche sie RGB. Ich könnte wahrscheinlich einfach ein Tröpfchen dafür erstellen, wusste aber nicht, ob es einen einfacheren Weg gibt ... Danke für den Tipp, das ist großartig!
Der kostenlose convertBefehl von Imagemagick könnte dafür verwendet werden (es fehlt möglicherweise die vollständige Abdeckung der PSD-Funktionen).

Antworten (4)

Methode 1: Das eingebaute Skript von Adobe

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

Geben Sie hier die Bildbeschreibung ein

Hier sind einige verwandte Fragen ...

Exportieren einzelner Ebenen in Photoshop unter Beibehaltung ihrer Größe

Ebenen in Dateien exportieren exportiert nur 4 PNG-Dateien aus 100 Ebenen


Methode 2: Benutzerdefiniertes Skript

Ich verbrachte einige Zeit damit, meine eigene Skriptdatei zu schreiben, um diesen Prozess zu automatisieren. Dieser Vorgang ist viel schneller als das oben erwähnte integrierte Skript.

Holen Sie sich das Skript jetzt auf Github!

zusätzliche Information

Ich habe dieses Skript auf einer Datei mit 100 Ebenen und 450 MB in weniger als 60 Sekunden ausgeführt. Das Ausführen des integrierten Skripts für dieselbe Datei dauert etwa 30 Minuten.

Beim Testen mit Nest-Layer-Gruppen habe ich festgestellt, dass mein Skript in etwa 90 Sekunden ausgeführt wird, während das integrierte Skript etwa 27 Minuten benötigt (und es tatsächlich falsch exportiert).

Bitte beachten Sie, dass diese Ergebnisse je nach Komplexität der Dateien sowie der Hardware auf Ihrem Computer und der Version von Photoshop variieren. Zusätzliche Leistungsdaten .

Dieses Skript hat (in den letzten Jahren) verschiedene Verbesserungen von verschiedenen Mitwirkenden erhalten. Wenn Sie Probleme mit dem Skript haben. Sie können Probleme mit dem Skript hier einreichen .

Bitte lesen Sie die Readme-Datei für zusätzliche, zusätzliche Informationen.

Haftungsausschluss: Dieses Skript ist in keiner Weise mit Adobe verbunden. Bitte verwenden Sie das Skript auf eigene Gefahr – erstellen Sie immer eine Sicherungskopie Ihrer PSD, bevor Sie sie verwenden. Ich bin nicht verantwortlich für beschädigte oder verlorene Daten.

@Lucian - Wenn Sie Photoshop CC verwenden, können Sie dies einfach tun, andernfalls ein Problem auf Github einreichen . Vielen Dank!
Johannes hat ein großartiges Skript für diese Frage erstellt und sollte zu Recht mehrmals eine positive Bewertung verdienen, aber bitte suchen Sie keine Unterstützung dafür in den Kommentaren. Wenn Sie ein Problem damit haben, suchen Sie bitte eine Lösung über das Repo, damit sie entsprechend nachverfolgt werden können.
Berichterstattung von 2018. Dieses Tool ist jetzt unterFile -> Export -> Layers to Files...
Falls jemand verwirrt ist, dies ist ein Photoshop-Skript und erfordert daher Photoshop. Ich dachte, es wäre ein Shell-Skript. :)
@Hanna das sind EPIC!! Gute Arbeit und danke!
Ich habe vielleicht eine nette Idee, füge es dem Exportmenü hinzu. Viel einfacher, das Skript zu erreichen
Hat mir Stunden Arbeit erspart, danke :).

Ich habe die Lösung von Johannes von vor einem Jahr mit vielen Verbesserungen aktualisiert. Bedeutend:

  • Ebenengruppen werden jetzt richtig behandelt, sodass alle Ebenen geschrieben werden.
  • Dateinamen werden automatisch erhöht, um Kollisionen zu vermeiden (dies passiert, wenn mehr als eine Ebene denselben Namen hat).
  • Die Leistung wird gesteigert. Das Skript kann 500 einfache Ebenen in wenigen Minuten speichern.

Außerdem wurde der Code bereinigt. Beispielsweise wurden globale Variablen in ein einzelnes Array integriert.

Beachten Sie, dass die anfängliche Popup-Meldung Ihnen nur die Anzahl der Ebenen der obersten Ebene mitteilt. Dies dient dazu, Leistungseinbußen zu vermeiden. Ich kann mir nicht wirklich einen Fall vorstellen, in dem Sie nichts über die Datei wissen, mit der Sie es zu tun haben, daher sollte dies kein großer Kompromiss sein.

Holen Sie sich das Skript hier . Danke an den vorherigen Autor für den Wegweiser.

Wirklich gut gemacht, dieses Skript zu pflegen. Es hat sehr gut funktioniert, einige Zeitrafferkorrekturen auf Tausenden von Ebenen zu exportieren :)

GUTSCHRIFT GEHT AN JOHANNES FÜR DEN BEITRAG ZUR DATEI. VIELEN DANK!

Ich habe eine Funktion hinzugefügt, die mir geholfen hat, meine 2448-Layer-Datei in etwa 3 Stunden durchzugehen.

Hier ist der Link zu der geänderten Datei, die Sie hier herunterladen können

Ich habe das Skript so aktualisiert, dass es den Kern BackgroundLayer des Dokuments verwendet. Damit jedes exportierte JPG damit kompiliert wird.

Wäre toll, wenn jemand Tags zu Ebenen hinzufügen würde, um sie zu Master-Ebenen anstelle der Standard-Hintergrundebene zu machen ;-)

vollständiges Skript:

    // 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();
Wenn Sie eine rekursive Ebenenprüfung durchführen, wissen Sie, dass der erste ein Hintergrund ist, wenn Sie eine Namensprüfung durchführen. Idee vielleicht?