Crea una fuente de color Apple (sbix)

En las fuentes de color ‘estilo Apple’, las imágenes de mapa de bits se incrustan en lo que se denomina una tabla sbix en el archivo de fuente. Se pueden asignar varias imágenes de diferentes tamaños a cada glifo. Así, el dispositivo que lo visualizará elegirá la resolución más adecuada.

Preparar variaciones de tamaño

Por lo general, las fuentes sbix utilizan el formato PNG (Portable Network Graphic). JPEG y TIFF también funcionan bien. La especificación original de Apple incluso permitía archivos PDF, pero estos no son compatibles con iOS o macOS, entonces el PDF se eliminó oficialmente de la especificación OpenType. Independientemente del formato que elijas, deberás preparar esas imágenes fuera de Glyphs.

Digamos que quiero tomar el ícono Glyphs e insertarlo en la G mayúscula de una fuente. Es una buena idea preparar los archivos de imágenes a diferentes resoluciones en una aplicación de edición de imágenes como Pixelmator o Preview. Si ya tienes las imágenes, todo lo que necesitas hacer es producir las variaciones de tamaño. Ten en cuenta se puede realizar una reducción de tamaño simple con un proceso de Automator, que se puede activar a través del menú contextual en Finder, cuando se instala como un servicio OS X.

En cualquier caso, te recomendamos encarecidamente que mantengas tus imágenes en una subcarpeta junto al archivo .glyphs. Esto se debe a que Glyphs solo almacena su ruta relativa en el archivo, no el código binario en sí.

Por supuesto, cada vez que muevas tu archivo .glyphs, también moverás la subcarpeta con él. De lo contrario, correrás el riesgo de que Glyphs se queje de la falta de archivos de imagen. Si eso te sucediera, puedes encontrar útil el script Set New Path for Images (Establecer una nueva ruta para imágenes). Encuéntralo en el submenú Images en los scripts mekkablue.

Establecer el ancho

Ahora, comencemos Glyphs y creemos una nueva fuente. Comienzo abriendo mi G mayúscula y cambio su ancho. La capa del máster solo se usa para determinar las medidas del glifo y permanecerá vacía. El ancho debe reflejar la proporción de la imagen en relación con las Unidades por Eme (UPM). Puedes verificar su valor UPM en Archivo > Información de la fuente > Fuente.

En mi caso, configuré el ancho en 1000, ya que mi ícono es cuadrado y mi UPM es 1000, el valor recomendado para fuentes CFF OpenType y el valor predeterminado de la aplicación en Glyphs. Si el ancho de tu dibujo es solo la mitad de de su altura, configura el ancho en la mitad de su UPM, es decir, 500. Si tienes el doble de ancho, configúralo en 2000. Entiendes la idea.

Crea capas ‘iColor’

Ahora, con la G aún abierta, abre el panel (Ventana > Mostras paneles, Cmd-Opt-P) y ve a la sección Capas. Selecciona tu máster Regular y crea una nueva capa haciendo clic en el botón más (+). Aparecerá una capa de respaldo, con el nombre de la fecha y hora actuales. Ahora haz clic derecho en la capa y conviértela en una capa iColor:

La capa cambia de nombre a iColor 128 y se muestra en negrita, lo que indica que se reconoce como una capa especial. Luego haz doble clic en el nombre de la capa para establecer la resolución deseada:

El resto es fácil. Simplemente arrastra los archivos PNG desde el Finder a las respectivas capas de iColor. Si todo se hizo correctamente, tu configuración podría verse similar a esto:

Se ignorará el ancho de las subcapas de iColor, así como cualquier manipulación de las imágenes (cambio de escala o ubicación). Por lo tanto, no necesitas molestarse en reajustar los PNG en las métricas del glifo.

Control de ancho, escala y posición

Tanto el ancho como la posición vertical de la imagen están controladas a través de la capa del máster, es decir, la capa Regular en los ejemplos anteriores.

La posición de la imagen se establece en el origen de los límites de la capa del máster y el valor predeterminado es el origen de la capa (coordenadas 0, 0). Entonces, por ejemplo, si deseas mover la imagen 100 unidades por debajo de la línea de base, agrega un trazado muy, muy pequeño en y=−100, aproximadamente así:

Puede ser un trazado cerrado de dos nodos sin ninguna expansión o relleno, por lo que permanece invisible. Su única función es proporcionar un punto de origen para la imagen, y ese mini trazado ya cumplirá la función. Esto también funciona para el desplazamiento horizontal: simplemente aleja el trazado de x=0.

El ancho del glifo también se hereda de la capa del máster y solo se puede controlar configurando el ancho de la capa del máster.

La escala de la imagen está controlada por el número escrito en el nombre de la capa, después de iColor. Técnicamente, este número corresponde al número de píxeles de la imagen que corresponden al Eme, o en otras palabras, al tamaño de la fuente.

