SlideShare uma empresa Scribd logo
1 de 15
Baixar para ler offline
ARTE SEQUENCIAL EM
PROPAGANDA – PARTE 1
Banners de internet


                       Danilo Aroeira
                        danilo@ad.art.br
                          www.ad.art.br
BANNERS GRÁFICOS DE INTERNET
 Idéia simples, textos rápidos e diretos

 Limitação de formato e peso (em Kb) do arquivo
 final

 Possibilidade de interação com o usuário

 SEMPRE estar atento ao veículo (site onde será
 publicado o banner), já que formato e
 especificações técnicas variam de um para o
 outro.
BANNERS GRÁFICOS DE INTERNET
•EXEMPLOS DE FORMATOS

 Retângulo

  • 300x250 pixels
  • Peso máximo: 30Kb
  • Relativamente grande:
     bom espaço para o
     layout
  • Comumente localizado
     nas laterais do web
     site ou portal
BANNERS GRÁFICOS DE INTERNET
•EXEMPLOS DE FORMATOS

 Bigbanner

  • 980x90 pixels
  • Peso máximo: 30Kb
  • Relativamente grande, mas estreito: difícil de layoutar.
     Bom para textos.
  • Comumente localizado no topo do web site ou portal
BANNERS GRÁFICOS DE INTERNET
•EXEMPLOS DE FORMATOS

 Superbanner

  • 728x90 pixels. Um dos mais usados
  • Peso máximo: 30Kb ou 20Kb
  • Relativamente grande, mas estreito: difícil de layoutar.
     Bom para textos.
  • Comumente localizado no topo do web site ou portal
BANNERS GRÁFICOS DE INTERNET
•EXEMPLOS DE FORMATOS

 Skycraper

  • 120x600 pixels
  • Peso máximo: 20Kb


  • Sempre localizado nas laterais do
     web site ou portal
BANNERS GRÁFICOS DE INTERNET
•EXEMPLOS DE FORMATOS

 DHTML (floater)

  • Existem vários formatos para essa mídia, que varia
     bastante. Um dos mais comuns é o de 250x250 pixels
     ou 400x400 pixels (normalmente, quadrado).
  • Peso máximo: variável
  • É um banner que “sobrevoa” o site por um determinado
     período de tempo
BANNERS GRÁFICOS DE INTERNET
•EXEMPLOS DE INTERAÇÃO COM O USUÁRIO E RICH MEDIA

  A animação acontece a partir de uma ação do
  usuário




  A informação é revelada após a ação do usuário
  (expansível)
BANNERS GRÁFICOS DE INTERNET
•EXEMPLOS DE INTERAÇÃO COM O USUÁRIO E RICH MEDIA

  O usuário é convidado a interagir através de um
  game
BANNERS GRÁFICOS DE INTERNET
•EXEMPLOS DE INTERAÇÃO COM O USUÁRIO E RICH MEDIA

  Wario Land for Wii
BANNERS GRÁFICOS DE INTERNET
•EXEMPLOS DE INTERAÇÃO COM O USUÁRIO E RICH MEDIA

  Entrevista com Stallone
BANNERS GRÁFICOS DE INTERNET
 O diretor de arte não precisa saber produzir ou
 programar, mas é indispensável que conheça as
 possibilidades oferecidas pela tecnologia para
 criar para a internet.

 É preciso mostrar, a quem for a peça, como deve
 ser executada a idéia que você teve.

 Storyboard: sequencia de imagens estáticas que
 simulam o que deve ocorr
BANNERS GRÁFICOS DE INTERNET
 Storyboard
MAIS REFERÊNCIAS DE FORMATOS E
ESPECIFICAÇÕES TÉCNICAS

 http://anuncie.globo.com/mediakit/globocom
 /formatos.html

 http://www.publiabril.com.br/especificacoes
 -tecnicas/internet

 http://publicidade.uol.com.br
 /tabelaFormatos.html

Mais conteúdo relacionado

Destaque

Aula 2 - Comunicação Gráfica e Design
Aula 2 - Comunicação Gráfica e DesignAula 2 - Comunicação Gráfica e Design
Aula 2 - Comunicação Gráfica e DesignCíntia Dal Bello
 
Design gráfico II - Aula 01 - Logotipo
Design gráfico II - Aula 01 - LogotipoDesign gráfico II - Aula 01 - Logotipo
Design gráfico II - Aula 01 - Logotipoaudreicarvalho
 
Aula 12 - Ilustracao e Direção de Arte
Aula 12 - Ilustracao e Direção de ArteAula 12 - Ilustracao e Direção de Arte
Aula 12 - Ilustracao e Direção de ArteDanilo Aroeira
 
