Banners

 

O que é um Banner

Como um anúnico em jornal ou revista, o banner é uma forma de publicidade na Internet, como a que você vê, logo acima. Apesar de alguns internautas não gostarem dos banners, por motivos diversos, como aumentar o consumo da conexão ou, simplesmente, por ficarem irritados com um eterno pisca-pisca na tela, atrapalhando a leitura, eles são uma realidade. Quando bem feitos, despertam a atenção de quem navega.

 

Origem do Banner na Internet

Palavra inglesa com significado de "bandeira". Nas artes gráficas, fora da internet, é uma espécie de cartaz ou faixa, realmente com jeito de bandeira, para ser pendurado em algum dispositivo usado para suporte. No Google, se você pesquisar por "impressão digital banner" em imagens, poderá visualizar alguns banners desse tipo, impresso.

O conceito foi trazido para internet e, neste caso, o banner é uma espécie de anúncio, normalmente com algum tipo de animação. O intuito é que o visitante tenha sua atenção desviada para o banner e clique nele, de modo que a navegação seja conduzida para o site do anunciante.

Um banner pode ser estático, portanto, tecnicamente falando, uma imagem .jpg ou .png. Mas também existem banners dinâmicos (na verdade, a maioria) e podem ser desenvolvidos com diversas tecnologias, dentre elas se destacam, imagens .gif e .swf (Flash). Imagens .gif podem ser produzidas com Photoshop.

 

Como Anunciar com Banners

Para você anunciar num site, normalmente, você paga. Também existem formas de parcerias, onde você pode trocar banners. Especialmente quando você paga, você espera que o tal site seja muito visitado, de modo que seu anúncio seja visto. Assim, quanto mais visitado é um site, mais caro pode custar o investimento para a inclusão de um banner. No lado oposto, você pode desejar que paguem para incluírem banners no seu site (ou blog). Isto é possível, desde que você consiga bastante tráfego, através de conteúdo de qualidade.

 

Jargão do Banner na Publicidade

Entre anunciantes e clientes, existem alguns termos a saber (jargão):

• Impressão: número inteiro, que mede o quanto o banner foi mostrado. Em outras palavras, quantas vezes determinado banner foi exibido.
• click through: through em inglês, significa "completo", "terminado", "até o fim". Esse nome é atribuído ao click (sobre um banner) que direcionou o internauta ao site do anunciante.
• taxa de click through: é o percentual obtido do número de clicks through para o número de impressões. Assim, uma taxa de 1% de click through, significa que a cada 100 impressões (exibições do banner), uma levou ao site do anunciante.

 

Medidas Padrão de Banners

Varrendo a internet você encontra banners de todos os tamanhos, até porque interferem no design dos sites. Mas, para tristeza dos designers, existem alguns padrões.
Os padrões facilitam a negociação e, se não estiver produzindo banners exclusivamente para seu próprio site, é bom saber a respeito.

O Google AdWords é um sistema de anúncios pagos. Você pode criar desde anúncios de texto, até anúncios gráficos, que são que banners.
Tendo em vista a notoriedade do Google, os formatos padronizados por eles (para os anúncios feitos através do Google AdWords) acabaram se tornando uma espécie de referência.

O Google AdWords suporta os formatos swf (Flash), gif, jpg e png
e os tamanhos adotados pelo Google são:

• 300 x 50 Cabeçalho para celular
• 468 x 60 Banner
• 728 x 90 Cabeçalho
• 250 x 250 Quadrado
• 200 x 200 Quadrado pequeno
• 336 x 280 Retângulo grande
• 300 x 250 Retângulo inline
• 120 x 600 Arranha-céu
• 160 x 600 Arranha-céu largo

Outro exemplo, são os padrões do site O GLOBO, da Infoglobo:

• 345 x 98 Mega-selo
• 345 x até 195 Mega-selo expansível
• 728 x 90 Super banner
• 728 x até 240 Super banner expansível
• 468 x 60 Full Banner
• 468 x até 250 Full Banner Expansível
• 336 x 280 Arroba Banner / Retângulo (I)
• 300 x 250 Arroba Banner / Retângulo (II)
• 180 x 150 Banner Ilha / Retângulo pequeno
• 120 x 600 Skyscraper

Atenção!
Não se limite às medidas "padrão" e se atualize com frequência. Informe-se com quem e/ou para quem você vai trabalhar. Se o site for seu, fique à vontade para fazer do jeito que achar melhor. Principalmente se o anúncio também for seu. Por outro lado, caso você faça permuta de banners com terceiros, ou deseje que paguem para anunciar no seu site (ou da empresa onde trabalha), será necessário considerar padrões.

Consulte também padrões definidos pelas seguintes entidades:

• Internet Advertising Bureau (IAB)
• Coalition for Advertising Supported Information and Entertainment (CASIE)
• Associação de Mídia Interativa (AMT).
  
  

 

 

GIFs

 

O que é um Gif Animado

Gif é um padrão para intercâmbio de imagens. Em inglês, Graphics Interchange Format, que signfica Padrão para Intercâmbio de Gráficos, gerou o formato de imagens conhecido como .gif. Trata-se de uma forma de gravar imagens do tipo bitmap, tanto estáticas, como dinâmicas.
O gif animado é uma animação gerada pela apresentação de um conjunto de imagens distintas, gravadas num único arquivo .gif.
Esse tipo de imagem, com movimento, é muito usado em games, emoticons e em banners que contêm animação.

 

 

