Cómo crear fuentes personalizadas: 7 pasos y 3 casos prácticos

Seamos sinceros; hay tipografías que a los diseñadores nos encanta odiar. En realidad, la palabra "odio" podría no ser lo suficientemente fuerte. ¿Azotar? ¿Maldición? ¿Plaga? ¿Excremento? He oído que cada uno insulta las letras, los números y los símbolos inanimados que usamos para comunicar ideas, y lo entiendo totalmente. He visto (y cometido) crímenes de tipo tan graves que incluso el boletín de la oficina más extravagante se sentiría avergonzado.

Pero, ¿y si te dijera que los tipos de letra más vilipendiados de nuestra generación podrían ser los mejores amigos de un diseñador de marca? ¿Qué pasaría si le mostrara cómo convertir formas de letras mediocres en deliciosos logotipos que a los clientes les encantarán (y por los que pagarán un buen dinero)? ¿Estaría dispuesto a cambiar radicalmente la forma en que ve la tipografía y abrirse a un universo de opciones creativas que se expande infinitamente? ¿Listo para hacer tu propia fuente?

Si es así, sigue leyendo, porque estoy a punto de presentar un proceso simple que puedes usar para transformar inmediatamente cualquier tipo de letra para crear una fuente mejor. Y, para mostrar cuán efectivo es el proceso, demostraré cada paso utilizando tres tipos de letra que los diseñadores desprecian apasionadamente en todas partes.

En primer lugar, Jokerman , una extravagante colección de personajes parecidos a payasos que generalmente se encuentran en pancartas de cumpleaños y tarjetas de presentación "caprichosas".

A continuación, tenemos Papyrus , minuciosamente copiado de las paredes de la tumba del rey Tutankamón y la opción preferida de los menús de las cafeterías, los artistas serios y James Cameron.

Finalmente, un forajido tipográfico genial e inquebrantablemente casual que no necesita presentación: el único, Comic Sans .

De esta agrupación improbable, te enseñaré a ver tesoros donde otros gritan "¡basura!" y cree logotipos personalizados del más alto calibre.

Un proceso simple y confiable

Emprendamos un viaje desde un tipo de letra espantoso hasta un logotipo deslumbrante y aprendamos a hacer una fuente. Comenzaremos con algo malo, terminaremos con algo bueno y seguiremos los mismos siete pasos cada vez. ¿Cuáles son los siete pasos? Discutiré los detalles en un momento, pero primero, algunas notas sobre las herramientas que necesitará para este tipo de trabajo.

Configuración recomendada

Los diseñadores visuales tienen acceso a una gran cantidad de herramientas de diseño nuevas y asequibles. Los dispositivos de pantalla táctil y los lápices ópticos avanzados, como el lápiz de Apple, hacen que capturar ideas y pasar a un flujo de trabajo digital sea más fácil que nunca. Experimente libremente y quédese con lo que funcione para usted. Dicho esto, prefiero un enfoque probado y verdadero con herramientas confiables de Adobe y Wacom:

• Photoshop : se utiliza para manipular tipos de letra y crear bocetos de refinamiento en capas.
• Illustrator : se utiliza para trazar vectores de bocetos de refinamiento final y agregar rápidamente elementos de estilo como colores, degradados, texturas, patrones, etc.
• Tableta Wacom : se utiliza para dibujar digitalmente en Photoshop.

Jokerman: de grosero a elegante

Jokerman es el Jim Carrey de los tipos de letra: nunca sutil, fuerte en todos los ángulos, pero extrañamente atractivo para las masas. Es ridículo y exagerado y exactamente el tipo de letra para el que se hizo este tutorial. Los tipos de letra extravagantes como Jokerman están repletos de elementos de diseño curiosos, pero carecen de la moderación necesaria para un logotipo de buen gusto. Como diseñadores, debemos ejercer un buen juicio, y eso a menudo significa renunciar a los detalles en aras de una comunicación más clara.

Es un proceso simple de siete pasos que nos lleva de un tipo de letra indeseable a un logotipo de alta gama. Hay algunos dibujos simples involucrados, pero si puede escribir su nombre y calcar una imagen, tiene toda la habilidad que necesitará para aprender a hacer su propia fuente. Vamos a empezar.

1. Revise la tipografía

