Webly: Efeito Vidro/reflexo - Webly

Ir para

IMPORTANTE: Todos os tutoriais postados neste fórum irão automaticamente para o portal Webly. Contribua você também e faça parte da equipe de colaboradores que fazem a evolução da web. Obrigado.
Página 1 de 1

Efeito Vidro/reflexo Tutorial simples Avaliar tópico: -----

#1 Membro offline   Micox Ícone

  • Comunidade de desenvolvedores
  • Ícone
  • Grupo: Administradores
  • Posts: 5511
  • Cadastrado: 03-julho 06
  • Localização:Goiânia-GO
  • Interesses:Webly e elmicox.blogspot.com

Postou 06 setembro 2006 - 11:20

Olá. Postarei aqui uma forma simples de fazer um efeito que não sei o nome oficial.
Alguns chamam de efeito vidro. Outros de efeito reflexo.
Vou chamar de efeito vidro/reflexo, hehe ;)

É bem fácil de fazer. Se alguém souber fazer de outra forma mais fácil ainda, esteja à vontade para contribuir e postar, afinal não sou especialista em Fireworks e artes gráficas.

Feito em: Macromedia Fireworks MX - português.

1) Escolha sua imagem
Imagem (é nóis!!)

2) Vá em efeitos e adicione o "Brilho interno" na cor preta pra imagem (configure as características do efeito de acordo com o que achar melhor.
Imagem



3) Faça um retângulo arredondado (a ferramenta "retângulo arredondado" está junto com a "retângulo"). Dê a ele preenchimento linear.
O preenchimento linear será de branco (com opacidade de 85%) até branco novamente (só que agora com opacidade de 20%) - os valores das opacidades podem variar conforme seu gosto.
Imagem


Pronto. Agora voce pode melhorar (ou piorar) alterando algumas configurações como o ângulo do efeito linear, os valores da opacidade, etc.

Pode melhorar, adicionando também um reflexo no chão:

4) Duplique a imagem e inverta ela
Imagem

5) Crie um retângulo sobre a imagem duplicada e dê a ela preenchimento linear branco (opacidade 80%) até branco (opacidade 0%).
Imagem

6) Altere a angulação do preenchimento linear e pronto!!
Imagem

Finalizado. Se tiverem alguma sugestão ou melhoria, postem aí.
:joia:
valeus.net/mwords - Links automáticos p/ o MercadoLivre em seu texto

Ajude, responda: mesmo que não saiba exatamente a resposta, seu pitaco pode dar uma luz no problema do outro.
Não respondo dúvidas por MP / Email / MSN e afins. O fórum está aqui pra isto.

elmicox.blogspot.com
0

#2 Membro offline   Fern.anda Ícone

  • Grupo: Banidos
  • Posts: 357
  • Cadastrado: 04-julho 06

Postou 06 setembro 2006 - 11:28

Muito bom Micox!
Simples e claro...
Parabéns... :joia:
0

#3 Membro offline   marcinha Ícone

  • It's evolution, baby!
  • Ícone
  • Grupo: Administradores
  • Posts: 1397
  • Cadastrado: 13-julho 06
  • Sexo:Male
  • Localização:Brasília
  • Interesses:iEvoluir ;)

Postou 06 setembro 2006 - 12:13

Ótimo!! :clap:
Nada a acrescentar!
Webly, onde a internet é + humana.
Tá esperando o que pra se cadastrar e participar? =]


www.nerdsinlove.com.br
0

#4 Membro offline   Development Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 76
  • Cadastrado: 10-agosto 06

Postou 06 setembro 2006 - 12:20

Legal, ta bem simples de fazer e com um efeito ótimo
0

#5 Membro offline   Jose_2006 Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 148
  • Cadastrado: 06-setembro 06

Postou 08 setembro 2006 - 10:45

Oi,

Como eu faço isso usando o Fireworks em inglês?
Não há ação sem reação
0

