Ho questo .psd(file Photoshop) e sto provando a convertirlo in HTML e CSS.
L'unica cosa che non riesco a determinare è quale font hanno usato in .psd
Come posso sapere quali caratteri sono stati usati nel file Photoshop?
Risposte:
Dipende da come si desidera estrarre le informazioni.
Seleziona lo strumento Testo ( icona a T con serif) e fai clic sull'area di testo per modificarlo. Mostrerà quale tipo di carattere viene utilizzato nella finestra Carattere.
Questo elencherà tutti i caratteri incorporabili utilizzati nel file PSD, a condizione che tu possa incorporarli.
Nello strumento Carattere, vai al menu a discesa di selezione dei caratteri. Alla fine dell'elenco saranno presenti i caratteri utilizzati nell'immagine ma mancanti dal sistema. Questi saranno in genere disattivati.
Se vedi delle immagini rasterizzate di cui hai bisogno del volto del carattere, ti consigliamo di esportare solo quella sezione come un'immagine chiara e autonoma e utilizzare un servizio come What the Font per determinare il carattere.
Salvare questo script come nuovo file nella cartella Photoshop> Preimpostazioni> Script. Assegnalo al nome che preferisci, ad esempio "Rileva 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 del file PSD è documentato da Adobe: puoi leggere come memorizza le informazioni sui caratteri.
È quindi possibile esaminare un dump esadecimale del file e utilizzare la specifica del formato file per trovare i caratteri.
In alternativa, i nomi dei caratteri dovrebbero essere visibili nell'output stringsdell'utilità trovata sui sistemi Linux / Unix.
Questo è in realtà molto facile da fare usando gli script PS, che possono scorrere i livelli del tuo PSD e estrarre i dati del livello di testo.
Ultimamente ho sperimentato uno script basato su JavaScript per sovrapporre le informazioni sui caratteri direttamente ai componenti forniti agli sviluppatori. Non è finito, ma se c'è ancora interesse (vedo che è piuttosto vecchio) posso mettere su una versione rapida e sporca che fa apparire semplicemente i caratteri usati in una finestra.
AGGIORNAMENTO: ho messo insieme una versione approssimativa ma funzionante "lite" della sceneggiatura che sto sviluppando. Sentiti libero di contribuire - https://github.com/davidklaw/completer . Per chi non ha familiarità con gli script, basta prendere il file di script e metterlo nella cartella Presets / Scripts di PS e sarà disponibile in File -> Script.
Modo semplice e veloce per trovare font mancanti
Windows -> Carattere Verrà visualizzata una piccola casella con le informazioni sui caratteri.
Seleziona il nome del menu a discesa e scorri verso il basso fino alla fine.
Noterai l'elenco dei caratteri mancanti in colore grigio chiaro alla fine dell'elenco dei caratteri.
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 si desidera identificare, salvarlo come .png e caricarlo su WhatTheFont , dove dovrebbe essere in grado di dirti di cosa si tratta, a meno che è oscuro o su misura.
Identifont è un altro sito che è possibile utilizzare, in cui si descrivono le caratteristiche del carattere tipografico.
Vorrei fare uno scatto del testo che ti serve (preferibilmente ingrandito) e utilizzare WhatTheFont per avere qualche idea . (Non dovrebbe essere mostrato il carattere tipografico quando apri il PSD e selezioni il rispettivo testo?)
E, naturalmente, se non è un carattere sicuro per il web, dovrai trovare un modo appropriato per sostituirlo o fornire uno stack di fallback.
Usa l' estratto di Creative Cloud
Elencherà tutti i caratteri utilizzati (tra le altre cose utili).
Sulla base della risposta originale di David (DetectFonts.jsx), ho modificato lo script per risolvere il problema segnalato da Drew nei commenti: Trova tutti i caratteri utilizzati in un file Photoshop .
Segui le istruzioni originali ma usa invece questo corpo di script: l'unica differenza sono alcuni controlli nulli (presumibilmente una differenza di versione di Photoshop o qualcosa a che fare con dati mancanti su determinati tipi di oggetti, probabilmente designer o specifici del sistema operativo)
Inoltrerò anche una richiesta 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.');
}
Utilizza lo strumento online per ottenere i caratteri del file psd
Lo sviluppatore mi ha chiesto quasi la stessa cosa di cui avevi bisogno. Mi è venuta in mente la modifica di semplici script, per esportare le proprietà dei livelli (testo, nome del carattere, dimensione del carattere, colore del carattere) di cui hai bisogno durante lo sviluppo, in un singolo file txt (dovrebbe funzionare su macchine Windows).
Basta salvarlo come "ExportTexts.js" e inserirlo in Adobe Photoshop> Preimpostazioni> Script.
Successivamente, esegui (o riavvia) Photoshop ed esegui script (File -> Script -> ExportTexts). Assicurati anche di separare tutti i livelli prima di farlo. Il file esportato dovrebbe trovarsi nella stessa directory 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
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 file di font dal sistema cartella, prova Photoshop Art Packer ( http://www.layerhero.com/photoshop-art-packer/ )
C'è un'opzione nella scheda Livelli che ti consente di filtrare tutti i livelli per mostrare solo i caratteri. Devi selezionare ogni livello per vederli effettivamente ed è utile solo se hai bisogno di uno sguardo veloce a loro
Spero che possa aiutare qualcuno tre anni dopo che questo è stato chiesto.
Volevo conoscere i caratteri del documento insieme ai loro stili, dimensioni, colori, formattazione, ecc. Per lo sviluppo web e scopi CSS, quindi ecco cosa mi è venuto in mente:
Per ottenere le informazioni sui caratteri da un file PSD puoi usare gli strumenti online se non puoi o non vuoi usare Photoshop (o se preferisci usare Gimp, che rasterizza i caratteri PSD).
Ad esempio puoi provare questo estrattore online di font html5 PSD "Ottieni font PSD".
Si tratta di un estrattore di informazioni sui caratteri PSD basato sul progetto Melitingice Github psd.js che non richiede il caricamento di file, che funziona localmente nella pagina del browser