Como criar fontes personalizadas: 7 etapas e 3 estudos de caso

Vamos encarar; existem tipos de letra que nós designers adoramos odiar. Na verdade, a palavra “ódio” pode não ser forte o suficiente. Flagelo? Xingamento? Praga? Excremento? Já ouvi cada um deles insultar as letras, números e símbolos inanimados que usamos para comunicar ideias, e eu entendo totalmente. Já vi (e cometi) crimes do tipo tão graves que até o boletim de escritório mais estranho ficaria constrangido.

Mas e se eu lhe dissesse que as fontes mais odiadas da nossa geração podem realmente ser as melhores amigas de um designer de marca? E se eu lhe mostrasse como transformar letras sem brilho em logotipos deliciosos que os clientes vão adorar (e pagar um bom dinheiro)? Você estaria disposto a mudar radicalmente a maneira como você vê o tipo e se abrir para um universo infinitamente em expansão de opções criativas? Pronto para fazer sua própria fonte?

Se sim, continue lendo, porque estou prestes a apresentar um processo simples que você pode usar para transformar imediatamente qualquer tipo de letra para melhor criar uma fonte. E, para mostrar a eficácia do processo, vou demonstrar cada etapa usando três tipos de letra que são apaixonadamente desprezados por designers em todos os lugares.

Primeiro, Jokerman , uma coleção maluca de personagens parecidos com palhaços geralmente encontrados em banners de aniversário e cartões de visita “extravagantes”.

Em seguida, temos Papyrus , meticulosamente copiado das paredes do túmulo do rei Tut e a escolha preferida dos menus de cafés, artistas sérios e James Cameron.

Finalmente, um fora-da-lei tipográfico legal e inabalavelmente casual que não precisa de introdução – o único, Comic Sans .

A partir deste agrupamento improvável, vou ensinar você a ver tesouros onde os outros gritam “lixo!” e crie logotipos personalizados do mais alto calibre.

Um processo simples e confiável

Vamos fazer uma jornada de tipo de letra hediondo a logotipo impressionante e aprender a fazer uma fonte. Começaremos com algo ruim, terminaremos com algo bom e seguiremos os mesmos sete passos todas as vezes. Quais são os sete passos? Discutirei os detalhes daqui a pouco, mas primeiro, algumas notas sobre as ferramentas necessárias para esse tipo de trabalho.

Configuração recomendada

Os designers visuais têm acesso a uma infinidade de ferramentas de design novas e acessíveis. Dispositivos de tela sensível ao toque e canetas avançadas, como o lápis da Apple, tornam a captura de ideias e a migração para um fluxo de trabalho digital mais fácil do que nunca. Experimente livremente e agarre-se ao que funciona para você. Dito isso, prefiro uma abordagem testada e comprovada com ferramentas confiáveis ​​da Adobe e da Wacom:

• Photoshop — Usado para manipular tipos de letra e criar esboços de refinamento em camadas.
• Illustrator — Usado para traçar esboços de refinamento final e adicionar rapidamente elementos de estilo como cores, gradientes, texturas, padrões, etc.
• Wacom Tablet — Usado para desenho digital no Photoshop.

Jokerman - De grosseiro a elegante

Jokerman é o Jim Carrey dos tipos de letra: nunca sutil, alto em todos os ângulos, mas estranhamente atraente para as massas. É ridículo e exagerado e exatamente o tipo de fonte para a qual este tutorial foi feito. Tipos de letra malucos como Jokerman estão repletos de elementos de design curiosos, mas não têm a restrição necessária para um logotipo de bom gosto. Como designers, precisamos exercer bom senso, e isso muitas vezes significa abrir mão de detalhes em prol de uma comunicação mais clara.

É um processo simples de sete etapas que nos leva de uma fonte indesejável a um logotipo sofisticado. Há alguns desenhos simples envolvidos, mas se você puder escrever seu nome e traçar uma imagem, terá toda a habilidade necessária para aprender a fazer sua própria fonte. Vamos começar.

1. Revise o tipo de letra

No Photoshop, escolha um tipo de letra (neste caso, Jokerman), digite o nome da empresa que você precisa para o seu logotipo e examine rapidamente cada letra para ter uma ideia das possibilidades de design, como escala, proporção, peso da letra etc.

