Encontre todas as fontes usadas em um arquivo do Photoshop

Question

Eu tenho esse .psd (arquivo do Photoshop) e estou tentando convertê-lo para HTML & CSS.

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

Como posso descobrir quais fontes foram usadas no arquivo do Photoshop?

    

Answer 1

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 de caracteres.

Todas as fontes usadas em resumo

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

Isso lista todas as fontes incorporadas usado no arquivo PSD, desde que você possa incorporá-los.

Fontes ausentes

Na ferramenta Character, acesse a lista suspensa de seleção de fontes. No final da lista, estarão as fontes usadas na imagem, mas que estão faltando no seu sistema. Estes serão tipicamente acinzentados.

Imagens Rastersized

Se você vir imagens rasterizadas de que precisa para a fonte, é melhor exportar apenas essa seção como uma imagem clara e autônoma e usar um serviço como O que a fonte para determinar a fonte.

    

Answer 2

Salve este script como um novo arquivo no seu Photoshop > Predefinições > Pasta Scripts. Nomeie o que você 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.',);
}

    

Answer 3

O formato de arquivo PSD é documentado pela Adobe - você pode ler como ele armazena informações de fontes.

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

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

    

Answer 4

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.

Eu tenho experimentado ultimamente com 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 é bem antigo), posso criar uma versão rápida e suja que simplesmente mostre as fontes usadas em uma janela.

ATUALIZAÇÃO: Eu montei uma versão "básica" do script que estou desenvolvendo. Sinta-se à vontade para contribuir - link . 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.

    

Answer 5

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

1. Janelas - > Caractere Uma caixa de caracteres pequenos será exibida com informações de fontes.

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

3. Você verá uma lista de fontes ausentes em cinza claro no final da lista de fontes.

De: link

    

Answer 6

Se o texto já foi rasterizado, o caminho mais fácil seria cortar a área com o tipo de letra que você deseja identificar, salvar como .png e enviá-lo para WhatTheFont , onde deve ser capaz de lhe dizer o que é, a menos que seja um obscuro ou sob medida.

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

    

Answer 7

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

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.

    

Answer 8

Use o Extrato de nuvem da Creative

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

    

Answer 9

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

    

Answer 10

Use a ferramenta on-line para obter fontes do arquivo psd

link

    

Answer 11

O desenvolvedor me perguntou quase da mesma maneira que você precisava. Eu criei um script simples para exportar as propriedades das camadas (texto, nome da fonte, tamanho da fonte, cor da fonte) que você precisa ao desenvolver, para um único arquivo txt (deve funcionar na máquina Windows).

Basta salvar isso como "ExportTexts.js" e colocar no Adobe Photoshop > Predefinições > Scripts.

Depois disso, execute (ou reinicie) o Photoshop e execute o script (Arquivo - > Scripts - > ExportTexts). Além disso, certifique-se de que você desagrupou 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

    

Answer 12

Há uma extensão / painel do Photoshop que pode fazer esse trabalho para você, Free Photoshop Font Detector ( link ), e se você quiser coletar / copiar arquivos de fontes da pasta do sistema, tente o Photoshop Art Packer ( link )

    

Answer 13

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

Espero que ajude alguém três anos depois disso.

    

Answer 14

Para obter as informações de 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 fontes PSD).

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

É um extrator de informações de fontes PSD com base no projeto psd.js do Melitingice Github que não requer o upload de arquivos, funcionando localmente na sua página do navegador