Temukan semua font yang digunakan dalam file Photoshop


54

Saya punya ini .psd(file Photoshop) dan saya mencoba mengubahnya menjadi HTML & CSS.

Satu-satunya hal yang saya tidak dapat menentukan adalah font apa yang mereka gunakan di .psd

Bagaimana saya bisa mengetahui font apa yang digunakan dalam file Photoshop?


Pada CC2018, 2 skrip di bawah ini dan plugin jsx rusak. Saya berkomentar khusus untuk masing-masing.
Drew

Jawaban:


63

Tergantung pada bagaimana Anda ingin mengekstraksi informasi.

Per bagian atau area teks

Pilih alat Teks ( ikon T dengan serif) dan klik area teks untuk mengeditnya. Ini akan menunjukkan font apa yang digunakan di jendela Character.

Sekilas font yang digunakan

  1. Simpan atau ekspor dokumen gambar sebagai PDF
  2. Buka versi PDF dalam Adobe Reader
  3. Pilih File → Properties → Font

Ini akan mencantumkan semua font yang dapat disematkan yang digunakan dalam file PSD, asalkan Anda dapat menyematkannya.

Font tidak ada

Di alat Karakter, pergi ke drop-down pemilihan font. Di akhir daftar akan ada font yang digunakan dalam gambar tetapi hilang dari sistem Anda. Ini biasanya akan diklik.

Gambar raster

Jika Anda melihat gambar raster yang membutuhkan font, Anda sebaiknya hanya mengekspor bagian itu sebagai gambar yang jelas dan mandiri dan menggunakan layanan seperti What the Font untuk menentukan font.


23

Simpan skrip ini sebagai file baru di folder Photoshop> Preset> Script Anda. Beri nama apa pun yang Anda inginkan, seperti "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.',);
}

masukkan deskripsi gambar di sini


1
+500000 poin. Luar biasa.
Setengah Crazed


Untuk menulis teks di clipboard gunakan jawaban ini: stackoverflow.com/a/13983268/1578857
Dima Kurilo

(Photoshop CC2018) Kesalahan 8500: Properti yang diminta tidak ada. Baris 53: var n = layerStyles.getObjectValue (countStyles) .getObjectValue (stringIDToTypeID ('textStyle')). GetString (stringIDToTypeID ('fontPostScriptName'));
Drew

@Drew Saya akan memposting jawaban yang diperbarui dengan versi script yang sudah
diperbaiki

8

Format file PSD didokumentasikan oleh Adobe - Anda dapat membaca cara menyimpan informasi font.

Anda kemudian dapat memeriksa dump hex file dan menggunakan spesifikasi format file untuk menemukan font.

Atau, nama font harus terlihat dalam output stringsutilitas yang ditemukan pada sistem Linux / Unix.


2
+1: Saya datang dengan solusi yang sama. Untuk beberapa alasan GIMP tidak mengimpor PSD dengan benar dan saya tidak tahu font mana yang digunakan. Saya menganalisis file PSD dalam editor HEX untuk menemukannya (Cari: "Font" sebagai TEXT). Editor yang disarankan: "berkah".
lepe

5

Ini sebenarnya sangat mudah dilakukan dengan menggunakan skrip PS, yang dapat beralih melalui lapisan PSD Anda dan menarik data lapisan teks.

Saya baru-baru ini bereksperimen dengan skrip berbasis JavaScript untuk melapisi informasi font langsung pada comps yang dikirim ke pengembang. Itu belum selesai tetapi jika masih ada minat (saya melihat ini sudah cukup lama) saya dapat memasang versi cepat dan kotor yang hanya memunculkan font yang digunakan di jendela.

UPDATE: Saya membuat versi naskah "lite" yang kasar tapi berfungsi, yang sedang saya kembangkan. Jangan ragu untuk berkontribusi - https://github.com/davidklaw/completer . Bagi mereka yang tidak terbiasa dengan skrip, ambil saja file skrip dan letakkan di bawah folder PS Preset / Scripts Anda dan itu akan tersedia di bawah File -> Scripts.


