Embora projetar uma fonte que funcione efetivamente em vários tamanhos com kerning de letras cuidadosamente elaborado seja uma habilidade que pode levar anos para ser aperfeiçoada, esse projeto rápido e divertido mostrará como você pode criar suas próprias fontes de caligrafia usando Inkscape e fontastic.me, dando você sua própria fonte única. O principal objetivo do fontastic.me é produzir fontes de ícones para sites, mas você pode criar uma fonte de letras que você poderia usar para produzir títulos ou pequenas quantidades de texto.
Se você não estiver familiarizado com isso, o Inkscape é um aplicativo de desenho de linha vetorial de código aberto e gratuito que está disponível para Windows, OS X e Linux. Fontastic.me é um site que oferece uma variedade de fontes ícone, mas também permite que você faça o upload de seus próprios gráficos SVG e convertê-los em uma fonte de graça.
Para o propósito deste tutorial, vamos traçar uma foto de algumas letras escritas, mas você pode facilmente adaptar essa técnica e desenhar suas letras diretamente no Inkscape. Isso pode funcionar especialmente bem para aqueles que usam tablets de desenho.
Importar uma foto da sua fonte escrita
Você precisará de uma foto de algumas letras desenhadas se quiser acompanhar e, se não quiser fazer a sua, poderá fazer o download e usar a-doodle-z.jpg, que contém as letras maiúsculas A-Z.
Se você for criar o seu próprio, use uma tinta de cor escura e papel branco para contraste forte e fotografe as letras concluídas com boa luz. Além disso, tente evitar espaços fechados em letras, como o 'O', pois isso tornará a vida mais complicada ao preparar suas letras rastreadas.
Para importar a foto, vá para Arquivo> Importar e navegue até a foto e clique no botão Abrir. Na próxima caixa de diálogo, é aconselhável usar a opção Incorporar.
Se o arquivo de imagem for muito grande, você poderá reduzir usando as opções no submenu Visualizar> Zoom e, em seguida, redimensionando-o clicando uma vez nele para exibir alças de seta em cada canto. Clique e arraste uma alça, mantendo pressionada a tecla Ctrl ou Command e ela manterá suas proporções originais.
Em seguida, vamos traçar a imagem para criar letras de linha de vetor.
02 de 05Traçar a foto para criar letras de linha de vetor
É uma boa ideia revisar o processo de rastreamento de gráficos de bitmap antes de começar.
Clique na foto para garantir que ela esteja selecionada e, em seguida, vá para Caminho> Traçar Bitmap para abrir o diálogo Traçar Bitmap. Aqui, deixamos todas as configurações como padrão e produzimos um resultado bom e limpo. Pode ser necessário ajustar as configurações de rastreio, mas você pode achar mais fácil fotografar novamente com melhor iluminação para produzir uma imagem com contraste mais forte.
Na captura de tela, você pode ver as letras traçadas que foram removidas da foto original. Quando o traçado estiver concluído, as letras serão colocadas diretamente sobre a foto, portanto, elas podem não ser muito óbvias. Antes de prosseguir, você pode fechar a caixa de diálogo Trace Bitmap e também clicar na foto para selecioná-la e clicar na tecla Delete em seu teclado para removê-la do documento.
03 de 05Dividir o rastreamento em letras individuais
Neste ponto, todas as letras são unidas, então vá para Path> Break Apart para dividi-las em letras individuais. Observe que, se você tiver letras compostas de mais de um elemento, elas também serão divididas em elementos separados. No caso do nosso exemplo, isso se aplica a todas as letras, portanto faz sentido agrupar cada letra nesse estágio.
Para fazer isso, basta clicar e arrastar uma marca de seleção em torno de uma letra e, em seguida, vá em Object> Group ou pressione Ctrl + G ou Command + G, dependendo do seu teclado.
Obviamente, você só precisa fazer isso com letras que contenham mais de um elemento. Antes de criar os arquivos de carta, redimensionaremos o documento para um tamanho adequado.
04 de 05Definir o tamanho do documento
Você precisará configurar o documento para um tamanho adequado, então vá para Arquivo> Propriedades do documento e, na caixa de diálogo, defina a Largura e a Altura conforme necessário. Nós definimos o nosso para 500px por 500px, embora idealmente você iria definir a largura de forma diferente para cada letra para que as letras finais se encaixem mais ordenadamente.
Em seguida, criaremos as letras SVG que serão enviadas para o fontastic.me.
05 de 05Criar arquivos SVG individuais para cada letra
O Fontastic.me exige que cada letra seja um arquivo SVG separado, portanto, você precisará produzi-las antes de pressionar.
Arraste todas as suas letras para que elas fiquem fora das bordas da página. Fontastic.me ignora todos os elementos que estão fora da área da página, assim você pode deixar essas cartas estacionadas aqui sem problemas.
Agora arraste a primeira letra para a página e use as alças de arrasto no canto para redimensioná-la conforme necessário.
Em seguida, vá para File> Save As e dê um nome significativo ao arquivo. Nós chamamos o meu a.svg - garantir que o arquivo tenha o sufixo .svg.
Agora você pode mover ou excluir a primeira letra e colocar a segunda letra na página e novamente acessar Arquivo> Salvar como. Você precisa fazer isso para cada letra. Se você é paciente, você pode ajustar a largura da página conforme você vai para melhor corresponder cada letra.
Finalmente, você pode querer considerar a produção de pontuação, embora você definitivamente queira um caractere de espaço. Por um espaço, basta salvar uma página em branco. Além disso, se você quiser letras maiúsculas e minúsculas, você precisa salvar todos esses também.
Agora você pode fazer uma visita ao fontastic.me e criar sua fonte. Você pode aprender um pouco sobre esse processo em um artigo que explica como usar o fontastic.me para criar sua fonte.
