iMasters | Por uma internet mais criativa e dinâmica

Terça-feira, 25/05/2004 - 01:59 - Por Fabio Lody
Seções relacionadas:

• Photoshop

• Imprimir
• Indicar
• Digg it
• Del.icio.us
• Twitter
• 19 comentários

Meus grandes amigos! Como vão? Hoje veremos uma matéria sobre um efeito muito usado em sites por aí, em topos, menus e outras áreas, dando a impressão de reflexo. Aqui veremos a criação desde o primeiro passo. Desde a criação de uma elipse perfeita, inclusive usando a grade do Photoshop para nos auxiliar, fazendo assim um trabalho bem mais profissional.

Criando uma bola de vidro

Descrição: Explicação sobre como criar uma bola de vidro no Photoshop
Software ultilizado: Photoshop 7.0 em Inglês (Funciona em qualquer versão)
Grau de Dificuldade: 7,0
Ao som de: Charlie Brown Jr - Já Era

1º Passo: Crie um arquivo de 300x300 pixels com o fundo branco, 72 DPIs e em RGB.

2º Passo: Pressione "D" para suas cores voltarem às cores padrões do Photoshop. Agora clique sobre o quadro de cor Principal (Foreground).

3º Passo: No momento da tela de "Color Piker" (Seletor de cores), altere os valores exadecimais de cor para #0F2E5C.

4º passo: Agora escolha a ferramenta "Rectangle Tool".

E alterne para "Elipse Tool". Agora iremos fazer um circulo perfeito.

5º Passo: Agora pressione "CTRL" + "R" para podermos usar as linhas guia e termos noção exata do tamanho de cada guia e eixo. Pressione CTRL + " . Hablitando assim as "grades" .

6º Passo: Em seguida clique e arraste (segurando "SHIFT") para construir sua elipse, exatamente na coordenada 2.2 . (Lembrando que, caso faça sem a ajuda do "shift", a construção do eixo com o mesmo espaço se torna um pouco mais dificil).

7º Passo: Agora que já construimos nossa elipse, não precisamos mais da grade. Então novamente pressionaremos CTRL + ".

8º Passo: Na paleta de camadas, clique com o botão direito sobre a camada que possui o Shape (forma) que usamos e escolha a opção "Rasterize Layer" (Rasterizar a camada)

9º Passo: Como já temos nossa elipse, vamos contruir seu reflexo. Duplique sua camada clicando com o botão direito na paleta de camadas eescolhendo a opção Duplicate Layer (Duplicar Camada). Pressione "CTRL + U" para acessarmos a tela de "Hue/Saturation" e coloque os seguintes valores:

0
0
+100
V para colorize

10º Passo: Pressione "CTRL+T" e diminua seu tamanho, deixando um pouco menos do tamanho da elipse base como na imagem abaixo:

11º Passo: Vamos na barra de Opção item: Layer (camada) > Add Layer Mask (adicionar mascara) > Reveal all (Revelar todas). Assim adicionaremos uma máscara na nossa segunda camada de elipse.

12º Passo: Clique na posição indicada para definirmos o espaço ultilizado na máscara. (De cima para baixo).

13º Passo: Agora clique na paleta da elipse branca indicada com o quadro verde (tome cuidado para não clicar na máscara que alterará o efeito final).

Sua imagem deverá ficar assim:

14º Passo: Agora vá em Filter (Filtro) > Blur (Desfoque) > Gaussian Blur (Desfoque Gaussiano) e coloque : 9,9

15º Passo: De um CTRL + Clique sobre a camada base (SHAPE 1). Note que a seleção vai para a camada da forma de baixo. Agora repita o passo anterior.

16º Passo: Altere sua opacidade para 45%

Sua imagem deverá ficar assim:

17º Passo: Adicione uma nova camada e clique sobre a ferramenta Pincel (Brush Tool) e altere sua ponta para "Airbrush Soft Round 45" (Círculo Suave 45 pixels) com a cor branco. Faça um ponto como na imagem a seguir:

18º Passo: Agora de um "CTRL + clique" novamente sobre a camada "Shape 1". Vá em: Filter (filtro) > Blur (Desfoque) > Gaussian Blur (Desfoque Gaussiano) e coloque : 14,7

