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 elaborados, 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 como 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 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).
Isso é 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 existem alguns padrões.
Os padrões facilitam a negociação e, se não estiver produzindo
banners exclusivos para seu próprio site, é bom saber a respeito.
O Google AdWords suporta os formatos swf (Flash), gif, jpg e png e os
tamanhos de banners 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
Imagem-exemplo: customprintbanner.com
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
Imagem-exemplo: customprintbanner.com
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 e Banners Animados
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
O processo para a produção de um um Banner Dinâmico
é 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).
Exemplo: a imagem (trocando de cor) é um gif animado.
Conheça os passos para produzí-la no Photoshop.
Passo a passo para fazer um gif animado no
Photsohop CS 6
1No Photoshop, crie um arquivo novo, comandando, no menu,
Arquivo > Novo (File > New)
2Na janela Novo (New), configure da forma seguinte:
- Width: 160 (largura)
- Height: 90 (altura)
- Resolution: 96
- Color Mode: RGB Color
Clique OK.
3Abra a janela Linha do Tempo (Animation), comandando,
no menu, Janela > Linha do Tempo (Window > Animation) e cheque se a janela
Camadas (Layers) está visível. Caso não, comande Janela > Camadas (Window > Layers).
Observe a janela Linha do Tempo (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.
4Em 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.
5Clique no ícone Duplica quadros selecionados (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).
6Agora, 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.
7Repita a operação, alterando o quadro nº 3 para o conteúdo do Layer 3.
8Você 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.
9Quando 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.
10Pronto! Pasta clicar em Play (vide seta) e assistir.
11Para salvar: Arquivo > Salvar para Web (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
(arquivos .psd do Photoshop) 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.