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?
Jawaban:
Tergantung pada bagaimana Anda ingin mengekstraksi informasi.
Pilih alat Teks ( ikon T dengan serif) dan klik area teks untuk mengeditnya. Ini akan menunjukkan font apa yang digunakan di jendela Character.
Ini akan mencantumkan semua font yang dapat disematkan yang digunakan dalam file PSD, asalkan Anda dapat menyematkannya.
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.
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.
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.',);
}
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.
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.
Cara Cepat dan Mudah Untuk Menemukan Font yang Hilang
Windows -> Karakter Kotak karakter kecil akan ditampilkan dengan informasi font.
Pilih dropdown nama font dan gulir ke bawah sampai akhir.
Anda akan melihat daftar font yang hilang dalam warna abu-abu terang di akhir daftar font.
Dari: http://www.bala-krishna.com/how-to-find-fonts-used-in-psd-file/
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.
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.
Gunakan Creative Cloud Extract
Ini akan mencantumkan semua font yang digunakan (di antara hal-hal praktis lainnya).
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.');
}
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.
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
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/ )
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.
Saya ingin mengetahui font dokumen beserta gaya, ukuran, warna, pemformatan, dll. Untuk pengembangan web dan tujuan CSS, jadi inilah yang saya kemukakan:
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