iMasters | Por uma internet mais criativa e dinâmica

Terça-feira, 13/07/2004 - 01:59 - Por Fabio Lody
Seções relacionadas:

• Photoshop

• Imprimir
• Indicar
• Digg it
• Del.icio.us
• Twitter
• 19 comentários

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.

Todos os artigos de Fabio Lody

18/05/2009 - Como manipular gelo no Photoshop 16/07/2008 - Manipulando o fogo com o Photoshop 06/06/2008 - Desenhando um iPhone pelo Photoshop CS3 - Conclusão 20/03/2008 - Desenhando um iPhone pelo Photoshop CS3 - Parte 02 28/01/2008 - Desenhando um iPhone pelo Photoshop CS3 - Parte 01 27/11/2007 - Illustrator + Photoshop CS3 13/09/2007 - Atualização - Truques para Tratamento de Imagens 12/09/2007 - Atualização: Truques para tratamento de imagens 02/07/2007 - Monitores LCD, configurações e impressão 03/04/2007 - Trabalhando com Actions 19/01/2007 - Workspace e Smart Objects 06/12/2006 - Novas técnicas para pincéis e Layer Comps 16/10/2006 - Conhecendo a Color Swatches 18/08/2006 - Manipulação e tratamento de foto profissional 24/07/2006 - Explorando o Adobe Bridge 14/06/2006 - Bandeira Brasileira 23/05/2006 - Lunatic Art 26/04/2006 - Quebra cabeça 28/03/2006 - Jumping Out 15/03/2006 - Tornando as pessoas invisíveis 22/02/2006 - Box 3D 24/01/2006 - Efeito CD-ROM 09/01/2006 - Reflexo 20/12/2005 - Feliz Natal! 08/12/2005 - Post it 21/11/2005 - Bordas arredondadas 03/11/2005 - Scripts para Photoshop 06/10/2005 - Dicas e dúvidas 22/09/2005 - Jogando água no Photoshop 06/09/2005 - Criando estilos - Parte 02 01/08/2005 - Back Fire 04/07/2005 - Dicas para criação web no Photoshop 15/06/2005 - Web no Photoshop - Parte Final 31/05/2005 - Web no Photoshop - Parte 03 (Com Galeria) 18/05/2005 - Web no Photoshop - Parte 02 05/05/2005 - Web no Photoshop - Parte 01 18/04/2005 - Arte abstrata - Parte 03 30/03/2005 - Criando Luz Neon - II 14/03/2005 - Criando Luz Neon 02/03/2005 - Criando Estilos 18/02/2005 - Criando shapes 04/02/2005 - Olhos vermelhos e galeria de imagens 27/01/2005 - Abstract Art - Parte 02 26/01/2005 - Texto Grunge - Atualização 14/01/2005 - Abstract Art - Parte 01 06/01/2005 - Entrando no mundo Hitech 22/12/2004 - Enfeite de natal 10/12/2004 - Trabalhando com Fotos 30/11/2004 - Buraco negro 19/11/2004 - Galeria de imagens 10/11/2004 - Cabelos rebeldes - Parte 02 27/10/2004 - Trabalhando com garrafas no Illustrator 26/10/2004 - Papel envelhecido 15/10/2004 - Fundo abstrato - Parte 02 08/10/2004 - Fundo abstrato 30/09/2004 - Half Tone em Texto 23/09/2004 - Efeito Gel 15/09/2004 - Texto Grunge 10/09/2004 - Preparando o Photoshop para web - Final 03/09/2004 - Preparando o Photoshop para web - Parte 03 27/08/2004 - Preparando o Photoshop para web - Parte 02 19/08/2004 - Preparando o Photoshop para web 13/08/2004 - Os blends do Photoshop 04/08/2004 - Gotas em lata de refrigerante 29/07/2004 - Banners - Adobe ImageReady 21/07/2004 - Banners - Parte 02 13/07/2004 - Banners 07/07/2004 - Pixel Art 3D - Atualização 01/07/2004 - Integração e movimentos com o Image Ready - Atualização 28/06/2004 - Efeitos de luz 18/06/2004 - Cabelos rebeldes 08/06/2004 - Especial - Dia dos Namorados 25/05/2004 - Criando uma bola de vidro e trabalhando com relfexo 11/05/2004 - Trabalhando com pedras 27/04/2004 - Trabalhando com madeira 13/04/2004 - Preparando o Photoshop para impressão 29/03/2004 - Integração e movimentos com o Image Ready 15/03/2004 - Perfis de monitores ICC 01/03/2004 - Tratamento de Fotos 16/02/2004 - Máscaras e canais 03/02/2004 - Criando Curvas 22/01/2004 - Pixel Art 3D 12/01/2004 - Pixel Art 31/12/2003 - Congele sua vida 12/12/2003 - Brincando com fogo 04/12/2003 - Adobe Creative Suite: o novo Photoshop CS 25/11/2003 - Recuperando Ferramenta Pincel (Healing Brush Tool) 13/11/2003 - Colorização de Fotos 31/10/2003 - Efeito metálico 21/10/2003 - Efeito Fundo Abstrato 07/10/2003 - Carimbo ou Processamento em Lote 17/09/2003 - Scan Line (Efeito TV) 02/09/2003 - Pen Tool 22/08/2003 - Pincel Brush - Parte 02 04/08/2003 - Pincel Brush 16/07/2003 - Efeitos de fundo 30/06/2003 - Efeitos para banners 17/06/2003 - Efeito máscara (Fade IN) 10/06/2003 - Rádio - 3º Parte 27/05/2003 - Splash Texture 13/05/2003 - Efeito Matrix 05/05/2003 - Textura Aço 25/04/2003 - Texturas 14/04/2003 - Blue Steel 07/04/2003 - Alien Style 29/03/2003 - Textos cromados 14/03/2003 - Botões de plástico ou gel 11/03/2003 - Agora usando a ferramenta Liquify 28/02/2003 - Fatiamento de Imagens 20/02/2003 - Teclas de atalho do Photoshop 06/02/2003 - Efeitos de texto 20/01/2003 - Rádio - 2ª parte 08/01/2003 - Rádio 18/12/2002 - Efeito de luzes

