ชุดการส่งออกเลเยอร์ Photoshop ไปยังไฟล์ PNG แต่ละไฟล์


130

ฉันเป็นนักพัฒนาเว็บและเชี่ยวชาญใน Fireworks แต่ไม่มากใน Photoshop

ฉันเพิ่งได้รับไฟล์ PSD เป็นเลเยอร์เพื่อเปลี่ยนเป็นหน้าเว็บ ทุกคนสามารถบอกวิธีที่ง่ายที่สุดในการส่งออกเลเยอร์ทั้งหมดไปยังไฟล์ png แต่ละไฟล์ได้หรือไม่?

มีเลเยอร์มากมายและการทำสิ่งนี้ด้วยตนเองดูเหมือนผิด

ฉันได้เห็นสิ่งนี้แล้วแต่ดูเหมือนว่ามันควรจะมีฟังก์ชั่นพื้นฐานสำหรับสิ่งนี้ใน PS

ฉันสามารถเข้าถึง Photoshop CS4 คำแนะนำใด ๆ ที่ชื่นชม


มีวิธีใดบ้างที่จะหลีกเลี่ยงไม่ให้มีการ. pngs เปลี่ยนเป็นโหมดดัชนี? ฉันต้องการ RGB ฉันอาจจะสร้างหยดได้ แต่ไม่รู้ว่ามีวิธีที่ง่ายกว่านี้หรือไม่ ... ขอบคุณสำหรับเคล็ดลับ

สามารถใช้convertคำสั่งฟรีจาก Imagemagick สำหรับสิ่งนี้ได้ (อาจไม่มีคุณสมบัติ psd ที่ครอบคลุมทั้งหมด)
Uriel

คำตอบ:


158

วิธีที่ 1: สคริปต์ในตัวจาก Adobe

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

ป้อนคำอธิบายรูปภาพที่นี่

นี่คือคำถามที่เกี่ยวข้อง ...

การส่งออกแต่ละชั้นใน Photoshop ทำให้ขนาดของพวกเขา

ส่งออกเลเยอร์ไปยังไฟล์ส่งออกไฟล์ png เพียง 4 ไฟล์จาก 100 เลเยอร์


วิธีที่ 2: สคริปต์ที่กำหนดเอง

ฉันใช้เวลาสักครู่และเขียนไฟล์สคริปต์ของตัวเองเพื่อทำให้กระบวนการนี้เป็นไปโดยอัตโนมัติ กระบวนการนี้เร็วกว่าสคริปต์ในตัวที่กล่าวถึงข้างต้น

รับสคริปต์ตอนนี้บน Github!

ข้อมูลเพิ่มเติม

ฉันรันสคริปต์นี้บนไฟล์ 100 เลเยอร์ 450MB ภายในไม่ถึง 60 วินาที การเรียกใช้สคริปต์ในตัวบนไฟล์เดียวกันจะใช้เวลาประมาณ 30 นาที

เมื่อทดสอบกับกลุ่มเลเยอร์ซ้อนฉันพบว่าสคริปต์ของฉันทำงานในประมาณ 90 วินาทีในขณะที่สคริปต์ในตัวใช้เวลาประมาณ 27 นาที (และส่งออกผิดจริง)

โปรดทราบว่าผลลัพธ์เหล่านี้จะแตกต่างกันไปขึ้นอยู่กับความซับซ้อนของไฟล์รวมถึงฮาร์ดแวร์ในคอมพิวเตอร์ของคุณและเวอร์ชั่นของ Photoshop ข้อมูลประสิทธิภาพการทำงานเพิ่มเติม

สคริปต์นี้มี (ในช่วงไม่กี่ปีที่ผ่านมา) ได้รับการปรับปรุงมากมายจากผู้มีส่วนร่วมต่างๆ หากคุณพบปัญหาใด ๆ กับสคริปต์ คุณสามารถประเด็นไฟล์ที่มีสคริปต์ที่นี่

โปรดอ่านread-meสำหรับข้อมูลเพิ่มเติมเพิ่มเติมใด ๆ

คำเตือน: สคริปต์นี้ไม่เกี่ยวข้องกับ Adobe ในทางใดทางหนึ่ง โปรดใช้สคริปต์ในความเสี่ยงของคุณเอง - ทำการสำรอง PSD ของคุณทุกครั้งก่อนใช้งาน ฉันจะไม่รับผิดชอบต่อข้อมูลที่เสียหายหรือสูญหาย


