Photoshop: Efeito Transformers
julho 1st, 2009
Olá pessoal, fazendo as minhas caminhadas virtuais de todos os dias a procura de um tutorial bem legal para o Photoshop, encontrei esse para compartilhar com vocês. Como o original é inglês e o de texturas planas que publiquei há algum tempo esta totalmente em inglês e como estou de “férias” resolvi traduzir.
Espero que vocês gostem quem preferir ir ver o post original basta clicar aqui. Quem ainda não foi conferir o novo filme dos Transformers não sabe o que esta perdendo! Mas vamos ao que interessa.
Passo 1
Para este tutorial você vai precisar fazer o download da fonte original e instalar em seu computador. Clique no link direto para a fonte no site dafont.com.
Em seguida no Photoshop, crie um novo documento: 540×300 com 72 Dpi. Pressione a tecla D para que as cores de primeiro e segundo plano fique preto e branco respectivamente. Em seguida com as teclas de atalho ALT+DEL para pintar de preto o background.
Pressione a tecla X para inverter a ordem das cores de primeiro e segundo plano para que fiquem branco e preto. Com a ferramenta Text escreva o texto como vemos abaixo.

Passo 2
Na versão original do Transformers as letras T e F têm um comprimento maior para baixo em relação ao resto do texto. Para isso precisamos rasterizar todo o texto, clique com o botão direito do mouse sobre a layer do texto e escolha > Rasterize type. Isto transforma a o texto em um padrão gráfico, no Corel Draw chamamos esta operação de converter em curvas.

Passo 3
Selecione a ferramenta Rectangular Marquee para criar uma seleção na parte inferior das letras T e F. Com a ferramenta Free Transform aumentar a seleção na parte inferior das letras.
(* Observação: Para obter letras exatamente do mesmo tamanho, coloquei uma linha guia abaixo o texto.)

Passo 4
Agora que as letras T e F estão estendidas, remova a linha guia no menu > View > Clear Guides.

Passo 5
Em seguida, vamos criar um efeito 3D, adicionando na layer do texto o estilo bevel and emboss, em seguida, duplicando esta layer repetidamente.
Primeiro, vamos adicionar uma layer de estilo. Configure o estilo como mostra a figura abaixo, e clique em OK para aplicar o estilo a layer.

Passo 6
Ao adicionar o estilo a bevel and emboss, criamos uma borda com sombreamento que será usado no próximo passo.

Passo 7
Para criar a ilusão de 3D no texto, a partir de agora você irá duplicar a layer do texto várias vezes, cada vez mudando o texto para cima e direita.
Para duplicar a layer selecionada basta pressionar CTRL+J ou a partir do menu principal Layer> Duplicate Layer. Isto irá criar uma nova layer acima da layer selecionada.
Para mover a layer, certifique-se de ter selecionado a ferramenta mover, em seguida, usando as setas do teclado pressione para cima e para direita até que não aparece a parte branca do texto para dar a impressão de profundidade. Repita até ter 5 layer para ficar igual a imagem abaixo.

Passo 8
Neste passo vamos mesclar as layers em uma única layer a partir da layer original até a quarta copia deixando assim a primeira layer que é a quinta copia fora desta seleção. Para isso selecione as layer com auxilio do shift, em seguida pressione CTRL+E para mesclar as layers selecionas.
Ficamos assim com duas layers, na primeira layer vamos limpar o estilo bevel and emboss, clicando com o botão direito sobre a layer escolha a opção Clear Layer Style. Modifique o nome das layer para “TRANSFORMADORES Top” e “TRANSFORMADORES 3D” como mostras a imagem abaixo.

Passo 9
Com a layer “TRANSFORMADORES Top ” selecionada, vamos adicionar uma série de 5 estilos que vão dar a esta layer um aspecto pedra envelhecida. Estou indo para cada categoria de estilo diferente, mas na seqüência, você precisa aplicar os estilos. Qualquer coisa fora do normal estará nas caixas amarelas.
Quando terminar clique em OK quando todos os estilos forem adicionados.





Passo 10
O seu documento deve se parecido com a imagem abaixo.

Passo 11
Para melhorar a layer “TRANSFORMADORES 3D” e que ela possa contextualizar com o efeito aplicado, vamos aplicar Levels (níveis) para que as bordas 3D não tenham mais essa aparência sem graça. Pressione as teclas CTRL+L para abrir a janela de diálogo Levels e configure como mostra a imagem abaixo.

Passo 12
Para a imagem final, eu apenas acrescentei uma reflexão na layer 3D, duplicando as duas layers e mesclado-as, espelhando na vertical, alterando a opacidade para da layer para 30% e, em seguida, adicionando uma Mask Layer (máscara de camada) aplicando um preenchimento gradiente de branco para preto na máscara.

Para finalizar deixo aqui o link para fazer o download do aqruivo PSD.
É isso!
Tweet This Post
Delicious This Post
Digg This Post
Reddit This Post
Stumble This Post



Olá pessoal, já algum tempo que estou ouvindo burburinhos sobre o HTML 5 e nada de concreto tinha chegado a mim. Na revista 













