topo
topo
topo
Quinta, 14 de Dezembro de 2017.
portaldigidesign
menu principal
No Site Na Web
slogan
 
:: Home
:: Fórum
:: Newsletter
:: Na Mídia
:: Recomende-nos
:: Nossos banners
:: Rss Feeds
:: Contato
 
menu design
:: Flash
:: Dreamweaver
:: Fireworks
:: Swishmax
:: Photoshop
:: Corel Draw
:: Ícones
:: Tabela de cores
:: Layouts prontos
 
menu programação
 
:: PHP
:: Asp/.Net
:: Javascript
:: CGI
:: Cold Fusion
 
menu serviços
 
:: Geradores online
:: Indique o site
:: Usuários online
:: Contador
 
menu sites destaque
 
:: Indique seu site
:: Sites destaque
 
menu artigos
 
:: Web Marketing
:: Web acessibilidade
 
 
 

· Artigos » Fireworks

 

Efeito Glass Text  English Version

Por: Ivan W. Primo
Publicado em: 11.11.2005
Visualizações: 41743


rec6 Linkto delicious google yahoo live Twiter

Efeito Texto Vidro

Hoje vamos aprender a criar um efeito de vidro em um texto. É um pouco complexo mas o efeito final compensa. Então vamos nessa!

Inicie um novo documento de 300 x 200px, com fundo branco e digite a palavra "Design" com letras maiúsculas, cor #CC3300, fonte Arial Black.

imagem 1"

Copie e cole uma vez este texto no palco. Arraste a cópia para cima e o original um pouco para baixo, para separá-los porque vamos trabalhar separadamente em cada um deles.

imagem 2"

Selecione o texto de cima e clique na paleta de cores, no botão "Fill Options".

paleta"

Mude a configuração de cor para "Gradient" e "Linear". Clique no botão "Edit" e mantenha o tom de vermelho em uma extremidade e na outra coloque branco #FFFFFF.

preenchimento"

Depois ajuste o preenchimento gradiente na posição horizontal assim:

gradiente"

Com este texto superior selecionado, pressione "Ctrl+Shift+P" ou menu "Text > Convert to Paths".

Depois clique sobre a "Pen Tool".

pen tool"

Agora vem a parte mais difícil na minha opinião, pois vai depender da habilidade com o mouse. Usando a "Pen Tool", desenhe um shape com ondas na aresta superior que cubra um pouco mais da metade inferior do texto de cima. Preencha-o com a cor #999999. Tente fazer mais ou menos assim:

imagem 7"

Clique sobre a ferramenta "Sub Selection Tool" ou pressione A no teclado :

subselection"

E, com "Shift" pressionado, clique sobre cada uma das letras da palavra Design e também sobre o shape que você acabou de desenhar para selecioná-los:

selecionados"

Agora vá ao menu "Modify > Combine Paths > Punch" para cortar o texto com o shape. Depois, clique sobre a seta preta "Pointer Toll" ou pressione V no teclado, e posicione o texto recortado sobre o outro texto de baixo, de modo que as letras recortadas se ajustem perfeitamente sobre o texto. Se preferir você pode mudar o zoom para 200% para melhor ajustar a posição do recorte sobre o texto. Em seguida, mude a opacidade do recorte, no Inspetor de Propriedades para 70%:

posicionando"

Agora selecione o texto de baixo, clique sobre a paleta no inspetor de propriedades, e clique sobre "Fill Options". Mude a configuração de cores para "Gradient" e "Linear" e coloque um vermelho mais claro #FF6600 em uma das extremidades, mantendo a mesma cor original na outra.

cores"

Aplique um zoom de 400% e mude o ajuste do gradiente como na imagem:

gradiente"

Opa! Estamos quase lá!! Vá ao Inspetor de Propriedades e clique no sinal "+" em "Effects". No menu, escolha "Shaddow and Glow" e clique em "Inner Shaddow". Deixe as configurações assim: Distance 2, Opacity 100%, Softness 4, Angle 90, Cor #990000. Observe:

inner shaddow"

Clique novamente no sinal "+" e agora vá até "Shaddow and Glow > Drop Shaddow" e coloque as seguintes configurações: Distance 2, Opacity 100%, Softness 4, Angle 315, Cor #CC0000. Veja:

ajuste"

Se você entendeu certinho e segui os passou corretamente o resultado final do seu texto estará aproximadamente como este:

ajuste 2"

Legalzim né?! Varie as cores e estilos de fontes a seu gosto. Dê preferência a fontes largas. Para baixar o PNG do tutorial clique aqui...

Até a próxima! Dúvidas consulte nosso fórum.

Ivan W. Primo
webmaster@portaldigidesign.com.br
MSN e Google Talk: iwprimo@gmail.com



Versão para impressão  Twitter



 

  Comentários:

· Enderson  Postado em: 27.10.2006
Muito bacana esse tutorial, me ajudou bastante no que eu queria fazer. vlw

Nome: Digite seu nome.Digite seu nome.
Email: Campo Obrigatório. Formato Inválido.
Comentário:   Campo Obrigatório.Digite ao menos 8 caracteres.Até 100 caracteres.
   

   rss

 
hospedagem Host Brasil
Dreamweaver
Fireworks
Flash
SwishMax
Corel Draw
Photoshop
Photoshop
PHP
Asp/.Net
Web Marketing
publicidade
   

 

rodape rss Siga-me no Twitter