Design Blog - Blog de design gráfico, web design e universo freelancer.

Peixe Grande - ajude-nos a ganhar! Vote!

Como criar fundos para o Twitter

Por | 16 de janeiro de 2009 | Tags: , | 47 Comentários

Publicidade

O Twitter está virando (na verdade, virou) uma mania internacional. Tudo bem que ele é pouco customizável e muito simples comparando com outros serviços similares, mas essa é a beleza dele: a uniformidade. Pensando nisso, vou ensinar como criar um fundo customizado para sua página do Twitter.



Fazer os fundos é fácil: basta abrir um documento novo no Photoshop (ou seu programa gráfico de preferência) com tamanho mínimo de 1700 pixels de largura por 560 pixels de altura.

Por que esse tamanho, Canha? Simples: a maior resolução de tela por enquanto é de 1680 x 1050 pixels. A largura é o mais importante nos nossos fundos, e para manter o tamanho do arquivo baixo vamos sacrificar a altura um pouco.

A teoria

O Twitter tem um tamanho fixo: a caixa maior dele tem 763px de largura, que é dividido em uma área de 563 pixels de largura (onde vai os twits) e uma barra lateral de 200 pixels. O cabeçalho tem um tamanho de 763 pixels de largura por 66 pixels de altura. Tudo isso independente do tamanho da resolução da pessoa.

Na imagem abaixo, você pode ter uma noção de como é a estrutura básica do Twitter.

Como criar fundos para o Twitter

Algumas coisas que você precisa ter em mente:

  • Fundo da área de twits (timeline) é sempre branco
  • Fundo do menu é sempre branco
  • Rodapé (footer) tem como fundo branco sempre
  • Área de logo é sempre a do Twitter (azul com contorno branco)
  • Sua foto pode ser alterada
  • Você pode alterar a cor de texto, links, cor de fundo da lateral e cor da borda da lateral
  • Você pode colocar a imagem de fundo para se repetir
  • O ponto de início da imagem de fundo é sempre a lateral esquerda superior da sua janela

(Via Smashing Magazine)

Nós vamos ter uma cor de fundo que será fixa. Essa cor inicia-se a partir da coordenada X: 0px, Y: 561px (a partir da altura 561px para baixo). Por quê? Como falei: manter o tamanho do arquivo baixo. Dá para criar um fundo com altura de 1100 pixels? Sim, dá. Mas o tamanho do arquivo aumenta e o fundo pode demorar para aparecer em algumas conexões mais lentas.

Nossa área de trabalho onde vamos criar o fundo

Nossa área de trabalho onde vamos criar o fundo

Com nosso arquivo aberto, vamos criar um espaço de altura 66 pixels começando do canto superior esquerdo até o lado direito do documento. Este é o espaço que ficará o cabeçalho (área 1). Preencha com a cor de sua preferência.

Começando da altura 67 pixels (Y: 67px) crie um retângulo de 460 pixels de altura que cubra até o lado direito da tela. Preencha com outra cor de sua preferência. Esta é a área principal do Twitter (área 2).

O restante do documento, preencha com uma cor sólida (sem degradê) e memorize esta cor (área 3).

Estrutura da sua imagem

Estrutura da sua imagem

Pronto, agora seu fundo geral está pronto. Para colocar texto na lateral, use um retângulo de 118 pixels de largura do lado esquerdo para colocar informações – neste caso, suas informações serão visíveis para quem tiver uma resolução de tela de pelo menos 1024×768 pixels. Pessoalmente, usei um espaço maior – logo, apenas pessoas com uma resolução de tela maior vão poder ver meu fundo.

Evite colocar coisas do lado direito da tela; você que tem uma determinada resolução pode visualizar, mas quem não tiver uma resolução igual pode não ver.

Pronto: só salvar sua imagem e colocar no Twitter. Personalize as cores do sidebar, dos links e principalmente a cor de fundo com aquela cor que falei pra você memorizar. Simples, não?

Usando fotos como fundo do Twitter

