Exportieren von Schriftartinformationen für eine bestimmte PSD-Datei zur Verwendung beim Schreiben von CSS

Ich mache Front-End-Entwickler, also kommt diese Frage aus dieser Perspektive. Wenn ich eine erhalte, .psdgehe ich jede Schriftart im Design manuell durch, klicke darauf und benutze dann das Zeichenfeld, um Schriftart, Farbe, Größe, Kerning usw. zu erhalten. Manchmal erhalte ich ein Design, das mehrere verschiedene Schriftarten verwendet (4+) ) mit vielen Variationen derselben Schriftart (Größe, Farbe, Gewicht usw.). Dies ist eine ziemlich mühsame Arbeit ... Kann Photoshop trotzdem eine Liste aller verwendeten Schriftarten und ihrer Variationen exportieren? Zum Beispiel eine Liste wie:

Arial fett 16px schwarz
Arial regulär 14px schwarz
Arial regulär 14px blau
Oswald 32px rgb (13,74,56)
...

Irgendwelche Vorschläge dazu? Wenn es eine Art Plugin gibt, das diese Informationen nur über die Elemente legt, wäre das fantastisch!

Vielen Dank.

Natürlich können Sie das ExtendScript Toolkit verwenden, um Photoshop-Dokumente zu untersuchen und zu bearbeiten. Weitere Informationen finden Sie in der Dokumentation oder in den verschiedenen PS-Skriptforen.

Basierend auf dem Skript in diesem Artikel habe ich das folgende Skript erstellt. Für jede Textebene in einer PSDDatei werden Schriftart, Schriftgröße und Füllfarbe auf der Javascript-Konsole gedruckt:

function run(){
    var layerSets = app.activeDocument.layerSets;
    dumpLayerSets(layerSets);

    $.writeln("Top-level layers:");
    dumpLayers(app.activeDocument.layers);

}

function dumpLayerSets(layerSets){
    $.writeln("--- Processing...");
    var len = layerSets.length;
    for(var i=0;i<len;i++){
         var layerSet = layerSets[i];
         //$.writeln(layerSet.name);
         dumpLayers(layerSet.artLayers);
    }
}

function dumpLayers(layers){
    var len = layers.length;
    for(var i=0;i<len;i++){
         var layer = layers[i];
         if(layer.kind==undefined){
                continue;
         }
        if(layer.kind == LayerKind.TEXT){
         $.writeln('font: '+ layer.textItem.font +' font-size: ' + layer.textItem.size + ' color: #' + layer.textItem.color.rgb.hexValue);
        }
    }
}
run();

Öffnen Sie zum Testen ein Dokument mit Textebenen in Photoshop. Öffnen Sie das ExtendScript Toolkit und verknüpfen Sie es mit Ihrer Photoshop-Instanz. Fügen Sie den obigen Code in den Arbeitsbereich ein und klicken Sie auf die Schaltfläche Ausführen.

Basierend auf dieser Datei:

Ich habe folgende Ausgabe erhalten:

--- Processing...
Top-level layers:
font: MyriadPro-It font-size: 144 pt color: #0000FF
font: MyriadPro-Bold font-size: 144 pt color: #00FF00
font: MyriadPro-Regular font-size: 144 pt color: #FF0000
Result: undefined

Das Photoshop-Plugin SpecKing bietet die Option, alle typografischen Spezifikationen in Ihrer Photoshop-Datei anzuzeigen / zu generieren - könnte das helfen? Ich habe es nicht selbst versucht, aber es sieht nützlich aus.

Beachten Sie, dass CSS Schriftanpassung auf den Schrift basieren Familienname, nicht der Fullname (zB „Myriad Pro Bold“) oder Postscript - Namen (zB „MyriadPro-Bold“). Chrome / Safari unter OSX stimmt mit dem PostScript-Namen überein, dies ist jedoch kein Standardverhalten. In Firefox funktioniert es nicht und in keinem Windows-basierten Browser. Für die Verwendung in CSS müssen Sie den PostScript-Namen Familien- / Gewichts- / Stilkombinationen zuordnen. Anstelle von MyriadPro-BoldIt:

font-family: Myriad Pro;
font-weight: bold;
font-style:  italic;

usw.

Es gibt Plugins / Dienste, mit denen Sie diese (und andere Informationen) aus PSDs extrahieren können:

• Avocode
• CSSHat
• Projekt Parfait
• CSS3PS

Ich weiß , dass dies vor einiger Zeit gefragt wurde, aber es gibt auch eine Website, PSDFonts.com , die diese Informationen für Sie bereitstellen kann (obwohl sie keine Überlagerung bietet).