Fixo
WhatsApp
11
11
3042.3036
965.427.184
Celular
11
965.427.184



Boa tarde!
Voltar ao Topo
Mais Informações
Banner 2D com efeito 3D por Estereoscopia

Banner 2D com efeito 3D por Estereoscopia

O que é Banner

banner na internet - medidas padrão de banners

O que você precisa saber sobre Banners

  • O que é um Banner
  • Como Anunciar com Banners
  • Medidas Padrão de Banners
  • Banner 2D com efeito 3D por Estereoscopia
  • GIFs e Banners Animados

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.

impressão digital banner

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.

Exemplo de banner vertical

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:

Exemplo de banner horizontal
  • 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:

GIFs e Banners Animados

Exemplo de banner com 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

Exemplo de banner com GIF animado

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:

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.