Spanish (Español) translation by Iván Gómez (you can also view the original English article)
¿Tienes un proyecto creativo que necesita una fuente monoespaciada de píxeles? Sigue paso a paso este sencillo tutorial para aprender a crear y personalizar tu propia fuente monoespaciada!
Lo que aprenderás en este tutorial de fuentes monoespaciadas
- Cómo configurar el archivo de Illustrator para la creación de fuentes monoespaciales
- Cómo definir las pautas métricas de fuente y de cuadrícula
- Cómo crear una fuente monoespaciada de pixeles
- Cómo aplicar color a los glifos de fuente
- Cómo ajustar el espaciado de una fuente
- Cómo crear y exportar una fuente desde Adobe Illustrator
Recursos del tutorial
Para completar este tutorial, tendrás que comprar:
- Fontself Maker para Illustrator CC
En este tutorial aprenderemos a crear una colorida fuente monoespaciada de pixeles OpenType-SVG.
¿Qué es una fuente Monoespaciada?
Las fuentes monoespaciadas son fuentes cuyas letras y caracteres tienen el mismo espacio horizontal, lo que significa que cada letra tiene el mismo ancho de carácter. Las fuentes monoespaciadas se originaron a partir de 'fuentes de máquina de escribir'. Básicamente, estas fuentes imitan el estilo de fuente serif de las las máquinas de escribir. En ese entonces, el espaciado de letras y los anchos utilizados en las máquinas de escribir no eran ajustables, por lo que tenían un ancho fijo; el mismo espacio de ancho fijo. Las primeras pantallas CRT de computadora también usaban caracteres de ancho fijo para el código del ordenador, pero en forma de pixel.
Hoy en día, las fuentes monoespaciadas se utilizan para mostrar datos tabulares, como tablas estadísticas y hojas de cálculo, o en libros, revistas, etc., donde grandes cantidades de texto necesitan leerse fácilmente.
¿Qué es OpenType-SVG?
También conocido como 'Color Fonts', SVG es un formato de fuente en el que la fuente tiene algunos (o todos sus glifos) representados como Gráficos de Vectores Escalables - SVG (Scalable Vector Graphics). Este tipo de formato permite aplicar varios colores a un solo glifo.
Hoy, vamos a construir una fuente monoespaciada de píxeles en formato OpenType-SVG utilizando Adobe Illustrator y el plugin Fontself Maker para convertir los vectores en un archivo de fuente OpenType-SVG con Fontself Maker.
¡Empecemos a crear nuestra fuente!
1. Cómo configurar el archivo de Illustrator para la creación de una fuente
Paso 1
Lo más importante que hay que hacer antes de crear nuestra fuente es configurar el archivo de Adobe Illustrator en el modo de color correcto. Al diseñar fuentes de color OpenType-SVG, es mejor establecer el modo de color del archivo en RGB.
Ya que vamos a crear una fuente monoespaciada con un ancho fijo y en forma de píxel, trabajaremos utilizando una cuadrícula de 50 px en un formato de bloque de 7x7.
Crea nuevo documento (Ctrl/Cmd-N) y, en el cuadro de diálogo de Nuevo documento, selecciona desde los formatos preestablecidos Móvil, Web, Película y vídeo u Obra de arte e ilustración, estos formatos tienenun perfil de color RGB.
Nombra la fuente 'MonoPixel' y deja el tamaño y los ajustes como sigue:
- Número de mesas de trabajo: 26 (Para las letras A-Z del alfabeto inglés)
- Ancho: 350 px
- Altura: 350 px
- Unidades: Píxeles
En la ficha Opciones avanzadas, en el cuadro de diálogo Más ajustes, deja los siguientes valores:
- Espaciado: 50 px
- Columnas: 26
- Modo de color: RGB
- Efectos de rasterizado: Alta (72 ppp)
- Modo de previsualización: Por defecto.
Paso 2
A continuación, vamos a configurar nuestra cuadrícula. Ve a Illustrator > Preferencias > Guías y Cuadrícula y establece Línea de cuadrícula cada 50 px, y OK.
Paso 3
Activa Reglas: Ver > Reglas > Mostrar reglas (Ctrl/Cmd + R).
Activa Ajustar a cuadrícula para hacer que nuestras formas se ciñan a la cuadrícula: Ver > Ajustar a cuadrícula.
Para alinear la cuadrícula con la mesa de trabajo, haz clic y arrastra el cuadrado a la esquina superior izquierda de la mesa de trabajo, de esta manera, la cuadrícula comenzará en la esquina superior izquierda de la primera mesa de trabajo. Verás un valor '0'.
Paso 4
Abre el panel Capas (Ventana > Trazo).
Nuestro paso siguiente es definir las métricas de fuente (Anatomía de tipo) configurando el ajuste de las guías de Fontself. Hay cuatro guías de regla principales que debes agregar por fila de caracteres. Sólo tendrás que configurar esto una vez. Antes de hacerlo, aquí hay una guía rápida de las principales métricas de fuentes que debes conocer:
- Altura X: Corresponde a la altura de una letra minúscula de cualquier glifo. Esto se define normalmente por la altura de una letra x minúscula.
- Ascendente: Es la parte de una letra minúscula que se eleva por encima de la altura x, por ejemplo, en letras como b y d.
- Línea base: Básicamente es la línea en la que se sientan todas las letras.
- Descendiente: Esta es la parte de una letra que se extiende por debajo de la línea de base, como en las letras p, q o y.
- Alto de mayúsculas: La distancia desde la línea base hasta la parte superior de las letras mayúsculas.
Vamos a ubicar nuestras guías de regla en nuestro lienzo. Para colocar guías horizontales, coloca el puntero en la regla superior y arrástralo hacia abajo hasta la mesa de trabajo para crear una guía de Regla horizontal. Añade cuatro guías horizontales. Da un nombre a cada guía desde el panel Capas (doble clic en la capa para cambiar el nombre):
- Ascendente (ASCENDER o ascendente)
- Alto mayúscula (CAPHEIGHT o Altura May)
- Línea base (BASELINE o línea base)
- Descendente (DESCENDER o descendiente)
Paso 5
Ahora necesitamos agregar otras dos filas de mesa de trabajo: una fila para los glifos de los números de 0 a 9, y la otra para los 15 signos de puntuación.
Desde Archivo > Ajustar documento, activa Editar mesas de trabajo. Seleccionea las diez primeras mesas de trabajo, mantén pulsadas las teclas Mayús y Alt y arrastra hacia abajo para duplicar las mesas de trabajo.
A continuación, toma las 15 mesas de trabajo superiores, mantén presionadas las teclas Mayús y Alt y arrastra el conjunto de mesas de trabajo debajo de la fila de Numeros.
Paso 6
Notarás que las Guías de Reglas no se duplican cuando duplicas mesas de trabajo.
Selecciona las cuatro guías de reglas horizontales y, a continuación, mantén presionadas las teclas Mayús y Alt y arrástralas hasta la fila Númerales.
Repite el proceso para duplicar las guías de reglas en la fila Puntuación.
Paso 7
Para la última parte de nuestra configuración, necesitamos organizar nuestras capas.
Desde el panel Capas, haz doble clic y cambia el nombre de 'Capa 1' a 'Guías'. Bloquea la capa 'Guias' y da clic en el botón Crear nueva capa +. Crea tres nuevas capas en el siguiente orden: alfabeto, números y puntuación.
Ahora, nuestro panel Capas está organizado, ¡ya estamos listos para empezar a construir nuestra fuente!
2. Cómo construir una fuente monoespaciada de pixel con Adobe Illustrator
Paso 1
Comencemos a crear nuestra fuente monoespaciada de pixeles.
Para efectos de este tutorial, vamos a crear un estilo de fuente Regular, en mayúsculas y ¡a color!
Comúnmente, al diseñar una fuente, usamos trazos vectoriales para facilitar el proceso de diseño, pero como las fuentes de pixeles son cuadradas, trabajaremos en su lugar con bloques cuadrados.
En las mesas de trabajo de 7x7, construiremos nuestras letras dentro de un ancho de bloque de 5x5. Primero, dibujaremos cada letra cuadrado por cuadrado, y luego aplicaremos un relleno de color a cada cuadrado para crear nuestra fuente de color.
Asegúrate de estar en la capa 'Alfabeto' y activa la primera mesa de trabajo para empezar a dibujar nuestro primer glifo, 'A'.
Con la Herramienta Rectángulo (M) y aplica al cuadrado un Relleno negro y un trazo ninguno.
Debido a que tenemos activada la opción Ajustar a retícula, podemos dibujar fácilmente los bloques cuadrados para crear nuestra forma 'A'. Crea tu estilo 'A'.
Paso 2
Continúa usando la Herramienta Rectángulo (M), con un Relleno negro y trazo ninguno, para crear los glifos de las letras B a la Z, en cada mesa de trabajo individual.
Ten en cuenta que todos los glifos van en mayúsculas. Esta es una fuente monospaciada sans serif y debe ajustarse a las cinco dimensiones de ancho de bloque.
El diseño del caracter como tal, depende de tu gusto. Asegúrate de que las letras son simples y fáciles de leer de lejos (al alejarse de la mesa de trabajo).
Paso 3
A continuación, necesitamos agrupar las formas de cada glifo, esto ayudará a Fontself Maker a convertir a cada caracter en un glifo independiente en lugar de dos.
Con la Herramienta Selección (V) arrastra para seleccionar las formas cuadradas de cada glifo, y activa Agrupar (Ctrl/Cmd-G). Agrupa cada uno de los 26 glifos.
Enseguida, en el panel Capas, necesitamos dar a cada grupo de glifos su nombre abreviado. 'A' para A, 'B' para B, y así sucesivamente.
Para nombrar las subcapas, expande la capa 'Alfabeto' haciendo clic en el signo > izquierda. Haz doble clic en la capa respectiva para cambiar el nombre. Luego, arrastra las capas en orden alfabético para guardarlas en una jerarquía fácil de navegar, desde la A hasta la Z, como se muestra a continuación.
Paso 4
A continuación, vamos a crear nuestros glifos para los números.
Contrae la capa 'Alfabeto', bloquéala y activa la capa 'Numerales'.
Activa la Herramienta Rectángulo (M) desde el panel de Herramientas, y aplica un Relleno negro y trazo ninguno. Dibuja los glifos numéricos de 0 a 9 en cada una de las mesas de trabajo; lo mismo que hicimos para los glifos del alfabeto.
Consejo: Asegúrate que al crear el cero, cruzarlo desde el centro para diferenciarlo de una 'O'.
Paso 5
Ahora necesitamos agrupar las formas de cada glifo de la misma manera como lo hicimos con los glifos del alfabeto.
Con la Herramienta Selección (V) selecciona las formas de cada glifo, luego Agrupa (Comando-G).
Después de eso, puedes expandir la capa 'Numeros', dar un nombre a cada glifo desde el panel de capas.
Paso 6
A continuación, vamos a incluir los glifos pequeños, como comas, guiones y puntos: En las fuentes monospaciadas sans serif, los más utilizados son:
@ ? & # ! , . - x + á ( ) / '
Al crear los glifos de puntuación, observarás que no puede crear pictogramas con el mismo ancho que el alfabeto y los números. Por ejemplo los siguientes signos , . ! ' no pueden mantener la misma anchura o altura, por lo que dondequiera que se apliquen, deben alinearse con la altura de la mayúscula o la línea de base de ser posible.
Desde el panel Capas, bloquea la capa 'Numeros' y pasa a la capa 'Puntuación'.
Usando el mismo proceso que vimos en los pasos 1 y 5, crea los glifos de puntuación.
Paso 7
Cuando hayas terminado, continúa seleccionando las formas y agrupa cada glifo (Comando-G).
Enseguida, puedes expandir la capa 'Puntuación' y asignar un nombre a cada glifo.
3. Cómo colorear los glifos de fuente
Paso 1
Para este tutorial, he decidido crear un estilo de fuente monoespaciada a color, en lugar de negro.
Una vez hayamos diseñado nuestros 51 glifos del alfabeto, los números y la puntuación, podemos pasar a colorear nuestra fuente monoespaciada de pixeles.
Busca paletas de colores en Coolors o en Adobe Color. Nuestros cerebros son receptivos a ciertas fórmulas de color, así que elige una paleta de colores atractiva y súbela a tu panel Muestras (Ventana > Muestras).
Para hacerlo divertido, escogí siete colores pastel de arco iris:
-
#ff6a4d -
#fcd363 -
#65e0b3 -
#66b1ed -
#925afb -
#ff83b6 -
#d74983
Paso 2
¡Empecemos a colorear! Desbloquea las capas 'Alfabeto' y 'Numeros'.
Colorearemos glifo por glifo. Activa Ver > Ocultar cuadrícula, para obtener mejores objetos visuales.
En el panel Muestras selecciona el grupo de muestras de color . Usa la Herramienta Selección (V) para seleccionar el glifo de la letra 'A'.
Selecciona la Herramienta Bote de Pintura Interactiva (K) y las muestras de color pastel en el panel Muestras, y aplica un color diferente a cada uno de los bloques cuadrados.
Paso 3
En el panel Capas, haz clic en el icono del ojo a la izquierda de la capa 'Guías', para desactivar la visibilidad de la capa.
Continúa utilizando el mismo método para colorear los 50 glifos restantes. Puede que te lleve un poco de tiempo hacerlo, así que ten paciencia.
4. Cómo crear la fuente usando Fontself Maker
Paso 1
Ahora que nuestros caracteres de fuente están coloreados y listos, podemos pasar a Fontself Maker. Fontself Maker es una extensión para Illustrator, diseñada para hacer fuentes.
Abre la extensión Fontself Maker. Ventana > Extensiones> Fontself Maker.
Desde el panel Capas, activa la Visibilidad para la capa 'Guias' y desbloquea la capa. Luego, Desbloquea las guías, Ver > Desbloquear guías.
Elimina las guías de las capas "Números" y "Puntuación", así que solo tenemos un conjunto de guías para subir a Fontself Maker.
Paso 2
Subiremos cada fila de caracteres, uno a uno a Fontself. Fontself te facilitará este trabajo, una vez hayas organizado los glifos y las guías como lo hemos hecho.
Selecciona la primera fila de caracteres del alfabeto, y las guías de reglas, y arrástralos al espacio A-Z en la parte superior de la ventana de Fontself.
A continuación, selecciona la fila de caracteres numéricos en Illustrator y arrástralos a la sección 0-9 de la ventana de Fontself.
Después, selecciona los caracteres de puntuación en Illustrator y arrástralos a la parte inferior de la ventana 'Cualquier carácter' (Batch).de Fontself.
Paso 3
Verás ahora que cada glifo se ubica en su propio espacio, y el marcador debajo de él muestra la etiqueta (subnombre de la capa) con el glifo. Además, en la ventana Fontself, tendrás una previsualización en vivo de las letras de la parte superior del panel.
Puedes ver tu fuente "en vivo" en la ventana de Vista previa, e incluso puedes probar la fuente digitando cualquier cosa.
Al hacer clic en el icono de engranaje de vista previa en el extremo derecho del panel podrás cambiar el tamaño de fuente (25pt), la alineación (alineación izquierda) y color de fondo (negro).
Paso 4
Por defecto, Fontself Maker añade espaciado entre los glifos. Puedes experimentar con el espaciado de letras haciendo clic en los símbolos + y - situados junto a la pestaña Espacio de letras.en el panel de Fontself:
- El espacio de letras ayuda a ajustar el espaciado entre todos los glifos.
- Espacio de línea ajusta el interlineado.
- Escala ajusta el tamaño de todos los glifos y los valores de espaciado y kerning.
Haz clic en el botón Avanzado en el panel Fontself y cambia el espaciado a 70 presionando + en la pestaña Espacio de letras. Verás el cambio de espaciado en la columna derecha.
Nota: Si deseas ajustar el espaciado alrededor de una sola letra, puedes arrastrar las barras laterales hacia la izquierda o hacia la derecha junto al glifo en la ventana de Fontself.
Paso 5
Ahora vamos a probar nuestra fuente, para asegurarnos de que tenemos el espaciado correcto y las teclas correctas para nuestros glifos. Vuelve al panel Inicio haciendo clic en la pestaña Inicio en la parte superior izquierda del panel de Fontself.
A continuación, haz clic en el botón Instalar en el panel de Fontself. Esto instalará la fuente localmente en Illustrator, para que podamos probarla y editarla de ser necesario. Todos los glifos se guardarán dentro de una fuente OpenType-SVG, lo que significa que solo serán visibles en Photoshop 2017+, InDesign 2019+ y en Illustrator CC 2018+.
Nombra tu fuente: MonoPixel. A continuación, vuelve a Illustrator.
Selecciona la herramienta Texto en el panel Herramientas y elige la fuente recién creada: MonoPixel desde el panel de caracter superior.
Si encuentras un error o deseas reemplazar un glifo, debes eliminar el glifo desde el panel de Fontself, antes de agregarlo e instalarlo de nuevo. Esto colocará el nuevo glifo en la parte inferior de la ventana de Fontself. Personalmente, prefiero simplemente eliminar todo el conjunto y recargar de nuevo para que queden en orden.
Paso 6
Vuelve al panel de Fontself Maker y haz clic en la pestaña Información de fuente para nombrar la fuente y agregar otros detalles si deseas. Nombré mi estilo de fuente 'MonoPixel': ¡Impresionante'.
Paso 7
Una vez que hayas hechos todas las pruebas de tu fuente MonoPixel y estés listo para exportarla fuera de Illustrator, vuelve a Fontself Maker, en el panel Inicio, y haz clic en el botón Exportar.
Fontself Catapult es una solución fácil de un solo clic para alojar fuentes de color en línea. Se generará un archivo OpenType (OTF) que se puede guardar, instalar y utilizar en OTF software para web o móvil!
Se abrirá una ventana para ver la fuente en la web. Elige Firefox o Safari; ambos navegadores soportan el formato OpenType-SVG color.
Por defecto, la fuente será privada hasta que la publiques , luego podrás descargarla.
¡Felicidades, disfruta de tu fuente monoespaciada!
Genial, eso fue fácil ¿cierto? Ahora podrás personalizar tu propia fuente monoespaciada y ¡publicarla!
Espero que hayas aprendido lo que es una fuente monoespaciada, y el proceso de transformar glifos de fuente en Adobe Illustrator para convertirlos en una fuente de color OpenType-SVG en Fontself. Si no tienes tiempo para crear tus propias fuentes monoespaciales, puedes descargar nuestra fuente MonoPixel de Envato Elements, o echar un vistazo a otra gran colección de fuentes monoespaciadas.
MonoPixel es una fuente monospaciada sans serif, que viene en un impresionante estilo de fuente. Puedes utilizarla para carteles, titulares o títulos y subtítulos. Expande tu fuente añadiendo más glifos o diseñando varias versiones de tu tipografía (como Negrita, Cursiva, Black o Light).
Me encantaría ver tus diseños de fuentes monoespaciadas. Por favor, comparte tus resultados en los comentarios a continuación y en las redes sociales. ¡No te olvides de etiquetar #fontself!
Continúa expandiendo tus habilidades y aprende otras técnicas. Aquí hay una lista de tutoriales recomendados que pueden ayudarle:
Unlimited Downloads.
