ค้นหาแบบอักษรทั้งหมดที่ใช้ในไฟล์ Photoshop

ฉันมี.psd(ไฟล์ Photoshop) และฉันพยายามแปลงเป็น HTML & CSS

สิ่งเดียวที่ฉันไม่สามารถระบุได้คือตัวอักษรที่ใช้ใน .psd

ฉันจะหาฟอนต์ที่ใช้ในไฟล์ Photoshop ได้อย่างไร

ขึ้นอยู่กับว่าคุณต้องการดึงข้อมูลอย่างไร

ต่อส่วนหรือพื้นที่ข้อความ

เลือกเครื่องมือข้อความ ( Tไอคอนที่มีเซอริฟ) และคลิกบนพื้นที่ข้อความเพื่อแก้ไข มันจะแสดงแบบอักษรที่ใช้ในหน้าต่างตัวละคร

แบบอักษรทั้งหมดที่ใช้อย่างรวดเร็ว

1. บันทึกหรือส่งออกเอกสารภาพเป็น PDF
2. เปิดเวอร์ชัน PDF ใน Adobe Reader
3. เลือกไฟล์→คุณสมบัติ→แบบอักษร

นี่จะแสดงรายการฟอนต์ที่ฝังอยู่ทั้งหมดที่ใช้ในไฟล์ PSD หากคุณสามารถฝังได้

ไม่มีแบบอักษร

ในเครื่องมือตัวละครไปที่การเลือกแบบอักษรแบบเลื่อนลง ในตอนท้ายของรายการจะเป็นแบบอักษรที่ใช้ในภาพ แต่หายไปจากระบบของคุณ โดยทั่วไปแล้วสิ่งเหล่านี้จะเป็นสีเทา

ภาพแรสเตอร์

หากคุณเห็นภาพแรสเตอร์ใด ๆ ที่คุณต้องการใช้แบบอักษรคุณควรส่งออกเฉพาะส่วนนั้นเป็นภาพที่ชัดเจนและเป็นแบบสแตนด์อโลนและใช้บริการเช่นอะไรแบบอักษรเพื่อกำหนดแบบอักษร

บันทึกสคริปต์นี้เป็นไฟล์ใหม่ในโฟลเดอร์ Photoshop> Presets> Scripts ตั้งชื่อตามที่คุณต้องการเช่น "Detect Fonts.jsx"

var p = new ActionReference();

function arrayUnique(a){
    var t = []
        i = a.length;

    while(i--) {
        var f = false,
        n = t.length;

        while (n--) {
            if(a[i] === t[n]) {
                f = true;
            }
        }

        if(!f) {
            t.push(a[i]);
        }
    }
    return t;
}

function findFonts() {
    p.putEnumerated( charIDToTypeID('Dcmn'), charIDToTypeID('Ordn'), charIDToTypeID('Trgt') );

    var c = executeActionGet(p).getInteger(charIDToTypeID('NmbL'))+1,
        fonts = [];

    while(c--) {
        var r = new ActionReference(),
            descLayer,
            layerStyles,
            countStyles;

        r.putIndex( charIDToTypeID( 'Lyr ' ), c );

        try {
            descLayer = executeActionGet(r);
        } catch (e) {
            continue;
        }

        if(!descLayer.hasKey(stringIDToTypeID( 'textKey' ))) continue;

        layerStyles = descLayer.getObjectValue(stringIDToTypeID('textKey')).getList(stringIDToTypeID('textStyleRange'));
        countStyles = layerStyles.count;

        while(countStyles--) {
            var n = layerStyles.getObjectValue(countStyles).getObjectValue(stringIDToTypeID('textStyle')).getString(stringIDToTypeID('fontPostScriptName'));
            fonts.push(n);
        }
    }

    return arrayUnique(fonts).sort();
}

if (documents.length) {
    var d = findFonts();
    alert(d.length +' fonts found\n'+d.join('\n'));
} else {
    alert('No fonts used in the active document.',);
}

รูปแบบไฟล์ PSD จัดทำขึ้นโดย Adobe - คุณสามารถอ่านวิธีเก็บข้อมูลแบบอักษร