Oficina de Ilustração Digital
Oficina de Ilustração DigitalOficina de Ilustração Digital
Oficina de Ilustração DigitalDanilo Aroeira
 
Desenho e Ilustração
Desenho e IlustraçãoDesenho e Ilustração
Desenho e IlustraçãoGui Souza A
 
Processo de Criacão de Logomarca
Processo de Criacão de LogomarcaProcesso de Criacão de Logomarca
Processo de Criacão de LogomarcaBreno Brito
 

Destaque (9)

Aula 2 - Comunicação Gráfica e Design
Aula 2 - Comunicação Gráfica e DesignAula 2 - Comunicação Gráfica e Design
Aula 2 - Comunicação Gráfica e Design
 
Design gráfico II - Aula 01 - Logotipo
Design gráfico II - Aula 01 - LogotipoDesign gráfico II - Aula 01 - Logotipo
Design gráfico II - Aula 01 - Logotipo
 
Aula 12 - Ilustracao e Direção de Arte
Aula 12 - Ilustracao e Direção de ArteAula 12 - Ilustracao e Direção de Arte
Aula 12 - Ilustracao e Direção de Arte
 
Ilustração
IlustraçãoIlustração
Ilustração
 
Oficina de Ilustração Digital
Oficina de Ilustração DigitalOficina de Ilustração Digital
Oficina de Ilustração Digital
 
Ilustração
IlustraçãoIlustração
Ilustração
 
Desenho e Ilustração
Desenho e IlustraçãoDesenho e Ilustração
Desenho e Ilustração
 
Desenho de observação
Desenho de observaçãoDesenho de observação
Desenho de observação
 
Processo de Criacão de Logomarca
Processo de Criacão de LogomarcaProcesso de Criacão de Logomarca
Processo de Criacão de Logomarca
 

Semelhante a Aula 13 - Arte sequencial em Propaganda - parte 1

Demonstrador virtual web com recursos de Realidade Aumentada - Apresentação
Demonstrador virtual web com recursos de Realidade Aumentada - ApresentaçãoDemonstrador virtual web com recursos de Realidade Aumentada - Apresentação
Demonstrador virtual web com recursos de Realidade Aumentada - ApresentaçãoLeonardo Pereira Santos
 
Popularização dos dispositivos móveis: o que muda para os webdesigners
Popularização dos dispositivos móveis: o que muda para os webdesignersPopularização dos dispositivos móveis: o que muda para os webdesigners
Popularização dos dispositivos móveis: o que muda para os webdesignersfavesi
 
AdoroCinema_Formatos_Tabela_2014
AdoroCinema_Formatos_Tabela_2014AdoroCinema_Formatos_Tabela_2014
AdoroCinema_Formatos_Tabela_2014AlloCiné do Brasil
 
Gestão de Ambientes Internet Webseriados
Gestão de Ambientes Internet   WebseriadosGestão de Ambientes Internet   Webseriados
Gestão de Ambientes Internet WebseriadosDurval Amorim
 
Portando sua aplicação web para iphone
Portando sua aplicação web para iphonePortando sua aplicação web para iphone
Portando sua aplicação web para iphoneRenato Nitta
 
A 3ª Área do Design: Web Design
A 3ª Área do Design: Web DesignA 3ª Área do Design: Web Design
A 3ª Área do Design: Web DesignGustavo Zimmermann
 
Trabalho Gestão Tec. Web - WEBSERIADOS
Trabalho Gestão Tec. Web - WEBSERIADOSTrabalho Gestão Tec. Web - WEBSERIADOS
Trabalho Gestão Tec. Web - WEBSERIADOSBianca Furtado
 
Formatos De Propaganda Na Web
Formatos De Propaganda Na WebFormatos De Propaganda Na Web
Formatos De Propaganda Na WebAgência PubliCO
 
Desenvolvimento Web Parte I
Desenvolvimento Web Parte IDesenvolvimento Web Parte I
Desenvolvimento Web Parte Iigorpimentel
 
Introdução à Multimídia
Introdução à Multimídia Introdução à Multimídia
Introdução à Multimídia Windson Viana
 
ANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEB
ANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEBANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEB
ANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEBdualpixel
 
HTML5 Mobile Aula 1
HTML5 Mobile Aula 1HTML5 Mobile Aula 1
HTML5 Mobile Aula 1Jose Berardo
 

Semelhante a Aula 13 - Arte sequencial em Propaganda - parte 1 (20)

Workshop-Portfolio
Workshop-PortfolioWorkshop-Portfolio
Workshop-Portfolio
 