2. Idealizar

Usando seu tablet Wacom, faça um esboço solto do seu logotipo. Não há necessidade de ser exato aqui. Basta esboçar algo rápido e fácil para servir de esqueleto para o seu design.

3. Distorcer o tipo de letra

Usando o tipo de letra selecionado, dimensione, estique, incline e esmague cada letra por cima do seu esboço de ideação. Não há necessidade de tornar as coisas perfeitas nesta etapa. Você vai refiná-lo mais tarde, então continue.

4. Esboço de Correção

Agora, faça um esboço rápido por cima de suas letras distorcidas. É aqui que você começa a melhorar as deficiências do tipo de letra original e adiciona seus próprios detalhes de design.

5. Esboço de Refinamento

Esta é a última fase de esboço e refinamento no Photoshop. Limpe qualquer coisa que não esteja funcionando e preencha suas letras para que você possa ter uma ideia melhor da forma e da relação dos espaços entre as letras.

6. Rastreamento Vetorial

Solte seu esboço de refinamento no Illustrator, abra a ferramenta caneta e clique cuidadosamente no caminho para belas curvas bezier.

7. Toques Finais

Depois de terminar o rastreamento vetorial, adicione impacto visual com detalhes atenciosos, como cores, sombras, realces, contornos etc.

Papiro — Uma Transformação Sutil

Confissão: Eu gosto de Papyrus, e não me importa quem saiba. Sério, nem todos os tipos de letra que nós designers gostamos de criticar são tão ruins assim. Usado demais? Pode ser. Kitsch? Certo, sim. Mas só porque um tipo de letra faz alguém sentir que seu documento de design maduro tem dignidade não significa que seja ruim. E é assim que me sinto sobre Papyrus. É como a camisa que comprei na Old Navy: veste bem e me deixa apresentável para ocasiões especiais.

Dito isso, minha camisa social não tem bordas desfiadas intencionalmente. Então, vamos ver se podemos manter as boas partes das letras do Papyrus enquanto fazemos a aparência geral e um pouco mais contemporânea.

1. Revise o tipo de letra

Novamente, começamos no Photoshop. Selecione seu tipo de letra (Papyrus) e digite o nome do logotipo. Dê uma olhada em cada letra, fazendo anotações de possíveis detalhes de design.

2. Idealizar

Abra sua mesa digitalizadora Wacom e esboce rapidamente algumas ideias de composição. Não pense demais neste passo. É como rabiscar seu nome em um caderno.

3. Distorcer o tipo de letra

Assim como fizemos para Jokerman, dimensione, estique, incline e esmague cada letra por cima do esboço de ideação que você criou. Vai ficar confuso, mas não se preocupe!

4. Esboço de Correção

De todas as etapas, esta pode parecer a mais assustadora, mas não se estresse.

Você não está construindo do zero. Você está usando a estrutura do tipo de letra original enquanto adiciona suas próprias melhorias à medida que avança.

Este esboço pode ser super horrível e feio. A beleza das camadas no Photoshop é a capacidade de fazer várias passagens, cada uma se aproximando de suas verdadeiras intenções de design.

5. Esboço de Refinamento

Este é o nosso último passo no Photoshop. Seja honesto consigo mesmo sobre partes do seu design que não estão funcionando. Também ajuda a colorir suas letras para que você possa ver como elas se parecem umas com as outras e descobrir quaisquer irregularidades na forma.

6. Rastreamento Vetorial

Coloque o esboço de refinamento dentro do Illustrator e comece seu traço vetorial com a ferramenta caneta.

7. Toques Finais

Com o traçado vetorial completo, dê vida ao seu logotipo adicionando detalhes como cores, sombras, realces e contornos.

Comic Sans - como passar uma camisa enrugada

Eu me recuso a ridicularizar a Comic Sans. Claro, ele aparece em momentos inapropriados, parecendo um pouco desgrenhado como se tivesse acabado de acordar de um cochilo. Mas, atendeu a um resumo de design e pode ser a fonte mais conhecida do mundo.

