Como Criar um Banner básico no Photoshop

photoshop

Este artigo foi desenvolvido por Luigi do site Adealz, que é um designer profissional que trabalha desenvolvendo sites, logomarcas e outros trabalhos gráficos.

Versão Utilizada: CS3
Nivel de Dificuldade: 1 2 3 4 5

Passo 1
Crie um novo documento no PhotoShop com tamanho 468px X 60px. Como é um banner para ser utilizado na web defina a resolução em 72 pixel/inch, que vem por padrão.

banner

Passo 2
Defina um fundo para o seu banner. Tente escolher um no padrão do seu site/blog. No meu caso, escolhi o fundo do topo do meu site, para ficar padrão. Como eu não usarei este banner no meu próprio site, não haverá problema. Também ficará mais fácil das pessoas lembrarem e associarem a identidade visual.

banner2

Passo 3
Adicionar o conteúdo do banner. Primordial colocar a logo de forma bem aparente.

banner3

Passo 4
Adicionar o texto/mensagem que o banner utilizará para atrair cliques. Aqui você pode usar o slogan ou uma frase de efeito. Lembre-se sempre de caprichar na fonte. Caprichar não é enfeitar muito, mas sim fazer algo bonito e compatível com a identidade visual do seu site/blog.

banner4

O meu ficou idêntico ao meu topo do meu site, mas não precisa ser, fiz só para mostrar como se faz. Use sua imaginação e veja o que será melhor para o seu site. Pense no objetivo do seu site, o que você quer transmitir para os visitantes. Que frase, slogan, etc., atrairia o público alvo do seu site/blog a clicar no banner.

Outro exemplo é o banner que o Celso disponibiliza aqui no Criar Sites para quem quiser divulgar o blog.

468-banner-criar-sites1

Repare que ele não usou o topo do Criar Sites, mas, quem quer aprender a Criar Sites com certeza se sentirá atraído a clicar.
E você, o seu banner atrai os cliques que você deseja?! Mostre o seu banner para nós!

Este artigo foi desenvolvido por Luigi do site Adealz, que é um designer profissional que trabalha desenvolvendo sites, logomarcas e outros trabalhos gráficos.

About Luigi Cardia

Meu nome é Luigi, sou designer gráfico/web por hobbie, criador do HelpNoBlog.com, que é um blog voltado para ajudar àqueles que querem iniciar no mundo da blogfera, e sou acadêmico do curso de Direito.
Bookmark the permalink.

