Banners Publicitários: Parte 1

Hoje dou início à série de publicações sobre “Criação de Banners Publicitários” utilizando o Fireworks CS3.

Introdução

Criar peças publicitárias para web requer não só o domínio do desenvolvedor perante algum editor gráfico, mas também, do seu entendimento sobre marketing, comunicação, estatística, metas, projetos aplicativos, etc. Mas o intuito primordial desta série é mostrar como, através de um briefing bem elaborado, podemos desenvolver banners de publicidade utilizando o Fireworks CS3.

Pré-Requisitos

• Facilidade com o manuseio do Fireworks CS3
• Entendimento básico sobre briefing (maiores informações, acesse: BRIEFING)

Objetivo

• Criar um banner publicitário utilizando Fireworks CS3 e obedecendo formatos padrões para web.

Conceito

Para alguns, na Internet vale tudo e todos os formatos quando o assunto é publicidade. Mas não é tão bagunçado assim não, pessoal. Existem normas técnicas e padrões que foram estabelecidos por órgãos competentes, no intuito de propagar a lei dos bons costumes éticos, profissionais, visuais… Portanto, conhecer os formatos empregados na web é o mínimo que um bom desenvolvedor precisa saber.

Num banner publicitário precisamos harmonizar:

1. a sensação, que está sendo transmitida pelas imagens, pela diagramação, pelo formato;
2. a identificação que possibilitará ao usuário saber quem lhe proporcionará tais emoções subtendidas no item anterior;
3. as chamadas personalizadas que procuram tratar o usuário com personificação, parecendo que aquele chamado foi feito especialmente para ele;
4. as condições (regras e/ou pré-requisitos) para que tudo o que foi estimulado pelo banner, seja concretizado.

O formato escolhido para este tutorial será o 300×250 px, chamado de PopUp-Banner, um “banner flutuante“.

Conteúdo

Para iniciarmos, primeiro vamos analisar o briefing do cliente abaixo e, baseados em suas informações, traduzir tudo e colocar a “mão na massa”. Lembrando que é apenas uma ilustração, porque na realidade, quanto mais dados (relevantes), melhor.

Cliente: Hotel CarlosHPS Star

Briefing: O Hotel CarlosHPS Star atua no ramo hoteleiro há apenas 3 anos na Região das Águas Quentes, na cidade de Caldas Novas, em Goiás. Ainda buscando seu espaço, o hotel vem crescendo progressivamente, oferecendo serviços de qualidade inquestionáveis, o que garante uma ocupação média de 65% durante o ano. Sua missão, em suma, resume o que a empresa é, pois busca oferecer o melhor atendimento no ramo de hotelaria em toda a região. Com apartamentos aconchegantes, parque aquático com águas termais, estacionamento privativo, recreação para adultos e crianças, o Hotel CarlosHPS Star, prima pelo conforto e harmonia entre casais em lua de mel e famílias visitantes.

Na Internet, para o feriado de 7 de setembro (Independência do Brasil), o hotel deseja atrair mais visitantes, conseqüentemente, aumentando a taxa de ocupação. Ele quer despertar nos usuário da web um sensação de alegria, harmonia e aconchego que o hotel pode proporcionar no feriado. Também faz questão de exibir seu patriotismo e dever civil em lembrar que o feriado trata-se da independência do nosso país.

Bom, pessoal, este é o briefing (resumido, claro) do hotel. Agora vamos à transpiração…rsrs

Parte 1 – Escolha das imagens

Baseado no que o cliente ofereceu, aliado à nossa criatividade, vamos associar o patriotismo com a sensação de bem-estar em poder estar no hotel. Por isso, as fotos escolhidas estão abaixo (clique para baixá-las):

Parte 2 – Configuração básica no Fireworks CS3

1 - Vamos criar um novo documento com as dimensões do banner, 300×250 px.

