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: !
Tags , ,

82 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

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

    @gabrielledevito seguee, @newsfuxicos segue tbm.

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

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

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

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

    ReplyReply
  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

    ReplyReply
  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

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

    OK. Perdão!

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

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

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

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

    ReplyReply
  10. Posted 06/09/2010 at 16:09 | Permalink

    Cara mi ajudo mt … tp tava precisando das medidas i tal … ai vi ai peguei u fiz um manero p mim ! da uma olhada lah nu meu twitter : @pedrolemescm.
    Si puder me segue i mi indica ae ! vlw cara.

    ReplyReply
  11. Posted 22/09/2010 at 09:43 | Permalink

    Pra quem quiser outra idéias, me segue: @MiKeDS_
    eu faço backgrounds para voce!

    ReplyReply
  12. Posted 01/10/2010 at 12:30 | Permalink

    Kiko, inicialmente, parabéns peloa iniciativa de tradução do tutorial. Li integralmente, e deu uma certa preguiça, depois fui fazendo passo a passo, e fiquei bastante satisfeito com o resultado que obtive! Personalizei, baseado no modelo, pretendo fazer outro nos mesmos moldes no entanto, mas “original”… Link do meu template: http://tinyurl.com/2f6rptp
    Saudações!

    ReplyReply
  13. Gabriel
    Posted 16/10/2010 at 22:22 | Permalink

    :D Amei :o tive ate uma aula rsrsrs :P

    ReplyReply
  14. Posted 17/10/2010 at 23:04 | Permalink

    Eh mto complicado, e o passo a passo eh mto comprido DDD:
    bem bonitos os bg’s (:

    ReplyReply
  15. Posted 17/10/2010 at 23:05 | Permalink

    locu , nope, sebu :B

    ReplyReply
  16. Geanny
    Posted 28/11/2010 at 09:47 | Permalink

    PORFAVOR FAZ UM BG DO PE LANZA PRA MIM LINDOOO.

    ReplyReply
  17. Posted 16/01/2011 at 14:42 | Permalink

    Mto bem explikdo!Obg plas diks!!Vô ver oq sai da minha criatividade, e vô tentr fzr um tmbm!!! :lol:

    ReplyReply
  18. Ana
    Posted 28/02/2011 at 01:10 | Permalink

    Ótima iniciativa de traduzir e disponibilizar esse conteúdo. Muito bom e didático.
    Faça mais e mais.

    ReplyReply
  19. UrielL
    Posted 22/03/2011 at 12:25 | Permalink

    :wink: Siga-me ~>> :arrow: @UrielL1

    ReplyReply
  20. alan
    Posted 30/03/2011 at 12:17 | Permalink

    Ao The Hunter..

    Cara cala a boca, ele colocou o nome do cara no inicio da postagen , e disse de onde tirou e traduzio, ele fez um otimo trabalho pra ajudar agente e vc quer esculaxar com o cara, se liga seu manézão…

    e Kico! vlwww! mto bom o post , ajudou bastante.

    ReplyReply
  21. Posted 30/03/2011 at 12:52 | Permalink

    Alan, valeu demais pelo comentário e apoio!

    E pode perdoar o the hunter, ele já se desculpou hahahaha

    Abração

    ReplyReply
  22. fabiano
    Posted 05/04/2011 at 19:34 | Permalink

    sinceramente eu acho que o twitter deveria colacar uma opção para não repetir o background, uma opção no CSS que fosse editavel para repetir a imagem ou não, exemplo:
    body {background: url(endereçodaimagem) no-repeat;} isso faria com que a imagem não ficasse repetindo, pelo fato se eu quiser criar um background com uma foto minha, fica ridiculo a minha foto repitir, mas se tivesse essa opção ficaria muito melhor.

    ReplyReply
  23. Posted 06/05/2011 at 18:23 | Permalink

    NAO ME AJUDOU NADA :twisted:

    ReplyReply
  24. Posted 07/05/2011 at 18:35 | Permalink

    http://www.upalele.com/wp-content/themes/thematic/images/upinha.gifEU TENTO FAZER UM BG MAIS EU NAO COMSIGO :mrgreen:

    ReplyReply
  25. Ana
    Posted 09/07/2011 at 20:20 | Permalink

    EEI eu preciso de um BG para meu twitter FC de Harry Potter e para o meu pessoal. sério eu não posso baixar o photoshop pq é muito pesado. faz pra mim ? kkkkkkkkkkkkkkkkkkkkkkk Eu sei que é pedir demais , mais tipo eu preciso pakas. manda um email pra mim qualquer coisa ;)

    ReplyReply
  26. Rafael
    Posted 11/07/2011 at 22:57 | Permalink

    Pow…ajudou d+. Vlw pelo post meus parabéns pelo trampo que não deve ter sido fácil.

    ReplyReply
  27. Posted 04/08/2011 at 11:06 | Permalink

    Muito bom! Ajudou pra caramba! Obrigada!

    ReplyReply
  28. FC Acrianas Santana
    Posted 30/08/2011 at 10:29 | Permalink

    Por favor poderia fazer um BG do Luan pra mim?não posso baixar o Photoshop é muito pesado…=/ :?

    ReplyReply
  29. Hp
    Posted 26/12/2011 at 17:26 | Permalink

    Cade o nome do photoshop? :?:

    ReplyReply
  30. Kimberly
    Posted 19/01/2012 at 18:45 | Permalink

    voce poderia ensinar a fazer por outro programa, o PS poucos tem podia ensinar a fazer pelo Photoscape ou Photofiltre née? abçs

    ReplyReply
  31. Cristiane Campezzi
    Posted 21/09/2012 at 15:36 | Permalink

    Olá, eu montei direitinho como foi explicado nos posts, mas quando vou subir a imagem para o Twitter aparece a seguinte mensagem:

    Sua imagem é muito grande. Seu arquivo não é uma imagem. Seu arquivo não é uma imagem. Content type não pode estar em branco Size não pode estar em branco Filename não pode estar em branco

    O arquivo tem 372KB – 1904×995 – salvo em JPG

    Me ajuda por favoooor =).
    Obrigada

    ReplyReply
  32. Posted 19/02/2013 at 23:34 | Permalink

    Esse programa é show … pena que no meu pc já tem o Photoscape e não quero colocar mais um programa pro meu computador ficar pesado. Pesquei muitas dicas de design nesse seu post e fiz alguns BGs em editor on line, free, sem baixar nenhum programa.Fiz uns photoscape com molde certinho pra caber nas dimensões de qualquer navegador. Dá pro gasto, sabe?

    Mas, esse tutorial é bacana pra quem tem esse programa. Pra quem não tem é fazer em photoshop on line mesmo. Mesmo assim, valeram as dicas, principalmente de design e montagem de BG.
    Abraços

    ReplyReply

