Encuentra todas las fuentes utilizadas en un archivo de Photoshop

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

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

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

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

Por sección o área de texto

Seleccione la herramienta Texto ( icono T con serifs) y haga clic en el área de texto para editarla. Mostrará qué fuente 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 enumerará todas las fuentes incrustables utilizadas en el archivo PSD, siempre que pueda incrustarlas.

Fuentes faltantes

En la herramienta Carácter, vaya al menú desplegable de selección de fuente. Al final de la lista estarán las fuentes que se usan en la imagen pero que faltan en su sistema. Estos generalmente estarán atenuados.

Imágenes rastersized

Si ve imágenes rasterizadas para las que necesita la fuente, es mejor que exporte esa sección como una imagen clara e independiente y use un servicio como What the Font para determinar la fuente.

Guarde este script como un nuevo archivo en su carpeta Photoshop> Presets> Scripts. Póngale el nombre que desee, como "Detectar fuentes.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.',);
}

Adobe documenta el formato de archivo PSD ; puede leer cómo almacena la información de la fuente.

Luego, puede 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 deben estar visibles en la salida de la stringsutilidad que se encuentra en los sistemas Linux / Unix.

En realidad, esto es muy fácil de hacer usando scripts de PS, que pueden recorrer en iteración las capas de su PSD y extraer datos de la capa de texto.

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

ACTUALIZACIÓN: armé una versión "litera" aproximada pero funcional del guión que estoy desarrollando. Siéntase libre de contribuir: https://github.com/davidklaw/completer . Para aquellos que no estén familiarizados con los scripts, simplemente tome el archivo de script y póngalo en su carpeta PS Presets / Scripts y estará disponible en Archivo -> Scripts.

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

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

2. Seleccione el menú desplegable de nombre de fuente y desplácese hacia abajo hasta el final.

3. Notará una lista de fuentes faltantes 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/

Si el texto ya ha sido rasterizado, la forma más fácil sería recortar el área con el tipo de letra que desea identificar, guardar como .png y subirlo a WhatTheFont , donde debería poder decirle qué es, a menos que es oscuro o hecho a medida.

Identifont es otro sitio que puede usar, donde describe las características de la tipografía.

Tomaría un chasquido del texto que necesita (preferiblemente ampliado) y usaría WhatTheFont para obtener algunas conjeturas. (¿No debería mostrarse el tipo de letra cuando abra el PSD y seleccione el texto correspondiente?)

Y, por supuesto, si no es una fuente segura para la web, deberá encontrar una forma adecuada de reemplazarla o proporcionar una pila alternativa.

Use Creative Cloud Extract

Enumerará todas las fuentes utilizadas (entre otras cosas útiles).

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

Siga las instrucciones originales, pero use este cuerpo de script en su lugar: la única diferencia son algunas comprobaciones nulas (presumiblemente una diferencia de versión de Photoshop o algo relacionado con datos faltantes sobre tipos de objetos particulares, probablemente diseñador o sistema operativo específico)

También enviaré una solicitud de extracción 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.');
}

Abre Photoshop. Vaya a Windows »Carácter . Aparecerá una pequeña caja. Simplemente seleccione la capa de texto y el cuadro le indicará la familia de fuentes, el tamaño, etc.

Use la herramienta en línea para obtener fuentes del archivo psd

http://psdfonts.com/

El desarrollador me preguntó casi lo mismo que necesitabas. Se me ocurrió editar un script simple, para exportar las propiedades de capa (texto, nombre de fuente, tamaño de fuente, color de fuente) que necesita al desarrollar, a un solo archivo txt (debería funcionar en la máquina Windows).

Simplemente guarde esto como "ExportTexts.js" y póngalo en Adobe Photoshop> Presets> Scripts.

Después de eso, ejecute (o reinicie) Photoshop y ejecute el script (Archivo -> Scripts -> ExportTexts). También asegúrese de desagrupar 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

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

Hay una opción en la pestaña Capas que le permite filtrar todas las capas para mostrar solo las fuentes. Debe seleccionar cada capa para verlas realmente y es útil solo si necesita echar un vistazo rápido a ellas

Espero que ayude a alguien tres años después de que se le haya pedido esto.

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

1. Haga clic en el icono "T" en el panel Capas para filtrar / ver solo las capas de texto
2. Shift + clic izquierdo en la capa de texto superior en la paleta Capas
3. Desplácese hasta la parte inferior de la paleta Capas y Shift + clic izquierdo en la capa de texto inferior
4. Haga clic derecho en las capas seleccionadas en la paleta Capas y elija "Duplicar capas"
5. En Documento de destino, seleccione Nuevo
6. Vaya a su nuevo documento que debe contener todas sus capas de texto.
7. Seleccione todas las capas de texto nuevamente (vea los pasos 2 y 3)
8. Haga clic en el icono de la carpeta en la parte inferior de la paleta Capas para hacer que todas las capas de texto formen un solo grupo.
9. Cambie el modo de fusión del grupo (el menú desplegable en la paleta de capas) a "Normal"
10. Haga clic derecho en su nuevo grupo
11. Elija "Copiar CSS"
12. ¡Pegue en un documento y formatee su lista de estilos según sea necesario!

Para obtener la información de las fuentes de un archivo PSD, puede usar herramientas en línea si no puede o no quiere usar Photoshop (o si prefiere usar Gimp, que rasteriza las fuentes PSD).

Por ejemplo, puede probar este extractor en línea de fuentes PSD html5 "Obtener fuentes PSD".

Es un extractor de información de fuentes PSD basado en el proyecto Melitingice Github psd.js que no requiere cargar archivos, trabajando localmente en la página de su navegador