39 Comments

  1. Gostei do tutorial , vou tentar por em prática em breve . Celso acho que a um erro de digitação no “Nível de Dificuldade” , está mostrando 12345 , acho que um tutorial desse nível e muito difícil rsrsr .

  2. Luigi muito boa dica mesmo mais o que eu queria mesmo aprender é como criar uma logo-marca com identidade visual com o photoshop… será que pode criar um artigo ensinando
    Muito obrigado Fabio.

  3. Celso, será que foi só comigo ou a netaffilliation realmente finalizou a campanha de recrutamento de afiliados? Recebi um email informando que os links serão desativados, mas vejo que aqui no Criar Sites ainda continua a janelinha incentivando o cadastro. Você também recebeu esse email? Se sim, que outras campanhas você pensa em implementar para substituir essa?

    • Pablo,
      Realmente o NetAffiliation cancelou a recomendação de novos afiliados no dia 10 deste mês. Eu recebi o email.
      Eu retirei a janela do NetAffiliation para divulgar meu e-book. Pode me dizer onde você está vendo essa janela?
      Eu estou pensando em vender o espaço que antes ocupava o netaffiliation. Já tenho um possível comprador.

      Abraço!

      • Quando fiz o primeiro comentário, não consegui pensar numa palavra mais adequada. A janelinha a qual me referi era um balãozinho que aparentemente era ativado pela barra da wibiya. Se eu não me engando era na cor azul claro, inclusive. Ah, vc também ainda está mantendo o link pra netaffiliation entre os Links Recomendados na mesma barra ( quer dizer, não sei se vc tem intenção de tirar e não se atentou ao detalhe, mas enfim… )

        • Pablo,
          Creio que você tenha confundido alguma coisa. Eu já tinha trocado essa janelinha há alguns dias.
          Eu tinha me esquecido desse link aí. Vou dar um jeito de tirar.

          Abraço!

  4. Ótimo artigo, fácil de fazer. Vou tentar fazer o meu. Vlw!

  5. É assim que começa a mexer no photoshop,pelas coisas simples,depois só evoluir para um mais difícil…

    Celso você viu o que a netaffiliation aprontou?!! kkkkk

    Abraço!

  6. Para aqueles que NÃO POSSUEM photoshop já existe soluções online, é so da uma pesquisada lá no Google, algo semelhante a ”Photoshop Online”

  7. Gostei esse tuto e bem intereçante

  8. Parabéns Luigi, ótimo tutorial!

    Celso, estou com um problema chato em meu site! É que recebo diversos comentários que não tem nada haver com nada, um monte de palavras estranhas alguns estão em inglês outros não faço a menor idéia em qual língua estão, já outros são falando sobre viagra e coisas do tipo! Gostaria de saber se isto já aconteceu com você, o que você fez para resolver e o que você me indica fazer?

    • Olá Lázaro!
      Obrigado pelo comentário.

      Em relação ao seu problema, instale e ative o Akismet, isso resolverá!
      É um plugin para filtrar spams. Ele irá pedir um ID lá, mas é só criar uma conta no wordpress.com que você consegue esse ID. Super simples.

      Se já tiver instalado, só ativar.

      Abraços!

  9. Olá,

    Belo tutorial, gosto muito de utilizar o fireworks para desenvolver minhas imagens, mas não largo nunca do Photoshop.
    Obrigado!

  10. Humberto Muniz

    muito bom essa dica muitos usuarios deixam de fazer um bom bane nao por nao ter criatividade mais por nao saber usar o Photoshop

    • Humberto,

      Mas a criatividade é muito mais importante do que saber usar o Photoshop.

      Desenvolver habilidade para trabalhar com essa ferramenta é muito mais fácil do que desenvolver criatividade!

      Além do mais, se pegar um tutorial de Photoshop, mesmo que não saiba utilizá-lo, é só copiar o passo-a-passo que o resultado será o mesmo, ou muito próximo.

      Porém, a criatividade não tem como seguir um tutorial, não tem como copiar. Ou você tem, ou você não tem.

      Acredito que muitos mais usuários deixem de fazer por falta de criatividade do que por não saber usar o Photoshop!

      Obrigado pelo comentário!

      Abraços,
      Luigi

  11. Humberto Muniz

    Luigi,
    Você tem toda razão criatividade e tudo!

    Mais convenhamos que fazer um projeto gráfico ,simples ,direto e de qualidade não depende só da criatividade, e necessário o mínimo de conhecimento possível
    Por isso parabenizo pela iniciativa de compartilhar conhecimento e incentivar o processo criativo aos visitantes do criar sites .

    Abraço!

  12. Ola amigo quantos você cobra para colocar um banner do meu site em seu site ?

  13. muito obrigado pelo tutorial estava precisando!

  14. Obrigado pela dica, estava a precisar de criar um banner

  15. ae eeu uso o cs3 e keria saber como add fontes asl alguem sabe???

  16. vlw pelo link celso, aki ér o philipe, foi q eu mudei o nome pra divulgar meu novo dominio ;D

  17. Ops, eskeci, clicka no meu nome pra ver como esta meu projeto, gostaria q vocês fizessem uma consultoria gratuita pra mim ;D

  18. quero saber onde eu posso arranjar a fonte que usaram pra fazer esse banner

    se puderem me ajudar eu agradeço :D

  19. Valdir da silva Madureira

    Muito obrigado,no meu caso leigo em tudo com pesquisa assim tenho adquirido algum conhecimento,espero que outras pessoas descubram quanto ser útil ao próximo,desejo tudo de bom a tua pessoa e família .
    até mais ,obrigado mesmo.

  20. cara sinceramente adoreiiiiiiiiiiii e suas dicas foram de grande utilidades para mim ,pois eu estava confusa em relação ao tamanho ideal do banner

  21. Andreia,

    Obrigado pelo comentário!

Atenção antes de Deixar um Comentário!
- Se o seu comentário for relacionado ao post, tenha certeza de que o leu.
- Todo comentário obsceno, ilegal, ofensivo, anônimo, escrito todo em maiúscula, contendo gírias em excesso ou estritamente publicitários, serão "apagados".
- Somente inclua links no comentário se ajudar a explicar o seu comentário.
- Se precisa de ajuda, procure deixar o máximo de informação possível.
- Não peça para adicionar ao MSN.
- Spam não será tolerado.


Este site lhe foi útil? Então ajude na divulgação clicando aqui.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>