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

Encontrar todas las fuentes utilizadas en un archivo de Photoshop

Tengo este .psd (archivo de Photoshop) y estoy tratando de convertirlo a HTML & CSS.

Lo único que no puedo determinar es qué fuente utilizaron en el .psd

¿Cómo puedo averiguar qué fuentes se utilizaron en el archivo de Photoshop?

Respuestas (16)

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

Depende de cómo quiera extraer la información.

Por sección o área de texto

Seleccione la herramienta Texto (icono T con serifas) y haga clic en el área de texto para editarlo. Se mostrará el tipo de letra que se está utilizando en la ventana Carácter.

Todas las fuentes utilizadas de un vistazo

  1. Guarde o exporte el documento de imagen como PDF
  2. Abra la versión PDF en Adobe Reader
  3. Seleccione Archivo → Propiedades → Fuentes

Esto listará todas las fuentes incrustables utilizadas en el archivo PSD, siempre que pueda incrustarlas.

Fuentes que faltan

En la herramienta Carácter, vaya al desplegable de selección de fuentes. Al final de la lista estarán las fuentes que se utilizan en la imagen pero que faltan en su sistema. Por lo general, estarán en gris.

Imágenes rasterizadas

Si ve alguna imagen rasterizada de la que necesita la cara de la fuente, es mejor que exporte sólo esa sección como una imagen clara e independiente y utilice un servicio como What the Font para determinar la fuente.

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

Guarde este script como un nuevo archivo en su carpeta Photoshop > Presets > Scripts. Nómbrelo como quiera, por ejemplo “Detect 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.',);
}

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

El formato de archivo PSD está documentado por Adobe - puedes leer cómo almacena la información de las fuentes.

Entonces podría examinar un volcado hexadecimal del archivo y utilizar la especificación del formato de archivo para encontrar las fuentes.

Alternativamente, los nombres de las fuentes deberían ser visibles en la salida de la utilidad strings que se encuentra en los sistemas Linux/Unix.

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

Esto es realmente muy fácil de hacer utilizando scripts de PS, que pueden iterar a través de las capas de su PSD y extraer los datos de la capa de texto.

Últimamente he estado experimentando con un script basado en JavaScript para superponer la información de las fuentes directamente en las composiciones que se entregan a los desarrolladores. No está terminado, pero si todavía hay interés (veo que esto es bastante viejo) puedo poner una versión rápida y sucia que simplemente muestra las fuentes utilizadas en una ventana.

Actualización: He puesto una versión “lite” del script que estoy desarrollando. Siéntase libre de contribuir - https://github.com/davidklaw/completer . Para aquellos que no estén familiarizados con los scripts, simplemente tomen el archivo del script y pónganlo en su carpeta PS Presets/Scripts y estará disponible en File -> Scripts.

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

Manera rápida y fácil de encontrar las fuentes que faltan

  1. Windows -> Carácter Se mostrará un pequeño cuadro de caracteres con información sobre las fuentes.

  2. Seleccione el nombre de la fuente y desplácese hacia abajo hasta el final.

  3. Observará la lista de fuentes que faltan en color gris claro al final de la lista de fuentes.

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

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

Si el texto ya ha sido rasterizado, la manera más fácil sería recortar el área con el tipo de letra que quieres identificar, guardarlo como un .png y subirlo a WhatTheFont , donde debería poder decirte cuál es, a menos que sea uno oscuro o a medida. Identifont es otro sitio que puedes utilizar, donde describes las características del tipo de letra.

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

Basado en la respuesta original de David (DetectFonts.jsx), he modificado el script para solucionar el problema reportado por Drew en los comentarios: Encontrar todas las fuentes utilizadas en un archivo de Photoshop .

Siga las instrucciones originales pero utilice este cuerpo de script en su lugar - la única diferencia es un par de comprobaciones nulas (presumiblemente una diferencia de versión de photoshop o algo relacionado con la falta de datos en determinados tipos de objetos, probablemente específicos del diseñador o del sistema operativo)

También enviaré un pull request 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

