Banners Publicitários: Parte 2
Coluna Fireworks – Banners Publicitários – Parte 2
2ª parte da série de publicações sobre “Criação de Banners Publicitários” utilizando o Fireworks CS3.
IntroduçãoPrimeiramente, recomendo que antes de iniciar este tutorial, veja o Banners Publicitários – Parte 1.
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
O formato escolhido para este 2º tutorial da série será o com dimensões 160×600 px, chamado de Wide Skyscraper, um banner vertical porsicionado nas laterais de grandes portais.
Conteúdo
Como no tutorial passado, vamos iniciar com um briefing sobre um cliente, tentando traduzir suas necessidades para o banner.
Cliente: CarlosHPS Cursos On-Line
Briefing: A CarlosHPS Cursos On-Line atua no ramo EAD (Educação a Distância) desde 2006. Seu foco é criar e gerenciar cursos on-line nas mais diversas áreas do conhecimento, mas com prioridade em treinamentos voltados para a área de Webdesign. Sua metodologia de ensino é dinâmica e, através de vídeo-aulas, fóruns, chats, grupos de estudo, correçãos individual de trabalhos e exercícios, tornam seus cursos mais personalizados, agradando seus cursistas.
A empresa deseja colocar um banner Skyscraper em grandes portais para divulgar, principalmente, seu curso Criação de Sites Profissionais. E divulgar, em segundo plano, seu curso gratuito – Como Criar um Currículo Profissional. Este é voltado para quem deseja elaborar um bom currículo e melhorar suas chances de conquistar um emprego; aqueles é destinado as pessoas que buscam conhecer todas as etapas de desenvolvimento de um sites, saber como otimizar os aplicativos Dreamweaver, Fireworks e Flash ou ter a intenção de se tornar um Webdesigner.
A empresa também quer divulgar o curso novo – Produção Gráfica na Web, que tratará de como devemos produzir e criar imagens para Internet como banners, layouts, hot sites e afins.
Uma observação da empresa: ela deseja algo tradicional como se fosse uma lâmina impressa utilizada como marca-página em livros, porém com estilo.
Parte 1 – Criação do Background Estilo Windows Vista
Um fundo bem elaborado ajuda ao desenvolvedor em sua criação, e por se tratar de cursos on-line que remetem à tecnologia, utilizar o estilo aplicado pelo Windows Vista, é uma boa opção.
1 – Organização
a) Vamos iniciar com organização, criando pastas e subpastas de trabalho no Fireworks como mostra a imagem abaixo:
Fig. 01: Organização das camadas
b) Clicando na pasta Borda, criaremos um retângulo com as dimensões do banner 160×600 px; com a cor cinza (#999999); borda de 1pt e cantos arredondados (10).
Fig. 02: Configurações da borda do banner
c) Façamos uma cópia do retângulo, cliquemos na pasta Fundo e colemos a cópia. Para facilitar nosso trabalho, vamos bloquear a pasta borda, deixando as outras livres.
Fig.03: Camada bloqueada
d) Utilizando o retângulo anterior, vamos inserir um preenchimento gradiente laranja (#FFCC00) no centro e branco (#FFFFFF)nas extremidades, com raio no canto superior esquerdo e com as seguintes propriedades:
Fig. 04: Preenchimento Radial
e) A camada deve ter opacidade de 60%.
Fig. 05: Opacidade
A imagem deve ficar parecida com esta:
Fig. 06: Resultado do preenchimento
f) Vamos duplicar esta camada, retirar a borda e colocá-la sobre a anterior. Em seguida, aplicar um efeito gradiente Linear de #3399CC para #FFFFFF horizontal. O resultado esperado é:
Fig. 07: 2ª camada de preenchimento
g) Fazendo novamente uma cópia do retângulo anterior, vamos criar mais um efeito. Um gradiente Linear vertical de #33CC33 para #3399CC e Blend Multiply.
Fig. 08: 3ª camada de preenchimento
h) E para completarmos, façamos outra cópia do retângulo anterior e em seguida apliquemos um gradiente Radial de #FFFFFF (opacidade 100%) para #FFFFFF (opacidade 0%), na parte superior do banner. Esta camada deve ter 75% de opacidade com Blend Overlay.
Fig. 09: 4ª camada de preenchimento
Vejamos o resultado até agora (clique na imagem para ampliá-la):
Fig. 10: Resultado parcial
i) Com outra cópia do retângulo anterior, vamos continuar nossa aplicação de efeitos. Com um Gradiente Radial um pouco acima do centro do retângulo e com opacidade 40% com Blend Overlay, apliquemos as cores de #FFFFFF (centro 100%, externo 0%).
Fig.11: 5ª camada de preenchimento
j) Duplicando novamente a camada anterior, aplicaremos um radial no centro do banner com a cor #003300 (centro 0%, externo 100%), opacidade 20% e Blend Overlay.
Fig. 12: 6ª camada de preenchimento
k) Duplicando a camada anterior, basta alterarmos a opacidade de 20% para 55% afim de darmos um efeito mais “dark”.
Vejamos o resultado até aqui (clique na imagem para ampliá-la):
Fig.13: Resultado parcial
Bom, pessoal, no próximo tutorial concluiremos este banner.
Um grande abraço.
Autor: CarlosHPS Webdesigner – Colunista Fireworks do Portal MXSTUDIO
Não deixem de me fazer uma visita em meu Blog – www.carloshps.com.br/blog e ao meu portfólio – www.carloshps.com.br/portfolio
Escrito por CarlosHPS Webdesigner
on abril 28, 2008. Arquivado em Fireworks.
Você pode seguir as respostas a esse artigo pelo RSS 2.0.
Você pode deixar respostas para esse artigo
Últimos Comentários