LOGIN:

iMasters | Por uma internet mais criativa e dinâmica

Feeds

Quarta-feira, 23/02/2005 - 12:16 - Por Wesley Martins da Silva
Seções relacionadas:

Aço escovado com Displacement Map

Fala galera! Este é meu primeiro artigo no iMasters e espero que seja o primeiro de muitos Durante o decorrer destes artigos, abordaremos as diferentes áreas em que  o Adobe Photoshop está presente; tanto para efeitos voltados à Web, tratamento de imagens destinados à impressão em bureau, os mais variados efeitos para textos, composição de texturas, dentre outros. Estejam à vontade para sugerir temas para os próximos artigos!

Para iniciar, iremos desenvolver um efeito metálico em textos. Então você pensa: "mais um efeito cromado... como milhões que existem por aí". Não é bem assim. Este efeito na verdade é um efeito que simula uma palavra feita de aço "escovado" (aquele cuja superfície é marcada por diversas ranhuras).

O mais interessante neste efeito é a utilização do filtro Displacement Map, um poderoso filtro que poucas pessoas conhecem. Ok, mas agora chega de conversa e vamos trabalhar.

01º Passo: Crie um novo documento, com as dimensões que preferir (em meu caso 800x600), cores RGB e fundo branco.

02º Passo: Aperte D para deixar suas cores de primeiro plano e plano de fundo preto e brancas, respectivamente. Em seguida, tecle T para selecionar a ferramenta Texto, e digite seu texto. Neste caso, utilizei a fonte Times New Roman PS, com tamanho 170px. Note que a cor, apesar de ser preta, poderia ser qualquer outra, uma vez que ela não será visível quando o metal estiver terminado.

03º Passo: Vamos adicionar os efeitos iniciais ao texto. Para isso, clique no ícone e selecione Drop Shadow (Sombra projetada). Utilize as configurações a seguir:

04º Passo: Selecione agora o ítem Bevel and Emboss (Chanfro e entalhe) e coloque as seguintes configurações:

A esta altura, o seu texto deverá estar desta forma:

05º Passo: Agora iremos desenvolver a textura de metal que recobrirá o texto. Para isso, crie uma nova camada clicando no ícone ou teclando Shift+Ctrl+N. Escolha como cor de primeiro plano a cor #595959, e para plano de fundo, a cor #CDCDCD.

06º Passo: Vá ao menu Filter > Render > Clouds (Filtros > Acabamento > Nuvens). Em seguida, aplique o filtro Ruído, indo ao menu Filter > Noise > Add Noise (Filtros > Ruído > Adicionar ruído). Utilize as configurações:

03º Passo: Vá ao menu Filter > Blur > Motion Blur (Filtros > Desfoque > Desfoque de movimento), e aplique as configurações seguintes:

08º Passo: Agora iremos criar os canais que servirão de base para nosso efeito de metal. Segure Ctrl e clique na camada do texto, para criar uma seleção. Vá para a paleta de canais e clique duas vezes no ícone .

Note que agora temos dois novos canais: Alpha 1 e Alpha 2. Clique no canal Alpha 1e tecle Ctrl+D, para eliminar a seleção. Vá ao menu Filter > Blur > Gaussian Blur (Filtros > Desfoque > Desfoque Gaussiano) e coloque o valor 3. Agora iremos criar o arquivo fonte que o filtro Displacement Map irá utilizar. Tecle Ctrl+A para selecionar toda a figura, em seguida Ctrl+C para copiar. Vá ao menu File > New (Arquivo > Novo), deixe as dimensões que o programa sugerir e tecle Ctrl+V para colar. Salve este novo arquivo com  o nome Map.psd. Feche este arquivo.

09º Passo: De volta ao arquivo original (com o texto), clique sobre o canal Alpha 2. Vá ao menu Filter > Blur > Gaussian blur (Filtros > Desfoque > Desfoque Gaussiano) e coloque o valor 4. Clique sobre o canal RGB (o primeiro da paleta de canais) e volte à paleta de camadas. Tenha certeza de que a camada com a textura de metal está ativa.

Vá ao menu Filter > Distort > Displace (Filtros > Distorção > Deslocar). Antes de prosseguir, irei explicar como funciona este filtro. O filtro Displacement Map, em palavras gerais, "desloca" uma textura tendo como base uma imagem monocromática, criando uma espécie de "molde" na textura, no formato da imagem utilizada como fonte. Após esta breve explicação, voltemos ao nosso filtro e aplique as seguintes configurações:

Quando você clicar em OK, o programa irá lhe pedir uma imagem fonte para aplicar o filtro. Lembra-se do arquivo Map.psd? Selecione-o. Sua imagem ficará como esta. Note que o "deslocamento" é feito de acordo os valores em  porcentagem que são inseridos. Quanto menor o valor, menor o deslocamento.

10º Passo: Agora vá ao menu Filter > Render > Lighting Effects (Filtros > Acabamento > Efeitos de iluminação) e coloque as seguintes especificações:

