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.

1
Shares
Share on Pinterest
There are no images.
133 Comments submitted Add yours!
Subscribe receive Spoon Graphics newsletters

Subscribe to my newsletter to be the first to hear about new posts

133 Comments

  1. 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!

  2. 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!

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

  4. 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.

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

  6. 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

  7. 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.

  8. 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!

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

  10. 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.

  11. Wicked article dude. Love the outcome!

    @shannon

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

  12. 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!

  13. 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

  14. 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

  15. 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 :)

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

  17. 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?

  18. 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.

  19. 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

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

  21. 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 :)

  22. 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!

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

  24. 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

  25. 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

  26. 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

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

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

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

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

  31. Hi !

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

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

    Bye

Comments are now closed