Inspired by Frostie’s “make more of twitter” article I thought I’d give creating a custom background on twitter ago myself. I also thought I’d make a mini tutorial out of it as I went along to share with others. Here we go…

Picking a theme

First and foremost, what is it you want your twitter profile to say about you? Do you travel? Do you have a specific hobby or a particular job? Is your twitter account tied directly to a website around a certain subject? These are all things that can be put to good use and style your background theme.

I like to think that I’m not the type to take myself too seriously and I wanted my Twitter profile to reflect this. Nothing too corporate, nothing too serious, just something that’s personal and fun. The end goal was to hopefully reflect a little part of my personality but to also tie twitter back my affiliate marketing blog.

As there’s not a great deal to customize in twitter other than the background a font colours I was also interested in how I could be a little more creative within twitters constraints.

Background size and template

Ok, so what size should you make your background? A question that’s not as straightforward as it sounds. You will have to take into account the many different screen resolutions people use and how your background will look across the majority of them.

Long gone are the days when 800 x 600 was the most popular. In fact 1024 x 768 is now been surpassed with much larger resolutions available on wide screen laptops. Personally I use 1680 x 1050 so I wanted to make sure my images was at least that size however the details and main focus should cater for people using 1024 x 768 and the popular wide screen resolution of 1280 x 800.

The most important thing to consider however is the centralized content that you have no positional control over. This is the main content section in Twitter and no matter what resolution you have always appears in the center of your screen. This has a width of 763 pixels so you only have the remaining workspace around the sides to work with.

• 1024px – 763px = 261px (or 130.5px each side)
• 1280px – 763px = 517px (or 258.5px each side)

Opening up Photoshop I mapped out the various screen sizes to produce something like the following:

What does this mean? Well it will probably make more sense if we colour some bits in.

The blue sections will be visible to everyone with a 1024 resolution and the green sections with a 1280 resolution. The white section is the “no go zone” where the twitter content will move about and cover the background depending on resolutions. Anything here will be more than likely hidden.

Let’s get designing

I wanted a rough, textured feel for my background and eventually settled on a royalty free photo from Flickr. It’s actually a close up of a rusting car and I liked the combination of reds, blues and peeling paint.

Ok next up, I wanted to focus on the very left column that everybody will see no matter what his or her resolution. Here I wanted to have some fun so found a silly picture of me, added a few effects and then also some text with my blog address.

Next up, the far right section for those on the larger 1280 resolution. A few more pic but this time I wanted to give them that Polaroid look and feel.

Having got to this stage I felt like things were almost done but I didn’t quite like the way the photo’s on the right sat on the background. I thought it would be good to have them “pinned” to the desktop or taped together. So as a last little touch added a white stripe which runs as the background for the existing twitter navigation and add a red map pin to the first photo and sticky tape to the others. Like so…

And we’re done

The finished background showing how it all looks with the tiwtter content in place. You can see it live and follow me on twitter here. If you’ve got a custom back ground post a reply below and show us your pimped up twitter page.

Thanks