Letreiro Retro no PhotoshopListThumbs

Letreiro Retro no Photoshop

novembro 10, 2009

Semana passada eu estava novamente preso em um aeroporto esperando por mais de 4 horas. Então aproveitei para conferir os designs de algunsdecks de skate e encontrei um muito legal da Girl Skateboards. O legal daquele design era o efeito, me lembrou daqueles letreiros retro pintados nas paredes em fábricas e indústrias antigas.

Então neste tutorial vou mostrar a vocês como criar um efeito muito semelhante aquele que vi, mas a idéia do tutorial é mostrar a vocês como selecionar osBlend Modes corretos quando estamos brincando com texturas. Nós também vamos usar o Illustrator para criar a fonte do nosso letreiro, que nesse caso vai ter a palavra Abduzeedo, é claro :)

Passo 1

Abra o Adobe Illustrator e crie um novo documento. Vá então até View>Show Grid, e View>Snap To Grid. Depois disso, com a Rectangle Tool (M) crie 2 quadrados como na imagem abaixo. Use apenas stroke e deixe sem preencher.

Old Style Typography Sign in Photoshop

Passo 2

Basicamente o que fizemos no primeiro passo foi criar um módulo para as letras. Agora duplique 4 vezes para termos os módulos das letras A, B, D, U, Z, E. Com a Direct Selection Tool (A) comece a deletar segmentos do módulo para criar as letras. É bastante simples e não deve levar mais de cinco minutos.

Old Style Typography Sign in Photoshop

Passo 3

Agora aumente o stroke para algo como 50-60 pts. Depois disso vá até Object>Path>Outline Stroke. O stroke agora será transformado em um objeto preenchido.

Old Style Typography Sign in Photoshop

Passo 4

Para criar o efeito 3D é simples, use a Rectangle Tool (M). A primeira coisa é criar algumas referências como os triângulos 1 e 2. Agora fica mais fácil, é só criar outros segmentos e com a Direct Selection Tool (A) você pode editar os vértices. Se você quiser adicionar pontos use a Pen Tool (P). Eu também usei dois tons de laranja, um mais claro e um mais escuro. Como se a luz estivesse vindo de cima, então a cor escura fica na parte de baixo (3-6).

Old Style Typography Sign in Photoshop

Passo 5

Aqui está uma idéia do processo completo, mais uma vez, não é complicado e é um bom exercício se você quiser ganhar prática noIllustrator.

Old Style Typography Sign in Photoshop

Passo 6

Para o O você pode ir até Effect>Stylize> Round Corners. Use um valor pequeno, algo entre 2 ou 3 para Radius. Duplique a palavra Abduzeedo e a preencha com preto, vá até Arrange>Send Back para que ela fique atrás do texto 3D. Depois disso apenas adicione um texto usando a fonte Brush Script Std Medium com vermelho e adicione um azul claro no background.

Isso é tudo, a parte feita no illustrator está pronta e já está bem legal.

Old Style Typography Sign in Photoshop

Passo 7

Agora vá para o Photoshop. Crie um novo documento. Estou usando 1920 x 1200 pixels para o tamanho. Depois disso importe um textura legal de madeira com tinta descascada. A que usei foi cortesia do Shutterstock e você pode fazer o download dela aqui.

Old Style Typography Sign in Photoshop

Passo 8

Vamos reduzir um pouco da saturação. Vá até Image>Adjustments>Saturation. Troque para -40. Assim o azul vai ficar um pouco mais cinza.

Old Style Typography Sign in Photoshop

Passo 9

Copie a palavra Abduzeedo do Illustrator e cole no Photoshop. Escolha Paste as Smart Objects para o caso de precisar trocar as cores.

Old Style Typography Sign in Photoshop

Passo 10

Duplique a textura de madeira e a mova para cima, na frente da palavra Abduzeedo e vá até Layer>Create Clipping Mask. Troque o Blend Mode para Darker Color. O legal é que nós ficamos com os azuis e marrons da textura ao invés de apenas preto ou tons escuros se optássemos pelo Multiply, por exemplo. É um ótimo Blend Mode para esse tipo de design retro.

Old Style Typography Sign in Photoshop

Passo 11

Duplique a textura e vá até Image>Adjustments>Desaturate. Coloque-a acima da outra textura novamente como um Clip Mask. Desta vez no entanto troque o Blend Mode para Multiply. A idéia é escurecer um pouco a palavra Abduzeedo.

Old Style Typography Sign in Photoshop

Passo 12

Copie a sombra no Illustrator e cole no Photoshop atrás da palavra 3D Abduzeedo.

Old Style Typography Sign in Photoshop

Passo 13

Duplique a textura do background e vá até Image>Adjustments>Desaturate. Depois disso vá até Images>Adjustments>Invert. Arrume a textura de maneira que ela fique na frente da layer da sombra.

Old Style Typography Sign in Photoshop

Passo 14

Vá até Layer>Create Clipping Mask. Depois disso troque o Blend Mode da layer da textura para Lighten. O Lighten Blend Mode é perfeito pois vai mostrar a textura e deixar mais clara a sombra do vetor escuro, deixando o efeito mais realista.

Old Style Typography Sign in Photoshop

Passo 15

Com a Rounded Rectangle Tool (U) crie um retângulo branco abaixo da palavra Abduzeedo.

Old Style Typography Sign in Photoshop

Passo 16

Duplique novamente o background da textura de madeira e vá até Image>Adjustments>Invert.

Old Style Typography Sign in Photoshop

Passo 17

Mova a layer de texto invertida para que ela fique na frente do retângulo branco. Vá até Layer>Create Clipping Mask. Depois disso, troque o Blend Mode para Difference.

Old Style Typography Sign in Photoshop

Passo 18

Duplique novamente a textura do background e vá até Image>Adjustment>Desaturate. Depois disso vá até Image>Adjustments>Levels. Aumente o white input para que a cor da texture passe a ser branca.

Old Style Typography Sign in Photoshop

Passo 19

Vá novamente até Layer>Create Clipping Mask. Reduza um pouco a Opacity para 70%.

Old Style Typography Sign in Photoshop

Conclusão

Agora apenas adicione o texto final repetindo o mesmo processo que fizemos na palavra Abduzeedo. Os blend modes serão quase os mesmos, mas agora entendemos como o Darker Color e o Lighter Color funcionam e em que casos podemos usá-los. Claro que você pode aplicar eles de maneiras diferentes, e isso é o melhor do Photoshop, você pode sempre encontrar novas maneiras e soluções para o mesmo problema. Basta brincar e testar as ferramentas.


Old Style Typography Sign in Photoshop
Clique na imagem para um full preview

Download do Arquivo Photoshop

Clique aqui para fazer o download do arquivoPhotoshop usado nesse tutorial

Sobre o autor

My name is Fabio Sasso, I'm a graphic/web designer from Porto Alegre, Brazil and I'm the founder of Abduzeedo. I hope we can share lots of information, tips, and ideas through Abduzeedo. Also you can follow me on Twitter or my personal site at http://fabiosasso.com.

Sponsored Links:

Compartilhe com os outros!

No comments yet :(

Comentar

O conteúdo deste campo é privado não será exibido ao público.

Ícones dos Anunciantes

  • Openjobs - Oportunidades de Emprego para Profissionais de Talento
  • Zee - Irrezeestível Design Digital
  • Tradd.us - Contextual Translator
  • DesignFlavr, Inspirational Art and Design served daily
  • Signalnoise.com | The art of James White
  • Alberto Seveso - Illustrator
  • Description: Award Winning Portfolio and blog of Web Developer Anthony Woods

Você gostaria de anunciar aqui?