Qual o tamanho do background do Twitter?

mascote do twitter pensando "background? #comofaz" 

 
Você, usuário um pouco mais, digamos, experimentado, já tentou posicionar uma imagem no background do seu perfil no Twitter?

Convenhamos, é meio chato! Vou explicar como adaptar (criar é com você!) uma imagem, de modo que seu background apareça melhor em algumas resoluções de monitor mais comuns.
Antes, você precisa saber de alguns incovenientes:
  • Não existe um tamanho certo;
  • O Twitter não centraliza a imagem, alinhando a esquerda (e ao topo);
  • Quanto menor a resolução do monitor, menos da imagem é exibido;
  • E quanto maior a resolução, mais estranho fica o enquadramento;
  • Desaconselhável usar o lado direito da imagem (concentre o principal sempre no canto superior esquerdo);
Partindo do básico, mas necessário, você sabe qual a resolução do seu monitor?
Mesmo que isso não tenha importância – pois o background não tem que aparecer pra você, mas pra quem visita seu perfil no Twitter – é bom saber pra que isso não seja fator limitante na sua criação.
Saiba que o 1024×768 pixels já caiu em desuso faz tempo. O ideal é partir pra um formato nativo desses monitores de 22″ (que estão bastante populares) ou até mesmo a resolução Full HD, de 1920×1080 pixels. Mas lembre-se que quanto maior esse formato, mais pesado fica seu arquivo.
Para imagens/fotos de paisagens, composições, texturas e afins, sugiro o formato de 1680×1050 pixels, que vai exibir bem na maioria dos monitores. No entanto, se você pretende enquadrar um rosto, um olhar ou um close de algo, sugiro partir de um formato menor, como o de 1280×1024 pixels, para garantir um melhor acerto.
interface do twitter no formato de tela de 1680x1050 pixels
 A matemática é a seguinte: A interface do Twitter tem 763 pixels de largura. Considerando a barra de rolagem do browser (que pra facilitar aqui vou arredondar para 20 pixels), temos 783 pixels que vão comprometer a largura total da nossa imagem de 1680 pixels. E, como eu disse, vamos aproveitar somente a parte da esquerda, ou seja, 449 pixels (1680 – 20 – 763 ÷ 2).
exemplo de enquadramento da imagem usando a foto do rosto de um leão, cuja imagem da esquerda mostra essa foto sem enquadramento, e a da direita melhor posicionada pra melhor revelar o rosto
Note no exemplo que o que interessa só conseguimos identificar se chegarmos a imagem mais à esquerda. Caso contrário o rosto do animal fica escondido. Sendo assim, não há necessidade de se definir o tamanho da imagem como sendo o total da tela (essa do leão tem 1024×768 exatamente, o resto é cor sólida que você define no painel de configuração do próprio Twitter).
rosto do leão levemente fora do enquadramento devido a uma resolução menor (1280x1024)
Perceba que esse enquadramento é o mesmo do anterior, porém exibido numa resolução menor.
Mesmo bem posicionado, perdemos um pouco numa resolução menor como a de 1280×1024 (acima).

Na prática

Um exemplo bacana de hoje é o Twitter da Ivete Sangalo que exibe muito bem em vários formatos. O jogo de fontes que o designer criou para o lado direito da imagem permite que parte seja lido em resolução maior e o necessário em resolução menor (isso porque o “ideal” é que você crie sempre em formatos maiores mas para serem vistos em resolução menores, quando você dominar essa manha…)
twitter da Ivete Sangalo visto de uma janela padrão de 1024x768 
Background do perfil do twitter da cantora visto em uma janela de 1024×768 pixels de resolução
twitter da Ivete Sangalo visto de uma janela padrão de 1440x900 
Visto em uma janela de 1440×900 pixels
(comum em notebooks, inclusive deste que vos escreve)
E, pra fechar, a imagem está em preto e branco não só por uma questão de estética, mas por deixar o tamanho do arquivo menor!

Conclusão

Deixe a parte da direita da imagem para coisas sem muita importância, ou que só componham o cenário. Evite deixar rostos ou algo que você considera importante exibir.
Mesmo quando você for criar uma fusão de fotos ou um mural (veja o background do perfil do Luciano Huck, e me avise se não se parecer com um mural de fotos!), deixe do lado direito as fotos menos importantes.
Aqui desconsiderei a altura das imagens, mencionando sempre a largura. Pois mais difícil que prever a resolução do monitor do visistante do seu perfil é saber quanto de links e barras de ferramentas ele possui em seu browser, limitando sempre mais e mais a área útil vertical. Se para a largura podemos pensar grande, por outro lado evite alturas maiores que 600 pixels, ou algo de importante que exceda esse valor.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s