Ho questo .psd (file di Photoshop) e sto cercando di convertirlo in HTML & CSS.
L'unica cosa che non riesco a determinare è quale font hanno usato nel file .psd
Come posso scoprire quali font sono stati usati nel file di Photoshop?
Dipende da come vuoi estrarre le informazioni.
Seleziona lo strumento Testo (icona T con serif) e clicca sull'area di testo per modificarla. Verrà mostrato il font utilizzato nella finestra del carattere.
Questo elencherà tutti i caratteri incorporabili usati nel file PSD, sempre che sia possibile incorporarli.
Nello strumento Carattere, vai al menu a tendina di selezione dei font. Alla fine dell'elenco ci saranno i font usati nell'immagine ma che mancano nel tuo sistema. Questi saranno tipicamente in grigio.
Se vedi qualche immagine rasterizzata di cui hai bisogno della faccia del font, è meglio esportare solo quella sezione come un'immagine chiara e indipendente e usare un servizio come What the Font per determinare il font.
Salva questo script come un nuovo file nella tua cartella Photoshop > Presets > Scripts. Nominalo come vuoi, ad esempio “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.',);
}
Il formato di file PSD è documentato da Adobe - puoi leggere come memorizza le informazioni sui font.
Potresti quindi esaminare un dump esadecimale del file e usare la specifica del formato del file per trovare i font.
In alternativa, i nomi dei font dovrebbero essere visibili nell'output dell'utilità strings che si trova sui sistemi Linux/Unix.
Questo è in realtà molto facile da fare usando gli script PS, che possono iterare attraverso i livelli del vostro PSD ed estrarre i dati dei livelli di testo.
Ho sperimentato ultimamente uno script basato su JavaScript per sovrapporre le informazioni sui font direttamente sulle comp che vengono consegnate agli sviluppatori. Non è finito, ma se c'è ancora interesse (vedo che questo è abbastanza vecchio) posso mettere una versione veloce e sporca che semplicemente fa apparire i font usati in una finestra.
** AGGIORNAMENTO:** Ho messo insieme una versione “lite” grezza ma funzionante dello script che sto sviluppando. Sentitevi liberi di contribuire - https://github.com/davidklaw/completer . Per coloro che non hanno familiarità con gli script basta prendere il file dello script e metterlo nella tua cartella PS Presets/Scripts e sarà disponibile sotto File -> Scripts.
Modo rapido e facile per trovare i font mancanti
Windows -> Carattere Una piccola casella di carattere verrà visualizzata con informazioni sui font.
Seleziona il nome del carattere e scorri verso il basso fino alla fine.
Noterai l'elenco dei font mancanti in colore grigio chiaro alla fine dell'elenco dei font.
Da : http://www.bala-krishna.com/how-to-find-fonts-used-in-psd-file/
Se il testo è già stato rasterizzato, il modo più semplice sarebbe ritagliare l'area con il carattere che vuoi identificare, salvare come .png e caricarlo su WhatTheFont , dove dovrebbe essere in grado di dirti cos'è, a meno che non sia un carattere oscuro o su misura. Identifont è un altro sito che puoi usare, dove descrivi le caratteristiche del carattere.
Sulla base della risposta originale di David (DetectFonts.jsx), ho modificato lo script per risolvere il problema riportato da Drew nei commenti: Trova tutti i font usati in un file di Photoshop .
Segui le istruzioni originali ma usa invece questo corpo dello script - l'unica differenza è qualche controllo nullo (presumibilmente una differenza di versione di Photoshop o qualcosa a che fare con dati mancanti su particolari tipi di oggetti, probabilmente specifici del designer o del sistema operativo)
Presenterò anche una richiesta di pull a 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.');
}
Io farei un'istantanea del testo di cui hai bisogno (preferibilmente ingrandito) e userei WhatTheFont per avere qualche ipotesi. (Ma il carattere non dovrebbe essere mostrato quando apri il PSD e selezioni il rispettivo testo?)
E naturalmente, se non è un font web-safe, dovrai trovare un modo appropriato per sostituirlo, o per fornire un fallback stack.
C'è un'estensione/pannello gratuito di Photoshop che può fare questo lavoro per te, Free Photoshop Font Detector http://www.layerhero.com/photoshop-font-detector/ ), e se vuoi raccogliere/copiare i file di font dalla cartella di sistema, prova Photoshop Art Packer http://www.layerhero.com/photoshop-art-packer/ )
Volevo conoscere i font dei documenti insieme ai loro stili, dimensioni, colori, formattazione, ecc. per scopi di sviluppo web e CSS, quindi ecco cosa ho trovato:
Usa lo strumento online per ottenere i font del file psd http://psdfonts.com/
C'è un'opzione nella scheda Livelli che ti permette di filtrare tutti i livelli per mostrare solo i font. Devi selezionare ogni livello per vederli effettivamente ed è utile solo se hai bisogno di una rapida occhiata a loro
Spero che aiuti qualcuno tre anni dopo che questo è stato chiesto.
Uno sviluppatore mi ha chiesto quasi la stessa cosa di cui hai bisogno. Mi sono inventato un semplice script di editing, per esportare le proprietà dei livelli (testo, nome del carattere, dimensione del carattere, colore del carattere) di cui hai bisogno quando sviluppi, in un singolo file txt (dovrebbe funzionare su una macchina Windows).
Basta salvarlo come “ExportTexts.js” e metterlo in Adobe Photoshop > Presets > Scripts.
Dopo di che, eseguite (o riavviate) Photoshop ed eseguite lo script (File -> Scripts -> ExportTexts). Assicurati anche di aver disaggregato tutti i livelli prima di fare questo. Il file esportato dovrebbe essere nella stessa cartella del 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
Per ottenere le informazioni sui font da un file PSD potete usare strumenti online se non potete o non volete usare Photoshop (o se preferite usare Gimp, che rasterizza i font PSD).
Per esempio puoi provare questo estrattore online di font PSD html5 “Get PSD Fonts”.
E’ un estrattore di informazioni sui font PSD basato su Melitingice Github project psd.js che non richiede il caricamento di file, lavorando localmente nella tua pagina del browser