Pertanyaannya mungkin sudah tua, tetapi memiliki hampir 6.000 tampilan. Jika Anda bisa memberikan skrip, itu akan sangat dihargai! Selamat datang di Pengguna Super, omong-omong!
slhck

Panggilan yang bagus. Proyek GitHub sumber terbuka sudah habis. Jika ada yang terbiasa dengan JavaScript dasar, mereka seharusnya merasa betah.
David

wow ini benar-benar berfungsi dengan baik: D (y)!
Ejaz

4

Cara Cepat dan Mudah Untuk Menemukan Font yang Hilang

  1. Windows -> Karakter Kotak karakter kecil akan ditampilkan dengan informasi font.

  2. Pilih dropdown nama font dan gulir ke bawah sampai akhir.

  3. Anda akan melihat daftar font yang hilang dalam warna abu-abu terang di akhir daftar font.

masukkan deskripsi gambar di sini

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


Ada banyak cara untuk mengaktifkan panel itu: Yang tambahan adalah Ketik -> Panel -> Karakter.
martixy

3

Jika teks telah diraster, cara termudah adalah memotong area dengan jenis huruf yang ingin Anda identifikasi, menyimpan sebagai .png dan mengunggahnya ke WhatTheFont , di mana teks itu dapat memberi tahu Anda apa itu, kecuali adalah yang tidak jelas atau dipesan lebih dahulu.

Identifont adalah situs lain yang dapat Anda gunakan, di mana Anda menggambarkan karakteristik jenis huruf.


teks tidak dirasterisasi, artinya dalam lapisan yang terpisah.
dave

2
@Dave: Jika teks masih dapat diedit, yang harus Anda lakukan adalah memilihnya dan melihat apa yang muncul di menu dropdown font, atau pada palet informasi. Ini sangat jelas!
paradroid

1

Saya akan mengambil sepintas teks yang Anda butuhkan (sebaiknya diperbesar) dan menggunakan WhatTheFont untuk mendapatkan beberapa tebakan. (Namun, bukankah tipografi akan ditampilkan saat Anda membuka PSD dan memilih teks yang sesuai?)

Dan tentu saja, jika itu bukan font yang aman untuk web, Anda harus menemukan cara yang tepat untuk menggantinya, atau menyediakan tumpukan cadangan.


1

Gunakan Creative Cloud Extract

Ini akan mencantumkan semua font yang digunakan (di antara hal-hal praktis lainnya).


Sepertinya memiliki beberapa potensi, tetapi perlu menginstal DreamWeaver ..
Drew

1

Berdasarkan jawaban asli David (DetectFonts.jsx), saya telah memodifikasi skrip untuk memperbaiki masalah yang dilaporkan oleh Drew dalam komentar: Temukan semua font yang digunakan dalam file Photoshop .

Ikuti petunjuk asli tetapi gunakan badan skrip ini sebagai gantinya - hanya perbedaan adalah beberapa pemeriksaan nol (mungkin perbedaan versi photoshop atau ada hubungannya dengan data yang hilang pada jenis objek tertentu, kemungkinan perancang atau sistem operasi spesifik)

Saya juga akan mengirimkan permintaan penarikan ke 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.');
}

0

Buka Photoshop. Pergi ke Windows »Character . Sebuah kotak kecil akan muncul. Cukup pilih layer teks dan kotak akan memberi tahu Anda jenis font, ukuran, dan sebagainya.



0

Pengembang bertanya kepada saya berpikir hampir sama seperti yang Anda butuhkan. Saya datang dengan mengedit skrip sederhana, untuk mengekspor properti layer (teks, nama font, ukuran font, warna font) yang Anda butuhkan ketika mengembangkan, ke file txt tunggal (harus bekerja pada mesin Windows).