Seu texto ficará com esta aparência. Note que ele já começa a parecer como se fosse feito de metal, mas nosso efeito vai muito além disto.

11º Passo: Vamos aplicar uma cor refletida sobre a superfície de metal. Para isso, vá ao menu Image > Adjust > Variations (Imagem > Ajustar > Variações). Primeiro, arraste a pequena seta quase tudo para a esquerda, para definir o quanto a cor será alterada, conforme a imagem:

Em seguida, clique uma vez sobre o quadro Original, uma vez sobre o quadro More Blue (Mais Azul) e uma vez sobre o quadro More Cyan (Mais Ciano), e dê Ok. Agora vá ao menu Filter > Sharpen > Sharpen (Filtros > Arestas > Arestas nítidas) para ressaltar as ranhuras na superfície do metal.

12º Passo: Agora está a grande sacada: ainda na camada da textura, aperte Ctrl+G. Desta forma, o Photoshop irá mostrar a textura de metal somente sobre a área visível da camada de baixo, que no nosso caso, é a camada do texto. Apesar de já apresentar uma aparência relativamente convincente, ainda aplicaremos alguns detalhes que fazem a diferença no resultado final deste efeito. Sua imagem, a esta altura, deverá estar como a seguinte:

13º Passo: Nosso efeito está no fim. Para deixar o texto ainda mais metalizado, segure Ctrl e clique na camada do texto, para criar uma seleção. Em seguida, vá ao menu Select > Modify > Contract (Selecionar > Modificar > Contrair) e coloque o valor igual a 3. Agora tecle Alt+Ctrl+D para atenuar a seleção, e coloque o valor 2.

14º Passo: Nosso último passo. Com a seleção ativa, clique no ícone e selecione o ítem Curves (Curvas). Coloque os pontos conforme imagem a seguir:

E nosso efeito está pronto! Veja que o texto apresenta uma aparência bastante convincente de metal, efeito que só foi possível, dentre outros, com o filtro Displacement Map e a camada de ajuste Curvas. A imagem final:

Bom é isso pessoal, espero que tenham gostado deste primeiro artigo. Como disse no início do mesmo, qualquer dúvida, crítica ou sugestão será sempre bem-vinda.

Abraços e até a próxima!

Todos os artigos de Wesley Martins da Silva

