[BL]Computadores, Photoshop, Adobe, Softwares, Hardwares, MacBook, Apple, OSX[/BL]

Quando comecei as modificações no novo layout, eu tentei buscar tutoriais de como fazer logos baseados na Web 2.0. Não digo que não encontrei, mas acabei usando mais as dicas de como se faz user bars do que os logos, então, vai esse tutorial totalmente descompromissado. Don’t sue me! Sou apenas um n00b que fuça no Photoshop e Google is my friend.

Antes algumas informações técnicas: neste tutorial foi feito com o Photoshop CS2, creio que deva funcionar com quase todas as versões. Boa parte das fontes que eu tenho são desse site, e a base de cores eu usei essa paleta.

1° Passo
Abrir um novo documento File > New, coloque as especificações que você desejar, no exemplo: 500×250.

Escolha o texto que deseja transformar num logo do tipo web 2.0, além de um fonte. Caso tenha alguma dúvida de que tipo de fonte usar, recomendo esse link. No exemplo, vou usar: lekrapo com a fonte RiotSquad.

Para fazer o efeito de Stroke, selecione a camada (layer) do texto e clique em Add layer style > Stroke.., é o ícone com um “f” estilizado, como na figura.

Irá abrir um caixa de diálogo para que você modifique as propriedades do estilo como: cor, tamanho, opacidade e afins. Neste caso, pode ser mudado o tamanho (primeira seta) e a cor (segunda seta).

2° passo
Para dar o efeito de reflexo, é “muito simples”. Faça uma cópia da camada com o texto, a maneira mais rápida para isso é clicar (mantendo a clicada) e arrastar a camada para o ícone de nova camada.

Conforme dica do Jimbo, tem como usar a Máscara diretamente na Camada com o texto! Na camada duplicada, é preciso deixa-lá de ponta de cabeça para isso: Edit > Transform > Flip Vertical.

Temos que acessar o Blending Mode da camada duplicada. Clique no “f” estilizado para aparecer o menu pop-up.

Irá abrir uma caixa de diálogo, nela temos que marcar a opção Layer mask hides effects

Feito tudo isso, vamos fazer o reflexo. Precisamos criar uma Máscara para a camada, pode ser feito: Layer > Layer Mask > Reveal All, ou simplesmente clique no ícone referente a máscara.

Selecione o retângulo que se refere a Máscara, clicando sobre ele (figura). Alguns lugares dizem para fazer o preenchimento de gradiente de baixo para cima, mas eu prefiro fazer de outra forma, e será está que irei explicar.

Ainda com a Máscara sendo a camada de trabalho, faça Ctrl+A para selecionar a área toda, depois Delete e para deselecionar Ctrl+D, o resultado será esse:

Percebe que agora a Máscara ficou preta, e o texto de ponta cabeça sumiu, certo? Fique atento para que na barra de Ferramentas (Tools), aquela que fica do lado esquerdo normalmente com todas as ferramentas (!), na parte que mostra as cores, esteja conforme a figura.

Vá na ferramenta de preenchimento e escolha Gradient Paint, ou aperte G no teclado. Logo, na barra superior as propriedades da ferramente devem estar conforme indicado.

Agora é simples, clique e arraste do topo até a base do texto, variando a distância aumenta ou diminui o “fade” do gradiente.

3° Passo
Agora o toque final para dar a percepção de “3D” (eu creio que seja isso, pelo menos para mim é isso que me passa).

Crie uma nova camada, e que ela fique acima da camada do texto. Vamos usar a ferramenta Elliptical Marquee Tool.

Faça uma elipse com que pegue algumas partes do texto, ou então, caso queira faça algum tipo dele seleção diferente. Feito isso, vá em Edit > Fill , tendo como cor de preenchimento branco, e dê OK. O resultado é:

A última parte é modificar a Opacidade desse branco todo, isso varia de pessoa para pessoa e de trabalho para trabalho, eu deixei em 50%. E recomendo que se use fundo branco por causa desse efeito, caso use outra cor, ele ficará amostra.

Para que possa usar outras cores de fundo, é possível fazer uma variação desse efeito, que ao invés de fazer uma elipse randômica, a seleção feita é no próprio texto.

Iremos trabalhar com uma camada nova do mesmo jeito, faça a seleção do texto com Ctrl pressionado clique sobre o “retângulo com T” (thumbnail) da camada do texto. Preste atenção que o cursor muda de imagem, isso indica que está certo

O esperado é:

Em seguida, vamo usar a ferramenta Elliptical Marquee Tool.

Entretanto, dessa vez é preciso modificar a propriedade da mesma. Na barra superior optamos pela Intersection with Selection que fará com que só fique selecionado a parte em que a elipse cobrir o texto selecionado.

Logo, tem que ficar assim:

E para que o contorno (Stroke) também receba o efeito, Selection > Modify > Expand. O tamanho da expansão deve ser o mesmo que você fez o contorno. No exemplo, usei 3px, e funcionou bem.

O restante é a mesma coisa. Vá em Edit > Fill , tendo como cor de preenchimento branco, e dê OK (esquecer que tudo isso é na nova camada que se coloca o Fill e não na camada do texto), e modificar a Opacidade. Pode ser necessário algum tipo de retoque, caso a seleção não cubra a área toda.

Final
O resultado final:

E a variação:

Referências e para saber mais
• FontShop
• 13dots
• YAY for Yay Hooray!
• Flickr tag yay2dot0logoparody
• Photoshop Lab: Parte 1 e Parte 2
• Wikipedia: Web 2.0
• Dafont.com
• Miles’ Blog: Web 2.0 Secret Weapon
• Webdesign form Scratch

p.s.: não, o tutorial não foi feito num Mac, não. É o WinXp mesmo.
p.s. 1: todas as imagens são de minha autoria, e eu sei quando existe hotlinking. (All those images are mine. And I know when you hotlinking it, so.. don’t try! =D )
p.s. 2: alguma dúvida, não entendeu alguma coisa? Deixe um comentário com e-mail de verdade para que eu possa entrar em contato, certo?
p.s. 3: tutorial sobre a licença do Creative Commons. Share! Compartilhe!

[BL]Computadores, Photoshop, Adobe, Softwares, Hardwares, MacBook, Apple, OSX[/BL]