Efeito super bacana que substitui um banner em um site. SUPER INTERESSANTE

Bom galera, o que mais se vê na internet são sites que utilizam banners rotativos no topo do site. Daí ou você utiliza os banners fornecidos hoje em áreas administrativas de conteúdo  ou utiliza os próprios banners gerados pelo programa WebAcappella.

Mas hoje vou passar uma dica em que muda essa filosofia criando algo diferente, e se bem feito ainda deixa seu site mais leve.

Neste efeito vamos utilizar imagem fixa misturada com um gif animado. Faça um e você verá que efeito bacana que vai causar.


Primeiramente vamos precisar de uma imagem. Como exemplo vou utilizar a abaixo:

Agora vou trabalhar nesta imagem, neste caso vou usar o Corel Draw, mas você pode usar o programa de sua preferência, Vou recortar a imagem para ficar numas dimensões bacana e colocar um texto com letras vazadas.

Coloquei abaixo algumas imagens com uma área colorida chapada abaixo da imagem trabalhada só para vocês verem que as letras estão vazadas de forma aparecer a escrita obedecendo a cor que eu colocar por baixo no site.

Agora vou criar um gif onde vai ficar trocando de cores. Para isso terei 3 imagens de áreas coloridas. Cada qual com sua cor: As imagens devem ter as mesmas medidas altura x largura.

Criei as seguintes imagens:

Utilizando uma ferramenta on line em que adoro. No site http://gifmaker.me/; criei o seguinte gif animado:

Agora vou criar um gif para fazer um efeito strobo. Para isso vou precisar de uma imagem preta e uma branca: Utilizando a mesma ferramenta on line citada acima criei meu gif strobo abaixo:

Como eu acho as dimensões de uma área de banner um tamanho considerável vou ter minha imagem da figura do banner repartida em várias partes. Pois é muito chato entrar no site e ter que esperar uma imagem ficar carregando. Dái em vários pedaços a imagem aparece bem mais rápida no site.

Você pode fazer isso utilizando o próprio Photoshop ou o programa de sua preferência.

Para quem não tem familiaridade com o Photoshop pode usar um programinha pra isso: O TileMage Imagem. Programinha gratuito.

Utilizando este programa eu dividi a imagem em oito partes como podem observar abaixo: Inseri as imagens no WebAcappella.

Após ajustar as imagens :

Para que isso?  

- Simples, quando o site começar carregar , mesmo antes do efeito funcionar. o site não fica com nenhum espaço vago. Já mostrando a imagem.

Vamos agora para o que nos interessa: Lembra do gif animado trocando de cores? Vamos inserir ele agora com a INSERIR >> IMAGEM  do WebAcappella e posicionar ele exatamente tampando a escrita "UM SHOW TODA SEMANA" de um ponto ao outro da imagem>

Agora colocamos o gif para o plano inferior.:

 Já começamos a ter um efeito, que o texto mudando de cor:

Agora vamos inserir nosso gif de strobo e redimensona  tampando completamente a imagem. 

Clicamos no gif e e enviamos o mesmo para o plano inferior.

Agora em cada imagem recortada configuramos a transparência para 90% .

 Pronto, o efeito está criado.

Agora é só implementar outras coisinhas para dar aquele realce no site.


Para ver este exemplo on line clique aqui.