..: Efeito chuva :..

Está chovendo muito lá fora, então pintou uma idéia.

Vamos fazer um efeito chuva numa foto. Vamos selecionar uma imagem. Sou fã do Flicker, Olhares ou 1000imagens fique a vontade para escolher. Minha sugestão é essa:

::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 400 x 400 pixel extensão jpg e qualidade 70, resultando em uma gif final de pouco mais de 200kB (enorme!)

::Criando o primeiro layer de trabalho::

Carregue a foto no Fireworks; Se o painel Layers não estiver visível tecle F2;
Você verá no painel, uma miniatura da foto.

1. Dê dois cliques em cima da imagem em miniatura;


2. Digite um nome para o layer da foto. Eu escolhi o nome "Fundo";


3. Clique em cima do ícone do lápis transformando-o em um cadeado e bloqueando o layer
   A seguir clique no palco.

::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 Filter 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 Filter e escolha Blur ==> Motion Blur;
No painel que se abre digite Angle: 240 e Distance: 40. Tecle OK

O resutado até este ponto é este:

::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 Duplicate Frames para abrir uma caixa de diálogo.

Marque Number: 3 e After current frame como mostrado a figura abaixo. Tecle OK

::Colocando a chuva nos três Frames criados::

Clique em cima do Frame 2. Ele ficará azul e a "chuva" vai reaparecer;

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, 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 WebSnap.

No painel Frames abra o menu suspenso lá em baixo do painel e escolha Forever
(loop infinito)

Agora pode Salvar: Menu File ==> Export

Confira o resultado final CLIQUE AQUI

::Veja como ficou com OUTRA FOTO

TEXTURA: EFEITO CHAMAS

É muito importante o desenvolvimento da criatividade para isso temos que praticar e para obter efeitos relevantes, é primordial termos em mente imagens, situações e todo tipo de imaginação possível.

Isso obviamente é adquirido ao longo do tempo, com muito trabalho, participação em desafios, visualizando tutoriais, etc.

Este efeito que faremos hoje é um exemplo disso, onde vamos simular uma textura em chamas. Vamos lá.

1º - Crie um novo documento 250px por 250px com o fundo preto.

2º - Com a ferramenta de forma elíptica faça um circulo no palco com fundo gradiente ondas de branco para preto.

3º - Com o circulo selecionado, clique em bordas no painel de propriedades, escolha a opção feather com valor 100.

A imagem ficará com este aspecto:

4º - Multiplique o circulo alterando a posição de cada um e preenchendo todo o palco. Viste exemplo abaixo:

5º - Selecione todos e agrupe-os (CTRL + G). Agora iniciaremos a parte de caracterização das chamas. 6º - Em FILTROS / AJUSTAR COR / MATIZ E SATURAÇÃO
configure como a imagem abaixo. 7º - Ainda em AJUSTAR COR, selecione a opção CURVAS:

Para obter o melhor resultado é fundamental utilizar todas as opções de canal.Detalhe, todos os pontos são criados no centro, e arrastados para as seguintes posições:
RGB

VERMELHO VERDE AZUL

Resultado:

Perceba que a imagem já vai ganhado aspecto de chamas, mas alguns passos poderão dar um melhor acabamento.
8º - Continuando a utilizar a opção FILTROS, clique em AJUSTAR COR > CONTRASTE E BRILHO com estes valores:

Acabou! Veja o resultado da imagem com mais brilho após as últimas duas partes:
Considerações finais Você pode utilizar esse recurso para criar seus banners, wobtopos ou layouts modificando e alterando cada valor, estilos de gradientes, ajustes de cores, enfim… Você pode deixar a imagem caracterizada ao seu modo.

Até a próxima.

Menu Interativo

Primeiro crie um novo arquivo do tamanho que desejar. No meu exemplo criei um com 500X120px.
Crie um visual! Como essa deve ser a primeira vez que você esta tentando não crie algo grandioso! Quanto mais simples melhor. Como sugestão que tal utilizar algo do tutorial anterior o webtopo!?

Feito o visual clique em Molduras e duplique a moldura existente.

Essa segunda , moldura você ira alterar a imagem de acordo com o que você quer que aconteça no menu quando o mouse passar por cima do link. No meu exemplo irei adicionar um donut que o Homer adora (rs) e adicionar alguns efeitos no texto. Mas você pode mudar fonte, cor de fundo e etc. A segunda Moldura ficara assim:

agora selecione as opções "Ferramenta Fatia" e faça a forma dos botões. Agora clique com o botão direito em cada fatia e clique em "Adicionar Comportamento Rollover Simples".

Feito isso vá em Arquivo>Assistente de ExportaçãoIra aparecer as seguintes telas:

Clique em continuar

Clique em Continuar

clique na imagem para ampliar, mude o formato para JPEG e a qualidade para 100.

Em seguida clique em Exportar. Clique na imagem para ampliar Selecione a caixa "Colocar Imagens na Subpasta" e depois salvar.

Pronto!

Você acaba de fazer um menu em Fireworks e gerar um arquivo html para seu site.

Veja como ficou o exemplo:
Clique aqui

WebTopo

Crie um novo documento 473 x 120, mas você pode deixar to tamanho que achar melhor.

Agora vamos fazer um retângulo com a ferramenta Rectangle (U). O tamanho do retângulo é de 473X30. Deixe-o sem cor, e com uma borda Cinza. Vamos fazer uma barra em cima do topo, que pode servir de menu também.

Mas vamos dar um toque na barra, com o efeito Linear. Selecione a barra e vá em Properties (Propriedades).

Clique onde esta Escrito SOLIDO (na imagem á cima) depois: Gradiente: Linear

com a ferramenta Gradiente mova o linear. Ficando assim

Nesta barra você coloca algo escrito, ou alquns links.Agora vamos fazer o resto do topo.

Usaremos aqui a fonte SPIDERMAN (clique para fazer o download), escreva o nome do seu site no topo.

Nos menus como vcs observaram eu utilizei o efeito chanfro e relevo / chanfro interno para dar esse realce, a cor da letra foi branco mesmo, utilizei o tamanho 15.

Vamos agora criar uma logomarca, usaremos então a imagem abaixo que já está preparada.

posicione o menu, titulo do site e logotipo nas posições mais adequadas ao seu estilo.

eu sugiro o seguinte:

Importe para o seu Documento no fireworks uma imagem legal (ARQUIVO/IMPORTAR (File->Import))

Use a imagem ao lado. Ajuste o tamanho da imagem a altura do webtopo e logo após gire 180 graus. Menu modificar / transformar / girar 180 graus.

Selecione a imagem e redimensione a sua largura para 10px.

Agora redimensione novamente para 473 de largura e veja que legal o efeito criado.

Deixe a imagem de fundo em baixo de todos os objetos, clique com o botão direito do Mouse na imagem de fundo e escolha:Organizar-> Enviar para trás (Arrange->Send to Back)

Até a Próxima!