Como criar fundos para seu Twitter. O site Design Blog traduziu o artigo do Smashing Magazine Dando dicas de como criar seu próprio background.

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.

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.

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

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.

Para se inspirarem antes veja essa seleção de 14 excelentes Design para Twitter: