Olá grandes amigos! Primeiramente desculpe pela minha ausência com a coluna na última semana. Tive alguns problemas pessoais que agora já estão se resolvendo, graças a Deus.

Caso tenham me enviado e-mails e eu não respondi, por favor reenviem sua dúvida para meu outro e-mail pessoal (fabio_lody@yahoo.com.br). Estou voltando normalmente também a postar imagens em meu Fotolog (www.fotolog.net/fabiolody). Qualquer dúvida em relação às imagens postadas, entrem em contato.

Antes de iniciar a matéria, eu so gostaria de corrigir um pequeno erro na matéria "Cabelos Rebeldes". No 7º Passo eu alterei o nome da ferramenta, onde o correto seria "Dodge Tool".

Dando sequência à nossa lista, hoje iremos ver falar sobre fundos para Banners!

Antes de tudo precisamos ver quais tipos de banner iremos trabalhar. Os espaços mais utilizados são o topo da página, para full banners e os botões, que são banners menores, localizados em espaços alternativos, na lateral ou ao final do layout.

Os banners botões tem o tamanho padrão de 88x31. Abaixo temos 3 exemplos, cedido pelo usuário VBA de nosso fórum.

Outros banners botões, um pouco maiores, são os de 120x60 pixels.

Já os full banners, mais tradicionais, tem 468x60 pixels.

Vamos lá!

Criando banners

Descrição: Explicação sobre como criar fundos para banners
Software ultilizado: Photoshop 7.0 em Inglês (Funciona em qualquer versão)
Grau de Dificuldade: 7,5
Ao som de: Juno Reactor/Don Davis - Tetsujin

1º Passo: Crie um arquivo em RBG de 468x60 pixels, com fundo transparente (a escolha do fundo fica a escolha do criador, já que também podemos usar branco como cor inicial). Em seguida pressione "D" para as cores voltarem ao padrão. Como podemos ver, o próprio Photoshop já possui uma configuração de tamanho presente para banners.

2º Passo: Em seguida, vá na barra de Opções: Window > Documents > New Window

Fazendo isso, estamos criando mais uma visualização para nosso arquivo. Como já disse aqui, gosto muito desse recurso do Photoshop, já que podemos visualizar ao mesmo tempo nosso documento em modos de zoom diferentes. Isso ajuda muito quando precisamos nos preocupar com os detalhes. Posicione onde quiser.

3º Passo: Nesse momento já temos o arquivo base criado. Agora precisamos do principal: as idéias. No meu caso, como farei um banner da própria coluna, utilizarei branco como fundo e um logo do iMasters para a primeira ação.

Repare que, por enquanto, a única coisa que fiz foi posicionar um logo. Pressionando "CTRL+T" para ablitarmos as opções de transformação na imagem, segure o "SHIFT" e, clique e arraste para diagonal aumentando assim o tamanho do objeito.

Pela seta indico suas pontas onde digo para arrastarmos, caso queira aumentar seu objeto. Claro que haverá estouro de pixels, já que estamos alterando seu tamanho sem mexer em sua quantidade de Dpis. Mas usaremos a imagem com uma opacidade grande, ficando, desta forma, quase imperceptivel a perda.

4º Passo: Note que posicionei a imagem ampliada e reduzi sua opacidade nas propriedades da imagem.

5º Passo: Adicionei novamente a camada com o logo e note quanto é importante o "2º Passo". Perceba que estou escolhendo a fonte a ser usada. Acima, a janela ampliada e com a escolha da fonte. Já um pouco mais abaixo, o banner final.

6º Passo: Já com as fontes definidas e posicionadas, resta somente o movimento. A base para nosso banner está pronta. Claro que até esse ponto parece fácil, já que o mais dificil é considerado o movimento que veremos na próxima matéria.

7º Passo: Usando a mesma quantidade de camadas e as mesmas idéias, fiz o button e o banner lateral.

Agora vamos criar outros tipos de fundos para os nossos banners. Geralmente, a grande sacada em fundo de banners, como por exemplo "hightech", que são muito pedidos por e-mail, seria saber lidar bem com blending option, opacity e masks. Vamos agora ver um pouco sobre isso.

Hightech - 01

8º Passo: Repita o 1º Passo, mas desta vez com background Branco.

9º Passo: Vá em Filter > Render > Difference Clouds. Agora aplique novamente o filtro configurado por 5 vezes pressionando "CTRL+F".

10º Passo: Agora em: Filter > Stylize > Find Edges.

Sua imagem ficará assim:

11º Passo: Seguindo: Image > Adjustments > Invert "Ctrl+I".

12º Passo: Vá em: Image > Adjustments > Levels "Ctrl+L" e siga as configurações a seguir:

Nesse ponto, estaremos trabalhando uma imagem parecida com esta:

13º Passo: Vamos em: Image > Adjustments > Hue/Saturation... "Ctrl+U" e hablite a opção "Colorize". Altere as configurações para:

Hue: 184
Saturation: 25
Lightness: 0

14º Passo: Agora vá em: Layer > Duplicate Layer, para duplicar sua camada e repita o "13º passo", alterando suas configurações para:

Hue: 36
Saturation: 98
Lightness: +5

15º Passo: Em blending Option, altere sua propriedade como a seguir:

Pronto terminamos o primeiro:

Aqui com algumas fontes:

16º Passo: vamos para mais um: Repita o "8º Passo"

17º Passo: vá em: Filter > Render > Clouds

18º Passo: Agora em Filter > Noise > Add Noise

19º Passo: Vamos lá em Filter > Blur > Radial Blur

Sua imagem ficará assim:

20º Passo: Repita o "13º Passo" mas altere suas configurações para:

Hue: 223
Saturation: 30
Lightness: -8

21º Passo: Pressione "CTRL+L" e altere suas configurações como na imagem abaixo:

Terminamos o segundo:

Aqui com algumas fontes e brushes:

Ufa! É isso aí meus amigos. Aa semana que vem veremos mais fundos e como aplicar movimento a nossos banners. Espero que tenham gostado. Um abraço e sucesso a todos.