Como criar fundos para o Twitter
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.
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.
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
O resultado final
No final, seu Twitter que antes era xoxo agora ficou bacana:
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…”.
Quem leu isto também leu:
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
Pingback: Promoção Choco La na Copa | Choco la Design
Pingback: Design Blog na Copa – #VaiBrasil | Design.Blog.br