2 – Em seguida, um retângulo (sem preenchimento) com as mesmas dimensões do banner (300×250 px) que servirá de borda. A cor da borda deve ser um tom de ver escuro (#003300).

Fig. 01: painel de propriedades

Parte 3 – Tratamento da foto do casal

A foto do casal está bastante opaca, sem brilho. Vamos melhorá-la um pouquinho.

3 – Insiramos a foto no documento (Ctrl+R), selecionemos-a e redimencionemos-a (Ctrl+Shift+T) de acordo com a figura abaixo:

Fig. 02: redimensionamento com Numeric Transform

O posicionamento da foto deve ficar aproximadamente da seguinte forma (abaixo da camada da borda):

Fig. 03: ajuste da foto à borda

4 – Com a foto selecionada, vamos ajustar os níveis de coloração da imagem, utilizando filtros. Acessemos o menu Filter > Adjust Color > Levels…

Fig. 04: níveis de coloração

Observemos a diferença após aplicação do filtro:

Fig. 05: foto após filtragem

Parte 4 – Manipulação com a bandeira do Brasil

A idéia é mesclar a foto do casal à bandeira do Brasil, mas de uma maneira suave. Para isso, vamos utilizar o comando Fade.

5 – Importemos a bandeira para o documento (Ctrl+R) e, dimensionando-a e rotacionando com as alças de transformação livre (Q), posicionemos a bandeira, aproximadamente, de acordo com a figura:

Fig. 06: redimensionamento, rotação e posicionamento da bandeira

Lembrando que a bandeira também deve ficar abaixo da camada da borda.

6 – Com a imagem selecionada, vamos acessar o menu Commands > Creative > Fade Image para aplicarmos um efeito de transparência na bandeira.

Fig. 07: aplicação do efeito Fade Image

7 – Devemos configurar o eixo de rotação e de extensão da transparência, aproximadamente, como mostra a figura:

Fig. 08: ajustes do efeito Fade Image

Até aqui, de acordo com o que vimos nos conceitos, conseguimos passar boas sensações através da montagem feita com as imagens. Agora, quem estiver tiver sido “tocado” pela diagramação, desejará saber quem irá proporcionar tais sentimentos. É aí que entra a identificação do hotel através de seu logotipo.

Parte 5 – Ajustes do logotipo à montagem

8 - Vamos importar (Ctrl+R) o logotipo do hotel ao documento e fazer os devidos ajustes de acordo com a figura a seguir:

Fig. 09: Inserção do logotipo

Parte 6 – Chamadas

A utilização das chamadas personificadas nada mais são do que a aplicação textual ao banner. Nada muito extenso. O importante é ser curto e direto, ou seja, extremamente objetivo. Outra preocupação é com a tipografia. Ela tem que ser clara e “entendível”. Nada de “firulas”, pois o usuário terá poucos segundos para ler o banner e se ele não entender o que leu, tudo o que foi feito até agora foi em vão.

Vejamos a aplicação das chamadas ao banner.

9 - Primeiramente, vamos inserir uma estrela (preenchimento branco e sem bordas) que servirá de fundo para o número 7 da chamada “7 de setembro”.

Fig. 10: desenhando estrela

Fig. 11: estrela inserida no banner

10 – Agora, colocaremos o texto:

Fig. 12: texto “7 de setembro”

Como vemos, o texto está “sumido”. vamos incrementá-lo com alguns efeitos simples.

11 – Selecionemos o texto e apliquemos um pouco de sombra:

Fig. 13: Aplicação de sombra

Fig. 14: propriedades da sombra

12 – Utilizando um recurso exclusivo do Fireworks CS3, aplicaremos o filtro Photoshop Live Effects:

Fig. 15: Photoshop Live Effects

Fig. 16: propriedades Photoshop Live Effects

O resultado até aqui é este:

Fig. 17: Resultado da aplicação de filtros

E complementando esta etapa, teremos:

Fig. 18: Complementação da chamada

Parte 7 – Condições

Para finalizarmos o nosso banner publicitário e evitarmos um processo por propaganda enganosa, é extremamente importante, mesmo que em letras miúdas, avisar ao usuário sobre as condições para que aquela chamada seja verdadeira e concretizada.

Neste momento é que inserimos:

• Período de vigência: “para hospedagem de 4 a 7 de setembro de 2008″
• Pré-requisitos: “Mínimo de 3 noites”
• Pagamento: “somente para pagamento em cartão de crédito ou à vista”
• Valor Total: deve constar, de acordo com o PROCON, o total do valor que foi parcelado
• Validade: “Promoção válida até 30/07/2008″

Tudo isso, gente, é para evitarmos transtornos e garantirmos a seguridade do nosso cliente, o que gera confiabilidade e credibilidade.

Caso haja muitas condições, é interessante colocar o famoso asterisco “*” e mencionar que o usuário acesse o site da empresa para visualizar as condições que regem a a campanha publicitária. Então, observando esse critério, complementaremos nosso banner da seguinte maneira:

Fig. 19: condições gerais

E o resultado final, simulando a exibição do banner em uma janela pop up, seria este:

Fig. 20: resultado final

Considerações Finais

Uma dica importante: tentem visualizar o trabalho já concluído. Eu sei que às vezes pode parecer difícil e até mesmo impossível, mas o desenvolvedor sempre tem que ter uma idéia formatada na cabeça, um esboço de como ficará o resultado final.

Um grande abraço e até a próxima.

CarlosHPS Webdesigner

Não deixem de me fazer uma visita ao meu portfólio – www.carloshps.com.br/portfolio