Simpan saja ini seperti "ExportTexts.js" dan masukkan ke dalam Adobe Photoshop> Preset> Script.

Setelah itu, jalankan (atau restart) Photoshop dan jalankan script (File -> Scripts -> ExportTexts). Pastikan juga Anda memisahkan semua lapisan sebelum melakukan ini. File yang diekspor harus dalam direktori yang sama dengan file 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

Skrip Anda rusak pada baris 8
davidcondrey

Dan pada baris 12. Kesalahan 8500, properti tidak ada: outputFile.write (.
Drew

0

Ada Panel / Ekstensi Photoshop gratis yang dapat melakukan pekerjaan ini untuk Anda, Gratis Photoshop Font Detector ( http://www.layerhero.com/photoshop-font-detector/ ), dan jika Anda ingin mengumpulkan / menyalin file font dari sistem folder, coba Photoshop Art Packer ( http://www.layerhero.com/photoshop-art-packer/ )


"Free Photoshop Font Detector" tidak lagi tersedia sebagai unduhan gratis dan sekarang menjadi bagian dari ekstensi FontHero yang mahal seharga $ 39 .
paulmz

Tidak ada yang tersedia. LayerHero sudah mati .. Hebatnya, Anda dapat mengunduh Font Detector dari mesin WayBack : web.archive.org/web/20171211184218/http : //www.layerhero.com/... Namun saya belum dapat menginstalnya, juga dengan Extension Manager Anastasiy atau Adobe ExMan.
Drew

0

Ada opsi pada tab Layers yang memungkinkan Anda memfilter semua layer untuk hanya menampilkan font. Anda harus memilih setiap layer untuk benar-benar melihatnya dan ini berguna hanya jika Anda perlu melihatnya sekilas

Semoga ini bisa membantu seseorang tiga tahun setelah ini diminta.


0

Saya ingin mengetahui font dokumen beserta gaya, ukuran, warna, pemformatan, dll. Untuk pengembangan web dan tujuan CSS, jadi inilah yang saya kemukakan:

  1. Klik ikon "T" di panel Layers untuk memfilter / hanya melihat lapisan teks
  2. Shift + klik kiri lapisan teks paling atas di palet Layers
  3. Gulir sampai ke bagian bawah palet Layers dan Shift + klik kiri layer teks bawah
  4. Klik kanan pada lapisan yang dipilih dalam palet Layers dan pilih "Duplicate Layers"
  5. Di bawah Dokumen Tujuan, pilih Baru
  6. Pergi ke dokumen baru Anda yang harus berisi semua lapisan teks Anda
  7. Pilih semua lapisan teks lagi (lihat langkah # 2 dan # 3)
  8. Klik ikon folder di bagian bawah palet Layers untuk membuat semua layer teks menjadi satu grup
  9. Ubah blending mode grup (dropdown pada palet layer) menjadi "Normal"
  10. Klik kanan grup baru Anda
  11. Pilih "Salin CSS"
  12. Tempel ke dokumen dan format daftar gaya Anda sesuai kebutuhan!

-1

Untuk mendapatkan informasi font dari file PSD, Anda dapat menggunakan alat online jika Anda tidak bisa atau tidak akan menggunakan Photoshop (atau jika Anda lebih suka menggunakan Gimp, yang merasterisasi font PSD).

Misalnya Anda dapat mencoba ekstraktor online font html5 PSD ini "Dapatkan Font PSD".

Ini adalah ekstraktor informasi font PSD berdasarkan proyek Melitingice Github psd.js yang tidak memerlukan pengunggahan file, bekerja secara lokal di halaman browser Anda


Ini membuka file dalam javascript, tanpa mengirimnya ke server, di halaman browser Anda sendiri! Anda harus
meletakkan

Anda mungkin ingin mengungkapkan hubungan apa pun yang Anda miliki dengan proyek yang disebutkan, meskipun gratis.
Journeyman Geek
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.