Jennifer Farley joins the SitePoint blogging team today, and will be posting tips and tutorials on graphic design, typography, layout and more.
If you’re looking to enter the current SitePoint Twitter Background competition, or one of the other Twitter background contests on 99designs, then this post is a great place to start!
You can add your branding or personal style to Twitter by creating your own background.
Your own background can help you stand out from the pack and it’s a chance to shine in a sea of default blue backgrounds! Think of it as an extension of your business card that you’re handing to every visitor who comes to your Twitter homepage.
There are no specific guidelines from Twitter regarding dimensions and setting up a background, so let’s take a quick overview of what you can do to create your own background.
Dimension Dilemma
The main problem you’ll face when designing a Twitter background is that your Twitter homepage will look quite different on various monitors at various resolutions.
Resolution 800×600
Resolution 1024×768
Resolution 1280×800
As you can see from the images above, the higher the resolution of the screen, the more of the background is visible. So you need to decide at what point you want to compromise. According to statistics at W3Schools, the majority of users have a screen resolution of 1024×768 or higher, so I’m going to take the liberty of designing a background at that resolution and completely ignore 800 x 600. Hey! It’s tough love for those older monitor users.
I used Photoshop to set up a document of 1024 pixels by 768 pixels and produced a simple coloured background – a gradient running from light red to dark red, blended over a grungy texture.
The main Twitter area is approximately 763 pixels and the Twitter logo and menu take 71 pixels. You will need to leave space in your design for these parts of the Twitter page.
As mentioned earlier, this is a good opportunity to share some of your details on your background, so I’ve added some text to the left side of the image taking into account the 760 pixels required in the centre for the main Twitter space. Once your background is applied in Twitter, it anchors to the top, left corner of the screen, so keep that in mind for your design.
When you’ve finished your background design and saved it for the web, go to your Twitter homepage and choose Settings, then click on the Design tab. Click on the “Change background image” link and browse for your new image. Do NOT click on the “Tile Image” checkbox.
To make your whole design come together, you should set up the colours for the links and text. Do this by clicking on the “Change design colours” link. By setting design options in Twitter so that the background colour is the same as the right hand side of the background image, you can ensure that your design appears seamless.
Resolution of 1024×768 pixels.
Resolution of 1280×800 pixels
To find more Twitter background inspiration check out the following links:
- Free: 10 Tasty Twitter Backgrounds
- Beautiful Twitter Backgrounds to Inspire you for the SitePoint Twitter Contest
- Twitter Backgrounds Gallery
- Twitter Extended Backgrounds
Great, simple tips! Be aware that Twitter is currently having an issue with uploading background images (knowledge base article here: http://help.twitter.com/forums/31935/entries/30125) The solution if twitter won’t let you change your background is to dump your cookies and try again.
April 29th, 2009 at 10:49 pm
Great first post Jennifer! Look forward to reading your regular tips!
April 30th, 2009 at 12:05 am
Hi Anne, thanks for the link and the helpful tip.
Hi Matt, thanks for the welcome!
April 30th, 2009 at 6:07 pm
Good tips Jenny. You inspired us to change our Twitter background.
Three iterations later and our design is live:
http://twitter.com/magictoolbox
We’ve blogged 6 tips for a great design:
http://www.mrmonkey.com/blog/2009/04/6-tips-for-better-twitter-background.html
May 1st, 2009 at 3:30 am
Yeah over at http://doctortwitter.com we use the larger resolutions..I’m thinking about entering a few of our designs into the contest..but can they be mass used designs? because most will also be featured on our website.
May 2nd, 2009 at 6:27 am
Great tutorial Jenny, I love the grunge aspect. Grunge and abstract are some of my favorite designs. I did a twitter grunge background for Easter and had a blast creating it.
I have gone a resolution higher and am currently creating twitter backgrounds at 1600 x 1024.
I figure at the rate things move it won’t be long until 1600 x 1024 is the current resolution used by most users.
May 2nd, 2009 at 4:17 pm
You explained in a simple way how to make your own twitter background.great post.
May 7th, 2009 at 9:14 pm
Great tips. Everyone should at least ‘attempt’ to customise their Twitter background.
My favourite background at the moment is the one on Drivers Republic’s page
http://twitter.com/DriversRepublic
May 11th, 2009 at 6:18 pm