Demonstrador virtual web com recursos de Realidade Aumentada - Apresentação
Demonstrador virtual web com recursos de Realidade Aumentada - ApresentaçãoDemonstrador virtual web com recursos de Realidade Aumentada - Apresentação
Demonstrador virtual web com recursos de Realidade Aumentada - Apresentação
 
Popularização dos dispositivos móveis: o que muda para os webdesigners
Popularização dos dispositivos móveis: o que muda para os webdesignersPopularização dos dispositivos móveis: o que muda para os webdesigners
Popularização dos dispositivos móveis: o que muda para os webdesigners
 
AdoroCinema_Formatos_Tabela_2014
AdoroCinema_Formatos_Tabela_2014AdoroCinema_Formatos_Tabela_2014
AdoroCinema_Formatos_Tabela_2014
 
Webseriados
WebseriadosWebseriados
Webseriados
 
Gestão de Ambientes Internet Webseriados
Gestão de Ambientes Internet   WebseriadosGestão de Ambientes Internet   Webseriados
Gestão de Ambientes Internet Webseriados
 
Portando sua aplicação web para iphone
Portando sua aplicação web para iphonePortando sua aplicação web para iphone
Portando sua aplicação web para iphone
 
A 3ª Área do Design: Web Design
A 3ª Área do Design: Web DesignA 3ª Área do Design: Web Design
A 3ª Área do Design: Web Design
 
Trabalho Gestão Tec. Web - WEBSERIADOS
Trabalho Gestão Tec. Web - WEBSERIADOSTrabalho Gestão Tec. Web - WEBSERIADOS
Trabalho Gestão Tec. Web - WEBSERIADOS
 
Formatos De Propaganda Na Web
Formatos De Propaganda Na WebFormatos De Propaganda Na Web
Formatos De Propaganda Na Web
 
A revolução do client side
A revolução do client sideA revolução do client side
A revolução do client side
 
Palestra realidade aumentada
Palestra   realidade aumentadaPalestra   realidade aumentada
Palestra realidade aumentada
 
Desenvolvimento Web Parte I
Desenvolvimento Web Parte IDesenvolvimento Web Parte I
Desenvolvimento Web Parte I
 
Tudo Que Aconteceu Na CES 2008
Tudo Que Aconteceu Na CES 2008Tudo Que Aconteceu Na CES 2008
Tudo Que Aconteceu Na CES 2008
 
Especificaçoes portal its
Especificaçoes portal itsEspecificaçoes portal its
Especificaçoes portal its
 
Introdução à Multimídia
Introdução à Multimídia Introdução à Multimídia
Introdução à Multimídia
 
ANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEB
ANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEBANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEB
ANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEB
 
HTML5 Mobile Aula 1
HTML5 Mobile Aula 1HTML5 Mobile Aula 1
HTML5 Mobile Aula 1
 
CD - 1
CD - 1CD - 1
CD - 1
 
Manual Video
Manual VideoManual Video
Manual Video
 

Mais de Danilo Aroeira

Propaganda: conceitos básicos
Propaganda: conceitos básicosPropaganda: conceitos básicos
Propaganda: conceitos básicosDanilo Aroeira
 
Como montar um portfolio?
Como montar um portfolio?Como montar um portfolio?
Como montar um portfolio?Danilo Aroeira
 
Palestra identidade visual
Palestra identidade visualPalestra identidade visual
Palestra identidade visualDanilo Aroeira
 
Aula 14 - Arte sequencial em Propaganda - parte 2
Aula 14 - Arte sequencial em Propaganda - parte 2Aula 14 - Arte sequencial em Propaganda - parte 2
Aula 14 - Arte sequencial em Propaganda - parte 2Danilo Aroeira
 
Aula 02 - Princípios da Gestalt
Aula 02 - Princípios da GestaltAula 02 - Princípios da Gestalt
Aula 02 - Princípios da GestaltDanilo Aroeira
 
Aula 01 direcao_de_arte_intro
Aula 01 direcao_de_arte_introAula 01 direcao_de_arte_intro
Aula 01 direcao_de_arte_introDanilo Aroeira
 

Mais de Danilo Aroeira (10)

Propaganda: conceitos básicos
Propaganda: conceitos básicosPropaganda: conceitos básicos
Propaganda: conceitos básicos
 
Como montar um portfolio?
Como montar um portfolio?Como montar um portfolio?
Como montar um portfolio?
 
Palestra identidade visual
Palestra identidade visualPalestra identidade visual
Palestra identidade visual
 
