segunda-feira, 1 de setembro de 2008

POP-UP BANNER no FIREWORKS

Banner Publicitário – Fireworks
Por Dário S. Andrade.
-Observação: não esqueça de preparar seu briefing
Criar arte publicitária 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, etc.
Para alguns, na Internet vale tudo e todos os formatos quando o assunto é publicidade. Mas não é tão bagunçado assim não. 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.

Em um banner publicitário precisamos harmonizar:
1. Sensação, que está sendo transmitida pelas imagens, pela diagramação, pelo formato;
2. Identificação que proporcionará ao usuário tais emoções subtendidas no item anterior;
3. Chamadas personalizadas que procuram tratar o usuário com personificação, parecendo que aquele chamado foi feito especialmente para ele;
4. 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 300x250 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: SPA & Resort Fazenda MC.
Briefing: Para seu maior conforto, oferecemos uma gama de facilidades e serviços extras, que poderão ser úteis durante a sua estada no SPA & Resort Fazenda MC. Além da completíssima estrutura de lazer e ecoturismo, o SPA & Resort Fazenda MC conta com Heliponto, serviços de traslado interno, Mini-shopping com lojas de conveniência, Shopping Flower, Orquidários, Chocolateria, Room Service, Centro de Beleza e Estética, Nutricionista e Capela.

Na Fazenda MC o lazer é uma experiência indescritível. O Loft possui uma piscina externa climatizada de 350m² e o SPA com todas suas atrações ao lado. São vários locais para pesca, cavalgada e trekking. Além disso, inclui também quadra de tênis, sala de jogos e um incrível campo de golfe. O balão da Fazenda MC é uma atração à parte, pois tem 45 metros de altura e capacidade para 10 pessoas, proporcionando uma viagem inesquecível por este ambiente natural e exótico.

Na Internet, para o feriado de 7 de setembro (Independência do Brasil), o SPA & Resort Fazenda MC deseja atrair mais visitantes, consequentemente, aumentando a taxa de ocupação. Ele quer despertar nos usuário da web uma sensação de alegria, harmonia e aconchego que o SPA & Resort Fazenda MC 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 SPA & Resort Fazenda MC.

Agora vamos à transpiração...

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:








Parte 2 - Configuração básica no Fireworks
1 - Vamos criar um novo documento com as dimensões do banner, 300x250 px.2 - Em seguida, um retângulo (sem preenchimento) com as mesmas dimensões do banner (300x250 px) que servirá de borda. A cor da borda deve ser um tom de ver escuro (#003300)






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:


O posicionamento da foto deve ficar aproximadamente da seguinte forma (abaixo da camada da 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...




Os valores mencionados ao lado pode variar de acordo com a foto escolhida, então faça testes.



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: 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 Comandos > Creative > Dissolver Imagem para aplicarmos um efeito de transparência na bandeira.














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:




Até aqui, de acordo com o que vimos nos conceitos, conseguimos passar boas sensações através da mostagem 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 SPA & Resort Fazenda MC através de seu logotipo.















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, e aplique um efeito d sombra na cor verde.
Identificamos quem é o provedor da sensação. Agora vamos às chamadas.
Parte 6 - Chamadas
A utilização das chamadas personificadas nada mais é 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.
- Primeiramente, vamos inserir uma estrela (preenchimento branco e sem bordas) que servirá de fundo para o número 7 da chamada "7 de setembro".












10 - Agora, colocaremos o texto:
Como vemos, o texto está "sumido". Vamos incrementá-lo com alguns efeitos simples.



11 - Selecionemos o texto e apliquemos um pouco de sombra:
12 - Utilizando um recurso de efeitos vamos aplicar um brilho, na cor amarelo, aplique ainda chanfro e relevo / interiorizar relevo.

E complementando esta etapa, teremos:
















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/09/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:



Bem, por hoje é isso ai, espero que tenham curtido.
Na quarta tem mais.
Até!!!

Nenhum comentário: