Banners Publicitários: Parte 3

• Tweet
• Sharebar

• Tweet

3ª parte da série de publicações sobre “Criação de Banners Publicitários” utilizando o Fireworks CS3.

INTRODUÇÃO

Como se trata de uma série, é essencialmente importante que, antes de iniciar esta matéria, você tenha visto a 2ª parte.

PRÉ-REQUISITOS

• Facilidade com o manuseio do Fireworks CS3
• Entendimento básico sobre briefing (maiores informações, acesse: BRIEFING)
• Ter feito o tutorial Banners Publicitários: Parte 2

OBJETIVO

Dar continuidade a criação um banner publicitário utilizando Fireworks CS3 e obedecendo formatos padrões para web.

CONCEITO

Relembrando, o formato escolhido para este 3º 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. Este banner é a continuação do tutorial anterior.

CONTEÚDO

Vamos concluir a criação dos efeitos no fundo deste banner para, em seguida, podermos inserir o conteúdo.

1- Organização

No painel Layers (Camadas), insiramos uma nova pasta (Efeitos – ela deve estar acima da pasta Fundo) e subpastas como na figura abaixo:

Fig. 01: Organização dos layers

2 – Efeito Trapézio 1

Vamos criar um efeito com a figura geométrica de um trapézio (devemos selecionar a pasta Trapézio 1 antes de criarmos a figura) utilizando a ferramenta Pen tool(caneta [P] ). Como a imagem exibe abaixo, façamos a geometria com borda na cor branca e preenchimento gradiente linear #FFCC00 para #FFFFFF.

Fig. 02: Efeito trapézio 1

Fig. 03: Configuração do efeito

3 – Efeito Trapézio 2

a) Vamos criar uma cópia do trapézio anterior e colá-la na camada Trapézio 2.

b) Em seguida, posicionemos a cópia como mostra a figura a seguir, utilizando a ferramenta Subselection tool (Subseleção [A] ):

Fig. 04: Efeito trapézio 2

4 – Efeito Raios

Agora, utilizando uma mesclagem entre as ferramentas pen tool e subselection tool, vamos criar imagens que pareçam com raios. Mas antes, não esqueçamos de clicar na camada Raios.

Fig. 05: Efeito Raios

Dica: devemos variar as cores de cada raio juntamente com sua opacidade (20 a 50%). Além de aplicarmos o filtro Overlay.

Fig. 06: Aplicação de opacidade e filtro

5 – Efeito Barras

Vamos trabalha agora com efeito em barras.

a) Primeiramente, criaremos três retângulos idênticos, na cor branca, e os colocaremos na base do banner.

Fig. 07: Retângulos idênticos

b) Com os três selecionados, vamos transformá-los em um objeto apenas, unindo-os. Para isso, devemos acessar o menu Modify > Combine Paths > Union ou pelo atalho CTRL+ALT+U.

c) Agora, utilizando um gradiente linear conforme a imagem e o filtro Overlay, faremos o acabamento da figura.

Fig. 08: Acabamento do objeto

Fig. 09: Resultado

6 – Efeito Ondas

E para encerrarmos mais esta parte do tutorial, criaremos um efeito de ondas para o banner.

a) Com a camada Ondas selecionada, criaremos uma imagem curva e com as seguintes propriedades:

Fig. 10: Efeito ondas

E está aí o resultado:

Fig. 11: Resultado do tutorial

CONSIDERAÇÕES FINAIS

Bom, terminamos aqui mais uma parte deste tutorial.

Na próxima matéria concluiremos o banner incluindo seu devido conteúdo.

Outra coisa, gente…

As dúvidas devem ser postadas no fórum do MX Studio, no meu blog ou enviadas para o e-mail carloshps@mxstudio.com.br, ok?

Um 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 junho 8, 2008. Arquivado em Fireworks, Web Marketing. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo