Como fazer um banner para site no Fireworks

02/05/2011 16:24
Sistema de Afiliados - Ganhe Dinheiro com Seu Site - Cursos 24 Horas

 

 

Neste exemplo vamos usar um jogador do Barcelona para fazer um banner que seguindo o exemplo pode ser usado para criar outros banners.

 

Então vamos lá neste banner usamos duas imagens, sendo elas:

Jogador | Time

Fonte usada: Royfont

Resultado esperando:

 

ATENÇÃO: O jogador da imagem não corresponde ao texto, isso foi criado como forma de ironia por conta de um leitor do site.

Inicialmente crie um documento de 850x180 px, depois pegue a imagem do time alinhe ao centro, recorte o jogador e coloque no canto esquerdo do banner, ficando assim:

 

 

Agora vamos criar as ondas que aparecem na parte inferior do banner, para isso selecionaremos a ferramenta Pen Tool (ou o atalho que é P), então vamos criar uma linha reta dando um clique no canto esquerdo da tela e pressionando shift e posteriormente clicando no centro da tela, como explica a imagem abaixo:

 

Vamos agora clicar com a Pen Tool no segundo quadrado que aparece na linha que desenhamos acima agora vamos deslizar o mouse para cima depois para baixo e fixando o clique, depois só é fechar a figura e pinta-lá de branco, como explica a imagem abaixo:

Depois da primeira onda criada devemos agora regular a opacidade, eu recomendo que a primeira onda tenha 30% de opacidade, depois disso devemos copiar e colar mais ondas e ir regulando a opacidade, porém o recomendado é de 10 á 30% podemos ver isso na imagem abaixo:

Agora vamos criar o texto e adicionar o efeito incluído no mesmo, usaremos um tom de dourado (#CC9900):

Como mostrado acima usamos dois efeitos no texo Drop Shadow e Inner Glow, para isso devemos selecionar o texto e em seguida irmos ao menu Filters clicar no  botão “+” selecionar Shadow and Glow>Drop Shadow e ok, depois clique em “+” novamente e selecione Shadow and Glow>Inner Glow porém lembre-se de mudar a cor para amarelo (#FFFF00).

Você gostou do tutorial? Comente e mostre o que você fez a partir do mesmo.

Após ter lido e trabalhado este tutorial e este você estará capacitado a criar este layout: Layout Simples. 

Por: Lucas Rangel