/Design

voltar
/Design

Banners

PorFabio Lody em

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 88×31. Abaixo temos 3 exemplos, cedido
pelo usuário VBA de nosso fórum.



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

Já os full banners, mais
tradicionais, tem 468×60 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 468×60 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.

Deixe um comentário! 21

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Comentando como Anônimo

  1. Opa! Q baita trabalho, hein, Lody? Puxa… bom, mas tem como fazer uma interação PS e Im.Ready com gifs do tipo ‘rollover’, qdo fica onmouseover permuta a figura…

  2. nunca consigo encontrar onde fica os filtros qdo vc’s postam em ingles já que tenho meu PS em portugues … não tem como vcs fazerem alguma tradução ou colocar junto em portugues qdo vc’s postarem?

  3. Fala Fabião, eu sou um grande admirador da sua coluna no imastes e é a primeira vez que escrevo! Gostaria de saber um pouco mais sobre efeitos diferentes de luzes, e umas neblinas legais que aparecem na imagem final da sua ultima coluna de efeito luzes.
    abraçaum!

  4. Conheci o site a pouco tempo. E acho ele muito bom, com dicas importantes, principalmente pra quem ta começando a trabalhar com Photoshop e Corel como eu. Parabens pelo excente trabalho. Sucesso a toda equipe do Imasters!

  5. olá! =) ja faz um tempinho q eu leio esta coluna, que eh mto boa por sinal, e eh a primeira vez q estou comentando. Estou com uma duvida, acho q aqui não eh o lugar certo, eu ñ consigo usar o imagem ready, qndo eu altero algo em um frame a mudança tambem fica nos outros. sera q vc pode me ajudar? obrigada!

  6. Bruna.

    Quando você estiver trabalhando com o ImageReady e ocorrer de uma alteração numa das camadas fizer com que todas as demais também se modifiquem, basta você selecionar todas as outras que vc não deseja que fiquem daquela forma, e na paleta de camadas, deixar invisível o objeto indesejado.

    Abraço!
    Rodrigo

  7. Obrigado Fernando e Rodrigo por ajudar nossa amiga Bruna…
    eu ainda estou sem net e por isso nao tenho aceesso diario mas ate semana que vem tudo se resolvera
    um abraço a todos amigos.. qqer coisa me mandem email

  8. Caro Fábio, acompanho sempre sua coluna do Photoshop e parabenizo pelo pelo vasto conhecimento técnico da ferramenta, mas, sinceramente, não sei como você se sente motivado a assinar os trabalhos que você usa para ilustrar a coluna. Acho que além de se dedicar à ferramentas “digitais” de Design, você deveria se dedicar a outras ferramentas de trabalho como: tipografia (cara, você escolhe muito mal suas fontes), história do design gráfico (referências não faz mal a ninguém), teoria da percepção visual e linguagem visual. Não sei se você se considera um designer, mas, o conhecimento que sugeri o aproximaria bem mais de quem tarabalha sob a condição de designer. Mesmo assim parabéns pelo dominio (quase) pleno do Photoshop, continuarei a ler sua coluna com o prazer das informações e o desprazer de ver os trabalhos que você assina.

  9. Fabio! Sou um grande fã do seu trabalho. Todas as semanas vejo os exemplos e faço em casa. Mas na materia dos banners eu não consegui fazer, pois o meu photoshop esta em português e o teu sexemplo esta em inglês. Eu me perdi em algumas partes e não consegui fazer. Será que seria possivel você me enviar esse mesmo exemplo no photoshop português? Estarei aguardando uma resposta. Um abraço.
    O meu e-mail é arend2004@hotmail.com

  10. Olá amigo Marcio como vai? Primeiramente obrigado pelo acesso em minha coluna e por alguns elogios. Bom vamos lá.
    Eu me sinto motivado a assinar minha coluna simplesmente pelo prazer de passar o pouco que sei a pessoas que ou não tem dinheiro suficiente para fazer um curso ou tem muitas duvidas que alguns cursos por ai nao solucionam simplesmente por isso. Considero todo conhecimento adicional valido principalmente quando posso ajudar pessoas e melhor… de graça! Em relação ao que disse a tipografia depende do gosto pessoal em alguns casos por exemplo: ( está materia quis mostrar somente fundos e fontes mais futuristas para sites mais dispojados ou hitechs, agora na materia banners – III que provavelmente sera publicada hj vc percebera que me preocupei mais em passar informacoes importantes sobre o Adobe ImageReady e a respeito de banners um pouco mais profissionais entao achei que se precipitou ja que eu havia dito que publicaria a “série – banners” em outra materia que voce provavelmente nao leu e restava a ultima materia. Em relacao a ser Designer claro que nao sou principalmente porque nao sou formado em Design ou PP, MK ou cursos superiores que abordam mais esse lado. Só por curiosidade faço Engenharia da Computação e volto a repetir eu apenas tento passar algum conhecimento a quem procura. Bom de qualquer forma muito obrigado pelas criticas pois enobrece e espero que seu desprazer passe =D .
    qualquer coisa por favor me mande email
    Abraço meu amigo e sucesso pra ti

  11. Amigo Fabio ( se é que posso te chamar assim) meus parabens pelo seu trabalho pois o acompanho a muito tempo e ficofeliz que existam pessoas assim dispostas a ajudar sem cobrar nada pessoas assim como eu que nao tem condicoes reais de pagar um bom curso . Sei que faz o que pode e por isso o meu Muito Obrigado.
    Ah e Marcio, poxa meu colega graças a Deus a Internet é meio de comunicação que podemos desligar ou acessar oque nos convem…aceito sua opniao mas de meritos a quem nos passa conhecimento!

  12. Muito legal esta matéria Fábio, muito interessante, gostaria que vc (se for possível) fale um pouco de criação de actions, trabalhar com demarcadores e efeitos rápidos no photoshop um forte abraço e continue assim.

  13. Fabio tem como vc repassar o nome das fontes que vc usa ou entao disponibilizar no final do artigo o download das fontes?? valeu ae e os artigos tão shows..

  14. Olá Fábio td bem? Preciso fazer um banners sobre soja para um evento,gostaria de receber de vc algumas dicas que tenho certeza que serão úteis. Obrigada

    Aline Paes

leia mais