Do ponto de vista puramente estético, não há muito o que gostar na Comic Sans. É atarracado, desalinhado, e as pequenas dobras e saliências nas letras são bastante perturbadoras. Ainda assim, ele tem algumas peculiaridades interessantes que podem funcionar bem para um logotipo, e sua percepção geral como o pior tipo de letra de todos os tempos o torna o desafio perfeito para nossa técnica de refinamento em sete etapas.

Desta vez, vou me concentrar menos na mecânica e dar a você um pouco mais de visão do meu processo de pensamento criativo em cada etapa.

1. Revise o tipo de letra

Para esta etapa, pense em si mesmo como o pai de um adolescente desajeitado. Não há como negar que ele é um bobão de aparência desengonçada, mas você é capaz de ver além de tudo isso para um dia em que ele será um jovem robusto e bem-arredondado.

2. Idealizar

Ideação é o momento de liberar seu lado artístico de risco. Você pode editar a si mesmo impiedosamente mais tarde, mas por enquanto, arrisque-se.

Quando eu estava revisando Comic Sans, notei uma espécie de brincadeira saltitante que tentei incorporar em meus esboços de ideação.

3. Distorcer o tipo de letra

Talvez você seja como eu… um tanto obsessivo em organizar camadas e utilizar técnicas de edição não destrutivas no Photoshop. Não seja assim para esta etapa!

Digite sua palavra, rasterize a fonte e distorça essas letras.

4. Esboço de Correção

Como eu disse, as pequenas irregularidades da Comic Sans são enlouquecedoras, então, para esta etapa, concentrei-me em endireitar linhas e suavizar curvas.

5. Esboço de Refinamento

Por muito tempo, fui diretamente da etapa Correção de Esboço no Photoshop para o Vector Trace no Illustrator. Mas, uma vez que vi minhas letras vetoriais preenchidas pela primeira vez, elas sempre pareciam um pouco estranhas.

Essa etapa de refinamento é uma ótima maneira de garantir que suas letras estejam bem espaçadas. Afinal, as formas formadas entre as letras são tão importantes quanto as próprias letras.

6. Rastreamento Vetorial

Pode ser fácil desligar o cérebro ao usar a ferramenta caneta. Você começa a apontar, clicar e arrastar alças e para de procurar maneiras de melhorar seu design.

Não faça isso! Ao esboçar à mão, você está constantemente tomando decisões e correções em frações de segundo. Você deve usar a ferramenta caneta de maneira semelhante.

7. Toques Finais

Fiquei satisfeito com a forma como o traço vetorial ficou, então optei por uma sombra de bloco simples e algumas linhas de destaque internas.

Idealmente, suas letras serão capazes de se sustentar por conta própria, sem qualquer embelezamento. Os toques finais são feitos para destacar seu design, mas você deve se proteger contra a adição de muitos efeitos especiais.

A oportunidade de coisas indesejadas

Nós, designers, somos sábios em permanecer conectados às tendências, ferramentas e modos de pensamento existentes em nossa profissão. Aprendemos e crescemos como uma comunidade, e se um grande segmento de nosso campo vê algo mal, devemos procurar entender o porquê.

No entanto, também devemos resistir ao desejo de rejeitar totalmente as práticas de design, especialmente por capricho da opinião popular. Quando nos deparamos com algo que é visto como ruim, como usar o Jokerman, é bom saber por que outros designers se sentem assim, mas é míope jogar um recurso potencialmente valioso no lixo.

Em vez disso, mantenha o máximo que puder em arquivo em sua mente. Faça anotações mentais, faça observações, categorize as coisas que você gosta e não gosta e armazene uma seleção diversificada de opiniões de outros designers.

Você nunca sabe, um dia você pode ridicularizar a comunidade de design impensável e arriscada usando Comic sans como base para o novo e belo logotipo do seu cliente.

• • •

Leia mais no Blog Toptal Design:

• eCommerce UX – Uma visão geral das melhores práticas (com infográfico)
• A Importância do Design Centrado no Homem no Design de Produto
• Os melhores portfólios de UX Designer – Estudos de caso e exemplos inspiradores
• Princípios heurísticos para interfaces móveis
• Design Antecipatório: Como criar experiências de usuário mágicas