Blog.SpoonGraphics

Twitter Background Design How-To and Best Practices

Read the article

This post was originally published in 2009
The tips and techniques explained may be outdated.

With Twitter quickly becoming the hottest site to be seen on, everyone wants to stand out from the crowd. There has already been a range of quality designs showcased on various sites, which has shown an emergence of trends such as the ‘sidebar’. Let’s take a look at some of the best practices around Twitter background design and get to work creating our own.

We all recognise the default blue Twitter background right? It’s not a bad design, it’s clean and trendy but it doesn’t stand out when the majority of Twitter users also have the same look. Furthermore, if you’re keen to achieve more followers, removing this background would probably help out by showing that you’re an active user, or if you’re tweeting on behalf of your company or service, it helps prove that you’re not a spammer.

Generally speaking, there are three main approaches when it comes to creating your Twitter background (other than a boring solid colour!):

1. Repeating Background Pattern

The repeating background pattern is the age old website background effect, create a repeating graphic and upload the file to your account. The main advantage is that a repeating pattern will work at any monitor resolution. Examples:

Twitter profile
Twitter profile
Twitter profile
Twitter profile
Twitter profile

2. Background Graphic Fading to Colour

Using a single graphic on your profile can help add some visual interest, in order to allow this to work at higher resolutions the image is faded out so that it blends into a single colour, which is then specified as the background color. Examples:

Twitter profile
Twitter profile
Twitter profile
Twitter profile
Twitter profile

3. Extra Large Background Graphic

The third general approach to Twitter backgrounds is the use of an exceptionally large background image that fills the whole screen. While this approach gives the widest options in terms of visual creativity, it does bring up the issues of image file size and the fact that the image will inevitably cut off on a certain monitor resolution. Examples:

Twitter profile
Twitter profile
Twitter profile
Twitter profile
Twitter profile

Sidebar or No Sidebar?

One trend that has emerged from the creativity behind Twitter background designs is the use of a sidebar. The sidebar is an area of screen real estate that is put to use to display additional information about the user, such as large profile image, bio and lists of websites and other social networks. Due to the lack of space on 1024×768 resolution monitors, profiles using the sidebar approach usually only accommodate 1280×1024 upwards, with anything less simply being hidden by the main Twitter website content.

I’ve put together a handy template so you can visualise how your theme is going to look on the popular resoluitons of 1024×768, 1280×1024, 1680×1050 and 2000×1920. Open up the PSD and place your design under the Template folder.

Let’s Design Our Own

Twitter Profile Design

Given the information so far, let’s design ourselves a cool and creative Twitter background. In order to accommodate the majority of users, and to minimise loading times, we’ll go ahead with option two from above and use a graphic along with a background colour.

Open up Twiter-BG-Template.psd into Photoshop. We’ll settle for accommodating 1280×1024 and upwards primarily, with anything smaller simply seeing less of the design.

Choose a solid colour for the background, I’m choosing a warm grey. Fill the background layer using Option/Alt + Backspace.

Download a lined paper resource from SXC and open it up into Photoshop, cut out a section of the paper using the Pen Tool.

Paste in the paper resource into the main document, scale and position according to the blue template layer.

Add some realism to the paper by adding a Drop Shadow, use very subtle options to recreate how the light would naturally fall on the paper.

Right click on the Drop Shadow effect from the Layers palette and select Create Layer, then press CMD+T and Warp to distort the shadow.

Drag out the corner point of the Warp filter to stretch the shadow, this helps give the appearance of a slightly raised corner.

Paste in this coffee cup stain into the document and scale into position. Set the blend mode to Multiply to render the white areas transparent.

Open this image of a coffee cup into a new document, create a mask around the cup and cut out the main object.

Paste in the cup and position to the upper left corner, add a soft Drop Shadow.

The tall cup would cast a much larger shadow in real life, so create a layer from the Drop Shadow and use the Warp settings to stretch out the shadow, adding much more realism. Drop the opacity to avoid the shadow taking focus in the design.

Place in another element of lined paper, cut it down to size, rotate and position into place. Add another very soft drop shadow to give realism.

Transform the page with the Warp setting to curve the bottom corner upwards.

Scan and paste in some doodles onto the page, rotate and scale them into place so that they appear from under the upper stack of paper.

In the blending options, add a dark blue Color Overlay to give the impression of a ballpoint pen drawing.

Download a photograph of an old blank Polaroid, place the image into the design and add a subtle Drop Shadow.

Open up a photograph of yourself and place it into the Polaroid area. Use a mask to cut away the excess.