19 comentários publicados

• 1. Rollovers

  Sexta-feira, 16/07/2004, por Viviane Helena da Costa
  

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

  Responder comentário

• 2. Opa!

  Sexta-feira, 16/07/2004, por Maurício J. Fávaro
  

  da sim meu amigo !
  logo postarei a 2ª parte q falarei sobre image ready
  e logo colocarei permuta
  
  abraço

  Responder comentário

• 3. Ajuda

  Sexta-feira, 16/07/2004, por Carlos Alberto Faria de Almeid
  

  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?

  Responder comentário

• 4. Luzes e Nebulosas

  Sábado, 17/07/2004, por Lucas
  

  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!

  Responder comentário

• 5. Muito bom

  Domingo, 18/07/2004, por Altamiro Pereira da Silva
  

  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!

  Responder comentário

• 6. ajuda - no lugar errado mas...

  Domingo, 18/07/2004, por Márcio
  

  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!

  Responder comentário

• 7. Bruna...

  Segunda-feira, 19/07/2004, por Béko
  

  Eh soh segurar o shift!

  Responder comentário

• 8. Ai!

  Segunda-feira, 19/07/2004, por Márcio
  

  Ñ adianta, contua modificando o frame original, sigurando ou ñ o shift =(.

  Responder comentário

• 9. Dúvida Bruna

  Terça-feira, 20/07/2004, por Pablo Verçosa
  

  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

  Responder comentário

• 10. valew amigos

  Terça-feira, 20/07/2004, por Maurício J. Fávaro
  

  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

  Responder comentário

• 11. brigadão!

  Quinta-feira, 22/07/2004, por Márcio
  

  rodrigo mto obrigada pela sua ajuda! =)

  Responder comentário

• 12. Crítica

  Terça-feira, 27/07/2004, por Fernanda Forbici
  

  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.

  Responder comentário

• 13. Help Please !!!

  Quarta-feira, 28/07/2004, por Tiago Alonso
  

  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

  Responder comentário

• 14. Resposta - Márcio

  Quinta-feira, 29/07/2004, por Maurício J. Fávaro
  

  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

  Responder comentário

• 15. Re: Help Please!

  Quinta-feira, 29/07/2004, por Maurício J. Fávaro
  

  Alexandre obrigado pelos elogios cara, estou enviando seu email
  abraço

  Responder comentário

• 16. Exelente matéria!

  Quinta-feira, 29/07/2004, por Marco
  

  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!

  Responder comentário

• 17. Boa Fabio

  Quinta-feira, 29/07/2004, por Rafael Fuchs
  

  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.

  Responder comentário

• 18. Fontes

  Quarta-feira, 04/08/2004, por Rodrigo Felix
  

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

  Responder comentário

• 19. duvida

  Sábado, 05/11/2005, por Gilson Santiago
  

  eu qria saber como vc fez para criar aquelas fontes no segundo banner escrito photoshop em verde
  
  obrigado

  Responder comentário

Poste um comentário

(clique se não for cadastrado)

Login: Senha: Titulo: digite aqui seu comentário Site/blog: Enviar Receber notificação de novos comentários

Sobre o autor

Fabio Lody é um dos colunistas mais lidos do Brasil. Desenvolveu trabalhos para a Johnson&Johnson, Chevrolet, Kawasaki Motors, grupo SBT, Ethos, HopiHari entre outros pela Tribal Interativa. Foi instrutor da WOC (Centro de Treinamento Adobe) e já trabalhou nas áreas de produção de vários webstudios. Escreve para duas revistas de circulação nacional além de desenvolver layouts de cartões para uma empresa do japão. Foi aluno de Alexandre Wollner e há 9 anos trabalha como Designer Gráfico. Blog: (http://www.fabiolody.com.br).

Indique para um amigo

Escreva aqui sua mensagem! ok

Tags relacionadas

crescimento android linux yahoo 3g lançamento mercado mobile microsoft ti google php desenvolvimento publicidade tecnologia brasil apple criação web seguranca windows celular internet twitter youtube iphone

TI SHOP Produtos iMasters

• Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
• Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
• DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
• DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!