Como criar a imagem perfeita do cabeçalho do Twitter
O Twitter lançou recentemente um design atualizado para as páginas de perfil, que permite inserir uma nova “foto do cabeçalho” que fica no topo do seu feed, assim como a imagem da capa da linha do tempo do Facebook.
Hoje vamos nos aprofundar e ver alguns exemplos de boas imagens de perfil do Twitter e discutir como você pode criar suas próprias. Vou até lançar um modelo gratuito para que você possa começar imediatamente.
Explore o Envato Elements
Modelo grátis!
Antes de mergulharmos no artigo, aqui está um modelo gratuito útil que você pode usar para criar sua própria imagem de cabeçalho no Twitter. O arquivo fornecido é um PSD criado no Photoshop CS6.
Pegue seu PSD grátis: Clique aqui para fazer o download.
Como usá-lo
Para usar este modelo, basta substituir a imagem de fundo. O grupo de camadas da interface do usuário tem como objetivo ajudá-lo a ter uma boa idéia de como será a imagem depois de implementada no site. Oculte as camadas agrupadas antes de salvar.
Conheça o novo perfil do Twitter
Era uma vez, o Twitter era um serviço centrado em texto. Atualmente, eles estão constantemente buscando melhorar a experiência visual, integrando recursos e suporte de multimídia.
O redesenho de perfil mais recente impulsiona essa idéia por meio de fluxos de fotos mais importantes e um novo recurso: o cabeçalho do perfil do Twitter.
Como você pode ver, essa nova imagem fica no topo dos seus tweets recentes e mantém a imagem do seu perfil, além de um breve texto sobre você. Para ajudar a lançar os novos perfis, o Twitter parece ter feito parceria com a NBC; portanto, muitos de nossos exemplos serão de suas várias contas (nem todos os usuários já fizeram o upgrade).
Por fim, isso não está adicionando uma tonelada de trabalho de design ao seu perfil, é simplesmente uma imagem extra. No entanto, mesmo uma pequena imagem pode trazer muitas perguntas, então estou aqui para responder a algumas que você pode ter ao se aproximar da criação de sua imagem de cabeçalho no Twitter.
Como você define o cabeçalho do seu perfil?
A primeira pergunta que você deve fazer é: como você liga essa coisa? Se você seguir para o seu perfil, ele sempre será como sempre. Atualmente, os usuários que não configuraram uma imagem de cabeçalho manterão o design antigo.
Para atualizar seu perfil, clique na engrenagem Configurações, no canto superior direito da página. A partir daqui, clique na guia "Design" na barra de navegação do lado esquerdo.
Quando estiver na página Design, role para baixo até a seção "Personalize seu próprio". Aqui você verá um botão "Alterar cabeçalho". Basta clicar nele e enviar sua imagem para definir seu cabeçalho.
Isso é tudo! Agora você só precisa decidir o que colocar lá!
Que tamanho?
A próxima pergunta importante a ser feita ao criar o cabeçalho do perfil é: "Qual o tamanho?" Se dermos uma olhada nas imagens da NBC que o Twitter, sem dúvida, ajudaram a configurar, vemos que o tamanho tem 520px de largura por 260px de altura.
Por fim, isso divide-se em uma proporção de 2: 1 de largura para altura, com um tamanho máximo de upload de 5 MB ou 1252 px por 626 px.
Dicas e considerações de design
O tamanho da imagem que você carrega certamente não é a única consideração que você precisa ter em mente. Percebi algumas peculiaridades que você definitivamente precisa saber se deseja obter um design bem-sucedido.
Preste atenção à sua legibilidade
Para experimentar o espaço em minha conta pessoal, peguei uma foto aleatória que tirei de um display digital na cidade de Nova York. Parecia que faria o fundo abstrato perfeito. Aqui está o resultado:
Como você pode ver, é um visual bastante atraente. O problema, porém, é que ele está interferindo bastante no texto, e eu sou um louco por legibilidade.
Obviamente, com o texto em branco, você desejará um fundo decentemente escuro. O meu se encaixa nessa descrição, mas as luzes servem como pontos brilhantes que reduzem o contraste entre as letras e o fundo e adicionam muitas distrações.
A solução aqui é bastante simples, apenas escureci o fundo onde o texto está para que as luzes não interfiram tanto. O resultado não é tão legal visualmente, mas é muito mais legível:
Parafusos do Twitter com sua imagem
O pessoal do Twitter sabe que o truque que usei acima, escurecendo a parte inferior da imagem, é algo que precisará ser feito em muitas imagens. De fato, o site realmente faz isso automaticamente, quer você queira ou não.
Como teste, peguei essa imagem e a preparei para o cabeçalho Design Shack. Aqui está o que eu vejo no Photoshop:
Agora, se eu enviar essa imagem como você vê acima, eis o resultado que aparece na nossa página de perfil:
Veja a diferença? Um gradiente de fundo foi aplicado automaticamente, escurecendo consideravelmente as cores originais. É um efeito sutil na maioria das fotos, mas quando você entra em algo com menos detalhes, ele realmente se destaca.
Isso certamente não é uma coisa ruim; de fato, ajuda o texto a se destacar, é apenas algo a ter em mente ao preparar sua imagem. Além disso, observe que o Twitter aplica automaticamente cantos arredondados ao perfil e à imagem do cabeçalho.
Dicas de Design
Agora que sabemos tudo sobre como criar e aplicar nossa imagem, vamos dar uma olhada e ver o que os outros estão fazendo com essa área para obter alguma inspiração.
Integre sua imagem de perfil
Um dos melhores que eu vi até agora é o de Ryan Seacrest. Adoro a integração da foto do perfil na imagem do cabeçalho. Brilhante. Você pode esperar ver muitos usuários tentando fazer isso de maneiras diferentes.
Mostre seu trabalho
Graham Smith, o designer de logotipo favorito de todos, aproveitou a oportunidade para atualizar seu perfil imediatamente. Sua idéia é simples e eficaz: mostra seu trabalho em uma grade agradável e discreta de logotipos.
Corresponder ao fundo do seu perfil
Um aspecto a ter em mente quando você está trabalhando na sua imagem de cabeçalho é que ela faz parte de um design maior e deve combinar bem com sua imagem de plano de fundo.
Vemos isso bem na conta de notícias de última hora abaixo. A imagem do cabeçalho é um mapa-múndi vermelho composto por pixels.
Na verdade, é a mesma imagem que eles usaram no plano de fundo da página, apenas menor e com uma cor diferente. Isso contribui para uma boa aparência consistente.
Eu amo como o plano de fundo grande é a versão mais sutil, enquanto a imagem do cabeçalho realmente chama sua atenção com uma cor forte.
Mantenha simples
Se estiver com problemas para encontrar uma boa imagem de cabeçalho, lembre-se de três palavras poderosas: mantenha-a simples. Mesmo além da imagem, há muita coisa acontecendo neste espaço e seu objetivo é amarrar tudo junto, não complicar demais.
Na própria família do Twitter, vemos alguns bons e maus exemplos disso. O co-fundador do Twitter Evan Williams definitivamente escolheu mal com um gráfico que está muito ocupado para este espaço.
Compare isso com a imagem usada pelo criador do Twitter Bootstrap, Mark Otto. Sua escolha é muito melhor:
Isso é legal, simples e realmente impressionante. A maior parte da imagem é em branco (espaço em preto neste caso), portanto não há muito o que interferir no texto. O conteúdo representa um evento carregado de emoção e admiração para todos nós, o que contribui para uma experiência memorável.
Mostre-nos o seu!
Aqui está, tudo o que você precisa saber sobre como criar a imagem perfeita do cabeçalho do Twitter. Agora que você leu minhas dicas e viu uma ótima inspiração, crie seu próprio modelo grátis!
Depois de ter sua imagem do cabeçalho do Twitter pronta, deixe um comentário abaixo com um link para que possamos ver o que você criou.