Paint some blobs of yellow and magenta over the photograph, then change the blending mode to Color. CMD click on the photograph’s mask and crop down the colours. This adds a slight effect to the image to give a vintage appearance.

Write out a personal message onto the lower portion of the Polaroid using the brush tool, or a pre-made handwriting font.

Check over the design for any last tweaks, pay attention to how the objects lay in relation to the template.

Crop down the image to accommodate just the graphic elements, the rest is just a flat colour that can be reproduced in the Twitter settings.

Save the image for Web, adjust the JPEG compression to balance between overall file size and image quality.

Log in to your Twitter profile and head to the Design tab. Browse for your background image and upload it to the server.

Next, change the theme colours to match the overall design. Sample areas from the image to ensure the palette matches. The most important option is the background, making sure it is exactly the same hex code as the image for a smooth transition.

Twitter Profile Design

With the design now complete head over to your profile to check out the theme for real. If you liked this article, come and say hello to me on Twitter.

Join the mailing list and receive my design resources bundle FREE!

Join the mailing list to have every new post hand delivered to your email inbox. Every subscriber gets a FREE bundle of 40+ icons, vectors, brushes & textures!

133 Comments

  1. Marco says:

    Nice article Chris – Really complete. My Twitter account (http://twitter.com/marcofolio) is using option #2 (Background Graphic Fading to Colour).

    Coincidence that you used that polaroid image van stock-xchng – I also used it in my next jQuery tutorial that I’ll place later online today ;) . “Great minds think alike”

    Keep up the good work!

    (0)
  2. Craig says:

    Nice tute Chris. Once again, something out of the norm!

    (0)
  3. thank you. inspired me to create one.. :D

    (0)
  4. Jane Siet says:

    Brilliant.
    Thank you,
    JJ

    (0)
  5. Tim Golden says:

    Thanks for the great info.. I use the repeating background from a photo I took this past summer using the great sunset sky and the side bar to show off my links..
    Take a peek… and/or add meas one of your tweeple

    Tim Golden
    http://twitter.com/goldeneye

    (0)
  6. Chris

    Great stuff as usual, even though you didn’t show my twitter background as an example. ;)

    – Cal

    (0)
  7. ptamaro says:

    Nice tutorial, very thorough — your blog is awesome, keep crankin’ it out… Thanks.

    (0)
  8. MisterFaster says:

    good work! nice details :)

    (0)
  9. Nathan says:

    Nice tut man, something different again! It reminds me, I really have to get round to improving mine, it really doesn’t say much about me as a designer!

    (0)
  10. virua says:

    Nice tutorial. Thanks.

    (0)
  11. ALRADY says:

    Great tutorial.. My twitpage background needs help Maybe i can do something. You give me hope.

    (0)
  12. What a great tutorial, am going to try this out.

    (0)
  13. Neurodexter says:

    Nice work on this. I like the step by step and the option is probably the best. Although I have found that solid backgrounds can look different in Safari and FF2 or 3. Is this an issue or does Twitter resolve this for you. Nice work.

    (0)
  14. xea says:

    cool tutorial!!!!!!!!!!!! good idea!

    (0)
  15. miguelpalazzo says:

    Hey Chris! I’ve been thinking about doing my own background for twitter, and this definitively made that idea started to happen, thanks mate :)

    (0)
  16. Frog says:

    Hmm not 100% sure the design community requires such a spoonfed tutorial on something so basic. I do however like how it’s structured and would certainly help a non technie. Cheers

    (0)
  17. Oh wow, thanks for featuring my background! Had a look on here for some inspiration but I might leave it now :)

    Love your new background btw!

    (0)
  18. Preston Lee says:

    Great tutorial as usual Chris. Thanks!

    (0)
  19. Gordymac says:

    Great tutorial, Chris. Thank you for including me in the round-up.

    (0)
  20. Ryan says:

    I love your background Chris. Fantastic. Some great examples too. Cheers

    (0)
  21. Web Laureate says:

    i think i have a pretty cool / cute / fun background on twitter, too. http://twitter.com/weblaureate

    let me know what you think

    (0)
  22. Thanks for the info. A “how-to” for Chi.mp would be awesome as well. Please….

    (0)
  23. Timothy says:

    awesome. will come in handy

    (0)
  24. Ignacio says:

    How is it mine? Is it bad? http://tinyurl.com/c78cnc

    (0)
  25. Leonie says:

    Great post, I am currently designing twitter backgrounds for the twitter users at Distilled and your handy tips will certainly come in useful. I particularly like the vertical positioning of the gordymac copy, this allows the whole word to be viewed even if not much of the background is visible on a particular persons screen.

    (0)
  26. Navdeep says:

    Nice tips.

    @3drockz

    (0)
  27. Brandon says:

    Great article. I like how you matched the twitter colors to the coffee. Amazing.

    (0)
  28. Alyssa says:

    Great tutorial! Thanks for using my bg as an example, although this tutorial totally makes me want to change it all up again. :) Twitter backgrounds are great fun!

    (0)
  29. Kevin says:

    Great article and tutorial. I think it’s time for a twitbackground update.

    (0)
  30. Anjul Sahu says:

    Really great work. you have inspired me to create a new background image for my twitter account… keep updating me.. @anjuls

    (0)
  31. Gina Kim says:

    THANK YOU for this valuable article. Had I known, perhaps I would have done my background differently? http://twitter.com/ginaleekim

    (0)
  32. Thanks for the step-by-step. Very informative.

    (0)
  33. cheth says:

    Nicely written, will recommend this to those who ask me about backgrounds… Do have a look at mine as well :) @cheth

    (0)
  34. Dave Rigotti says:

    You should take a look at http://twitart.com, they have done a lot of cool designs, including mine.

    (0)
  35. Reader says:

    Nice work on this. Very useful. Thanks

    (0)
  36. femK says:

    This is exactly what I was looking for, Thanks Chris. I am just getting my feet wet in twitter.

    (0)
  37. Phyllis Khare says:

    thanks – just asking around yesterday how to do this!

    (0)
  38. Tushar says:

    Great tutorial…
    Thanks

    (0)
  39. Hello Chris, thanks a lot it’s help to improve mine.
    More simple than yours
    http://twitter.com/gregoirenoyelle/

    (0)
  40. I arrived on your blog by clicking on a link posted by Mashable on Twitter. I’m so pleased to have found out about you. This is an example of how effective Twitter is in promoting people to audiences who might never otherwise have come across them. Keep up the good work.

    (0)
  41. shannon says:

    What if you don’t have photoshop? Other apps work too?

    (0)
  42. Eli says:

    Wicked article dude. Love the outcome!

    @shannon

    You should be able to use any graphic design software to create a cool background for Twitter.

    (0)
  43. B says:

    Great info — Thanks a bunch! I now feel like an “expert!”

    (0)
  44. KnowledgeStar says:

    Okay call me knowledgestuoid but I do not know how to get from here (photoshop) to upload and replace my twitter background. Can you add those instructions for us not in the know? Thanks!

    (0)
  45. David Perel says:

    Chris, spot on with this post mate. Well done and thank you for including me in the collection.

    (0)
  46. Mark Smith says:

    Hey Chris, looks great – one thing to consider is my mistake of designing my twitter background on my 24inch widescreen then looking on my 15inch laptop and it didn’t work quite so well – everything kind of getting stuck behind the main twitter panel…

    Great stuff though, cheers!
    http://twitter.com/markinlich

    (0)
  47. BlackIceJane says:

    I love your tool! Can’t wait to get started on my Own Custom background!!

    (0)
  48. You really know what you’re doing! Thanks for the tutorial and thanks for that template. That thing will come in handy for sure.

    (0)
  49. Qmer says:

    Thanks, good tut.

    (0)
  50. Qmer says:

    Fave it.

    (0)
  51. Nic says:

    Thanks a bunch! As usual great quality tut.

    (0)
  52. Brilliant. Thanks for the tutorial, gonna give it a go :)!

    (0)
  53. Zen Elements says:

    Nice tutorial, Chris!
    I’ve recently just finished re-designing my own Twitter background too although found getting it uploaded succesfully was the hardest part! Maybe one day I can make it into well chosen lists though, such as above ;)

    Alex | Zen Elements

    (0)
  54. patrick says:

    Thanks Chris, perfect timing, I was just starting to look into this.

    (0)
  55. aravind says:

    you just reminded me to redesign my twitter background!
    thanks for the nice post.. :)

    (0)
  56. very well explained tutorial. It’s very good , twitter doesn’t give more options to optimize profile, it’s enough already and interesting to see how people find solutions to this background situation :)

    (0)
  57. thanks for the great tutorial. a very appealing design. greetings from cologne.

    (0)
  58. Breanna says:

    I can hardly wait to make a background, I’m inspired. thanks for the template! It’s just what I was looking for.

    (0)
  59. Jennifer says:

    Thank you for the info! It was very helpful when redesigning my background. Do you have any specific thoughts on file size? My outputed file is @185k .. what is considered acceptable for today’s download speeds?

    (0)
  60. Lala says:

    I admit I didn’t put much thought into my background other than to use one of my fave photos. You’ve given me food for thought, thanks.

    (0)
  61. david says:

    I didnt even KNOW you could change the background… Im pretty new to twitter… but you inspired me.. using your template I turned my homepage into a refrigerator with promo material all over it… lol.. I need work

    david_m_beach

    (0)
  62. Gini says:

    I love this! I’ve been thinking of redesigning my twitter background, but now I’m definitely going to. Thanks! =)

    (0)
  63. Helen Hunt says:

    Awesome stuff-

    This is quite educational and informative, I will definitely be using the lesson learnt to spice up my Twitter background.

    Nice blog by the way :)

    (0)
  64. Cool, I will also Try this stuff in my twitter page , thanks for the tutorial

    (0)
  65. Olatunde says:

    Impressive…though I’m not used to photoshop. CorelDraw X3 seems to be suitable for me. I’ll use CorelDraw X3 and see what I come up with…hopefully!

    (0)
  66. chris says:

    Simple but nice. Have to design my twitter background too….. ;)

    (0)
  67. Ivan Sonavia says:

    Awwwwweeesooooomeeeeeee…

    (0)
  68. Guitargeorge says:

    Thank you for the nice tutorial. I’m looking for a new Twitterlook, and now i have it. :-)

    (0)
  69. Tooby says:

    Great stuff.
    I’ll definitely have to revamp my page after seeing these examples. Thanks for the template, it will come in handy!

    (0)
  70. Josh says:

    Great template you put together. Thanks for that. Cheers!

    (0)
  71. George says:

    Thorough and usable tips as usual, Chris. Thanks for this!

    (0)
  72. Bill Wells says:

    Chris,

    This is great stuff. I’m sure there will be a lot of clones of your background on Twitter. Liked the sampling of colors in image to match palette.

    Regards,

    Bill

    (0)
  73. ericfootnote says:

    nice post . tanks for sharing. regard

    (0)
  74. Rob O. says:

    What’s most aggravating is that it can be really difficult to predict how your background will appear on a variety of resolutions. It’ll even vary depending upon the viewer’s browser app & settings. Many of the best backgrounds end up being mostly obscured by Twitter’s panels.

    So it seems like you really just have about an inch or so of the leftmost portion of the screen to work with if you want to be reasonably sure that your design won’t get stomped all over.

    http://www.twitter.com/robodaniel

    (0)
  75. Conseils SEO says:

    I must admit I don’t have any skills in webdesign, but your tuto allow me to create a better background for my twitter page!

    thanks & greetings from France

    (0)
  76. Tweetplate says:

    I think I love you. Let’s move in together.

    (0)
  77. Adeline says:

    Thanks Chris! I’ve just started to use Twitter and this was great to find :)

    (0)
  78. Pepper says:

    Awesome! Me likey!

    (0)
  79. guillermina says:

    hey thanks for the inspiring background tutorial, check mine on twiter :)

    (0)
  80. Dioney says:

    Muito bom mesmo, bastante completo, e me ajudou bastante para fazer o design do meu background do meu twitter.

    (0)
  81. Juanita says:

    Great quick tutorial. detailed and straight to the point. Now I need to redo my Twitter background

    (0)
  82. Bajzito says:

    A lot of inspiration found here, thinking to make me a new twitter background either :)

    (0)
  83. Sam23 says:

    Thank you so much for the great tutorial. I was just thinking about a new background the other day. Great inspiration :)

    (0)
  84. fleurdeleigh says:

    Fantabulous. Thank you so much for sharing this. I am going to give it a whirl! (now the question remains…is it blond proof.)

    (0)
  85. Colocation says:

    is there an optimised size for tha background image if you use an Extra Large Background Graphic?

    (0)
  86. thgsinc says:

    Love the creativity and the simplicity of explaining. Will go right now and try. You inspired me!

    (0)
  87. Thanks for this info. keep up the good work

    (0)
  88. L P says:

    How cool is that?!!. I will have to give this a go when I decide to have a new background. Thanks for the tutorial.

    (0)
  89. Brendan says:

    great tutorial…also, here’s another great showcase of well designed twitter profiles, and you are showcased there ;)

    http://dropthedigibomb.com/2009/20-creative-twitter-designs-and-what-makes-them-cool/

    (0)
  90. Oridusartic says:

    Thanks Chris, it’s one useful tutorial and extra PSD file too! Lovin’ it! :)

    (0)
  91. ptamaro says:

    Twitter backgrounds are cool, nice tutorial… :-D

    (0)
  92. Baptiste says:

    Hi !

    Thanks for this tutorial,
    Can I use it for my personnal website ?

    Excuse for my bad english but I’m french ;)

    Bye

    (0)
  93. Nice tutorial, thanks!

    (0)

Comments are now closed