En Photoshop, elija un tipo de letra (en este caso, Jokerman), escriba el nombre comercial que necesita para su logotipo y examine rápidamente cada letra para tener una idea de las posibilidades de diseño como la escala, la proporción, el peso de la letra, etc.

2. Idear

Usando su tableta Wacom, haga un boceto suelto de su logotipo. No es necesario ser exacto aquí. Simplemente dibuje algo rápido y fácil que sirva como esqueleto para su diseño.

3. Tipo de letra distorsionada

Usando el tipo de letra seleccionado, escale, estire, sesgue y aplaste cada letra sobre la parte superior de su boceto de ideación. No hay necesidad de hacer las cosas perfectas en este paso. Lo refinarás más adelante, así que continúa.

4. Boceto de corrección

Ahora, haz un boceto rápido sobre la parte superior de tus letras distorsionadas. Aquí es donde comienza a mejorar las deficiencias del tipo de letra original y agrega sus propios detalles de diseño.

5. Bosquejo de refinamiento

Esta es la última fase de esbozo y perfeccionamiento en Photoshop. Limpia todo lo que no funcione y completa tus letras para que puedas tener una mejor idea de la forma y la relación de los espacios entre las letras.

6. Seguimiento vectorial

Coloque su boceto de refinamiento en Illustrator, use la herramienta Pluma y haga clic con cuidado para obtener hermosas curvas Bezier.

7. Toques finales

Una vez que haya terminado el trazado vectorial, agregue impacto visual con detalles bien pensados ​​como colores, sombras, reflejos, contornos, etc.

Papiro: una transformación sutil

Confesión: me gusta Papyrus, y no me importa quién sabe. En serio, no todos los tipos de letra que a los diseñadores nos gusta criticar son realmente tan malos. ¿Usado en exceso? Quizás. cursi? Está bien, sí. Pero el hecho de que un tipo de letra haga que alguien sienta que su documento de diseño aficionado tiene dignidad no significa que sea malo. Y eso es lo que siento por Papyrus. Es como la camisa de vestir que compré en Old Navy: me queda bien y me hace presentable para ocasiones especiales.

Dicho esto, mi camisa de vestir no tiene bordes deshilachados intencionalmente. Entonces, veamos si podemos mantener las partes agradables de las formas de las letras de Papyrus mientras hacemos que la apariencia general sea un poco más contemporánea.

1. Revise la tipografía

De nuevo, comenzamos en Photoshop. Seleccione su tipo de letra (Papyrus) e ingrese el nombre del logotipo. Echa un vistazo a cada letra y toma notas de posibles detalles de diseño.

2. Idear

Saque su tableta Wacom y esboce rápidamente algunas ideas de composición. No pienses demasiado en este paso. Es como garabatear tu nombre en un cuaderno.

3. Tipo de letra distorsionada

Al igual que hicimos con Jokerman, escala, estira, sesga y aplasta cada letra sobre la parte superior del boceto de ideación que creaste. Se va a ensuciar, ¡pero no te preocupes!

4. Boceto de corrección

De todos los pasos, este puede parecer el más desalentador, pero no lo estrese.

No estás construyendo desde cero. Está utilizando la estructura del tipo de letra original mientras agrega sus propias mejoras sobre la marcha.

Este boceto puede ser súper horrible y feo. La belleza de las capas en Photoshop es la capacidad de realizar varias pasadas, cada una de las cuales se acerca más a sus verdaderas intenciones de diseño.

5. Bosquejo de refinamiento

Este es nuestro último paso en Photoshop. Sea honesto consigo mismo acerca de las partes de su diseño que no funcionan. También ayuda colorear sus letras para que pueda ver cómo se ven una al lado de la otra y descubrir cualquier irregularidad en la forma.

6. Seguimiento vectorial

Coloque el boceto de refinamiento dentro de Illustrator y comience su trazo vectorial con la herramienta Pluma.

7. Toques finales

Con su trazo vectorial completo, dé vida a su logotipo agregando detalles como colores, sombras, reflejos y contornos.

Comic Sans: como planchar una camisa arrugada

Me niego a ridiculizar a Comic Sans. Claro, aparece en momentos inapropiados, luciendo un poco desaliñado como si acabara de despertarse de una siesta. Pero cumplió con un resumen de diseño y puede ser el tipo de letra más conocido del mundo.