#6 Membro offline   Micox Ícone

  • Comunidade de desenvolvedores
  • Ícone
  • Grupo: Administradores
  • Posts: 5511
  • Cadastrado: 03-julho 06
  • Localização:Goiânia-GO
  • Interesses:Webly e elmicox.blogspot.com

Postou 08 setembro 2006 - 10:48

Cara, meu inglês não é muito bom, mas não deve ser difícil voce encontrar as ferramentas, mesmo estando com o Fireworks em inglês.

O brilho interno por exemplo, deve estar em "Effects>Inner shine", algo assim.
O preenchimento linear com certeza vc sabe onde fica, etc.

:joia:

Qualquer coisa posta ae.
valeus.net/mwords - Links automáticos p/ o MercadoLivre em seu texto

Ajude, responda: mesmo que não saiba exatamente a resposta, seu pitaco pode dar uma luz no problema do outro.
Não respondo dúvidas por MP / Email / MSN e afins. O fórum está aqui pra isto.

elmicox.blogspot.com
0

#7 Membro offline   Samuel Grolli Ícone

  • samuelgrolli.com
  • Ícone
  • Grupo: Membro Amigo
  • Posts: 220
  • Cadastrado: 25-julho 06
  • Localização:Cascavel-Pr
  • Interesses:Photoshop, Fireworks, CSS, Tableless, PHP, Mysql, Hardware.

Postou 09 setembro 2006 - 01:29

Muuito bom micox, parabéns! :D
Meu blog: www.samuelgrolli.com
0

#8 Membro offline   AcquaBlue Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 5
  • Cadastrado: 24-julho 06

Postou 12 setembro 2006 - 09:51

Ver postMicox, em Sep 8 2006, 10:48 PM, disse:

Cara, meu inglês não é muito bom, mas não deve ser difícil voce encontrar as ferramentas, mesmo estando com o Fireworks em inglês.

O brilho interno por exemplo, deve estar em "Effects>Inner shine", algo assim.
O preenchimento linear com certeza vc sabe onde fica, etc.

:joia:

Qualquer coisa posta ae.


Inner Glow...
0

#9 Membro offline   AlessandroJunior Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 8
  • Cadastrado: 07-outubro 07

Postou 08 outubro 2007 - 10:33

Cara como eu faço isso no FW em ingles e no FW 8
0

#10 Membro offline   ckav Ícone

  • cadastre-se no fórum e participe^~
  • Ícone
  • Grupo: Coordenadores
  • Posts: 1695
  • Cadastrado: 08-setembro 06
  • Sexo:Male
  • Localização:São Paulo/SP
  • Interesses:Design, Animação, Ilustração, Vetor, Criação, Cores, Flash, Action Script, notepad++, XHTML/CSS, Fireworks, Photoshop, Illustrator, InDesign, After effects, 3D, PHP, Web standards...

Postou 08 outubro 2007 - 10:54

Não tem erro, do mx pro 8 não mudou nada neste tuto...
No fireworks em inglês tão pouco! continua tudo no mesmo lugar...


Quote

