2011-04-09 17:57:57 +0000 2011-04-09 17:57:57 +0000
54
54
Advertisement

Encontrar todas as fontes utilizadas num ficheiro Photoshop

Advertisement

Eu tenho este .psd (ficheiro Photoshop) e estou a tentar convertê-lo para HTML & CSS.

A única coisa que não consigo determinar é que fonte utilizaram no ficheiro .psd

Como posso descobrir que fontes foram utilizadas no ficheiro Photoshop?

Advertisement
Advertisement

Respostas (16)

63
63
63
2011-11-13 22:52:45 +0000

Depende de como se pretende extrair a informação.

Por secção ou área de texto

Seleccione a ferramenta Texto ( T* ícone com serifs) e clique na área de texto para a editar. Irá mostrar qual a fonte que está a ser utilizada na janela de Caracteres.

Todas as fontes utilizadas num relance

  1. Guardar ou exportar o documento de imagem como um PDF
  2. Abrir a versão PDF em Adobe Reader ###. Seleccione o ficheiro → Propriedades → Fontes

Isto lista todas as fontes incorporáveis utilizadas no ficheiro PSD, desde que as possa incorporar.

Fontes em falta

Na ferramenta Caracteres, vá para o menu de selecção de fontes. No final da lista estarão as fontes que são utilizadas na imagem, mas que faltam no seu sistema. Estas serão tipicamente cinzentas.

Imagens rasterizadas

Se vir qualquer imagem rasterizada que precise da face da fonte, é melhor exportar apenas essa secção como uma imagem clara e autónoma e utilizar um serviço como O que a Fonte para determinar a fonte.

23
23
23
2015-04-29 22:34:00 +0000

Guarde este script como um novo ficheiro no seu Photoshop > Presets > pasta Scripts. Dê-lhe o nome que quiser, tal como “Detectar Fontes.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.',);
}

8
Advertisement
8
8
2011-04-09 18:08:16 +0000
Advertisement

O formato do ficheiro PSD é documentado por Adobe - pode ler como armazena a informação da fonte.

Poderá então examinar uma descarga hexadecimal do ficheiro e utilizar a especificação do formato do ficheiro para encontrar as fontes.

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

5
5
5
2012-07-18 02:56:44 +0000

Isto é realmente muito fácil de fazer utilizando scripts PS, que podem iterar através das camadas do seu PSD e puxar os dados da camada de texto.

Tenho experimentado ultimamente com um script baseado em JavaScript para sobrepor a informação da fonte directamente nos comps que são entregues aos programadores. Não está terminado mas se ainda houver interesse (vejo que isto é bastante antigo) posso colocar uma versão rápida e suja que simplesmente aparece as fontes usadas numa janela.

UPDATE: Juntei uma versão aproximada mas “leve” do guião que estou a desenvolver. Sinta-se à vontade para contribuir - https://github.com/davidklaw/completer . Para os não familiarizados com scripts basta pegar no ficheiro do script e colocá-lo na sua pasta PS Presets/Scripts e ele estará disponível em File -> Scripts.

4
Advertisement
4
4
2014-10-14 04:50:44 +0000
Advertisement

Maneira rápida e fácil de encontrar fontes em falta

  1. Janelas -\i1> Caracteres Uma pequena caixa de caracteres exibirá com informações sobre fontes.

  2. Seleccione o nome da fonte e desloque-se para baixo até ao fim.

  3. Notará a lista de fontes em falta na cor cinza claro no fim da lista de fontes.

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

3
3
3
2011-01-25 23:25:48 +0000

Se o texto já tiver sido rasterizado, a forma mais fácil seria recortar a área com o tipo de letra que pretende identificar, guardar como um .png e carregá-lo para WhatTheFont , onde deverá ser capaz de lhe dizer o que é, a menos que seja obscuro ou por medida. Identifont* é outro site que pode utilizar, onde descreve características do tipo de letra.

1
Advertisement
1
1
2019-10-17 20:58:11 +0000
Advertisement

Com base na resposta original de David (DetectFonts.jsx), modifiquei o guião para corrigir a questão relatada por Drew nos comentários: Encontrar todas as fontes utilizadas num ficheiro Photoshop .

Siga as instruções originais mas utilize este corpo do script em vez disso - apenas algumas verificações nulas (presumivelmente uma diferença na versão do photoshop ou algo relacionado com dados em falta sobre determinados tipos de objectos, provavelmente designer ou sistema operativo específico)

