O TEMA DO FÓRUM ESTÁ EM MANUTENÇÃO. FEEDBACKS AQUI: ACESSAR

Tutorial Básico de Criação de Fontes

Iniciado por Leocádia, 02/12/2015 às 01:36

02/12/2015 às 01:36 Última edição: 03/12/2015 às 11:43 por Vash
[box class=catbg2]Introdução [/box]

Primeiramente obrigado por estar lendo este tópico.
Lógico que um designer não poderia deixar de trabalhar com a Tipografia, neste tutorial vamos trabalhar com as fontes. Servirá somente como uma base para a criação de fontes, exigirá muito esforço, dedicação e paciência, será trabalhoso, mas no final teremos orgulho. Vamos começar?

[box class=catbg2]Iniciando... [/box]

Você é um designer experiente, ou iniciante.
E como que até agora não resolveu criar suas próprias fontes?
Bem, por isso estou aqui, para "auxilia-los" e dar um empurrãozinho para que você seja criativo e faça seus próprios trabalhos (pois não há nada melhor quando fazemos nossos próprios "materiais").



Há vários modos de se desenhar uma fonte, e cabe a você escolher um deles e adapta-lo a sua necessidade. Alguns que você pode usar:
  • Desenhe no papel
  • Desenhe em um editor de imagens (Como o Photoshop ou Paint)
  • Desenhe em um tablet
  • Desenhe diretamente no software de edição de fontes
Como irei fazer uma fonte simples, vou desenhar diretamente pelo Photosho

[box class=catbg2]Materiais[/box]

Os materiais irão variar dependendo do modo escolhido.
Ferramentas para desenho no papel
:
  • Uma boa caneta
  • Papel
  • Régua (Opcional)
  • Adobe Photoshop
  • Scanner
  • Software de edição de fontes
  • Recomendo usar o Fontographer da FontLab, É o mais usado por todos, e tem uma interface de fácil compreensão.
  • Baixe se quiser o Scan Font, este serve para transformar imagems bitmap em glifos de fontes.
[box class=catbg2]Mão na Massa...[/box]

  • Passo 1:

    OBS: Essa parte é para desenho feito no papel, caso não use este modo, pule para o próximo passo.

    Pegue o papel e a caneta, e comece a desenhar todo o alfabeto. (Atenção, para cada estilo de fonte você precisara de uma caneta diferente, ponta grossa, ponta fina, etc. A escolha fará diferença no resultado).
    Desenhe as letras bem grandes para que detalhes sejam capturados pelo scanner, você também pode fazer linhas métricas a lápis para ajuda-lo a ter uma noção do que está fazendo.
    Crie uma nova fonte em seu editor de fontes e veja a tabela padrão de glifos que ele apresenta.
    Depois de desenhadas, digitalize todas para o computador e abra-as no Photoshop.

    Spoiler
    [close]


    OBS: A partir daqui vale para todos os métodos:

  • Passo 2:

    Com sua imagem aberta no Photoshop, faça edições se necessário, salve e copie a imagem para o Fontographer (CTRL+C) e (CTRL+V).

    Spoiler
    [close]

    Agora vamos traçar as imagems, para isso, vá ao menu Element>Auto Trace (CTRL+SHIFT+T), selecione a opção "Avançado", e modifique as opções de modo que achar melhor.


    Ao pressionar "Trace", sua imagem será automaticamente traçada, selecione a Scale Tool, e modifique o glifo de modo que fique proporcional. Se precisar mover o selecione tudo com CTRL+A, segure CTRL e mova-o de modo que se "encaixe" na guia proposta:

    Há outro modo de se fazer isso, ao digitalizar a imagem abra-a no ScanFont, vá em "Image>Place Into Font..." e copie o traçado para o Fontographer, (É pode crer ele serve só pra isso, converter bitmaps em glifos :pensa: ).

    Spoiler
    [close]

    Agora feche esta janela e observe que o glifo da letra "A" já foi criado.
    Depois traçar todas as fontes pode começar o longo, árduo e divertido processo de editar sua fonte até a perfeição! Onde você deverá consertar erros e revisar cada glifo (Sem esforço não há trabalho, certo?).

  • Passo 3:

    Agora vamos ajustar o espaçamento entre as letras, clique em "Metrics" depois "Auto Kern"  e ajuste o espaço entre suas letras e para tornar sua fonte proporcional. Pressione "CTRL+K" para visualizar.

    Em "Element", selecione "Font Info". Digite um nome para sua fonte.

    Agora depois de horas trabalhando nas fontes, finalmente vamos salva-la em formato .ttf, vá ao menu File>Generate Font Files...

    Spoiler
    [close]


    [box class=catbg2]Resultado[/box]

    Pronto! Terminamos a nossa fonte.
    Fiz somente os Glifos Maiúsculos de A a Z.
    Uma observação pessoal, nesta fonte você pode perceber que o logo da FontLab está presente em algumas letras, isso se deve porque a versão utilizada está em modo DEMO, mas  ao comprar uma licença esta marca é removida.

    Fonte Exemplo



    [box class=catbg2]Finalização[/box]

    Muito obrigado por lerem o tutorial, e espero ter ajudado alguns de vocês a terem uma noção sobre a criação de fontes.
    Lembrando que, foi apenas uma base, se quiserem realmente seguir com isto, sugiro que procurem mais tutoriais na NET, e se esforcem ao máximo, pois não é uma tarefa fácil...
    Talvez se o destino me permitir, eu faço uma aula avançada sobre esta bela arte.

    No mais só isso, qualquer coisa perguntem. :XD:

