Escolha o tema
Procurar
Últimos assuntos
Top dos mais postadores
Antunes Marcelo™ (2685) | ||||
Rafael Ribeiro (1442) | ||||
bru5no (1407) | ||||
San (978) | ||||
abandonei rs' (213) | ||||
Banned+ (143) | ||||
michellgomes (138) | ||||
Micheel (132) | ||||
Kotoquinho (125) | ||||
Dexter (87) |
Tópicos semelhantes
Facebook
[TUTO] ..: Efeito chuva :..
Página 1 de 1
[TUTO] ..: Efeito chuva :..
Baseado em PNG de autoria de Dabei, publicado no fórum geekforum
::Objetivo::
Mostrar uma técnica de construção de efeito chuva.
::Visão antecipada::
NOTA: A página com a visão antecipada pode demorar a carregar.
Este tutorial mostra uma técnica para se obter o efeito chuva conforme mostrado nesta
VISÃO ANTECIPADA
::A foto onde vai ser aplicado o efeito::
Escolha uma foto para aplicar o efeito. Mas lembre-se, dê preferência a imagens de dimensões reduzidas e procure otimizar a foto inicial para não ter como resultado final um arquivo muito grande.
Neste tutorial usei uma foto de 380 x 180 pixel extensão jpg e qualidade 70, resultando em uma gif final de pouco mais de 200kB (enorme!)
Nota: Tirei a foto da janela do meu escritório e a praia ao fundo é Copacabana. São 14:00h, hoje é o primeiro dia de inverno do ano 2005 e o tempo está nublado e com chuva.
::Criando o primeiro layer de trabalho::
Carregue a foto no Fireworks e ajuste a tela para o mesmo tamanho da foto.
Eu recortei de uma foto inicial de 640 x 480 pixel uma fatia de 380 x 180 pixel como mostrado acima.
Se o painel Layers não estiver visível tecle F2;
Você verá no painel, uma miniatura da foto.
Acompanhe a numeração da figura:
1-) Dê dois cliques em cima da faixa Layer 1 para abrir o painel mostrado em 2;
2-) Digite um nome para o layer da foto. Eu escolhi o nome "Fundo" e depois, marque a caixinha "Share across frames";
3-) Clique em cima do ícone do lápis transformando-o em um cadeado e bloqueando o layer
A seguir clique no palco.
::Criando o segundo layer de trabalho::
Ainda no painel Layers clique lá em baixo no ícone de uma pasta de arquivos para criar um novo layer.
Com o clique "aparece" em cima do layer "Fundo" um novo layer chamado "Layer 1".
Se você quiser pode mudar o nome deste layer como fizemos para o anterior, mas não bloqueie, deixe o ícone do lápis.
::Construindo um retângulo transparente sobre a foto::
Selecione a ferramenta retângulo e ajuste os parâmetros para preenchimento solido na cor branca, sem linha de contorno e transparência 50.
A seguir arraste e desenhe o retângulo ultrapassando os limites da foto. Você notará que a foto vai ser vista por trás do retângulo e através da transparência.
Tudo como mostrado abaixo:
::Aplicando efeitos no retângulo::
Selecione o retângulo que acabamos de construir;
Abra o menu suspenso Effects e escolha Noise ==> Add Noise;
No painel que se abre digite Amount: 280 e deixe Color desmarcada. Tecle OK
A foto vai ficar borrada! Não se preocupe e assim mesmo.
Abra o menu suspenso Effects e escolha Blur ==> Motion Blur;
No painel que se abre digite Angle: 240 e Distance: 40. Tecle OK
::Entendendo o que fizemos até aqui e o que fazer agora::
Temos uma foto de fundo (onde vai chover) em um layer bloqueado para edição e que vai se distribuir por todos os frames ("Share across frames") da animação que iremos criar;
E, temos uma "chuva parada" no Layer 1, que simulamos com um retângulo branco transparente onde aplicamos dois efeitos.
Animação, como você já deve saber se faz com frames.
Vamos criar mais três frames que juntos com o frame inicial que é criado quando você abre o FW totalizarão quatro frames.
No frame inicial temos a foto e a chuva. Nos 03 frames que adicionaremos, serão criados com a foto de fundo, pois já dissemos ao FW ("Share across frames") o layer "Fundo".
::Criando os frames::
Se o painel Frames não estiver visível tecle Shift + F2;
Clique no triangulozinho em cima e à direita no painel Frames para abrir um menu suspenso;
Escolha no menu a opção Add Frames para abrir uma caixa de diálogo.
Marque Number: 3 e After current frame como mostrado na figura. Tecle OK
Você vai notar que a "chuva" desapareceu e o Frame 2 está em azul. Isto significa que você está no Frame 2 que só tem o "fundo" ou seja a foto.
::Colocando a chuva nos três Frames criados::
Clique em cima do Frame 1. Ele ficará azul e a "chuva" vai reaparecer;
Vá para o palco e clique fora da foto e próxima a ela para selecionar o retângulo da "chuva";
Com o retângulo selecionado, tecle Ctrl + C (Copiar).
E vamos colar o retãngulo em cada um dos três Frames.
No painel Frames, clique em cima de Frame 2 e vai aparecer a foto sem a chuva. Tecle CTRL + V (Colar) e aparece a chuva, pois colou a cópia.
Atenção agora: Ainda no Frame 2 clique no retângulo da chuva que você acabou de colar, segure o mouse e arraste um pouco para o lado e para baixo o retângulo.
Volte ao painel Frames clique no Frame 3, CTRL + V, arraste o retângulo para outro lado e para baixo. Tudo como você fez para o Frame 2.
Faça o mesmo para o Frame 4.
::Testando a animação::
Tudo pronto. Vamos testar nossa animação.
Clique no botão play qua está no rodapé do palco.
Ficou ruim a animação. :-(
Volte nos frames e mude a posição do retângulo (clique e arraste).
Vá experimentando que você descobre um deslocamento ideal para o retângulo nos frames.
::Finalizando::
Vamos "Salvar" nossa animação. Mas teremos que salvar como GIF ANIMADA, senão não vai funcionar no browser. E, temos que definir loop infinito para ficar chovendo sempre. :-).
Se o painel Optimize não estiver visível tecle F6;
escolha Animated GIF.
No painel Frames abra o menu suspenso lá em baixo do painel e escolha Forever
(loop infinito)
::Objetivo::
Mostrar uma técnica de construção de efeito chuva.
::Visão antecipada::
NOTA: A página com a visão antecipada pode demorar a carregar.
Este tutorial mostra uma técnica para se obter o efeito chuva conforme mostrado nesta
VISÃO ANTECIPADA
::A foto onde vai ser aplicado o efeito::
Escolha uma foto para aplicar o efeito. Mas lembre-se, dê preferência a imagens de dimensões reduzidas e procure otimizar a foto inicial para não ter como resultado final um arquivo muito grande.
Neste tutorial usei uma foto de 380 x 180 pixel extensão jpg e qualidade 70, resultando em uma gif final de pouco mais de 200kB (enorme!)
Nota: Tirei a foto da janela do meu escritório e a praia ao fundo é Copacabana. São 14:00h, hoje é o primeiro dia de inverno do ano 2005 e o tempo está nublado e com chuva.
::Criando o primeiro layer de trabalho::
Carregue a foto no Fireworks e ajuste a tela para o mesmo tamanho da foto.
Eu recortei de uma foto inicial de 640 x 480 pixel uma fatia de 380 x 180 pixel como mostrado acima.
Se o painel Layers não estiver visível tecle F2;
Você verá no painel, uma miniatura da foto.
Acompanhe a numeração da figura:
1-) Dê dois cliques em cima da faixa Layer 1 para abrir o painel mostrado em 2;
2-) Digite um nome para o layer da foto. Eu escolhi o nome "Fundo" e depois, marque a caixinha "Share across frames";
3-) Clique em cima do ícone do lápis transformando-o em um cadeado e bloqueando o layer
A seguir clique no palco.
::Criando o segundo layer de trabalho::
Ainda no painel Layers clique lá em baixo no ícone de uma pasta de arquivos para criar um novo layer.
Com o clique "aparece" em cima do layer "Fundo" um novo layer chamado "Layer 1".
Se você quiser pode mudar o nome deste layer como fizemos para o anterior, mas não bloqueie, deixe o ícone do lápis.
::Construindo um retângulo transparente sobre a foto::
Selecione a ferramenta retângulo e ajuste os parâmetros para preenchimento solido na cor branca, sem linha de contorno e transparência 50.
A seguir arraste e desenhe o retângulo ultrapassando os limites da foto. Você notará que a foto vai ser vista por trás do retângulo e através da transparência.
Tudo como mostrado abaixo:
::Aplicando efeitos no retângulo::
Selecione o retângulo que acabamos de construir;
Abra o menu suspenso Effects e escolha Noise ==> Add Noise;
No painel que se abre digite Amount: 280 e deixe Color desmarcada. Tecle OK
A foto vai ficar borrada! Não se preocupe e assim mesmo.
Abra o menu suspenso Effects e escolha Blur ==> Motion Blur;
No painel que se abre digite Angle: 240 e Distance: 40. Tecle OK
::Entendendo o que fizemos até aqui e o que fazer agora::
Temos uma foto de fundo (onde vai chover) em um layer bloqueado para edição e que vai se distribuir por todos os frames ("Share across frames") da animação que iremos criar;
E, temos uma "chuva parada" no Layer 1, que simulamos com um retângulo branco transparente onde aplicamos dois efeitos.
Animação, como você já deve saber se faz com frames.
Vamos criar mais três frames que juntos com o frame inicial que é criado quando você abre o FW totalizarão quatro frames.
No frame inicial temos a foto e a chuva. Nos 03 frames que adicionaremos, serão criados com a foto de fundo, pois já dissemos ao FW ("Share across frames") o layer "Fundo".
::Criando os frames::
Se o painel Frames não estiver visível tecle Shift + F2;
Clique no triangulozinho em cima e à direita no painel Frames para abrir um menu suspenso;
Escolha no menu a opção Add Frames para abrir uma caixa de diálogo.
Marque Number: 3 e After current frame como mostrado na figura. Tecle OK
Você vai notar que a "chuva" desapareceu e o Frame 2 está em azul. Isto significa que você está no Frame 2 que só tem o "fundo" ou seja a foto.
::Colocando a chuva nos três Frames criados::
Clique em cima do Frame 1. Ele ficará azul e a "chuva" vai reaparecer;
Vá para o palco e clique fora da foto e próxima a ela para selecionar o retângulo da "chuva";
Com o retângulo selecionado, tecle Ctrl + C (Copiar).
E vamos colar o retãngulo em cada um dos três Frames.
No painel Frames, clique em cima de Frame 2 e vai aparecer a foto sem a chuva. Tecle CTRL + V (Colar) e aparece a chuva, pois colou a cópia.
Atenção agora: Ainda no Frame 2 clique no retângulo da chuva que você acabou de colar, segure o mouse e arraste um pouco para o lado e para baixo o retângulo.
Volte ao painel Frames clique no Frame 3, CTRL + V, arraste o retângulo para outro lado e para baixo. Tudo como você fez para o Frame 2.
Faça o mesmo para o Frame 4.
::Testando a animação::
Tudo pronto. Vamos testar nossa animação.
Clique no botão play qua está no rodapé do palco.
Ficou ruim a animação. :-(
Volte nos frames e mude a posição do retângulo (clique e arraste).
Vá experimentando que você descobre um deslocamento ideal para o retângulo nos frames.
::Finalizando::
Vamos "Salvar" nossa animação. Mas teremos que salvar como GIF ANIMADA, senão não vai funcionar no browser. E, temos que definir loop infinito para ficar chovendo sempre. :-).
Se o painel Optimize não estiver visível tecle F6;
escolha Animated GIF.
No painel Frames abra o menu suspenso lá em baixo do painel e escolha Forever
(loop infinito)
Tópicos semelhantes
» [TUTO] ..: Efeito 3D em fotos:..
» [TUTO] ..: Efeito metálico cromado :..
» [TUTO] ..: Efeito 3D em texto :..
» [TUTO] ..: Efeito metálico cromado :..
» [TUTO] ..: Efeito 3D em texto :..
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|
Sex Out 11, 2013 11:50 am por Rafael Ribeiro
» Melhor Windows XP para pc mais antigos… Alto desempenho da maquina com este windows.
Sex Out 11, 2013 10:55 am por Rafael Ribeiro
» DONWLOAD DE FONTES TRANSPARENTES.
Dom Set 29, 2013 2:07 pm por Keant
» DONWLOAD DE FONTES DOURADAS.
Qua Jul 31, 2013 3:01 pm por Carlos Alberto dos Santos
» Marinha abre inscrições para concurso de admissão ao Colégio Naval, em Angra dos Reis - RJ
Sex Jul 12, 2013 12:12 pm por Rafael Ribeiro
» Escrevendo arquivo texto com a função StreamWriter
Seg Nov 12, 2012 8:25 pm por Dexter
» Lendo arquivo texto com a função StreamReader
Seg Nov 12, 2012 8:21 pm por Dexter
» Foto config
Seg Nov 12, 2012 8:15 pm por Dexter
» Como localizar um ip
Qua Set 12, 2012 10:02 am por Dexter
» Jogos Pra Samsun Gt-M2510
Seg Jun 18, 2012 8:21 am por San