4º Aula: Fontes e Styles

em segunda-feira, 4 de julho de 2016 |

Finalmente dei as caras, não é? E vim com um tema polêmico: fontes!

Na maioria dos casos, as designers fazem edições divinas, mas, na hora de aplicar o título e frases, elas travam. Porém, apesar de parecer, as fontes não são um bicho de sete cabeças, e nem é tão difícil de lidar com elas. Então, se alguém tem medo da parte de tipografia, pode deixar isso de lado!
Até o fim do post, todas vão dizer fontes são um amor

O primeiro passo é, claro, baixar a(s) fonte(s) que quiser. Para isso, é só assistir o vídeo e saber como fazer o download:
{link}

Depois de baixada, a fonte virá em um arquivo .zip. Ela ainda não estará pronta para uso e, para que esteja, é necessário instalá-la no computador.

1º Passo: Clique com o botão direito sobre o arquivo zipado e vá em "Extrair para {nome do arquivo em zip}

2º Passo: Uma pastinha será criada com o arquivo de fonte.


 3º Passo: Selecione todos os arquivos de fonte, clique com o botão direito e vá em Instalar. Uma caixa irá aparecer mostrando o progresso de instalação. Depois disso, a fonte está pronta para usar.



Depois de tudo, é hora de aplicá-las ao design. Nessa vídeo aula, eu fiz um DS fictício para mostrar a utilização das fontes. Se a edição for mais dark/afins, nunca coloque uma fonte clara, com cores como branco, prateado, vermelho/rosa/azul claro. Não vai ficar bom. É preciso ter um pouco de sensibilidade nessa hora para não estragar um design todo com as fontes.

Para começar, recomendo que deixem o Photoshop no modo tipografia (é mostrado no vídeo, mas é bom ressaltar). Para isso, é só fazer isso:

1º Passo: Na barra de menu, no canto, tem um menu dropdown. Por padrão, o modo Essenciais é selecionado. 




2º Passo: Mude para Tipografia.
  

3º Passo: O layout do Photoshop irá mudar e o foco será a tipografia, ou seja, as fontes e suas respectivas configurações.




Breve explicação dos componentes do modo tipografia:
Primeira linha: Nome da fonte (PF Ronda Seven) e modo (Regular, Itálico, Negrito)
Segunda linha: Tamanho (12 pt) e espaçamento entre linhas (Automático)
Terceira linha: Espaço entre dois caracteres (Medida) e espaçamento entre caracteres selecionados, ou seja, espaçamento entre todos os caracteres (0)
Quarta linha: Altura dos caracteres (100%), largura dos caracteres (100%)
Quinta linha: Altura em que os caracteres ficarão na linha (0pt), Cor dos caracteres
Sexta linha: Opções para deixar em:

  • Negrito
  • Itálico
  • TODAS MAIÚSCULAS
  • Apenas a primeira maiúscula
  • Deixar o texto acima
  • Deixar o texto abaixo
  • Sublinhado
  • Riscado 
Sétima linha: Indisponível
Oitava linha: Idioma (Português), método de suavização (Bem definida, Nítida, Nenhum)

É recomendável que todas as definições em automático sejam mantidas assim. A altura e largura devem ser em 100% ou pode desconfigurar os caracteres. A suavização deve estar sempre em Nítida ou Bem Definida.


Nesse segundo vídeo, mostrei como escolher as fontes para, por exemplo, um design dark e um romântico. É a mesma edição, alterada apenas por um psd que clareia as fotos e deixa uma impressão mais romântica e um preenchimento de cor preto. Não são dois DS diferentes!. As fontes que usei são: Scriptina para o título e Clemente para a frase. Para créditos, foram PF Ronda Seven e PF Arma Five.
Quando mexi nas opções de mesclagem, foram ajustes para a edição que eu fiz. Muito provavelmente os mesmos ajustes não fiquem bons em outras edições.
{link}

Esse modo, usando styles, é uma das maneiras de personalizar o título e, particularmente, não é a que eu uso na maioria dos casos. A segunda maneira é muito mais simples e consiste, basicamente, em duplicar a camada e aplicar cores diferentes. Em alguns casos, uma ou outra opção de mesclagem. Para entenderem melhor, o vídeo:
{link}

Por último, ensinei como fazer um style. Vocês não precisam fazer exatamente igual, podem inovar e mudar as opções de mesclagem como quiserem ou como acharem melhor.
{link}

Uma breve explicação de cada componente das opções de mesclagem:
 Chanfro & Entalhe (Contorno e Textura): Deixa o texto com textura, patterns, padrão do Phtoshop ou algum que você tenha baixado e instalado
Traçado: Isso sim é o que contorna o texto, com cor, degradê ou textura. É possível escolher o tamanho, opacidade e preenchimento.
Sombra Interna: Dá à parte interna do texto uma sombra, de tamanho, opacidade e preenchimento à escolha
Brilho Interno: É o contrário do anterior. Ao invés de sombra, dá brilho
Acetinado: Deixa uns "riscos" no texto
Sobreposição de Cor: Deixa o texto com uma cor à escolha. É basicamente o que muda a cor do texto
Sobreposição de Degradê: Como o anterior, muda a cor do texto, mas, nesse aqui, muda para um degradê à escolha
Sobreposição de Padrão: Como os dois anteriores, muda a cor do texto, mas por um padrão (pattern)
Brilho Externo: Ao contrário do brilho interno, o brilho fica por fora do texto e não por dentro
Sombra Projetada: Uma sombra externa que se projeta a um determinado ângulo à escolha

TAREFA!
A tarefa será dividida em três etapas.
PRIMEIRA: Pegar a imagem de algum artista e escrever o nome dele(a). Depois, como no segundo vídeo, duplicar a camada e, em cada uma, aplicar um style diferente. Os styles escolhidos deverão combinar entre si e formar uma tipografia harmoniosa.
SEGUNDA: Fazer a mesma coisa, porém, sem styles. Nessa tarefa, vocês deverão seguir o exemplo do terceiro vídeo.
TERCEIRA: Criar um style e, após pronto, aplicá-lo ao texto. Nessa parte, deverá ser enviado a foto do texto sem e com o style que vocês criaram. 
**Peguem artistas com nomes compostos, tipo Karen Gillan ou Marina and The Diamonds, para que vocês possam mesclar fontes também. Se os nomes forem simples, tipo Halsey ou Beyoncé, que não deem para mesclar fontes, a tarefa será dada como errada.


Por hoje é só, amores. Boa sorte e boa semana para vocês.
Qualquer dúvida, falem comigo.
xx,

Nenhum comentário:

Postar um comentário