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

35 Comentários

  1. Posted 17/03/2009 at 12:17 | Permalink

    Excelente artigo! Parabéns kicão!

  2. Posted 17/03/2009 at 13:52 | Permalink

    Nossa! Parabéns!
    Ce me ajudou demais com isso viu :)

  3. Posted 19/03/2009 at 11:24 | Permalink

    Belo trabalho, vou seguir as dicas e dar uma ajeitada no meu.

    Valeu.

  4. DouglAS
    Posted 22/04/2009 at 20:43 | Permalink

    cara, ficou muito bom! Achei no início que você ia mostrar um tutorial simplório com alteração de cor e colagem de uma foto (como muitos fazem) mas me surpreendeu!
    Parabéns pela qualidade e didática!
    Abraços
    Douglas

    twitter/the_base

  5. marlene
    Posted 27/04/2009 at 02:02 | Permalink

    Ola
    Gostaria de saber se os backgrounds só podem ser feitos com o Photo Shop
    Obrigada

  6. Posted 27/04/2009 at 09:29 | Permalink

    @marlene Não mesmo! Você consegue fazer com qualquer editor de imagens. Só que para esse tutorial o editor utilizado foi o Photoshop.

  7. Eduardo Gallo
    Posted 09/05/2009 at 19:14 | Permalink

    Muito bom, parabéns. Ótimo material.
    Abs

  8. Joy Assis
    Posted 22/05/2009 at 22:40 | Permalink

    Valeu pelas aulinhas, adorei mesmo.
    Sua didática foi muito boa e as dicas sobre as cores foram ótimas!

  9. paulo
    Posted 23/05/2009 at 07:53 | Permalink

    Ei cara, valeu aí pelas dicas. Teu twitter tá muito legal.

  10. Posted 29/07/2009 at 17:49 | Permalink

    Adorei, excelentes dicas!!
    ^.^

  11. Luísa Trevisan
    Posted 12/08/2009 at 06:12 | Permalink

    muito boa as dicas! não fiz igual ao seu background, mas me ajudou muito a ter uma noção de como fazer. Obrigada ;]

  12. Posted 12/08/2009 at 09:45 | Permalink

    @luísa que bom que gostou. a idéia é realmente mostrar como funciona o processo e o interessante é cada um usar essas idéias e fazer um wallpaper diferente.

  13. Posted 19/08/2009 at 15:44 | Permalink

    Muito bom mesmo, me ajudou bastante. =]

  14. Michele
    Posted 19/08/2009 at 21:41 | Permalink

    mais qual Photoshop eu devo usar ?
    aí no seu exemplo de photoshop é diferente do meu :s
    não sei como fazer. que saco viu, em nenhum site explica direito :@

  15. Posted 19/08/2009 at 21:53 | Permalink

    @michele não se atenha à ferramenta, mas sim às técnicas aplicadas. o photoshop utilizado é o mesmo, mas é no Mac.

  16. Posted 24/08/2009 at 13:50 | Permalink

    gamei, mas eu não tenho o photoshop :\

  17. Alyne...
    Posted 25/08/2009 at 01:00 | Permalink

    adorei as dicas, ótimas… vou recomendar esse site pra quem tá querendo mudar o fundo do twitter… tá nos meus favoritos =D

  18. Posted 26/08/2009 at 08:50 | Permalink

    Uhuu muito bom a questão é se eu consigo fazer isso, mas tentarei… follow me @lukstraik

  19. Luddy
    Posted 02/09/2009 at 01:48 | Permalink

    Não tenho Photoshop tem com eu usar outro programa que dê quase o mesmo resultado ?

  20. Andre matos
    Posted 03/09/2009 at 18:06 | Permalink

    @DeHBH

    pra quem nao tem o photoshop

    vai ae uma dica..
    [ photofiltre ]

    pragama leve e pequeno e o melhor gratuito..

    te mais ..

    haa me segue ae!

  21. Posted 11/09/2009 at 07:54 | Permalink

    Vlw brother.. ajudou bastante com essas dicas… me segue @haytonsantos

  22. Alyne
    Posted 12/09/2009 at 17:56 | Permalink

    Muitisssimo Obrigada pelo arquivo psp, me ajudou muuuuiiiitttoooo, queria fazer meu background e estava em duvida justamente sobre isso. VALEUUUU!!!!!!

  23. iris
    Posted 16/09/2009 at 11:19 | Permalink

    fiz o meu background no photofiltre, mas qdo carrego no twitter ele aparece em quatro partes (fotos), e não na tela inteira(cheia)…. como posso consertar?

  24. Posted 16/09/2009 at 22:20 | Permalink

    @iris tem que aumentar as dimensões da imagem.

  25. @Rafagualdino
    Posted 22/09/2009 at 14:33 | Permalink

    Olá.. muito bom o artigo… parabéns! Tenho uma dúvida, se vc puder me ajudar… Fiz um background bacana só que a dimensão da imagem ficou muito grande, acho que o problema ta na resolução, pois no meu pc ele corta o fundo todo e no Imac que tenho ao lado a imagem só corta embaixo. não sei se devo faze-lo em 800×600 pois eu fiz em 1024×720.

  26. Adrieli
    Posted 24/09/2009 at 12:50 | Permalink

    Existe algum editor de imagens que não seja instalado no computador que dê pra fazer isso?

  27. Posted 24/09/2009 at 13:06 | Permalink

    @Adrieli outro dia vi um bom editor de imagens na web, mas com certeza é bem mais difícil de fazer do que com um editor instalado.

    O editor é o http://pixlr.com/

    Tenta aí e me fala se deu certo.

  28. Posted 28/09/2009 at 13:42 | Permalink

    Pode ser com o photobrush??

  29. João Uchôa
    Posted 02/10/2009 at 21:51 | Permalink

    Queria aprender o de repetição de padrão, tem como? :)

  30. bruno
    Posted 14/10/2009 at 11:54 | Permalink

    o meu não altera para imagem nenhuma. Criei algumas no ps, quando vi que nenhum funcionava, tentei pegar algumas fotos de câmera digital mesmo, bem trash… e ainda assim… nada. Ideias do que pode ser?

  31. @BruunaRoverao
    Posted 10/12/2009 at 20:08 | Permalink

    ah, achei muito legal esse BG… eu até tenho o CS2 instalado aqui, mas nem manjo muito :x o BG que tá no meu Twitter eu fiz pelo PhotoFiltre Studio, mas sei lá, sou sem criatividade HAUIEHIUEA
    parabéns pelo BG, ficou show :*

  32. Posted 16/12/2009 at 16:13 | Permalink

    Cara, você teve a manha nesse artigo, tá de parabéns. Sô seu seguidor no twitter agora!!!

  33. Carlos Durães
    Posted 02/02/2010 at 22:15 | Permalink

    Gnte adorei o post mais eu to com um megaaa problema o editor é Photoshop… tah tem um monte de photoshop xD qual é o q vc usou? Eu tenho o picasa e o photofiltre mais o post tah peeerfeitooo #AMO

  34. stefane
    Posted 05/02/2010 at 16:53 | Permalink

    adoorei, agora siim eu tenho um background legal!
    obrigada colega ;*

  35. Posted 04/03/2010 at 13:33 | Permalink

    Adorei a dica..
    Faça mais post sobre esse assunto com outras imagens!!
    Beijos

Um Trackback

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

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>

upinha