Se for usar fotos como fundo do seu Twitter, procure usar fotos que possam se repetir. Não adianta colocar uma foto gigante pois vai diminuir o tempo de abertura do seu Twitter, e se colocar uma foto muito pequena em um computador que tenha resolução maior vai ficar estranho.

No caso do @Alessandro_M, o fundo com fotos ficou legal pois ele fez uma imagem que pode ser repetida

No caso do @Alessandro_M, o fundo com fotos ficou legal pois ele fez uma imagem que pode ser repetida

O resultado final

No final, seu Twitter que antes era xoxo agora ficou bacana:

Olha só como ficou meu Twitter

Olha só como ficou meu Twitter

Lindão, né? Melhor que os pré-feitos que o Twitter disponibiliza. Agora é só seguir o Design Blog no Twitter!

Download de template para fundo do Twitter

Quer que eu facilite sua vida? Bom, você pode então pegar o template que eu criei. Vou disponibilizar em dois formatos: JPG e PSD (Photoshop). É só clicar com o botão direito e selecionar “Salvar como…”.

Receba mais posts assim em seu e-mail


Gostou? Por favor, compartilhe!


Prêmio Peixe Grande - Vote em nós hoje!
Canha

Criador e editor-chefe do Design Blog, atualmente é web designer freelancer. Nerd desde pequeno, ama tudo relacionado a internet, é apaixonado por design e está na área a 11 anos.

Acesse seu site Siga no Twitter