Irei também submeter um pedido de extracção a 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.');
}
1
1
1
2011-04-09 23:02:10 +0000

Eu tiraria uma fotografia do texto de que precisa (de preferência com zoom) e usaria WhatTheFont para obter alguns palpites. (Mas não deveria o tipo de letra ser mostrado ao abrir o PSD e seleccionar o respectivo texto?)

E, claro, se não for uma fonte segura para a web, terá de encontrar uma forma adequada de a substituir, ou de fornecer uma pilha de emergência.

1
Advertisement
1
1
2015-01-08 20:26:37 +0000
Advertisement

Use Extracto de Nuvem Criativa

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

0
0
0
2011-05-21 07:50:50 +0000

Abrir o Photoshop. Ir para Windows “ Personagem. Uma pequena caixa irá aparecer. Basta seleccionar a camada de texto e a caixa dir-lhe-á a família da fonte, tamanho, etc.

0
0
0
2014-05-06 07:22:17 +0000

Existe um Photoshop Extension/Panel gratuito que pode fazer este trabalho por si, Free Photoshop Font Detector http://www.layerhero.com/photoshop-font-detector/ ), e se quiser recolher/copiar ficheiros de fontes da pasta do sistema, experimente Photoshop Art Packer http://www.layerhero.com/photoshop-art-packer/ )

0
0
0
2019-03-11 01:26:50 +0000

Queria conhecer as fontes de documentos juntamente com os seus estilos, tamanhos, cores, formatação, etc. para fins de desenvolvimento da web e CSS, por isso, eis o que me lembrei:

  1. Clique no ícone “T” no painel Layers para filtrar/visualizar apenas camadas de texto
  2. Deslocar + clicar com o botão esquerdo do rato na camada de texto mais alta da paleta de Camadas
  3. Desloque-se até ao fundo da paleta de Camadas e Shift + clique esquerdo na camada de texto inferior
  4. Clique com o botão direito do rato nas camadas seleccionadas na paleta de Camadas e escolha “Duplicate Layers”
  5. Em Destination Document, seleccionar New
  6. Vá ao seu novo documento que deve conter todas as suas camadas de texto
  7. Seleccione novamente todas as camadas de texto (ver passo #2 e #3)
  8. Clique no ícone da pasta na parte inferior da paleta Layers para tornar todas as camadas de texto num único grupo
  9. Alterar o modo de mistura do grupo (o dropdown na paleta de camadas) para “Normal”
  10. Clique com o botão direito do rato no seu novo grupo
  11. Escolher “Copiar CSS”
  12. Colar num documento e formatar a sua lista de estilos conforme necessário!
0
0
0
2013-09-26 04:39:43 +0000

Utilize a ferramenta online para obter fontes do ficheiro psd http://psdfonts.com/

0
0
0
2014-09-27 05:04:39 +0000

Existe uma opção no separador Layers que lhe permite filtrar todas as camadas para mostrar apenas as fontes. Tem de seleccionar cada camada para as ver realmente e só é útil se precisar de uma rápida olhadela

Espero que ajude alguém três anos após isto ter sido pedido.

0
0
0
2013-11-17 13:46:06 +0000

O programador pediu-me quase o mesmo pensamento que você precisava. Eu inventei um script simples de edição, para exportar propriedades de camada (texto, nome da fonte, tamanho da fonte, cor da fonte) que precisa quando desenvolve, para um único ficheiro txt (deve funcionar na máquina Windows).

Basta guardar isto como “ExportTexts.js” e colocar em Adobe Photoshop \ > Presets \ > Scripts.

Depois disso, correr (ou reiniciar) Photoshop e executar script (Ficheiro -> Scripts -> ExportTexts). Certifique-se também de que não agrupou todas as camadas antes de o fazer. O ficheiro exportado deve estar no mesmo dir que o ficheiro 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
-1
-1
-1
2016-05-09 10:58:33 +0000

Para obter as fontes de informação de um ficheiro PSD pode usar ferramentas online se não puder ou não quiser usar o Photoshop (ou se preferir usar o Gimp, que rasteriza as fontes PSD).

Por exemplo, pode experimentar este extractor de fontes online PSD html5 “Get PSD Fonts”.

É um extractor de informação de fontes PSD baseado em Melitingice Github project psd.js que não requer o carregamento de ficheiros, trabalhando localmente na página do seu navegador

Advertisement

Questões relacionadas

5
10
2
7
5
Advertisement