Yo tomaría una instantánea del texto que necesitas (preferiblemente ampliado) y utilizaría WhatTheFont para obtener algunas conjeturas. (Sin embargo, ¿no debería mostrarse el tipo de letra al abrir el PSD y seleccionar el texto correspondiente?)

Y, por supuesto, si no es una fuente segura para la web, tendrás que encontrar una forma adecuada de reemplazarla, o proporcionar una pila de reserva.

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

Utilice Creative Cloud Extract

Se listarán todas las fuentes utilizadas (entre otras cosas útiles).

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

Abrir Photoshop. Vaya a Windows “ Carácter. Aparecerá un pequeño cuadro. Selecciona la capa de texto y el cuadro te dirá la familia de fuentes, el tamaño, etc.

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

Hay una extensión/panel gratuito de Photoshop que puede hacer este trabajo por usted, Free Photoshop Font Detector http://www.layerhero.com/photoshop-font-detector/ ), y si quiere recoger/copiar archivos de fuentes de la carpeta del sistema, pruebe Photoshop Art Packer http://www.layerhero.com/photoshop-art-packer/ )

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

Quería conocer las fuentes de los documentos junto con sus estilos, tamaños, colores, formatos, etc. para el desarrollo web y los propósitos de CSS, así que esto es lo que se me ocurrió:

  1. Haz clic en el icono de la “T” en el panel de capas para filtrar/ver sólo las capas de texto
  2. Haz clic en el icono de la “T” en el panel de capas para filtrar/ver sólo las capas de texto 2. Haz clic en la capa de texto más alta de la paleta de capas
  3. Desplázate hasta la parte inferior de la paleta. 3. Desplácese hasta la parte inferior de la paleta de capas y haga clic en la capa de texto inferior
  4. Haga clic con el botón derecho del ratón en las capas seleccionadas en el panel de capas. Haga clic con el botón derecho en las capas seleccionadas en la paleta de capas y elija “Duplicar capas”
  5. En “Destination Document”, seleccione “New”
  6. Vaya a su nuevo documento que debería contener todas sus capas de texto
  7. Seleccione de nuevo todas las capas de texto (ver paso #2 y #3)
  8. Haga clic en el icono de la carpeta en la parte inferior de la paleta de capas para convertir todas las capas de texto en un grupo
  9. Cambie el modo de fusión del grupo (el desplegable en la paleta de capas) a “Normal”
  10. Haga clic con el botón derecho en su nuevo grupo
  11. Elige “Copiar CSS”
  12. Pégalo en un documento y dale el formato que necesites a tu lista de estilos.
0
0
0
2013-09-26 04:39:43 +0000

Utilice la herramienta en línea para obtener las fuentes del archivo psd http://psdfonts.com/

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

Hay una opción en la pestaña de capas que te permite filtrar todas las capas para mostrar sólo las fuentes. Tienes que seleccionar cada capa para verlas realmente y es útil sólo si necesitas echar un vistazo rápido a ellas

Espero que ayude a alguien tres años después de que se preguntara esto.

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

Desarrollador me pidió casi el mismo pensar como usted necesita. Se me ocurrió la edición de la secuencia de comandos simple, para exportar las propiedades de la capa (texto, nombre de la fuente, el tamaño de la fuente, el color de la fuente) que usted necesita cuando se desarrolla, a un solo archivo txt (debe trabajar en la máquina de Windows).

Sólo hay que guardar esto como “ExportTexts.js” y ponerlo en Adobe Photoshop > Presets > Scripts.

Después, ejecute (o reinicie) Photoshop y ejecute el script (File -> Scripts -> ExportTexts). Asegúrese también de que ha desagrupado todas las capas antes de hacer esto. El archivo exportado debe estar en el mismo directorio que el archivo 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 obtener la información de las fuentes de un archivo PSD puedes utilizar herramientas online si no puedes o no quieres utilizar Photoshop (o si prefieres utilizar Gimp, que rasteriza las fuentes PSD).

Por ejemplo, puedes probar este extractor online de fuentes PSD html5 “Get PSD Fonts”.

Es un extractor de información de fuentes PSD basado en Melitingice Github project psd.js que no requiere subir archivos, trabajando localmente en tu página del navegador