Entonces, si tu imagen tiene 500 píxeles de alto y está colocada en una capa llamada iColor 500, pero se ve más pequeña de lo que te gustaría, intenta usar un número más pequeño en el nombre de la capa, por ejemplo, iColor 450. De esa manera, el Eme será de 450 píxeles (el tamaño de fuente), y una imagen de 500 píxeles será un noveno más grande que el tamaño de fuente.

Métricas verticales

Un consejo sobre las métricas verticales: para evitar el recorte de tus imágenes sbix en dispositivos Apple, asegúrate de que tus valores hhea abarquen las imágenes por completo. Por lo general, el único valor problemático a este propósito es hheaAscender, asegúrate de que se encuentre por encima del borde superior de tus imágenes. Lee más sobre cómo establecer métricas verticales.

Exportar

Ahora, cuando vayas a Archivo > Exportar, selecciona OTF, TTF o cualquier formato de fuente web como formato de exportación. Glyphs creará una fuente que contendrá la tabla sbix. ¡Diviértete! Puedes comprobarla, por ejemplo, con la aplicación gratuita TextPreview:

Tabla SVG equivalente

Puedes aumentar el alcance (y la compatibilidad) de tu fuente de mapa de bits agregando un parámetro SBIX a SVG en una instancia en Archivo > Información de fuente > Exportaciones. Como valor, utiliza el tamaño de píxel preferido:

Luego, las capas de iColor correspondientes se duplicarán en una tabla SVG. (Lee más sobre las fuentes SVG.) En otras palabras, las mismas imágenes de mapa de bits estarán en dos tablas OpenType, SVG y sbix. Además, puedes controlar si las tablas sbix y SVG se exportan o no con Exportar tabla SVG y Exportar tabla sbix. De esa manera, puedes producir una fuente solo sbix, o solo SVG, o una fuente híbrida sbix/SVG.

sbix en Photoshop

Las últimas versiones de Photoshop CC también pueden mostrar fuentes sbix. Pero para que sbix funcione en Photoshop, se deben cumplir estos tres criterios:

1. Los glifos sbix también deben contener contornos, incluso si son solo dos pequeños trazados. Definen el cuadro delimitador de la herramienta Recortar en Photoshop. Si no hay contornos, todo está recortado y tu imagen de píxeles desaparecerá.
2. La fuente debe estar instalada en el sistema (por ejemplo, en FontBook). La carpeta de Adobe Fonts no funcionará. Recomendamos usar nombres diferentes cada vez que exportes para evitar problemas de caché de fuentes.
3. Después de la instalación de cada fuente, debes reiniciar Photoshop para que se reconozcan las fuentes sbix.

Soporte para sbix

Además de los dispositivos Apple, las fuentes sbix son compatibles y se muestran en las versiones de Windows 10 y posteriores, así como en dispositivos Linux y Android. Las últimas versiones de Chrome son compatibles con sbix en todas las plataformas (sin embargo, presta atención al problema de recorte, consulta más arriba), y Firefox también lo muestra, pero solo en Android y Linux.

Scripts útiles

Los scripts de mekkablue contienen dos scripts que facilitan el manejo de las capas sbix:

• Color > Agregar imágenes sbix a la fuente: obtendrá todos los archivos PNG, GIF, JPG en una carpeta y creará capas de iColor con ellos en la fuente y el máster actuales. Los scripts esperan la siguiente convención de nombre de archivo: nombredelglifo tamañodelpíxel.sufijo, por ejemplo:Adieresis 128.png.
• Color > sbix Spacer te permite configurar por lotes posiciones de sbix y anchos de glifo. Incluso tienes una opción para insertar los pequeños trazados para evitar el recorte:

  

Además de eso, las secuencias de comandos mekkablue en el submenú Images pueden ser útiles, especialmente Set New Path for Images (Establecer una nueva ruta para imágenes) antes mencionada y las secuencias de comandos para eliminar imágenes si deseas comenzar de nuevo.

Actualización 08/08/2017: se agregó la sección ‘sbix en Photoshop’, encabezados con título.
Actualización 14/04/2018: se agregó la sección Soporte para sbix, ¡gracias Behdad! Título del tutorial actualizado.
Actualización 18/11/2018: se agregó una nota sobre las métricas verticales.
Actualización 19/11/2018: se agregó la sección ‘Control de ancho, escala y posición’, se eliminó una oración obsoleta sobre el soporte de sbix.
Actualización 29/11/2018: se agregó una advertencia sobre el recorte en Chrome, se actualizó la imagen del trazado pequeño. Se agregaron parámetros personalizados.
Actualización 30/11/2018: se aclaró sbix a SVG. Se corrigió una captura de pantalla incorrecta.
Actualización 28/01/2019: corrección del título ‘Soporte para sbix’.
Actualización 20/06/2021: se agregaron Useful Scripts y se actualizaron para Glyphs 3, se cambió el nombre de ‘estilo Apple’ a ‘sbix’ donde corresponda.
Traducción al español de Sol Matas.