As I have been delving more into the world of Twitter, both for MutinyWare and personally, I have found a variety of very cool backgrounds, and was quickly faced with the necessity of creating my own custom backgrounds.

Trying to determine the best screen size, image size, and where to locate important information, quickly became important in creating my designs.  Below I will detail what I have come up with, and also offer a Photoshop template to get you started to creating your own custom Twitter background.

Screen Resolution

Screen or Display Resolution is the size of screen that your visitors will be viewing your website/Twitter in.  More accurately, is the actual pixel dimensions of their computer display.

From: http://www.w3schools.com/browsers/browsers_display.asp

The current trend is that most computers are using a screen size of 1024×768 pixels or more:

Date                   Higher    1024×768    800×600    640×480    Unknown
January 2009        57%             36%                 4%                   0%                  3%

I typically design for the 1024×768 or 1280×1024 dimensions.  Keep in mind that many people may have a widescreen display…such as I do.  In this case, you need to make sure that your image isn’t square, but adjust the dimensions.  Ex. 1280×800.

Twitter Specs

Note: The sizes below are approximate, but very very close to being accurate.

• The width of the Twitter space, including the side bar is 763 pixels.
• The space above the Twitter feed, where the Twitter logo and menu reside, is 71 pixels.

Photoshop design template preview

The Design

Below are some bullet points to keep in mind when creating the design.

• If you want to only use the left side for your primary image:
  • keep in mind the resolutions
  • you can make a smaller image, fading out the background to a solid background color to match your Twitter settings
• Remember that your design may be partially covered up if visitors have a lower resolution or resize their browser window
• The design is always anchored to the top left corner of the browser window

Here is a great site to get some inspiration, and see how others have done their backgrounds:  http://twitterbackgroundsgallery.com/

When browsing the above samples, make sure to actually visit the Twitter site for those designs, and resize your browser window to see how the look is affected.

Here is a Photoshop template to help you get started!  Happy designing!