Encontre todas as fontes usadas em um arquivo do Photoshop

Eu tenho isso .psd(arquivo do Photoshop) e estou tentando convertê-lo em HTML e CSS.

A única coisa que não consigo determinar é qual fonte eles usaram no .psd

Como posso descobrir quais fontes foram usadas no arquivo Photoshop?

Depende de como você deseja extrair as informações.

Por seção ou área de texto

Selecione a ferramenta Texto ( ícone T com serifas) e clique na área de texto para editá-la. Ele mostrará qual fonte está sendo usada na janela Caractere.

Todas as fontes usadas de relance

1. Salve ou exporte o documento de imagem como PDF
2. Abra a versão PDF no Adobe Reader
3. Selecione Arquivo → Propriedades → Fontes

Isso listará todas as fontes incorporáveis ​​usadas no arquivo PSD, desde que você possa incorporá-las.

Fontes ausentes

Na ferramenta Caractere, vá para o menu suspenso de seleção de fonte. No final da lista, estarão as fontes usadas na imagem, mas que estão faltando no seu sistema. Estes serão normalmente acinzentados.

Imagens fragmentadas

Se você vir imagens rasterizadas das quais precisa da face da fonte, é melhor exportar apenas essa seção como uma imagem clara e independente e usar um serviço como What the Font para determinar a fonte.

Salve este script como um novo arquivo na pasta Photoshop> Presets> Scripts. Nomeie o que quiser, como "Detectar 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.',);
}

O formato do arquivo PSD é documentado pela Adobe - você pode ler como ele armazena as informações da fonte.

Você pode examinar um despejo hexadecimal do arquivo e usar a especificação do formato do arquivo para encontrar as fontes.

Como alternativa, os nomes das fontes devem estar visíveis na saída do stringsutilitário encontrado nos sistemas Linux / Unix.

Isso é realmente muito fácil de usar usando scripts PS, que podem percorrer as camadas do seu PSD e extrair dados da camada de texto.

Ultimamente, tenho experimentado um script baseado em JavaScript para sobrepor informações de fonte diretamente em composições que são entregues aos desenvolvedores. Não está terminado, mas se ainda houver interesse (vejo que isso é bastante antigo), posso colocar uma versão rápida e suja que simplesmente exibe as fontes usadas em uma janela.

ATUALIZAÇÃO: Criei uma versão simplificada, porém funcional, do script que estou desenvolvendo. Sinta-se à vontade para contribuir - https://github.com/davidklaw/completer . Para aqueles que não estão familiarizados com scripts, basta pegar o arquivo de script e colocá-lo na pasta PS Presets / Scripts, e ele estará disponível em Arquivo -> Scripts.

Maneira rápida e fácil de encontrar fontes ausentes

1. Windows -> Caractere Uma caixa pequena de caracteres será exibida com informações sobre fontes.

2. Selecione o nome da fonte e role para baixo até o final.

3. Você notará a lista de fontes ausentes na cor cinza claro no final da lista de fontes.

De: http://www.bala-krishna.com/how-to-find-fonts-used-in-psd-file/

Se o texto já tiver sido rasterizado, a maneira mais fácil seria cortar a área com o tipo de letra que você deseja identificar, salvar como .png e carregá-lo no WhatTheFont , onde deve ser capaz de dizer o que é, a menos que é obscuro ou sob medida.

O Identifont é outro site que você pode usar, onde descreve características do tipo de letra.

Gostaria de tirar uma foto do texto que você precisa (de preferência ampliada) e usar o WhatTheFont para obter algumas sugestões. (O tipo de letra não deve ser mostrado quando você abre o PSD e seleciona o respectivo texto?)

E, claro, se não for uma fonte segura para a Web, você precisará encontrar uma maneira apropriada de substituí-la ou fornecer uma pilha de fallback.

Usar extração da Creative Cloud

Ele listará todas as fontes usadas (entre outras coisas úteis).

Com base na resposta original de David (DetectFonts.jsx), modifiquei o script para corrigir o problema relatado por Drew nos comentários: Encontre todas as fontes usadas em um arquivo do Photoshop .

Siga as instruções originais, mas use esse corpo do script - apenas a diferença é algumas verificações nulas (presumivelmente uma diferença de versão do photoshop ou algo a ver com dados ausentes em tipos de objetos específicos, provável designer ou sistema operacional)

Também enviarei uma solicitação de recebimento para 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.');
}

Abra o Photoshop. Vá para Windows »Personagem . Uma pequena caixa será exibida. Basta selecionar a camada de texto e a caixa informará a família da fonte, tamanho, etc.

Use a ferramenta online para obter fontes do arquivo psd

http://psdfonts.com/

Desenvolvedor me perguntou quase o mesmo pensar como você precisava. Eu vim com a edição de scripts simples, para exportar propriedades da camada (texto, nome da fonte, tamanho da fonte, cor da fonte) que você precisa no desenvolvimento, para um único arquivo txt (deve funcionar na máquina Windows).

Salve isso como "ExportTexts.js" e insira Adobe Photoshop> Presets> Scripts.

Depois disso, execute (ou reinicie) o Photoshop e execute o script (Arquivo -> Scripts -> ExportTexts). Além disso, certifique-se de desagrupar todas as camadas antes de fazer isso. O arquivo exportado deve estar no mesmo diretório do arquivo 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

Há um Painel / Extensão do Photoshop gratuito que pode fazer esse trabalho para você, o Free Photoshop Font Detector ( http://www.layerhero.com/photoshop-font-detector/ ) e se você deseja coletar / copiar arquivos de fonte do sistema pasta, tente o Photoshop Art Packer ( http://www.layerhero.com/photoshop-art-packer/ )

Há uma opção na guia Camadas que permite filtrar todas as camadas para mostrar apenas as fontes. Você precisa selecionar cada camada para realmente vê-las e isso é útil apenas se você precisar dar uma rápida olhada nelas.

Espero que ajude alguém três anos depois que isso foi perguntado.

Eu queria conhecer fontes de documentos, juntamente com seus estilos, tamanhos, cores, formatação, etc. para fins de desenvolvimento web e CSS, então aqui está o que eu vim com:

1. Clique no ícone "T" no painel Camadas para filtrar / exibir apenas as camadas de texto
2. Shift + clique esquerdo na camada de texto superior na paleta Camadas
3. Role até a parte inferior da paleta Camadas e Shift + clique esquerdo na camada de texto inferior
4. Clique com o botão direito do mouse nas camadas selecionadas na paleta Camadas e escolha "Duplicar camadas"
5. Em Documento de destino, selecione Novo
6. Vá para o seu novo documento, que deve conter todas as suas camadas de texto
7. Selecione todas as camadas de texto novamente (consulte as etapas 2 e 3)
8. Clique no ícone de pasta na parte inferior da paleta Camadas para transformar todas as camadas de texto em um grupo
9. Altere o modo de mesclagem do grupo (a lista suspensa na paleta de camadas) para "Normal"
10. Clique com o botão direito do mouse no seu novo grupo
11. Escolha "Copiar CSS"
12. Cole em um documento e formate sua lista de estilos conforme necessário!

Para obter as informações das fontes de um arquivo PSD, você pode usar ferramentas on-line se não puder ou não usar o Photoshop (ou se preferir usar o Gimp, que rasteriza as fontes PSD).

Por exemplo, você pode experimentar este extrator online de fontes PSD html5 "Get PSD Fonts".

É um extrator de informações de fonte PSD baseado no projeto Melitingice Github psd.js que não requer upload de arquivos, trabalhando localmente na página do seu navegador