Aula 14 - Arte sequencial em Propaganda - parte 2
Aula 14 - Arte sequencial em Propaganda - parte 2Aula 14 - Arte sequencial em Propaganda - parte 2
Aula 14 - Arte sequencial em Propaganda - parte 2
 
Aula 11 cor
Aula 11 corAula 11 cor
Aula 11 cor
 
Aula 05 outdoor
Aula 05 outdoorAula 05 outdoor
Aula 05 outdoor
 
Aula 04 inspiração
Aula 04 inspiraçãoAula 04 inspiração
Aula 04 inspiração
 
Aula 03 layout
Aula 03 layoutAula 03 layout
Aula 03 layout
 
Aula 02 - Princípios da Gestalt
Aula 02 - Princípios da GestaltAula 02 - Princípios da Gestalt
Aula 02 - Princípios da Gestalt
 
Aula 01 direcao_de_arte_intro
Aula 01 direcao_de_arte_introAula 01 direcao_de_arte_intro
Aula 01 direcao_de_arte_intro
 

Aula 13 - Arte sequencial em Propaganda - parte 1

  • 1. ARTE SEQUENCIAL EM PROPAGANDA – PARTE 1 Banners de internet Danilo Aroeira danilo@ad.art.br www.ad.art.br
  • 2. BANNERS GRÁFICOS DE INTERNET Idéia simples, textos rápidos e diretos Limitação de formato e peso (em Kb) do arquivo final Possibilidade de interação com o usuário SEMPRE estar atento ao veículo (site onde será publicado o banner), já que formato e especificações técnicas variam de um para o outro.
  • 3. BANNERS GRÁFICOS DE INTERNET •EXEMPLOS DE FORMATOS Retângulo • 300x250 pixels • Peso máximo: 30Kb • Relativamente grande: bom espaço para o layout • Comumente localizado nas laterais do web site ou portal
  • 4. BANNERS GRÁFICOS DE INTERNET •EXEMPLOS DE FORMATOS Bigbanner • 980x90 pixels • Peso máximo: 30Kb • Relativamente grande, mas estreito: difícil de layoutar. Bom para textos. • Comumente localizado no topo do web site ou portal
  • 5. BANNERS GRÁFICOS DE INTERNET •EXEMPLOS DE FORMATOS Superbanner • 728x90 pixels. Um dos mais usados • Peso máximo: 30Kb ou 20Kb • Relativamente grande, mas estreito: difícil de layoutar. Bom para textos. • Comumente localizado no topo do web site ou portal
  • 6. BANNERS GRÁFICOS DE INTERNET •EXEMPLOS DE FORMATOS Skycraper • 120x600 pixels • Peso máximo: 20Kb • Sempre localizado nas laterais do web site ou portal
  • 7. BANNERS GRÁFICOS DE INTERNET •EXEMPLOS DE FORMATOS DHTML (floater) • Existem vários formatos para essa mídia, que varia bastante. Um dos mais comuns é o de 250x250 pixels ou 400x400 pixels (normalmente, quadrado). • Peso máximo: variável • É um banner que “sobrevoa” o site por um determinado período de tempo
  • 8.
  • 9. BANNERS GRÁFICOS DE INTERNET •EXEMPLOS DE INTERAÇÃO COM O USUÁRIO E RICH MEDIA A animação acontece a partir de uma ação do usuário A informação é revelada após a ação do usuário (expansível)
  • 10. BANNERS GRÁFICOS DE INTERNET •EXEMPLOS DE INTERAÇÃO COM O USUÁRIO E RICH MEDIA O usuário é convidado a interagir através de um game
  • 11. BANNERS GRÁFICOS DE INTERNET •EXEMPLOS DE INTERAÇÃO COM O USUÁRIO E RICH MEDIA Wario Land for Wii
  • 12. BANNERS GRÁFICOS DE INTERNET •EXEMPLOS DE INTERAÇÃO COM O USUÁRIO E RICH MEDIA Entrevista com Stallone
  • 13. BANNERS GRÁFICOS DE INTERNET O diretor de arte não precisa saber produzir ou programar, mas é indispensável que conheça as possibilidades oferecidas pela tecnologia para criar para a internet. É preciso mostrar, a quem for a peça, como deve ser executada a idéia que você teve. Storyboard: sequencia de imagens estáticas que simulam o que deve ocorr
  • 14. BANNERS GRÁFICOS DE INTERNET Storyboard
  • 15. MAIS REFERÊNCIAS DE FORMATOS E ESPECIFICAÇÕES TÉCNICAS http://anuncie.globo.com/mediakit/globocom /formatos.html http://www.publiabril.com.br/especificacoes -tecnicas/internet http://publicidade.uol.com.br /tabelaFormatos.html