Desde un punto de vista puramente estético, Comic Sans no tiene mucho que gustar. Es regordete, desaliñado, y las pequeñas torceduras y protuberancias en las letras distraen bastante. Aún así, tiene algunas peculiaridades interesantes que podrían funcionar bien para un logotipo, y su percepción general como el peor tipo de letra de todos los tiempos lo convierte en el desafío perfecto para nuestra técnica de refinamiento de siete pasos.

Esta vez, me centraré menos en la mecánica y les daré un poco más de información sobre mi proceso de pensamiento creativo en cada paso.

1. Revise la tipografía

Para este paso, piense en usted como el padre de un adolescente incómodo. No se puede negar que es un tonto de aspecto desgarbado, pero puedes ver más allá de todo eso hasta el día en que será un joven fornido y completo.

2. Idear

La ideación es el momento de liberar tu lado artístico arriesgado. Puedes editarte sin piedad más tarde, pero por ahora, arriésgate.

Cuando estaba revisando Comic Sans, noté una especie de alegría que traté de incorporar en mis bocetos de ideas.

3. Tipo de letra distorsionada

Tal vez seas como yo... algo obsesivo con la organización de capas y el uso de técnicas de edición no destructivas en Photoshop. ¡No seas así para este paso!

Escriba su palabra, rasterice la fuente y distorsione esas letras.

4. Boceto de corrección

Como dije, las pequeñas irregularidades de Comic Sans son enloquecedoras, así que para este paso, me concentré en enderezar las líneas y suavizar las curvas.

5. Bosquejo de refinamiento

Durante mucho tiempo, pasé directamente del paso de boceto de corrección en Photoshop a Vector Trace en Illustrator. Pero, una vez que vi mis letras vectoriales rellenadas por primera vez, siempre se veían un poco raras.

Este paso de refinamiento es una excelente manera de asegurarse de que sus letras estén bien espaciadas. Después de todo, las formas formadas entre las letras son tan importantes como las letras mismas.

6. Seguimiento vectorial

Puede ser fácil apagar tu cerebro cuando usas la herramienta de lápiz. Empieza a señalar, hacer clic y arrastrar controladores y deja de buscar formas de mejorar su diseño.

¡No hagas eso! Cuando dibujas a mano, constantemente tomas decisiones y correcciones en una fracción de segundo. Debe usar la herramienta Pluma de manera similar.

7. Toques finales

Estaba satisfecho con la forma en que resultó el trazo vectorial, así que opté por una sombra de bloque simple y algunas líneas de acento interior.

Idealmente, sus formas de letras podrán sostenerse por sí mismas sin ningún adorno. Los toques finales están destinados a hacer que su diseño destaque, pero debe evitar agregar demasiados efectos especiales.

La oportunidad de las cosas no deseadas

Los diseñadores somos sabios al mantenernos conectados a las tendencias, herramientas y modos de pensamiento existentes en nuestra profesión. Aprendemos y crecemos como comunidad, y si un gran segmento de nuestro campo ve algo mal, debemos tratar de entender por qué.

Sin embargo, también debemos resistir la tentación de rechazar las prácticas de diseño por completo, especialmente por capricho de la opinión popular. Cuando nos encontramos con algo que se considera malo, como usar Jokerman, es bueno saber por qué otros diseñadores se sienten así, pero es miope tirar un recurso potencialmente valioso a la basura.

En su lugar, mantenga todo lo que pueda en un archivo en su mente. Tome notas mentales, haga observaciones, clasifique las cosas que le gustan y las que no, y almacene una selección diversa de opiniones de otros diseñadores.

Nunca se sabe, un día puede hacer lo impensable y arriesgado ridiculizar a la comunidad de diseño al usar Comic sans como base para el nuevo y hermoso logotipo de su cliente.

• • •

Lectura adicional en el blog de diseño de Toptal:

• eCommerce UX: una descripción general de las mejores prácticas (con infografía)
• La importancia del diseño centrado en el ser humano en el diseño de productos
• Los mejores portafolios de diseñadores de UX: estudios de casos y ejemplos inspiradores
• Principios heurísticos para interfaces móviles
• Diseño anticipatorio: cómo crear experiencias de usuario mágicas