24 comentários publicados

  • 1. Filtro Deslocar

    Quarta-feira, 23/02/2005, por Mauricio Dantas

    Olá pessoal, vale lembrar que em algumas versões do Photoshop, o filtro "Deslocar" também pode ser encontrado como "Combinar" (Filtros > Distorção > Combinar), ok?

    Abraços.
    Wesley.

    Responder comentário

  • 2. Excelente Tutorial!

    Quarta-feira, 23/02/2005, por Alexandre de Paula

    Parabéns Wesley, realmente um efeito que se destaca dentre outros de aço, o resultado ficou muito lindo, continue assim com esses tutoriais de qualidade.

    Responder comentário

  • 3. legal

    Quinta-feira, 24/02/2005, por Emerson Alves

    ficou bom kra hehe

    Responder comentário

  • 4. Valeu!!!

    Segunda-feira, 28/02/2005, por julio cesar ferreira da silva

    Wesley, sempre quis saber como fazer o efeito do aço escovado, lhe agradeço muito.

    Responder comentário

  • 5. Separar cores na imagem

    Segunda-feira, 28/02/2005, por Marcelo de Souza

    Parabéns pela atuação no iMasters. Seu 1º tutorial foi show. Gostaria de saber como posso separar (tirar) uma cor de uma imagem, ou seja, ela está CMYK e preciso que ela fique CMK e então aplicá-la em um layout de 3 cores, tem jeito ou vc manda pro bureau em 4 cores e avisa que só vai rodar 3? Tem jeito? Valeu. Vida longa pra vc no imasters. Marcelo, de Curitiba.

    Responder comentário

  • 6. Bom tut, mas ...

    Sábado, 05/03/2005, por Eduardo Justiniano

    Olha o tutorial é o máximo, mas na hora que eu vou aplicar o efeito de luz essa opção está desabilitada para min, como resolvo isso ??

    Responder comentário

  • 7. Excelente

    Segunda-feira, 14/03/2005, por Marcelo

    Não são todos os tutoriais que eu gosto na internet mas o seu está ótimo. Muito bem explicado, principalmente quando vc para para explicar como funciona determinado efeito e não somente sai mostrando como de faz e pronto.
    Espero que o nível dos tutoriais continue assim.
    Parabéns.

    Responder comentário

  • 8. Artigo Photoshop Aço Escovado

    Quarta-feira, 06/04/2005, por Vitor Ávila

    Seus artigos são realmente excelentes, parabéns pela dedicação e nivel de conhecimento.
    Abraços
    Sergio

    Responder comentário

  • 9. Função de Efeitos de Luz DESABILITADA...

    Domingo, 17/04/2005, por Fabiano Fernandes

    kra...teu tutorial está excelente, o ínico problema, eh que a função efeito de luz, qdo preciso usar, pra este tutorial, ela está desabilitada...ajude-me..por favor!!
    obrigado
    abraços!

    Responder comentário

  • 10. Passo 12 não funcionou

    Segunda-feira, 22/08/2005, por Leo

    Não consegui prosseguir após o 12° passo. a minha imagem não fica como a apresentada no tutorial. Por que?

    Responder comentário

  • 11. Artigo photoshop - Aço escovado

    Quarta-feira, 16/11/2005, por Ricardo

    Amigo....não consigo utilizar a ferramena Filter > Render > Clouds ..pois está inabilitada, o q eu faço ?

    grato,


    Ricardo

    Responder comentário

  • 12. help

    Segunda-feira, 12/12/2005, por Viviane

    Passo 12 não funciona. Cade vc amigo????

    Responder comentário

  • 13. 12º passo

    Sexta-feira, 31/03/2006, por Vitor

    Cara, cd vc??? ñ funciono o 12º passo... ajuda aew!!!

    Responder comentário

  • 14. Passo 12

    Quarta-feira, 24/05/2006, por Antônio Rafael Santos Prestes

    Para quem não está conseguindo executar o passo 12, ao invés de aperttar Ctrl G, aperte Alto Ctlr G, pra fazer um Clipping Mask (fica no menu layer)

    Responder comentário

  • 15. Ajuda

    Domingo, 18/06/2006, por Nélida Lúcia Rodrigues

    Gostei do tutural, porém quando estou na parte 10, está desabilitado o efeito de iluminação. O que devo fazer?

    Responder comentário

  • 16. Passo 12 - Ajuda

    Quarta-feira, 26/07/2006, por Josué Tiago Battoni

    Não consigo efetuar o passo 12 o que faço?

    Responder comentário

  • 17. como eu odeio o ps6

    Quinta-feira, 23/11/2006, por Emilio Cifoni

    Cara, achei animal seu tutorial, pena q no meu photoshop do escritorio nao da pra fazer... hahahah
    abç

    Responder comentário

  • 18. 8 passo

    Quinta-feira, 01/03/2007, por Ricardo Souzi Souzi

    cara sem duvida é o melhor efeito metal que ja vi, porem no oitavo passo quando eu vou para a paleta canais o icone que cria os alpha ta inabilitado,,,vê se pode me ajuda ai tô precisando muito desse efeito valeu abraços.

    Responder comentário

  • 19. efeito de iluminação

    Quinta-feira, 05/04/2007, por Mauricio De Vita Biondi

    Pessoal, para quem não está conseguindo colocar o efeito de iluminação:
    talvez o modo da imagem de alguma forma saiu da opção RGB, então va até o menu image => mode => RGB color;
    espero que tenha ajudado; abraços Maumau

    Responder comentário

  • 20. Excelente

    Sexta-feira, 08/06/2007, por Fabio Resende

    Smplesmente excelente

    Responder comentário

  • 21. Muito bom o tuto

    Domingo, 01/07/2007, por Glauco Ribeiro

    Além de agradecer ao Wesley
    gostaria de agradecer tbm ao nosso amigo Antônio Rafael Santos Prestes por ter dado uma ajudinha a muitos no 12º passo.

    Responder comentário

  • 22. Ajuda! passo 8

    Segunda-feira, 15/09/2008, por Jennifer Costa

    Olá, eu não consigo fazer o passo 8. Eu clico ctrl e seleciono a camada do texto mas quando vou no canais, fica como inabilitado a criação de um novo canal e ai não entra! Nao sei o que fazer! Me ajuda, obrigada, Beijos.

    Responder comentário

  • 23. Ajuda! passo 8

    Segunda-feira, 15/09/2008, por Jennifer Costa

    Olá, eu não consigo fazer o passo 8. Eu clico ctrl e seleciono a camada do texto mas quando vou no canais, fica como inabilitado a criação de um novo canal e ai não entra! Nao sei o que fazer! Me ajuda, obrigada, Beijos.

    Responder comentário

  • 24. !! PASSO 12 RESPOSTA !!

    Quarta-feira, 21/01/2009, por Cayo Quintanilha

    O passo 12 está incorreto.

    O certo é Ctrl + Alt + G.

    Valeu galera :D

    Responder comentário

Poste um comentário


Os textos publicados neste espaço são de responsabilidade única de seus autores (colunistas e leitores) e podem não expressar necessariamente a opinião do iMasters.

Sobre o autor

Wesley Martins da Silva trabalha com ferramentas gráficas e Web desde o ano 2000, atualmente é designer, focado em web, da agência de publicidade Trio Comunicação e já coordenou alguns sites relacionados à web.


Indique para um amigo

captcha

TI SHOP Produtos iMasters

  • Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
  • Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
  • DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
  • DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!

2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.