Encontre todas as fontes usadas em um arquivo do Photoshop


54

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?


A partir do CC2018, 2 dos scripts abaixo e o plugin jsx estão quebrados. Comentei especificamente para cada um.
Drew

Respostas:


63

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.


23

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.',);
}

insira a descrição da imagem aqui


11
+500000 pontos. Incrível.
Half Crazed 03/03


Para escrever texto em uso prancheta esta resposta: stackoverflow.com/a/13983268/1578857
Dima Kurilo

(Photoshop CC2018) Erro 8500: A propriedade solicitada não existe. Linha 53: var n = layerStyles.getObjectValue (countStyles) .getObjectValue (stringIDToTypeID ('textStyle')). GetString (stringIDToTypeID ('fontPostScriptName'));
Drew

@Drew Estou prestes a postar uma resposta atualizada com uma versão fixa do script
agrath 17/10

8

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.


2
+1: eu vim com a mesma solução. Por alguma razão, o GIMP não importou o PSD corretamente e eu não sabia qual fonte foi usada. Analisei o arquivo PSD em um editor HEX para encontrá-lo (procure por: "Fonte" como texto). Editor recomendado: "abençoe".
le13

5

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.


A pergunta pode ser antiga, mas possui quase 6.000 visualizações. Se você pudesse fornecer um script, isso seria muito apreciado! Bem-vindo ao Super Usuário, a propósito!
slhck

Boa decisão. Projeto GitHub de código-fonte aberto. Se alguém conhece o JavaScript básico, deve se sentir em casa.
David

uau, isso realmente funciona muito bem: D (y)!
Ejaz

4

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.

insira a descrição da imagem aqui

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


Existem várias maneiras de ativar esse painel: Outro é o Tipo -> Painéis -> Personagem.
28580 martialy

3

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.


o texto não é rasterizado, ou seja, está em uma camada separada.
Dave

2
@ Dave: Se o texto ainda é editável, tudo o que você precisa fazer é selecioná-lo e ver o que aparece no menu suspenso de fontes ou na paleta de informações. Isso é realmente óbvio!
Paradroid

1

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.



1

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.');
}

0

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.



0

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

Seu script está quebrado na linha 8
davidcondrey 29/04

E na linha 12. Erro 8500, a propriedade não existe: outputFile.write (.
Drew

0

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


O "Free Photoshop Font Detector" não está mais disponível para download gratuito e agora faz parte de uma extensão cara do FontHero por US $ 39 .
paulmz

Nenhum deles está disponível. O LayerHero está morto .. Surpreendentemente, você pode fazer o download do Font Detector na máquina WayBack : web.archive.org/web/20171211184218/http://www.layerhero.com/… No entanto, não consegui instalá-lo, nem com o Extension Manager da Anastasiy nem o Adobe ExMan.
Tirou

0

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.


0

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!

-1

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


Ele abre o arquivo em javascript, sem enviá-lo para um servidor, na sua própria página do navegador! Você tem que soltar o arquivo para especificar o caminho do arquivo ...
Giovazz89

Você pode divulgar qualquer aflição que tenha com os projetos mencionados, mesmo que seja gratuita.
Journeyman Geek
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.