จากนั้นคุณสามารถตรวจสอบการถ่ายโอนข้อมูลฐานสิบหกของไฟล์และใช้ข้อกำหนดคุณสมบัติการจัดรูปแบบไฟล์เพื่อค้นหาแบบอักษร

อีกทางหนึ่งชื่อฟอนต์ควรปรากฏในเอาต์พุตของstringsยูทิลิตีที่พบในระบบ Linux / Unix

นี่เป็นเรื่องง่ายมากที่จะทำโดยใช้สคริปต์ PS ซึ่งสามารถวนซ้ำผ่านเลเยอร์ของ PSD ของคุณและดึงข้อมูลเลเยอร์ข้อความ

เมื่อเร็ว ๆ นี้ฉันได้ทดลองใช้สคริปต์ที่ใช้ JavaScript เพื่อวางซ้อนข้อมูลแบบอักษรโดยตรงบน comps ที่ส่งไปยังนักพัฒนา ยังไม่เสร็จ แต่ถ้ายังมีสิ่งที่น่าสนใจ (ฉันเห็นว่ามันค่อนข้างเก่า) ฉันสามารถวางเวอร์ชันที่รวดเร็วและสกปรกซึ่งก็จะปรากฏแบบอักษรที่ใช้ในหน้าต่าง

UPDATE:ฉันรวบรวมสคริปต์เวอร์ชั่น "lite" ที่หยาบและทำงานได้ดีที่ฉันกำลังพัฒนา อย่าลังเลที่จะมีส่วนร่วม - https://github.com/davidklaw/completer สำหรับผู้ที่ไม่คุ้นเคยกับสคริปต์เพียงแค่ใช้ไฟล์สคริปต์และวางไว้ในโฟลเดอร์ PS Presets / Scripts ของคุณและจะสามารถใช้ได้ภายใต้ไฟล์ -> สคริปต์

วิธีที่รวดเร็วและง่ายต่อการค้นหาแบบอักษรที่หายไป

1. Windows -> ตัวละครกล่องตัวอักษรขนาดเล็กจะแสดงพร้อมข้อมูลตัวอักษร

2. เลือกชื่อแบบอักษรแบบเลื่อนลงและเลื่อนลงจนจบ

3. คุณจะสังเกตเห็นรายการแบบอักษรที่หายไปในสีเทาอ่อนที่ส่วนท้ายของรายการแบบอักษร

จาก: http://www.bala-krishna.com/how-to-find-fonts-used-in-psd-file/

หากข้อความได้รับการแรสเตอร์แล้ววิธีที่ง่ายที่สุดคือการครอบตัดพื้นที่ด้วยแบบอักษรที่คุณต้องการระบุบันทึกเป็น. png และอัปโหลดไปยังWhatTheFontซึ่งควรจะสามารถบอกคุณได้ว่ามันคืออะไรเว้นแต่ว่ามัน เป็นสิ่งที่คลุมเครือ

Identifontเป็นเว็บไซต์อื่นที่คุณสามารถใช้ซึ่งคุณอธิบายลักษณะของแบบอักษร

ฉันจะอ่านข้อความที่คุณต้องการ (ควรซูมเข้า) และใช้WhatTheFontเพื่อคาดเดา (ไม่ควรแสดงแบบอักษรเมื่อคุณเปิด PSD และเลือกข้อความที่เกี่ยวข้องใช่ไหม?)

และแน่นอนหากไม่ใช่แบบอักษรบนเว็บคุณจะต้องหาวิธีที่เหมาะสมในการแทนที่หรือให้กองซ้อนสำรอง

ใช้Creative Cloud Extract

มันจะแสดงรายการแบบอักษรทั้งหมดที่ใช้

ขึ้นอยู่กับคำตอบเดิมของดาวิด (DetectFonts.jsx) ผมได้แก้ไขสคริปต์เพื่อแก้ไขปัญหาที่รายงานโดยดึงในความคิดเห็นที่: ค้นหาแบบอักษรทั้งหมดที่ใช้ในไฟล์ Photoshop