Deixe seu comentário!

  • http://lenteaberta.wordpress.com luc

    tá bacana! fácil de seguir e completinho. bom trabalho! (se tivesse publicado isso antes eu teria perdido menos tempo fazendo o meu :P )

  • http://www.yamimilab.com/ Sandra

    Não havia pensad nisso :P Certo que agora vou trabalhar um mais legal.

  • http://www.nilothiago.com Nilo Thiago

    Ah, bom post.
    Também tenho o meu personalizado, que é o menu do meu portfolio, exatamente igual.

    twitter.com/nilothiago

  • http://www.brunoalex.com Bruno Alex

    Eu já vir no seu Twitter ficou legal e bem profissional

    eu também já estou pensando no meu :D

  • http://formigueirocomunista.com/ André HP

    O Twitter tá mesmo virando uma mania internacional. Aqui no Brasil é mais a elite nerd, os geeks e profissionais de TI. Mas não vai demorar muito, calculo eu, para os miguxos e companhia aderir à Rede Social.

    Eu nunca tinha pensado nessa possibilidade de fundo. Você é mesmo o Einstein do design Canha. :)

    Forte Abraço!

  • http://www.yogodoshi.com/blog Cayo Medeiros aka. yogodoshi

    Ótimo tutorial cara, to repassando pra mó galera! =D

    Abraços!

  • http://www.blogomoura.com Moura

    Grande Canha, era este tutorial que estava procurando, você ouviu meus pensamentos (telepatia). rsrsrs.
    Gostei mesmo, parabéns! aliás eu linkei seu blog lá no BM.
    Saúde, paz e sucesso!
    Abraço,
    Moura

  • http://baseadoemfatosreais.com Amanda

    Acho que o twitter ganhou o mundo exatamente por causa da simplicidade e uniformidade, como vc disse. ^^’
    Adorei a dica!
    Mas, ultimamente, tenho morrido de preguiça de abrir o PS. xD

  • http://gutoooo.wordpress.com GUTO

    Pertinente seu tutorial… alguns usuários conseguem fazer backgrouds interessantes…

    twitter.com/gut0

  • http://www.mistelko.blogspot.com Mistelko

    Que legal, canha! Gostei e vou fazer o meu :) Beijo

  • Camilla

    não entendi NADA :S
    quero fazer o meu, mais não estou conseguindo fazer, help me!

  • anela

    Achei bem interessante seu post, fui ver o seu pra ver no tamanho original como ficou, mas não deu!
    Estou mega atrasada seu post foi no começo do ano e estamos quase no natal. Beeejo

  • Davi

    Faz pouco tempo que acompanho seu blog e acho ele bem enxuto, bem explicado e bem bom.
    Uma duvida?
    Sou novo em tudo isso e quero criar um blog e uma conta no twitter e esse seu post ja me ajudou muito, agora o tamanho em pixel do fundo que vc passou serve tb para um blog???

    Abrçs

  • http://edmaltos.blogspot.com Edson

    Vlw canha… boas as dicas. tentei colocar uma imagem aqui na minha conta e não conseguia acertar no tamanho.

  • Neto

    Muito legal seu topic, pena q nessa config q vc passou aki no meu não enquadra de jeito nenhum, fica torto. Tipo se eu faço ao inves de 1700, faço 1428 enquadra certinho no meu mas nos dos outros não enquadram, oq posso fazer?

  • http://twitter.com/li_santanna Aline

    a maior resolução, na verdade nao eh 1680 x 1050! Meu monitor tem 23” e a resolução é 1920 por 1080! -fikdik

  • Carlos AFM

    Muto bem explanado!

    Bancana!

    Obrigado!

  • http://twitter.com/Paula_nery22 paula

    Quero colocar varias fotos em uma , como faço?

  • http://www.twitter.com/acho_justo acho_justo

    Me segue no twitter @Acho_Juso #Alok bjus

  • Thomas

    não entendi absolutamente nada :X

  • http://www.meadd.com/gikistyle @Lucasmiatto
  • http://twitter.com/themrsbusta @themrsbusta
  • Pingback: Promoção Choco La na Copa | Choco la Design

  • Pingback: Design Blog na Copa – #VaiBrasil | Design.Blog.br

  • http://design.blog.br/ elida

    ah nossa adorei resolveu o meu problema agora eu conseguir botar a minha foto no twitter!valeu mesmo!!parabens!

  • http://dmtk4wada.blogspot.com Dimitri

    Valeu pela dica!

  • bernardo

    Muito bom, parabéns, o template ainda no final, ótimo

  • Orlando

    Como faço para mover para a esquerda o conteúdo de texto do twitter – não quero que fique centralizado, como o é.

  • Hosana

    Obrigada pela aula!
    Parabéns pelo trabalho.

  • Luara

    Não consigo fazer, alguém faz um pra mim? PLISS!

    @luara_369
    Sigaam lá! =)

    • http://design.blog.br canha

      Quer serviço de graça? Peça carona a um taxista. =P

      Facilitei tanto colocando até o código fonte aqui. -_-

  • GABRIEL

    @gabrigatto

  • Renan

    Parabéns muito bom mesmo! Sigam, que eu sigo também @RenanIncerti

  • renan
  • @_Duuh29

    SEGUEM ? @_Duuh29

  • @JunnynhoBadboy

    cara do seu eu não tinha entendido nadinha.Mais eu msm criei uma forma bem simples!

    vlw msm assim flw

  • Gabi

    O único detalhe. Nem todos têm super monitor…para os menores não aparece nada… =[

  • liandra

    obg pela ajuda !
    SEGUI-LÁ @liandra25 , #porfavor

  • http://kelcogliatti.wordpress.com Rakel Cogliatti

    @NadaIncomum

  • Gabriel

    Gostei. Estava procurando uma forma simplificada para criar o meu fundo de Twitter, sem dúvida este .PSD ajudou muito.

    Obrigado.

  • Leonardo

    @leo_fera7 segue lá? 

  • VITINHOMC_CQZ

    Segue Láh geeintte @Viittinhoo_:twitter 

    Sigo todos de Volta ;D 

  • @McNathanKress

    Segue ai! @McNathanKress:disqus 

  • http://twitter.com/_ThiagoMorais7 Thiago Morais

    segue @_ThiagoMorais7:disqus 

  • Felipe_setuval

    segue @Felipiinnho:twitter 

  • Tatiane silva

     segue @thatianny_silva

  • http://twitter.com/moreninhozika_ BRU?? DIII???á?Qý

    Segue @moreninhozika_:twitter