There have been a number of posts covering how to create a Twitter background. Most articles give general guidance on the dimensions of the background. Very few of them advise on where to place objects in the background. The reason for this is that the Twitter interface relies on the screen resolution of the viewer’s computer and it is difficult to optimise your Twitter background for all resolutions. This guide tutorial shows you how to create a workable Twitter background image for yourself.

Why create a Twitter background?

A Twitter background gives you an opportunity to express yourself or your brand more effectively than the 160 character limit available in the bio. It is likely that more people will be interested in finding out about you if you express your personality or brand through your background image.

While the Twitter background does not provide the ability to add hyperlinks, it does give you the opportunity to add urls to the image, so that people can find your website. You are also able to express, through text, images or graphics, what you are about.

How to

Create your file in your favourite graphics software (I have used fireworks). You will be optimising the image for PNG, JPG or GIF format later. For now, you need to set the dimensions of the image:

1600px wide x 1200px tall, resolution 72 px/in.

This size canvas will help to ensure that your background image does not tile and is big enough to cover most screen resolutions.

Once the dimensions of the canvas are set and the file is created, the most important areas should be marked out with guide lines. Drag guides to the following locations within your file (zoom in or out to accurately place the guides):

• vertical guideline at 2px from the left edge;
• vertical guideline at 180px from the left edge;
• horizontal guideline at 14px from the top edge;
• horizontal guideline at 80px from the top edge;
• horizontal guideline at 649px from the top edge;
• vertical guideline at 950px from the left edge;
• vertical guideline at 1100px from the left edge.

Twitter background wireframe

Add rectangles of different colours to the boxes created to give yourself a basic wireframe. You can see my wireframe by clicking on this image.

This grid defines the areas available to you to modify in blue. The black area is the background to your image and can be a gradient fill, a solid fill, an image, etc. The areas identified in white and grey are used by the Twitter API and anything you put in these areas will be masked by or conflict with Twitter. Note: if you use the blue area on the right hand side of the Twitter API, be aware that this can expand and contract depending on the screen resolution of your visitors. It can be partially or totally masked by the Twitter API, or fall off the right hand edge of the browser window at small screen resolutions. For this reason, it should only be used for secondary content.

Get creative

You can use anything you wish as your background image or fill. This should tie in with your overall theme, your brand and with the Twitter API.

Your content area on the left should be used for your important information, contact details (website address, blog address) and logo.

The content area on the right should only be used for secondary, non-important information. You do not have to use this if you don’t want to.

Save and upload

When you have finished creating your masterpiece, optimise it as a gif, jpg or png graphic. Make sure it is no more than 800k in size, to meet Twitter’s requirements.

All you need to do now, is upload your finished background:

• Log in to your Twitter account;
• Go to Settings;
• Click on the Design tab;
• Click on the Change background image button;
• Enter the location of the image you exported and upload it;
• Deselect the Tile background image checkbox;
• Click on Save changes.

That is all there is to it. You may need to make some slight adjustments to the image and re-upload it. This is normal as the image appears different at different resolutions and is affected by the floating Twitter API.

Let me know

Use the comments form for this post to leave your twitter url. That way, other visitors can check out what you have done. Please let me know how you get on with this How-to guide, and leave any other tips that might be useful.

Bookmark it!

Hide Sites

No related posts found at this time.