ทำตามคำแนะนำดั้งเดิม แต่ใช้เนื้อความสคริปต์นี้แทน - ความแตกต่างเพียงอย่างเดียวคือการตรวจสอบค่าศูนย์ (สันนิษฐานว่าเป็นความแตกต่างของรุ่น Photoshop หรือสิ่งที่เกี่ยวข้องกับข้อมูลที่ขาดหายไปในวัตถุชนิดใดประเภทหนึ่งผู้ออกแบบหรือระบบปฏิบัติการเฉพาะ)

ฉันจะส่งคำขอดึงไปที่https://github.com/dcondrey/DetectFontsinPSD

var p = new ActionReference();

function arrayUnique(a) {
    var t = []
    i = a.length;

    while (i--) {
        var f = false,
            n = t.length;

        while (n--) {
            if (a[i] === t[n]) {
                f = true;
            }
        }

        if (!f) {
            t.push(a[i]);
        }
    }
    return t;
}

function findFonts() {
    p.putEnumerated(charIDToTypeID('Dcmn'), charIDToTypeID('Ordn'), charIDToTypeID('Trgt'));

    var c = executeActionGet(p).getInteger(charIDToTypeID('NmbL')) + 1,
        fonts = [];

    while (c--) {
        var r = new ActionReference(),
            descLayer,
            layerStyles,
            countStyles;

        r.putIndex(charIDToTypeID('Lyr '), c);

        try {
            descLayer = executeActionGet(r);
        } catch (e) {
            continue;
        }

        if (!descLayer.hasKey(stringIDToTypeID('textKey'))) continue;

        layerStyles = descLayer.getObjectValue(stringIDToTypeID('textKey')).getList(stringIDToTypeID('textStyleRange'));
        if(!layerStyles) continue;

        countStyles = layerStyles.count;

        while (countStyles--) {
            var textStyle = layerStyles.getObjectValue(countStyles).getObjectValue(stringIDToTypeID('textStyle'));
            if(!textStyle || !textStyle.hasKey(stringIDToTypeID('fontPostScriptName'))) continue;

            var n = textStyle.getString(stringIDToTypeID('fontPostScriptName'));
            fonts.push(n);
        }
    }

    return arrayUnique(fonts).sort();
}

if (documents.length) {
    var d = findFonts();
    alert(d.length + ' fonts found\n' + d.join('\n'));
} else {
    alert('No fonts used in the active document.');
}

เปิด Photoshop ไปของ Windows »ตัวละคร กล่องขนาดเล็กจะปรากฏขึ้น เพียงเลือกเลเยอร์ข้อความและกล่องจะบอกตระกูลตัวอักษรขนาดและอื่น ๆ

ใช้เครื่องมือออนไลน์เพื่อรับแบบอักษรของไฟล์ psd

http://psdfonts.com/

นักพัฒนาถามฉันเกือบจะเหมือนที่คุณคิด ฉันมาพร้อมกับการแก้ไขสคริปต์อย่างง่ายเพื่อส่งออกคุณสมบัติเลเยอร์ (ข้อความชื่อตัวอักษรขนาดตัวอักษรสีตัวอักษร) ที่คุณต้องการเมื่อพัฒนาเป็นไฟล์ txt เดียว (ควรทำงานบนเครื่อง Windows)

เพียงบันทึกสิ่งนี้เช่น "ExportTexts.js" และใส่ใน Adobe Photoshop> ค่าที่ตั้งไว้> สคริปต์

หลังจากนั้นให้รัน (หรือรีสตาร์ท) Photoshop และเรียกใช้สคริปต์ (ไฟล์ -> สคริปต์ -> ExportTexts) ตรวจสอบให้แน่ใจว่าคุณไม่ได้จัดกลุ่มเลเยอร์ทั้งหมดก่อนทำสิ่งนี้ ไฟล์ที่ส่งออกควรอยู่ในรูปแบบเดียวกับไฟล์ psd

