Pesquisar

sábado, 3 de dezembro de 2011

Tutorial Banners

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:


Fonte: http://www.imasters.com.br

Nenhum comentário:

Postar um comentário