Este artigo é uma tradução do artigo do Chris do blog Spoongraphics intitulado “Twitter Background Design How-To and Best Practices“. Essa é a primeira vez que traduzo para português um artigo em inglês e quero deixar meu agradecimento ao Chris por ter me permitido e ainda apoiado essa tradução.

This is a translation of Chris Spoongraphics’s article . The main title is “ Twitter Background Design How-To and Best Practices “. This is the first time I translate an english article to brazilian portuguese and I like to thanks Chris to allowed me and supported this translation.

Twitter Background Design – Como fazer e melhores práticas

Com o Twitter se tornando rapidamente o site mais bacana de se ver, todo mundo quer se destacar na multidão. Já temos uma gama de designs de qualidade mostrados em diversos sites, que mostram um crescimento de estilos como o da ‘sidebar’. Vamos dar uma olhada em algumas das melhores práticas sobre design de background do Twitter e colocar as mãos na massa na criação do seu próprio.

Todos nós reconhecemos o background azul padrão do Twitter, certo? Nâo é um mau design, é limpo e marcante, mas não é bacana quanto a maioria dos usuários do Twitter tem o mesmo visual. Além disso, se você quer conseguir mais seguidores, remover esse background provavelmente vai ajudar mostrando que você é um usuário ativo, ou se você está tuitando em nome da sua empresa ou serviço, ajuda a provar que você não é um spammer.

Em linhas gerais, temos três tipos principais quando falamos de criar seu background do Twitter (outros além de uma cor sólida desinteressante!):

1. Background Repetindo um Padrão

O background repetindo um padrão nos remete à era dos antigos efeitos de background nos sites, criando um gráfico repetitivo e enviando o arquivo para sua conta. A vantagem principal é que um padrão repetitivo funcionará em qualquer resolução de monitor. Exemplos:

2. Imagem de Fundo se Transformando em Cor Sólida

Usando uma única imagem em seu perfil pode ajudar a agregar um interesse visual, e para permitir que isso funcione em resoluções maiores, a imagem se transforma (fade) em uma cor sólida, que é então especificada como a cor de fundo. Exemplos:

3. Background Com Uma Única Imagem Gigante

O terceiro tipo de background do Twitter é usar uma imagem excepcionalmente grande que vai tomar toda a tela. Apesar desse modelo permitir as mais vastas opções em termos de criatividade visual, traz problemas com o tamanho do arquivo da imagem e do fato de que a imagem inevitavelmente será cortada em alguma resolução de monitor. Exemplos:

Com Sidebar ou Sem Sidebar?

Um estilo que surgiou da criatividade nos designs de background do Twitter é o uso de uma sidebar (barra lateral). A sidebar é uma área da tela que é usada para exibir informações adicionais sobre o usuário, como uma imagem maior do perfil, biografia ou lista de sites e outras redes sociais. Devido à falta de espaço na resolução de 1024×768, perfis usam a sidebar para acomodar apenas em resoluções iguais ou maiores a 1280×1024, e qualquer resolução menor terá o sidebar escondido pelo conteúdo principal do Twitter.

Disponibilizei um template útil para que você possa visualizar como seu tema irá aparecer nas resoluções mais populares como 1024×768, 1280×1024, 1680×1050 e 2000×1920. Abra o PSD e coloque seu design abaixo do diretório Template.

Vamos Desenhar o Nosso Próprio Background

Com as informações que temos até agora, vamos desenhar nós mesmo um background para o Twitter legal e criativo. Para funcionar com a maioria dos usuários e minimizar o tempo de carregamento da imagem, vamos seguir com a opção dois e fazer uma imagem junto com uma cor de fundo.

Abra o arquivo Twiter-BG-Template.psd no Photoshop. Nós vamos setar para acomodar em 1280×1024 ou maiores primeiramente, com qualquer resolução menor simplesmente visualizando uma parte a menos do nosso design.

Escolha uma cor sólida para o fundo. Eu estou escolhendo um cinza amarelado. Preencha o layer de fundo usando Option/Alt + Backspace.

Faça download da imagem de uma folha de caderno pautado do SXC e abra no seu Photoshop, corte a sessão do papel usando a ferramenta Pen.

Cole o papel recortado no documento principal, redimensione e posicione de acordo com o layer de template azul.

Dê mais realismo ao papel adicionando um Drop Shadow, use as opções para recriar como a luz poderia naturalmente incidir sobre o papel.

Clique com o botão direito no efeito Drop Shadow da paleta dos Layers e selecione Criar Layer, então pressione CMD+T e selecione Warp para distorcer a sombra.

Arraste o ponto do canto do filtro Warp para esticar a sombra, isso ajudará a dar uma impressão de que o canto está ligeiramente levantado.

Cole no documento esta marca de copo de café, mova e redimensione até a posição correta. Selecione o Blend Mode para Multiply para renderizar transparente as áreas brancas.

Abra essa imagem de uma xícara de café em um novo documento. Crie uma máscara em torno da xícara e corte o objeto principal.

Cole a xícara e posicione no topo à esquerda e adicione uma leve sombra (Drop Shadow).

Uma xícara por ser mais alta iria projetar uma sombra muito maior na vida real, então crie um layer da Drop Shadow e use as configurações de Warp para esticar a sombra para dar mais realismo. Diminua a opacidade para evitar que a sombra se destaque demais do design.

Coloque outro elemento de folha pautada, corte o tamanho, rotacione e posicione no lugar. Adicione outro Drop Shado bem leve para dar realismo.

Transforme a folha com as configurações de Warp para curvar o canto inferior para cima.

Encontre e cole algumas manchas no papel, rotacione e redimensione elas no lugar para que apareçam abaixo da folha de cima.

Nas opções de Blending, adicione uma cor azul escura com Color Overlay para dar a impressão de ter sido desenhado com uma caneta.

Faça download de uma fotografia de uma antiga Polaroid em branco, coloque a imagem no design e adicione uma leve Drop Shadow.

Abra uma foto sua e coloque dentro da área branca da Polaroid. Use uma máscara para cortar o excesso.

Pinte algumas bolas de amarelo e magenta sobre a fotografia, então mude o Blending Mode para Color. CMD+click na máscara da fotografia e corte as bolas coloridas. Isso vai adicionar um leve efeito vintage na imagem.

Escreva uma mensagem pessoal na parte de baixo da Polaroid usando a ferramenta Brush, ou usando uma fonte que parece escrita manual.

Verifique o design por algum incremento final, preste atenção em como os objetos se encaixam em relação ao template.

Corte a imagem para acomodar apenas os elementos gráficos, o resto é apenas uma cor sólida que pode ser reproduzida nas configurações do Twitter.

Salve a imagem para Web, ajuste a compressão JPEG para balancear entre o tamanho final do arquivo e a qualidade da imagem.

Acesse sua conta do Twitter e entre na aba de Design. Procure a imagem que você criou e faça upload para o servidor.

Em seguida mude o esquema de cores para combinar com o design geral. Áreas da imagem vão garantir se a paleta escolhida combina. O mais importante é a cor de fundo, tendo certeza que é exatamente o mesmo código hexadecimal do fundo da sua imagem para uma transição suave.

Com o design completo vá até seu perfil e veja o tema funcionando. Se você gostou deste artigo, venha e diga um alô para mim no Twitter.

E para mim também! Aproveite e siga o @upalele!