How to create a Twitter background

Everyone who's anyone is on Twitter. Self-employed folk tweet hints and tips on their specialist subjects in the hope of promoting their services. Shops, clubs and restaurants use Twitter to give away vouchers and discount codes. Newspapers, magazines, TV and radio stations, and smashing websites like CNET UK all have their own Twitter accounts from which they link to features, news and reviews.

With so much competition, though, anyone who tweets in anything approaching a professional capacity needs to work hard to make their content stand out from the crowd. The best way to do this is to post meaningful, timely tweets that will be retweeted widely by your peers. With any luck, these retweets will drive other tweeters back to your profile page to find out more about you.

The trouble is that the biography box on Twitter gives you room for just 160 characters. That's the same as a text message, so, unless you want to resort to using ugly and unprofessional text speak, you'll have to think long and hard about what you're happy to leave out.

The alternative

There is a better way -- and it kills two avians with one rock. Use the dead space that surrounds the tweets on your Twitter profile to both smarten up your page and tell your visitors more about you.

The main body of a Twitter page, encompassing a user's stream and sidebar, is 920 pixels wide -- a size chosen because it's safe to assume that almost everyone these days runs a display set to at least 1,024x768 pixels, which, incidentally is also the native resolution of many tablets.

Creating a Twitter background

We're going to take a regular Twitter profile, which uses a standard background and default colours, and change both. We'll add a new photo of the author, having first made a few tweaks to overlay a URL on their T-shirt.

Using the image editor of your choice, create a new image. We've created a wide canvas that's just 500 pixels tall. Set a plain background colour (white in our case) and position your chosen image to the very left. Try to keep it as close as you can to the border.

Use the gradient fill tool to soften off the right and bottom edges of the image, so that it fades into the background. We've also performed some colour correction to lighten up the face, and used the clone tool to remove the design from the front of the T-shirt.

Type your URL on a new layer and position it roughly where you want it to appear, and then scale and rotate it to fit in place. Avoid using black for your text, as you won't be able to blend it properly later. If using Photoshop, like us, a further step will make the URL appear more realistic. Pick Filter/Liquify and use the pinch and bloat tools to slightly deform the text so that it follows the contours of the t-shirt. Avoid the temptation to be heavy handed here -- a subtle tweak really does go a long way.

Exit the Liquify tool and change the text layer's blend mode to 'colour burn', and reduce its opacity to around 70 per cent, so that some of the shadows and highlights of the T-shirt show through the characters. Then save your image using the built-in Web tools to reduce its size. We managed to get ours down to around 30K thanks to the flat white background, although Twitter will let you use anything up to 800K.

Log into Twitter and click your name in the upper right-hand corner, followed by Settings/Design. Click the 'change background image' button and upload the file you've just created. Don't set it to 'tile'. Save and then preview the results. As you can see, our image works well, with the URL clearly visible to the left of the profile body, but the green colour of our old design still shown below it.

Return to the design options and click 'change design colours', then pick a new tone for the background. Optionally change the sidebar and link colours, too. We've chosen white for the sidebar and its border so that it disappears into the background, and a knocked-back red for our links that matches the URL on the T-shirt.

Returning to our profile, we can now see that our work is done. The background image peeps out from behind the stream of tweets and is positioned well enough to the left to save it from being obscured.

The rules of a Twitter background

Every Twitter background will be slightly different, and so will the process involved in making it. Keep the following four rules in mind when designing your own to be sure of a successful result:

• Twitter aligns all backgrounds to the left, and centralises your profile. Without knowing how wide your visitors' browser windows are, you have no way of knowing where the free space to the right of the profile begins, so don't try and design a background with elements posted to both sides.
• Keep your design as narrow as possible. Background information that disappears behind the profile looks messy and unprofessional.
• Think about what's going to happen when your background runs out. Set your profile background to match the background colour of your image.
• If your image is anything other than a pattern without any text, don't tile it. Repeating typed information where the profile box may overlay it is messy.