Composição, Projeto e Animação Prof.

Andrea Garcia

Desenvolvimento de Banners

Muitos são os estilos de banners que os profissionais lançam todos os dias, mas
apesar de serem diversos os modelos, formatos e tamanhos, eles estão sempre
dentro de duas categorias: banners estáticos e dinâmicos.

Banner Estáticos

Banners estáticos, como o próprio nome já o diz, são os banners onde só possuem
um frame, são aqueles banners que permanecem apenas com uma imagem ou texto
ao longo de sua exibição, muitos deles apresentam apenas um abertura animada que
leva a uma exibição única no decorrer da navegação do site. Estes tipos de banners
são mais indicados para sites que requer do usuário uma maior concentração para
navegar pelo conteúdo do site, como exemplos; sites de instituições governamentais
e não-governamentais, bibliotecas online, websites que disponibilizam material para
pesquisa e disponibilizam tutoriais. Como os sites citados requerem uma atenção do
leitor é necessário que o banner apresente conteúdo limpo e que não venha tirar a
atenção do leitor.

Banners Dinâmicos (Banners Animados)

Banners dinâmicos são os tipos de banners que apresentam conteúdo animado, são
os banners mais usados atualmente. Os banners dinâmicos apresentam uma maior
convenção de cliques em seus anúncios. Pesquisas comprovam que se um banner
não chamar a atenção do leitor durante os 3 primeiros segundos, dificilmente ele
chamará atenção posteriormente, então como os banners dinâmicos são mais
chamativos, podemos usar a vontade em nossas publicidades, hoje é uma forma muito
popular de divulgar seu trabalho na internet. Podem ser usados em sites de áreas
diversas: esportes, notícias, canais, games, publicidades, entretenimento, etc.

Tamanho padrão de banners google adwords, sites e blogs

Composição, Projeto e Animação Prof. Andrea Garcia

Tamanhos e medidas para páginas no Facebook

Padrões de banners de acordo com a Abraweb (Associação

Brasileira de Profissionais da Internet) Www.abraweb.com.br/banners.php
Composição, Projeto e Animação Prof. Andrea Garcia

CPM, CPC e CTR… O que é?

Para quem acabou de cair de paraquedas na área de Marketing Digital, de cara é bom
entender alguns termos que é padrão na internet tanto para medir o valor pago em
uma mídia veiculada na rede, quanto mensurar a qualidade e efetividade dos seus
anúncios. Para isso devemos saber a definição de três termos básicos que a maioria
dos veículos da internet usa como base.

CPM (Custo por Mil)

Normalmente para compra de banners em portais a forma em que é mensurado o

preço a pagar é através do CPM, que significa Custo Por Mil, isto é a cada mil
impressões do seu anúncio, é cobrado um valor. Exemplo: Você tem um banner no
terra.com.br e o CPM custa R$ 0,30, fazendo uma suposição que o Terra tenha um
milhão de visualizações por dia, o seu gasto diário seria de R$ 300,00.

CPM = R$ 0,30

Views = 1.000.000

Gasto diário = 1.000.000 / 1000 * 0,30 = R$ 300,00

CPC (Custo por clique)

Composição, Projeto e Animação Prof. Andrea Garcia

Seguindo a mesma linha do CPM o CPC é também uma forma de mensurar o gasto
de um anúncio/publicidade veiculado em algum player, diferente do CPM que gasta
sem precisar que o usuário tenha alguma interação com a publicidade, o CPC só cobra
a partir do momento que a pessoa clica no anúncio. Exemplo: Você tem um full banner
no terra e o CPC custa R$ 0,30, se o seu banner teve 800 cliques no dia o seu gasto
foi de R$ 240,00.

CPC = R$ 0,30

Cliques= 800

Gasto diário = R$ 0,30 * 800 = R$ 240,00

CTR (Clickthrough rate)

Diferente do CPC e do CPM o CTR não serve para medir o valor gasto com um
anúncio, o CTR é a taxa de clique que você teve em uma publicidade, ela é usada
para mensurar a qualidade da sua propaganda. Exemplo: O seu anúncio no terra teve
um CTR de 3%, para chegar nesse valor, sabemos que o seu banner teve 3 mil
visualizações e dessa quantidade, resultou em 90 cliques.

Visualizações= 3000

Cliques= 90

CTR=( 90*100) / 3000 = 3%

Composição, Projeto e Animação Prof. Andrea Garcia

Recursos para desenvolvimento de banners

Utilização da Ferramenta Caneta

Pode ser utilizada para desenhar linhas retas ou curvas. Pressione DEL para finalizar o
a criação da linha.

Linhas retas – clique, solte o botão do mouse e clique novamente para encerrar.

Linhas curvas – clique, segure o botão do mouse, desenvolva a curva e então solte o botão.

Tente criar a seguinte figura, faça preenchimento de área com Gradiente:

Utilização da Ferramenta Caneta II

Com esta ferramenta vamos desenhar uma linha curva como abaixo:
Composição, Projeto e Animação Prof. Andrea Garcia

Duplique-o:

Selecione as duas linhas (segurando o Shift), e vá no Menu Janela e escolha a opção

Caminho, aparecerá uma guia no lado direito da tela, como abaixo:

Escolha a opção Mesclar caminhos. Em seguida ao aparecer esta janela:

Escolha 15 que será a quantidade de linhas entre as duas já existentes.

Composição, Projeto e Animação Prof. Andrea Garcia

Exemplos de banners:
Composição, Projeto e Animação Prof. Andrea Garcia

Exercício:

1. Desenvolver um banner web na medida 728 x 90 (Leaderboard), com assunto de

seu interesse onde contenha: uma imagem, utilização da ferramenta caneta, efeito
degrade e textura na cor de fundo e sombra.