if (documents.length > 0)
{
    var docRef = activeDocument;
    CurrentFolder = activeDocument.path;
    var outputFile = new File(CurrentFolder + "/" + activeDocument.name + "fonts.txt" );
    outputFile.open("w");
    for (var i = docRef.layers.length-1 ; i >=0 ; i--)
    {
        docRef.activeLa`enter preformatted text here`yer = docRef.layers[i]
        if (docRef.activeLayer.kind == LayerKind.TEXT)
        {
            outputFile.write( 
            docRef.activeLayer.textItem.contents + "\n" + 
            docRef.activeLayer.textItem.font +"," +
            docRef.activeLayer.textItem.size +"," +
            docRef.activeLayer.textItem.color.rgb.hexValue  + "\n\n\n");
        }
    }
    outputFile.close();
    alert("Finished");
}
else
{
    alert("You must have at least one open document to run this script!");
}
docRef = null

มีส่วนขยาย / แผง Photoshop ฟรีที่สามารถทำงานนี้ให้คุณได้ฟรีตัวตรวจจับแบบอักษร Photoshop ฟรี ( http://www.layerhero.com/photoshop-font-detector/ ) และถ้าคุณต้องการรวบรวม / คัดลอกไฟล์แบบอักษรจากระบบ โฟลเดอร์ลองใช้ Photoshop Art Packer ( http://www.layerhero.com/photoshop-art-packer/ )

มีตัวเลือกในแท็บเลเยอร์ที่ให้คุณกรองเลเยอร์ทั้งหมดเพื่อแสดงเฉพาะแบบอักษร คุณต้องเลือกแต่ละเลเยอร์เพื่อดูจริง ๆ และจะมีประโยชน์ก็ต่อเมื่อคุณต้องการดูอย่างรวดเร็ว

หวังว่ามันจะช่วยใครซักคนสามปีหลังจากที่ถูกถาม

ฉันต้องการทราบแบบอักษรของเอกสารพร้อมกับสไตล์ขนาดสีการจัดรูปแบบและอื่น ๆ สำหรับการพัฒนาเว็บไซต์และ CSS ดังนั้นนี่คือสิ่งที่ฉันได้รับ:

1. คลิกไอคอน "T" ในแผงเลเยอร์เพื่อกรอง / ดูเลเยอร์ข้อความเท่านั้น
2. Shift + คลิกซ้ายที่เลเยอร์ข้อความสูงสุดในจานสีเลเยอร์
3. เลื่อนไปจนถึงด้านล่างของจานสีเลเยอร์แล้วกด Shift + ซ้ายคลิกเลเยอร์ข้อความด้านล่าง
4. คลิกขวาที่เลเยอร์ที่เลือกในจานสีเลเยอร์แล้วเลือก "ทำซ้ำเลเยอร์"
5. ภายใต้เอกสารปลายทางเลือกใหม่
6. ไปที่เอกสารใหม่ของคุณซึ่งควรมีเลเยอร์ข้อความทั้งหมดของคุณ
7. เลือกเลเยอร์ทั้งหมดของข้อความอีกครั้ง (ดูขั้นตอนที่ 2 และ # 3)
8. คลิกที่ไอคอนโฟลเดอร์ที่ด้านล่างของจานสีเลเยอร์เพื่อสร้างเลเยอร์ข้อความทั้งหมดเป็นกลุ่มเดียว
9. เปลี่ยนโหมดการผสมของกลุ่ม (ดรอปดาวน์ในเลเยอร์จานสี) เป็น "ปกติ"
10. คลิกขวาที่กลุ่มใหม่ของคุณ
11. เลือก "คัดลอก CSS"
12. วางในเอกสารและจัดรูปแบบรายการสไตล์ตามต้องการ!

ในการรับข้อมูลฟอนต์จากไฟล์ PSD คุณสามารถใช้เครื่องมือออนไลน์ได้หากคุณไม่สามารถใช้ Photoshop ได้

ตัวอย่างเช่นคุณสามารถลองใช้ตัวแยกแบบอักษรออนไลน์ของ html5 PSD "รับแบบอักษร PSD"

มันเป็นตัวแยกข้อมูลแบบอักษร PSD ตามMelitingice Github โครงการ psd.jsที่ไม่ต้องการอัปโหลดไฟล์ทำงานในเครื่องในหน้าเบราว์เซอร์ของคุณ