Mostrando postagens com marcador Tutorais. Mostrar todas as postagens
Mostrando postagens com marcador Tutorais. Mostrar todas as postagens

domingo, 25 de abril de 2010

Banners Publicitários

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

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:

Organização dos layers
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.

Efeito trapézio
Fig. 02: Efeito trapézio 1

Configuração do efeito
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] ):

Efeito trapézio 2
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.

Efeito 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.

Efeito raios com filtro
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.

Barras
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.

Barras com efeito
Fig. 08: Acabamento do objeto

Resultado
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:

Efeito ondas
Fig. 10: Efeito ondas

E está aí o resultado:

Resultado
Fig. 11: Resultado do tutorial


Fonte: http://www.mxstudio.com.br/fireworks/banners-publicitarios-parte-3/