19º Passo: Nesse momento, usando a ferramenta "Elipse Tool", seguindo o mesmo conceito do 4º Passo, faça uma forma como na imagem abaixo (lembrando que a posição é um fator importantíssimo. (Não esqueça de, ao final, rasterizar sua elipse branca).

20º Passo: Repita o 11º Passo para adicionarmos uma máscara ao nosso último reflexo.

21º Passo: Agora altere as propriedades do nosso degradé na barra de opções como na figura abaixo. Em seguinda repita o passo 12 até atingir um reflexo satisfatório.

Seu efeito final:

Aqui com algumas alterações minhas...

Ufa! espero que tenham gostado de nossa aula. Um grande abraço, fiquem com Deus e boa semana a todos!

Todos os artigos de Fabio Lody

18/05/2009 - Como manipular gelo no Photoshop 16/07/2008 - Manipulando o fogo com o Photoshop 06/06/2008 - Desenhando um iPhone pelo Photoshop CS3 - Conclusão 20/03/2008 - Desenhando um iPhone pelo Photoshop CS3 - Parte 02 28/01/2008 - Desenhando um iPhone pelo Photoshop CS3 - Parte 01 27/11/2007 - Illustrator + Photoshop CS3 13/09/2007 - Atualização - Truques para Tratamento de Imagens 12/09/2007 - Atualização: Truques para tratamento de imagens 02/07/2007 - Monitores LCD, configurações e impressão 03/04/2007 - Trabalhando com Actions 19/01/2007 - Workspace e Smart Objects 06/12/2006 - Novas técnicas para pincéis e Layer Comps 16/10/2006 - Conhecendo a Color Swatches 18/08/2006 - Manipulação e tratamento de foto profissional 24/07/2006 - Explorando o Adobe Bridge 14/06/2006 - Bandeira Brasileira 23/05/2006 - Lunatic Art 26/04/2006 - Quebra cabeça 28/03/2006 - Jumping Out 15/03/2006 - Tornando as pessoas invisíveis 22/02/2006 - Box 3D 24/01/2006 - Efeito CD-ROM 09/01/2006 - Reflexo 20/12/2005 - Feliz Natal! 08/12/2005 - Post it 21/11/2005 - Bordas arredondadas 03/11/2005 - Scripts para Photoshop 06/10/2005 - Dicas e dúvidas 22/09/2005 - Jogando água no Photoshop 06/09/2005 - Criando estilos - Parte 02 01/08/2005 - Back Fire 04/07/2005 - Dicas para criação web no Photoshop 15/06/2005 - Web no Photoshop - Parte Final 31/05/2005 - Web no Photoshop - Parte 03 (Com Galeria) 18/05/2005 - Web no Photoshop - Parte 02 05/05/2005 - Web no Photoshop - Parte 01 18/04/2005 - Arte abstrata - Parte 03 30/03/2005 - Criando Luz Neon - II 14/03/2005 - Criando Luz Neon 02/03/2005 - Criando Estilos 18/02/2005 - Criando shapes 04/02/2005 - Olhos vermelhos e galeria de imagens 27/01/2005 - Abstract Art - Parte 02 26/01/2005 - Texto Grunge - Atualização 14/01/2005 - Abstract Art - Parte 01 06/01/2005 - Entrando no mundo Hitech 22/12/2004 - Enfeite de natal 10/12/2004 - Trabalhando com Fotos 30/11/2004 - Buraco negro 19/11/2004 - Galeria de imagens 10/11/2004 - Cabelos rebeldes - Parte 02 27/10/2004 - Trabalhando com garrafas no Illustrator 26/10/2004 - Papel envelhecido 15/10/2004 - Fundo abstrato - Parte 02 08/10/2004 - Fundo abstrato 30/09/2004 - Half Tone em Texto 23/09/2004 - Efeito Gel 15/09/2004 - Texto Grunge 10/09/2004 - Preparando o Photoshop para web - Final 03/09/2004 - Preparando o Photoshop para web - Parte 03 27/08/2004 - Preparando o Photoshop para web - Parte 02 19/08/2004 - Preparando o Photoshop para web 13/08/2004 - Os blends do Photoshop 04/08/2004 - Gotas em lata de refrigerante 29/07/2004 - Banners - Adobe ImageReady 21/07/2004 - Banners - Parte 02 13/07/2004 - Banners 07/07/2004 - Pixel Art 3D - Atualização 01/07/2004 - Integração e movimentos com o Image Ready - Atualização 28/06/2004 - Efeitos de luz 18/06/2004 - Cabelos rebeldes 08/06/2004 - Especial - Dia dos Namorados 25/05/2004 - Criando uma bola de vidro e trabalhando com relfexo 11/05/2004 - Trabalhando com pedras 27/04/2004 - Trabalhando com madeira 13/04/2004 - Preparando o Photoshop para impressão 29/03/2004 - Integração e movimentos com o Image Ready 15/03/2004 - Perfis de monitores ICC 01/03/2004 - Tratamento de Fotos 16/02/2004 - Máscaras e canais 03/02/2004 - Criando Curvas 22/01/2004 - Pixel Art 3D 12/01/2004 - Pixel Art 31/12/2003 - Congele sua vida 12/12/2003 - Brincando com fogo 04/12/2003 - Adobe Creative Suite: o novo Photoshop CS 25/11/2003 - Recuperando Ferramenta Pincel (Healing Brush Tool) 13/11/2003 - Colorização de Fotos 31/10/2003 - Efeito metálico 21/10/2003 - Efeito Fundo Abstrato 07/10/2003 - Carimbo ou Processamento em Lote 17/09/2003 - Scan Line (Efeito TV) 02/09/2003 - Pen Tool 22/08/2003 - Pincel Brush - Parte 02 04/08/2003 - Pincel Brush 16/07/2003 - Efeitos de fundo 30/06/2003 - Efeitos para banners 17/06/2003 - Efeito máscara (Fade IN) 10/06/2003 - Rádio - 3º Parte 27/05/2003 - Splash Texture 13/05/2003 - Efeito Matrix 05/05/2003 - Textura Aço 25/04/2003 - Texturas 14/04/2003 - Blue Steel 07/04/2003 - Alien Style 29/03/2003 - Textos cromados 14/03/2003 - Botões de plástico ou gel 11/03/2003 - Agora usando a ferramenta Liquify 28/02/2003 - Fatiamento de Imagens 20/02/2003 - Teclas de atalho do Photoshop 06/02/2003 - Efeitos de texto 20/01/2003 - Rádio - 2ª parte 08/01/2003 - Rádio 18/12/2002 - Efeito de luzes

19 comentários publicados

• 1. COMO se faz.

  Terça-feira, 25/05/2004, por Murilo Araujo Gomes
  

  Olá, eu gostaria de saber como você fez este fundo da imagem final (este verde).
  
  Desde Já Grato.

  Responder comentário

• 2. Travei

  Quinta-feira, 27/05/2004, por alex
  

  nao consigo fazer o passo 12....com qual ferramenta eu tenho que fazer isso??

  Responder comentário

• 3. Re: Travei

  Sábado, 29/05/2004, por Aires Zingano
  

  amigo, esse passo eh feito com a ferramenta Gradiente... fiz dessa maneira e obtive o resultado esperado, pois naum eh citado no passo 12...

  Responder comentário

• 4.

  Domingo, 30/05/2004, por Maikel
  

  Olá! Sou inciante no photoshop, e a cada dia me interesso mais pelo programa graças a você! As materias e os efeitos ensinados são maravilhosos! Mas a minha dúvida é a seguinte ... poderia por exemplo melhorar a qualidade de uma foto? Algumas fotos (principalmente de webcam) ficam meio embassadas.. teria como ajeitar isso?

  Responder comentário

• 5. Letra em JAPONES

  Domingo, 30/05/2004, por Andrezza
  

  Opaaa fabiooo venho sempre vendo ke vc utiliza se mto dessa letra em japones eu gostaria de saber onde adquiri la para mim poder usar em meus trabalhos...
  valeu

  Responder comentário

• 6. Aumentando fotos

  Segunda-feira, 31/05/2004, por Mauricio Reckziegel
  

  Como faço pra aumentar uma foto e não perder a resolução dela????

  Responder comentário

• 7. Ferramenta Gradiente

  Sexta-feira, 04/06/2004, por Fabrissio T SIlva
  

  Fábio a dica é show, mas só pra ajudar a galera, no 12º passo temos devemos selecionar a ferramenta degradê / degradê radial.

  Responder comentário

• 8. Dicas

  Segunda-feira, 07/06/2004, por Fabio Varanda Carneiro
  

  Olá Fábio, admiro muito o seu trabalho, gostaria que você nos dasse algumas dicas de como fazer para selecionar cabelos de uma pessoa na foto, já que isso é uma tarefa muito difícil.... desde já agradeço a atenção...

  Responder comentário

• 9. Amigos!

  Terça-feira, 08/06/2004, por Maurício J. Fávaro
  

  Ola meus amigos como vao?
  Bom eu peço a todos q direcionem suas duvidas para meu email por favor. Bom, Luiz gostei da sua sugestao e alias muitos leitores me pedem isso...vou providenciar para proxima semana abraço meus amigos!

  Responder comentário

• 10. Transformar Foto em Desenho

  Sexta-feira, 30/07/2004, por Claudia
  

  Parabéns Fábio, pela extraordinaria capacidade profissional em ajudar a galera com os macetes de FANTASTICO PROGRAMA PHOTOSHOP e Força para continuarmos...
  a construir todos os seus objetivos profissionais!!!
  Tambem gostaria de saber se vc pode mostar uma montagem legal para foto de casamento.
  desde ja fico grato
  sucesso a vc
  

  Responder comentário

• 11. que coisa linda!

  Sábado, 28/08/2004, por Crab
  

  estou começando a usar o photoshop e voce está me ajudando demais com essas dicas...
  agradeço!

  Responder comentário

• 12. Valeu mesmo!

  Quarta-feira, 22/09/2004, por Andre Matos
  

  Olá Fábio, quero te parabenizar pelo trabalho q tem feito, creio q ajudou muita gente, inclusive a mim, como instrutor de Photo Shop, tenho utilizado muitos os seus tutoriais, velu um abraço!

  Responder comentário

• 13. sobre o brilho

  Segunda-feira, 11/10/2004, por Felipe Matos
  

  ate q. consegui bom mais ou menos mais o brilho no final nossa nw consgui...vc poderia encinal a fazer este brilho legal q. ficou no final.

  Responder comentário

• 14. Parabéns ao imasters

  Domingo, 14/08/2005, por Ilamar de Oliveira
  

  parabéns pelo site, ele é bom pra caramba, ta me ajudando muito com o photoshop, fireworks, e outros continua assim que você vão longe
  VALEW!!!!!!!!!!!!!

  Responder comentário

• 15. valeu!!!

  Quinta-feira, 15/12/2005, por Willians Z. Ferreira
  

  Olá Fábio, conheci hoje seu site, parabéns!!! como eu faço para colocar uma imagem (foto) dentro dessa bola de vidro?
  
  abç
  Willians

  Responder comentário

• 16. último reflexo

  Quinta-feira, 12/01/2006, por Emerson Machado
  

  Olá Fábio, não consigo fazer o último reflexo como o teu... meu gradient não fica escuro o suficiete na base do circulo para que se confunda com o outro reflexo. Se puderes me ajudar agradeço! valeu, Diego.

  Responder comentário

• 17. Efeito bolha

  Sábado, 11/03/2006, por Denise Diniz
  

  Oi Lody. Bom demais ler seus tutos. Há algum tempo os leio e como tenho paixão por design e por photoshop especificamente, já me arrisquei criando alguns tutos também. Estou precisando de um tuto pra criar bolhas com efeito de luzes. Você poderia me dar uma força. Abração pra ti. Denise-BH

  Responder comentário

• 18. ótimo trabalho

  Domingo, 19/03/2006, por claudio pietro
  

  olá fábio, tudo bem? olha eu encontrie esse site por acaso e nao posso deixar de elogiar, pois eu odiava o photoshop e agora eu adoro mexer com esse programa.
  fiz várias aulas e deram certas e com final satisfatório demais...
  fábio gostaria de saber como passo a imagem do photoshop para o draw sem que ele perca seus efeitos e estilos?

  Responder comentário

• 19. Dúvida

  Quarta-feira, 01/10/2008, por Marco Ignácio
  

  Caros,
  No 12º passo, só o que eu consigo fazer é arrastar a
  2ª elipse, não consigo clicar em uma posição para definir
  o espaço da máscara.
  Aguardo ajuda.
  

  Responder comentário

Poste um comentário

(clique se não for cadastrado)

Login: Senha: Titulo: digite aqui seu comentário Site/blog: Enviar Receber notificação de novos comentários

Sobre o autor

Fabio Lody é um dos colunistas mais lidos do Brasil. Desenvolveu trabalhos para a Johnson&Johnson, Chevrolet, Kawasaki Motors, grupo SBT, Ethos, HopiHari entre outros pela Tribal Interativa. Foi instrutor da WOC (Centro de Treinamento Adobe) e já trabalhou nas áreas de produção de vários webstudios. Escreve para duas revistas de circulação nacional além de desenvolver layouts de cartões para uma empresa do japão. Foi aluno de Alexandre Wollner e há 9 anos trabalha como Designer Gráfico. Blog: (http://www.fabiolody.com.br).

Indique para um amigo

Escreva aqui sua mensagem! ok

Tags relacionadas

android brasil seguranca internet linux youtube crescimento twitter php yahoo google web windows microsoft lançamento tecnologia 3g mobile iphone mercado firefox criação ti celular apple desenvolvimento

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!