1
@Lucian - ถ้าคุณกำลังใช้ Photoshop CC คุณก็สามารถทำเช่นนี้มิฉะนั้นยื่นปัญหาบน Github ขอบคุณ!
ฮันนา

โยฮันเนสได้สร้างสคริปต์ที่ยอดเยี่ยมสำหรับคำถามนี้และควรสมควรได้รับการโหวตอย่างถูกต้องหลายครั้ง แต่โปรดอย่าขอการสนับสนุนในความคิดเห็น หากคุณมีปัญหาเกี่ยวกับเรื่องนี้โปรดค้นหาวิธีแก้ปัญหาผ่าน repo เพื่อให้พวกเขาสามารถติดตามได้
DᴀʀᴛʜVᴀᴅᴇʀ

การรายงานจากปี 2018 เครื่องมือนี้เป็นตอนนี้ภายใต้File -> Export -> Layers to Files...
akinuri

ในกรณีที่คนอื่นสับสนนี่เป็นสคริปต์ Photoshop และต้องใช้ Photoshop ฉันคิดว่ามันจะเป็นเชลล์สคริปต์ :)
Chris Rae

1
@ ฮันนี่เหล่านี้เป็นมหากาพย์ !! การทำงานที่ดีและขอบคุณ!
Chris Emerson

18

ฉันได้ปรับปรุงวิธีแก้ปัญหาของโยฮันเนสเมื่อปีที่แล้วด้วยการปรับปรุงมากมาย อย่างมีนัยสำคัญ:

  • กลุ่มของเลเยอร์ได้รับการจัดการอย่างถูกต้องเพื่อให้เลเยอร์ทั้งหมดถูกเขียน
  • ชื่อไฟล์จะถูกเพิ่มโดยอัตโนมัติเพื่อป้องกันการชนกัน (เกิดขึ้นเมื่อมากกว่าหนึ่งเลเยอร์มีชื่อเดียวกัน)
  • ประสิทธิภาพเพิ่มขึ้น สคริปต์สามารถบันทึก 500 เลเยอร์ง่ายๆได้ในไม่กี่นาที

นอกจากนี้รหัสได้รับการทำความสะอาด ตัวอย่างเช่นตัวแปรโกลบอลถูกรวมเข้าในอาร์เรย์เดียว

โปรดทราบว่าข้อความป๊อปอัพเริ่มต้นจะบอกจำนวนเลเยอร์ระดับบนสุดให้คุณทราบเท่านั้น เพื่อหลีกเลี่ยงการเสื่อมประสิทธิภาพ ฉันไม่สามารถจินตนาการถึงกรณีที่คุณไม่รู้อะไรเกี่ยวกับไฟล์ที่คุณติดต่อด้วยดังนั้นจึงไม่ควรมีการประนีประนอมมากนัก

คว้าสคริปต์ที่นี่ ขอบคุณผู้เขียนคนก่อนหน้าที่เป็นผู้นำ


ทำได้ดีมากในการดูแลสคริปต์นี้ มันทำงานได้เป็นอย่างดีการส่งออกบางเวลาผ่านพ้นไปแก้ไขในพันของชั้น :)
iwasrobbed

7

เครดิตจะไปที่ฮันเนสเพื่อช่วยในการเก็บไฟล์ ขอบคุณมาก!

ฉันได้เพิ่มฟังก์ชั่นที่ช่วยให้ฉันดูไฟล์เลเยอร์ 2448 ในเวลาประมาณ 3 ชั่วโมง

นี่คือลิงค์ไปยังไฟล์ที่แก้ไขดาวน์โหลดได้ที่นี่


6

ฉันอัปเดตสคริปต์เพื่อใช้ BackgroundLayer หลักของเอกสาร เพื่อให้ jpg แต่ละตัวที่ส่งออกนั้นถูกคอมไพล์ด้วย

คงจะดีมากถ้ามีคนเพิ่มแท็กลงในเลเยอร์เพื่อทำให้พวกเขาเป็นเลเยอร์หลักแทนการใช้ BackgroundLayer ;-)

สคริปต์แบบเต็ม:

    // 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();
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.