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

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ó me seguir no Twitter!

O template

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

Este artigo foi útil pra você?

Se foi, considere assinar o feed RSS para mais dicas sobre design ou siga o Design Blog no Twitter. Se quiser, pode seguir o meu Twitter pessoal em @canha.

Gostou do artigo?

Aproveite então para assinar nosso feed RSS ou seguir o Design Blog no Twitter para sempre ficar ligado nas novidades no mundo do design!

Artigos relacionados