Como fazer um Gif Animado no Photoshop

 

Como fazer um Banner Dinâmico com o Photoshop CS5

Como fazer Gifs Animados com o Photoshop CS5

Banners e gifs animados, podem ser concebidos como no cinema.

O processo é similar ao usado na produção de um desenho animado.
Você cria cada um dos quadros separadamente, e, depois, visualiza um a um em sequência, a uma velocidade que dê ao espectador a sensação de movimento (24 quadros por segundo, por exemplo).

No Photoshop é muito simples fazer esse tipo de animação, ficando a maior parte do trabalho para o processo de criação e produção dos quadros.

 

 

Passo a passo no Photsohop

 

1. No Photoshop, crie um arquivo novo, comandando, no menu, File > New

 

2. Na janela New, configure da forma seguinte:

• Width: 160 (largura)
• Height: 90 (altura)
• Resolution: 96
• Color Mode: RGB Color

Clique OK.

3. Abra a janela Animation (frames), comandando, no menu, Window > Animation e cheque se a janela Layers está visível. Caso não, comande Window > Layers.

Observe a janela Animation: nela, você criará diversos quadros, como num filme. O quadro 1, já está disponível, e seu conteúdo será tudo que estiver visível na janela Layers.
O processo para criarmos a percepção de movimento, consiste, primeiramente, em você estabelecer o que será visualizado em cada quadro.

 

4. Em seguida, crie 3 layers, e preencha o fundo de cada um deles com uma cor diferente. Você deverá visualizar uma situação como a representada na figura abaixo.
Obs.: a área maior, vermelha, é o conteúdo do layer, neste exemplo, com 160 px X 90 px.

 

5. Clique no ícone Duplicates selected frames, 2 vezes. Assim, seu filme terá 3 quadros. Nesta fase, os 3 quadros terão o mesmo conteúdo, que é o do Layer VISÍVEL (note o olhinho, na janela Layers).

 

6. Agora, primeiramente, clique no quadro nº 2, para selecioná-lo. Em seguida, deixe visível o Layer 2 (verde). Note que alteramos o conteúdo do quadro nº 2.

 

7. Repita a operação, alterando o quadro nº 3 para o conteúdo do Layer 3.

 

8. Você pode definir quantas vezes deseja que o filme seja repetido: Once, uma vez, Forever, infinitamente, ... Observe como ajustar; está indicado pela seta na figura abaixo. Ajuste para Forever.

 

9. Quando você rodar o filme, será mostrado um quadro por vez, dando uma sensação de filme. Você pode ajustar quanto tempo cada quadro permanecerá visível. Observe a seta vermelha e regule cada um dos quadros de acordo com os valores da figura.

 

10. Pronto! Pasta clicar em Play (vide seta) e assistir.

 

11. Para salvar: File > Save for Web & Devices ...
Escolha .gif e salve com um nome da sua escolha. Sua imagem .gif será um gif animado ou um banner, dependendo do sentido que você dê a ela. Para manter a fonte original (e poder alterar no futuro), com os layers, salve o arquivo em .psd.

 

Downloads de Gifs Animados

Faça o download dos gifs animados (fontes) dos exemplos deste tutorial.

 

Como Criar um Banner 3D

 

O que é Estereoscopia

É um processo fotográfico que resulta num efeito tridimensional com o uso de duas imagens superpostas, obtidas de um mesmo alvo, a partir de duas perspectivas diferentes.

Antigamente, era possível visualizar este efeito através de um binóculo especial (desde 1840 já se brinca disso). Hoje, você consegue com a utilização de óculos, em lugar dos binóculos, como no cinema 3D.

Você também pode obter o efeito de superposição, criando um Gif Animado com dois quadros. Isso! Assim, não há a necessidade de óculos especiais...

Se você não tiver a possibilidade de fazer as duas fotografias do mesmo alvo, mas tiver alguma habilidade com o Photoshop, você poderá construir a 2ª imagem, separando o alvo do fundo, e remontando.

 

Dicas para fazer uma imagem 3D no Photoshop

Basicamente, aprendendo gifs animados com o tutorial anterior, você deverá conseguir criar uma imagem com efeito 3D, usando o conceito de estereoscopia.

Algumas dicas para você:

• Fotografe o mesmo alvo de 2 ângulos diferentes, mas MUITO PARECIDOS.
• Selecione o alvo e aumente o contraste, de modo a fazê-lo "saltar" do papel. Lembra-se? Mais próximo de você, muito contraste. Mais longe, o contraste vai diminuindo (conceitos de Perspectiva Tonal do Curso BAD).
• Caso deseje criar o efeito a partir de uma única foto existente (neste caso você não teria como fotografar duas vezes), separe o alvo do fundo e crie as duas fotos (dá trabalho), deformando e movendo, ligeiramente, o fundo. O objetivo é simular a existência das duas imagens.

 

 

Distribuição Autorizada

Clique para Compartilhar com sua Network ou envie a URL
http://banner.online24hs.com.br