Twitter Background Design – Como fazer e melhores práticas

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

header.jpg

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:

1.jpg 2.jpg 3.jpg 4.jpg 5.jpg

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:

6.jpg 7.jpg 8.jpg 9.jpg 10.jpg

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:

11.jpg 12.jpg 13.jpg 14.jpg 15.jpg

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.

Picture-1.jpg

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.

Picture-2.jpg

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

Picture-3.jpg

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.

Picture-4.jpg

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

Picture-5.jpg

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

Picture-6.jpg

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.

Picture-7.jpg

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.

Picture-8.jpg

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.

Picture-8.jpg

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.

Picture-10.jpg

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

Picture-11.jpg

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.

Picture-12.jpg

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

Picture-13.jpg

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

Picture-14.jpg

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

Picture-15.jpg

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.

Picture-16.jpg

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

Picture-17.jpg

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

Picture-18.jpg

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.

Picture-19.jpg

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

Picture-20.jpg

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

Picture-21.jpg

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.

Picture-22.jpg

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

Picture-23.jpg

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

Picture-24.jpg

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.

Picture-25.jpg

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!

Bookmark and Share


Conheça os outros posts do autor clicando aqui: Kico Zaninetti!
Tags , ,

59 Comentários

  1. Posted 23/07/2010 at 21:08 | Permalink

    @JustinaustinPt

    Hummmmm…… Pow Nao PrecisA Nem Baixa Essa Porcaria De PhotoShop Eu Fiz O Meu Pelo Paint 2010

  2. @gabrielledevito
    Posted 30/07/2010 at 14:38 | Permalink

    @gabrielledevito seguee, @newsfuxicos segue tbm.

  3. Posted 06/08/2010 at 18:37 | Permalink

    não tem outro site que não seja pago? D:

  4. Posted 11/08/2010 at 22:48 | Permalink

    eu quero muito fazer um desses…suas sugestões foram muito úteis…agradeço! xauu

  5. The hunter
    Posted 21/08/2010 at 05:38 | Permalink

    Essa página é uma cópia do site do Chris Spooner. E vc nem sequer deus os créditos ao cara. Que vergonha!! Eis a página original de Chris Spooner o verdadeiro autor desse manual (em inglês): http://www.blog.spoongraphics.co.uk/tutorials/twitter-background-design-how-to-and-best-practices

  6. Posted 21/08/2010 at 09:45 | Permalink

    @the hunter: ô seu animal, além de eu ter dado os créditos pro Cris Spooner (primeira coisa do post) eu pedi autorização pro próprio via e-mail e ele autorizou e ainda incentivou a tradução e publicação desse post.

    Olha as coisas antes de falar merda

  7. The hunter
    Posted 24/08/2010 at 00:47 | Permalink

    OK. Perdão!

  8. Posted 26/08/2010 at 12:44 | Permalink

    Oba, muito obrigada, vou fazer o meu ! :D

  9. Posted 26/08/2010 at 12:45 | Permalink

    Gostei muito das dicas, obrigada pela tradução do artigo !

40 Trackbacks

  1. By Luciano Bargmann on 16/04/2009 at 00:20

    @lunacfc Tu podes fazer upload do teu plano de fundo (o famoso background) Instrucoes aqui: http://twurl.nl/hhxrk5

  2. By Muuuuriilo on 01/09/2009 at 19:32

    hey.. @ysemarques, talvez isso possa te ajudar http://bit.ly/Mw8HN
    :D

  3. [...] Arte e internet Twitter Background Design – Como fazer e melhores práticas [...]

  4. By Carinna Teixeira ✠ on 19/11/2009 at 21:13
  5. By Marina on 25/11/2009 at 13:43

    RT @dalleck como fazer background para o twitter http://bit.ly/Mw8HN/

  6. By Douglas MCT on 25/11/2009 at 15:43

    RT @marynn: RT @dalleck como fazer background para o twitter http://bit.ly/Mw8HN/

  7. By Fernanda Passos on 28/03/2010 at 03:50
  8. By murilo gomide on 28/03/2010 at 11:20

    Site como fazer o background do twitter mto bom !http://www.upalele.com/2009/03/17/twitter-background-design-como-fazer-e-melhores-praticas/

  9. By WeLove_Marimoon on 30/03/2010 at 18:05
  10. By FCO Tas Mania RS on 08/04/2010 at 01:54
  11. By Vickey Parchani on 08/04/2010 at 01:54
  12. By fEFê Ambrosio on 14/04/2010 at 02:57

    @markusharum jpg, 1280×1024, qlqer coisa dá uma olhada nesse site q lá explica um pouco… http://bit.ly/VRVsa

  13. By Ronald Mansur on 26/04/2010 at 17:54
  14. By Ronald Mansur on 26/04/2010 at 17:55

    Twitter Background Design – Como fazer e melhores práticas – > http://bit.ly/T4ldM

  15. By rubens renato lima on 28/04/2010 at 14:03
  16. By Davila Bunekinha* on 09/05/2010 at 21:27
  17. By Helle Salles on 10/05/2010 at 04:14
  18. By igor lopes on 11/05/2010 at 23:59
  19. By Gustavo Zimmermann on 13/05/2010 at 02:02

    #boaspraticas ;) | Twitter Background Design – Como fazer e melhores práticas: http://bit.ly/4p0psD | #design

  20. By Bruno Gross on 21/05/2010 at 17:29
  21. By Lecian Silveira on 21/05/2010 at 17:39
  22. By Diogo Besson on 21/05/2010 at 18:51
  23. By Vinícius Melo on 30/05/2010 at 01:52
  24. By Jansen Gader on 16/06/2010 at 17:26
  25. By Jônatas Israel on 20/06/2010 at 15:03
  26. By Cicero Souto on 25/06/2010 at 19:56

    Twitter Background Design – Como fazer e melhores práticas – http://bit.ly/C8toV

  27. By Vinicius Gabriel on 27/06/2010 at 02:10

    RT @upalele: Twitter Background Design – Como fazer e melhores práticas http://bit.ly/T4ldM

  28. By Ellen Camargo on 28/06/2010 at 04:28
  29. By Maíra on 04/07/2010 at 16:48
  30. By @maíratorres on 16/07/2010 at 00:29
  31. By background » Twitter Trends on 16/07/2010 at 00:51

    @GaaFagundex…

  32. By Rick on 16/07/2010 at 07:52

    RT @upalele: Twitter Background Design – Como fazer e melhores práticas http://bit.ly/T4ldM

  33. By alyne miranda on 24/07/2010 at 22:39

    @mattidioteque não tem um tamanho exato por causa das diferentes resoluções dos monitores. http://tinyurl.com/dkklyv < aqui tem dicas legais

  34. By Bruno on 26/07/2010 at 04:45
  35. By Luis Felipe on 30/07/2010 at 13:50

    @MariliaKrumz taa ae http://bit.ly/VRVsa haha

  36. By communiqweb on 13/08/2010 at 18:29

    Twitter Background design- como fazer e melhores práticas.
    http://migre.me/14ze0 #Design

  37. By nicolleaguiar on 13/08/2010 at 18:30

    RT @communiqweb: Twitter Background design- como fazer e melhores práticas.
    http://migre.me/14ze0 #Design

  38. By igor azevedo19 on 19/08/2010 at 18:20
  39. By Divulg.net on 19/08/2010 at 20:43

    RT @upalele: Twitter Background Design – Como fazer e melhores práticas http://migre.me/fWk

  40. By ' Joice Barreto on 28/08/2010 at 19:47

Comente

*
*

Você pode usar essas tags HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

:D :-) :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen:
upinha