Como exportar informações de fonte para um arquivo PSD específico para uso na gravação de CSS

Como estou desenvolvendo front-end, essa pergunta vem dessa perspectiva. Quando recebo um, .psdeu passo manualmente cada fonte no design, clico nele e, em seguida, uso o painel de caracteres para obter a fonte, cor, tamanho, kerning etc. Às vezes, recebo um design que usa várias fontes diferentes (4+ ) com muitas variações da mesma fonte (tamanho, cor, peso etc.). Este é um trabalho bastante tedioso ... Existe alguma maneira de o Photoshop exportar uma lista de todas as fontes usadas e suas variações? Por exemplo, uma lista como:

Arial bold 16px preto
Arial regular 14px preto
Arial regular 14px azul
Oswald 32px rgb (13,74,56)
...

Alguma sugestão para isso? Além disso, se houver um tipo de plug-in que apenas coloque essas informações sobre os elementos que seriam fantásticos!

Obrigado.

Claro, você pode usar o ExtendScript Toolkit para investigar e manipular documentos do Photoshop. Para obter mais informações, consulte a documentação ou pesquise nos vários fóruns de scripts do PS.

Com base no script deste artigo , criei o seguinte script. Para cada camada de texto em um PSDarquivo, ele imprimirá a fonte, o tamanho da fonte e a cor de preenchimento no console javascript:

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();

Para testar, abra um documento com camadas de texto no Photoshop. Abra o ExtendScript Toolkit e vincule-o à sua instância do Photoshop. Cole o código acima na área de trabalho e pressione o botão Executar.

Com base neste arquivo:

Eu recebi a seguinte saída:

--- 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

o plugin do photoshop SpecKing tem uma opção para mostrar / gerar todas as especificações tipográficas no seu arquivo do photoshop - isso poderia ajudar? Eu não tentei eu mesmo, mas parece útil.

Lembre-se de que a correspondência da fonte CSS é baseada no nome da família da fonte , não no nome completo (por exemplo, "Myriad Pro Bold") ou no nome PostScript (por exemplo, "MyriadPro-Bold"). O Chrome / Safari no OSX corresponderá ao nome PostScript, mas esse comportamento não é padrão, não funcionará no Firefox e não funcionará em nenhum navegador baseado no Windows. Para uso em CSS, você precisará mapear o nome PostScript para combinações de família / peso / estilo, portanto, em vez de MyriadPro-BoldIt:

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

etc.

Existem plugins / serviços que permitem extrair isso (e outras informações) dos PSDs:

• Avocode
• CSSHat
• Projeto Parfait
• CSS3PS

Sei que isso foi perguntado há um tempo atrás, mas também existe um site, PSDFonts.com , que pode fornecer essas informações para você (embora não forneça uma sobreposição).