81 Trackbacks

  1. By Cristian Latrônico on 17/10/2010 at 20:35

    humm muito legal isso http://migre.me/1Bp9i

  2. [...] inútil?http://tweetbeep.com/ – seja avisado quando aparecerem novos tags na nuvem. http://www.upalele.com/2009/03/17/twitter-background-design-como-fazer-e-melhores-praticas/ - faça o seu próprio background.O meu Twitter é http://twitter.com/mediugorie e meu passatempo [...]

  3. By Amandeênhãá on 23/10/2010 at 15:45
  4. By Amandeênhãá on 23/10/2010 at 15:49
  5. By neidilson on 26/10/2010 at 14:23
  6. By Giovanna Martello on 06/11/2010 at 14:34
  7. By Colirios&Divas_teen on 10/12/2010 at 20:39
  8. By The Smilers World on 16/12/2010 at 07:59
  9. By Victor Pacheco ☮ on 17/12/2010 at 16:52
  10. By Leom. on 26/12/2010 at 14:21
  11. By justinbiebeer15 on 26/12/2010 at 22:17
  12. By andreagoliveira on 28/12/2010 at 13:45
  13. By Cleiton Design on 03/01/2011 at 03:41

    Twitter Background Design – Como fazer e melhores práticas http://t.co/0pbIZHQ via @AddThis

  14. By Guilherme A Pangratz on 04/01/2011 at 00:56
  15. By Cleiton Design on 13/01/2011 at 12:04

    Twitter Background Design – Como fazer e melhores práticas http://t.co/0pbIZHQ via @AddThis

  16. By Victor Melges on 14/01/2011 at 00:32
  17. By Raphael Youth Real ✔ on 14/01/2011 at 18:37
  18. By Karina Santos on 18/04/2011 at 15:51
  19. By Delicious Over 50 on 09/06/2011 at 21:58

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

  20. By Jesiel Bezerra on 11/06/2011 at 06:25

    @ruanuk >>> http://t.co/Rjio1H5
    <<<Espero ter ajudado!

  21. By Felipe Alves (: on 20/06/2011 at 17:56
  22. By ↘ ֆ 「 ŴĔĔŠŁĔĔŶ 」 ֆ ↙ on 23/07/2011 at 21:56
  23. By Hebert Richard on 24/07/2011 at 22:52

    @rebelde_sabado depende que tipo!talvez esse site possa te ajudar http://t.co/ORfapmn

  24. By ƒєℓIpє ♪ vaѕ¢σи¢єℓσѕ on 26/07/2011 at 23:37

    @maa_isabelly http://t.co/OtmneH3 aprendi a faser nesse blog! Da Uma Olhada! Dicas Boas *–*

  25. By ƒєℓIpє ♪ vaѕ¢σи¢єℓσѕ on 26/07/2011 at 23:47

    @maa_isabelly ae , esse site ensina a fazer #BG –> http://t.co/OtmneH3 Espero Ter Ajudado! Vo Terminar os meus assuntos . . . ;(

  26. By Chriztian Conorado'~ on 07/09/2011 at 06:55
  27. By - Vick .* on 18/09/2011 at 16:55

    @Mania_LS Lii ve se ajuda —-> http://t.co/vBC7EwpE

  28. By ზ; Brazilieber on 22/11/2011 at 20:52

    @iKidrauhlSwagB Acho que eu achei,to lendo ali pra ver se é shaush' http://t.co/RCoOOtRP

  29. By UZÓI DO NIALL on 17/07/2012 at 01:52
  30. By Robby do Cosmos on 29/07/2012 at 15:04
  31. By DudahBochi on 19/08/2012 at 15:38

    @chrisspooner (http://t.co/doLHahBy) eu fiz uma imagem p mim, de 1280 / 1024 e enton eu n consigo bota!!pode me ajudar?

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