2) Vá em efeitos e adicione o "Brilho interno" na cor preta pra imagem (configure as características do efeito de acordo com o que achar melhor.

Essa opção se encontra no painel "properties" (ctrl+F3) > em filters > clique no + > escolha shadow and glow > innere glow
o resto é comando básico...mas se não souber ainda tem o Google translate pra te dar uma mão...
se tiver ainda mais alguma dúvida específica, é só falar...mas aconselho a dar uma "fuçada" no programa, e tentar explorar ele um pouco pra entender a interface dele...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
------------------------------------------------------------------------------------------------------------------
"A cada pergunta idiota que eu faço e tenho a resposta, significa que estou um pouco menos idiota!!!"
Eu
------------------------------------------------------------------------------------------------------------------
Leu? gostou? ajudou?! Então cadastre-se, comente, peça, poste, ajude, participe!!!
------------------------------------------------------------------------------------------------------------------
0

#11 Membro offline   Micox Ícone

  • Comunidade de desenvolvedores
  • Ícone
  • Grupo: Administradores
  • Posts: 5511
  • Cadastrado: 03-julho 06
  • Localização:Goiânia-GO
  • Interesses:Webly e elmicox.blogspot.com

Postou 08 julho 2008 - 10:31

Valeu por ter refeito o tuto ckav :joia:
valeus.net/mwords - Links automáticos p/ o MercadoLivre em seu texto

Ajude, responda: mesmo que não saiba exatamente a resposta, seu pitaco pode dar uma luz no problema do outro.
Não respondo dúvidas por MP / Email / MSN e afins. O fórum está aqui pra isto.

elmicox.blogspot.com
0

#12 Membro offline   ckav Ícone

  • cadastre-se no fórum e participe^~
  • Ícone
  • Grupo: Coordenadores
  • Posts: 1695
  • Cadastrado: 08-setembro 06
  • Sexo:Male
  • Localização:São Paulo/SP
  • Interesses:Design, Animação, Ilustração, Vetor, Criação, Cores, Flash, Action Script, notepad++, XHTML/CSS, Fireworks, Photoshop, Illustrator, InDesign, After effects, 3D, PHP, Web standards...

Postou 08 julho 2008 - 05:54

xD que exagero, só refiz as imagens :P
não há de que Mico :) o tuto é bem legal!


(depois me paga o cinquentinha)

\o
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
------------------------------------------------------------------------------------------------------------------
"A cada pergunta idiota que eu faço e tenho a resposta, significa que estou um pouco menos idiota!!!"
Eu
------------------------------------------------------------------------------------------------------------------
Leu? gostou? ajudou?! Então cadastre-se, comente, peça, poste, ajude, participe!!!
------------------------------------------------------------------------------------------------------------------
0

#13 Membro offline   ThallysonDias Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 94
  • Cadastrado: 28-abril 08
  • Localização:MG - Contagem

Postou 22 julho 2008 - 10:13

fico legal, so q no ultimo efeito de reflexo é melhor usar o q tem na creative packages

COMMANDS > CREATIVE > FADE IMAGE

fica esse efeito aki : Imagem
~~ Thallyson Dias ~~
0

#14 Membro offline   ckav Ícone

  • cadastre-se no fórum e participe^~
  • Ícone
  • Grupo: Coordenadores
  • Posts: 1695
  • Cadastrado: 08-setembro 06
  • Sexo:Male
  • Localização:São Paulo/SP
  • Interesses:Design, Animação, Ilustração, Vetor, Criação, Cores, Flash, Action Script, notepad++, XHTML/CSS, Fireworks, Photoshop, Illustrator, InDesign, After effects, 3D, PHP, Web standards...

Postou 22 julho 2008 - 10:54

boa Thallyson :) você está corretíssimo ^_^
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
------------------------------------------------------------------------------------------------------------------
"A cada pergunta idiota que eu faço e tenho a resposta, significa que estou um pouco menos idiota!!!"
Eu
------------------------------------------------------------------------------------------------------------------
Leu? gostou? ajudou?! Então cadastre-se, comente, peça, poste, ajude, participe!!!
------------------------------------------------------------------------------------------------------------------
0

#15 Membro offline   Micox Ícone

  • Comunidade de desenvolvedores
  • Ícone
  • Grupo: Administradores
  • Posts: 5511
  • Cadastrado: 03-julho 06
  • Localização:Goiânia-GO
  • Interesses:Webly e elmicox.blogspot.com

Postou 22 julho 2008 - 02:32

hehe infelizmente no meu FW antiguim ainda não tem essas facilidades haheheh
valeus.net/mwords - Links automáticos p/ o MercadoLivre em seu texto

Ajude, responda: mesmo que não saiba exatamente a resposta, seu pitaco pode dar uma luz no problema do outro.
Não respondo dúvidas por MP / Email / MSN e afins. O fórum está aqui pra isto.

elmicox.blogspot.com
0

Página 1 de 1


Resposta rápida

  

1 usuário(s) está(ão) lendo este tópico
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)