Encuentra todas las fuentes utilizadas en un archivo de Photoshop

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

Lo único que no puedo determinar es qué tipo de letra que utilizan en el .psd

¿Cómo puedo saber 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 serifas) y haga clic en el área de texto para editarla. Se mostrará qué fuente se utiliza en la ventana de caracteres.

Todas las fuentes utilizadas de un vistazo

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

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

Fuentes que faltan

En la herramienta Personaje, vaya al menú 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. Estos serán típicamente grises.

Imágenes Rastersized

Si ve las imágenes rasterizadas que necesita la cara de la fuente, es mejor exportar sólo esa sección como una imagen clara y autónoma y utilizar un servicio como ¿Cuál es la fuente para determinar la fuente.

Guarde este script como un nuevo archivo en su carpeta Photoshop> Presets> Scripts. Nombre lo que quieras, como "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.',); } 

Introduzca aquí la descripción de la imagen

El formato de archivo PSD está documentado por Adobe – puede leer cómo almacena la información de la fuente.

A continuación, puede examinar un volcado hexadecimal del archivo y utilizar la especificación de formato de archivo para encontrar las fuentes.

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

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

He estado experimentando últimamente 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 aparece las fuentes utilizadas en una ventana.

ACTUALIZACIÓN: Puse juntos una versión en bruto pero que funcionaba "lite" 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 bajo la carpeta PS Presets / Scripts y estará disponible en File -> Scripts.

Manera rápida y fácil de encontrar fuentes perdidas

  1. Windows -> Character Un cuadro de caracteres pequeños se mostrará con información de fuentes.

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

  3. Usted notará la lista de fuentes perdidas en color gris claro al final de la lista de fuentes.

Introduzca aquí la descripción de la imagen

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

Si el texto ya ha sido rasterizado, la manera 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 ser capaz de decirle lo que es, a menos que Es un oscuro o hecho a medida.

Identifont es otro sitio que puede utilizar, donde se describen las características de la tipografía.

Tomaría un broche de presión del texto que usted necesita (preferiblemente ampliado adentro) y uso WhatTheFont para conseguir algunas conjeturas. (¿No debería aparecer el tipo de letra al abrir el PSD y seleccionar el texto correspondiente?)

Y, por supuesto, si no es una fuente segura en la web, necesitará encontrar una forma apropiada de reemplazarla o proporcionar una pila alternativa.

Abra Photoshop. Ir a Windows »Personaje . Aparecerá una pequeña caja. Simplemente seleccione la capa de texto y el cuadro le indicará la familia de fuentes, tamaño, etcétera.

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

http://psdfonts.com/

El desarrollador me preguntó casi lo mismo piensa como usted necesitaba. Vine para arriba con la escritura de la escritura simple, para exportar las propiedades de la capa (texto, nombre de la fuente, tamaño de la fuente, color de la fuente) que usted necesita al desarrollar, a un solo archivo del txt (debe trabajar en la máquina de Windows).

Simplemente guarde esto como "ExportTexts.js" y ponga en Adobe Photoshop> Presets> Scripts.

Después de eso, ejecute (o reinicie) Photoshop y ejecute la secuencia de comandos (Archivo -> Scripts -> ExportTexts). Asegúrese también 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 libre de Photoshop que puede hacer este trabajo para usted, Detector libre de la fuente de Photoshop ( http://www.layerhero.com/photoshop-font-detector/ ), y si usted quiere recoger / copiar archivos de la fuente del sistema Carpeta, prueba 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 sólo las fuentes. Usted tiene que seleccionar cada capa para verlos realmente y es útil solamente si usted necesita una mirada rápida en ellos

Espero que ayude a alguien tres años después de que se le preguntó.

Utilizar Extracto de Nube Creativa

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

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

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

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