~Nada dura para sempre, nem mesmo a fria chuva de novembro...

~Gifts:
By Hiroto
By Hiroto #2
By Skyloftian


Esse foi um ótimo tutorial, não conhecia os programas.
Com certeza será útil tanto para mim quanto toda a comunidade!
Agradeço por dedicar-se ao mesmo.

Citação de: RhitDark online 02/12/2015 às 02:13
Esse foi um ótimo tutorial, não conhecia os programas.
Com certeza será útil tanto para mim quanto toda a comunidade!
Agradeço por dedicar-se ao mesmo.
Opa Rith thanks my friend! :XD:
Depois de matar a curiosidade como as fontes são criadas encontrei esses programas e resolvi tental fazer alguns glifos, porém é muito trabalhoso cara, muito mesmo... :sad:
Obrigado de novo pelo feedback!

~Nada dura para sempre, nem mesmo a fria chuva de novembro...

~Gifts:
By Hiroto
By Hiroto #2
By Skyloftian


Um ótimo tutorial, vai me ajudar bastante! Valeu Leo  :XD:

Off: Posso  te chamar de Leo ? é prático :3

Bom guia! Obrigado por disponibiliza-lo por aqui.
É algo trabalhoso mas bem útil. Parabéns pelo trabalho.

Your friend Sky
Quédate con Dios


FINALMENTE!
Sério, eu tava procurando um guia assim mês passado mas eram bem complicados os que eu encontrava e por vezes nem eram objetivos. Favoritando.

Citação de: Ven online 02/12/2015 às 10:16
Um ótimo tutorial, vai me ajudar bastante! Valeu Leo  :XD:

Off: Posso  te chamar de Leo ? é prático :3
kkkk pode sim fique tranquilo, não vou rugir você não  :lol:
Obrigado pelo coment! :ok:
Citação de: Skyloftian online 02/12/2015 às 11:42
Bom guia! Obrigado por disponibiliza-lo por aqui.
É algo trabalhoso mas bem útil. Parabéns pelo trabalho.

Your friend Sky
Quédate con Dios

My Friend... Sky Walker  :lol:
Mam, muito trabalhoso mesmo, para chegar com as fontes na perfeição exige muito esforço e dedicação e é claro gostar do que faz!
Thanks!! :XD:
Citação de: Alisson online 02/12/2015 às 13:42
FINALMENTE!
Sério, eu tava procurando um guia assim mês passado mas eram bem complicados os que eu encontrava e por vezes nem eram objetivos. Favoritando.
Fico feliz que tenha sido claro o bastante, porque os que eu encontrava também eram difíceis de entender os passos, então pesquisei treinei e simplifiquei... :o__o:
Muito obrigado pelo feedback!

~Nada dura para sempre, nem mesmo a fria chuva de novembro...

~Gifts:
By Hiroto
By Hiroto #2
By Skyloftian