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.
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
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
O resultado final
No final, seu Twitter que antes era xoxo agora ficou bacana:
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!
Loading ...
16 comentários
tá bacana! fácil de seguir e completinho. bom trabalho! (se tivesse publicado isso antes eu teria perdido menos tempo fazendo o meu :P )
Não havia pensad nisso :P Certo que agora vou trabalhar um mais legal.
Ah, bom post.
Também tenho o meu personalizado, que é o menu do meu portfolio, exatamente igual.
twitter.com/nilothiago
Eu já vir no seu Twitter ficou legal e bem profissional
eu também já estou pensando no meu :D
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!
Ótimo tutorial cara, to repassando pra mó galera! =D
Abraços!
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
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
Pertinente seu tutorial… alguns usuários conseguem fazer backgrouds interessantes…
twitter.com/gut0
Que legal, canha! Gostei e vou fazer o meu :) Beijo
não entendi NADA :S
quero fazer o meu, mais não estou conseguindo fazer, help me!
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
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
Vlw canha… boas as dicas. tentei colocar uma imagem aqui na minha conta e não conseguia acertar no tamanho.
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?
a maior resolução, na verdade nao eh 1680 x 1050! Meu monitor tem 23” e a resolução é 1920 por 1080! -fikdik
Regras
Antes de comentar, por favor atente-se as regras abaixo:
Os comentários neste artigos assim como em qualquer artigo deste blog não necessáriamente refletem a opinião dos autores e donos deste blog, como consta na Política de Privacidade e Uso deste blog.