Creating a Twitter Background Image for all Resolutions

Twitter doesn't give much space in the profile section, but I've seen a few people who have used the background image to provide more details about themselves. I decided to create a new background image for my Twitter account, http://twitter.com/edbartram, in the same vein.

Creating a simple background image was easy, I fired up GIMP and created a new image 1600x1200. Next, I needed to know where to put the text, so I did some experimentation and came up with a template to handle multiple resolutions.

I created guides horizontally at 10, 110, 240, 895, and 1015 pixels. This provided 6 columns:

• a margin


• an area for detailed text


• a column for a vertical url


• an space where Twitter will display its content


• another column for to repeat the vertical url


• and a final column the expands off to the sunset

I also created a vertical guide at 75 pixels which split the graphic into 2 rows:

• one for the Twitter header


• the other for the content area.

Because Twitter centers its content in the browser page, it moves around when used with different resolutions. The guide values that I used above allowed me to create a Twitter background that displayed gracefully at the most common resolutions:

• 800x600 - Twitter is optimized for 800x600 so the background image barely displays more than a few pixels.


• 1024x768 - The detail column displays to the left of the the Twitter content whcih conceals the 1st url column, but leaves the 2nd url column to display on the right.


• 1280x1024 - The detail column and the 1st url column displays to the left of the Twitter content which conceals the 2nd URL column.


• 1440x900 - Looks just like 1280x1024 with a little more padding between the 1st URL and the Twitter content.