Design a Unique Twitter Background


Spreading word about your business or services via a Twitter account can be a useful addition to a marketing strategy. There are many resources with advice on what, when, and how to tweet. But since we're creative professionals, we should also pay attention to what our Twitter pages look like. In this tutorial, I'll explain how to create a Twitter background that meets four goals:

1. Displays well on the widest range of monitors
2. Visually conveys what you're about
3. Contains extra information about you or your company
4. Loads quickly

For reasons Chris Spooner spells out in an excellent blog post, the kind of background that best meets those goals is a graphic that blends into a solid color you choose in Twitter's Design settings. Andrew Kelsall's background image, which fades into white, is an example of that concept:

Click on this and all other screenshots to see larger versions.

Tip 1: Deal with Diversity
People will view your Twitter page on everything from mobile phones to netbooks to 30" monitors. Because your background image will display differently on each one of these, the ideal background will look good even when part of it is cut off.

Chris Spooner's free Photoshop template gives you a feel for what your design will look like at 1024×768, 1280×1024, 1680×1050, and 2000×1920. He recommends designing for monitors with resolutions of 1280×1024 and higher.

To download the template, click this link and search for the filename "Twiter-BG-Template.psd".

With just the 1280×1024 layer visible, the template looks like this:

This template doesn't include a Twitter sidebar, which can be invisible at certain resolutions and when browser windows aren't fully open.

Tip 2: Be Visually Consistent
You've probably already established a visual brand with a company logo, business card, and Web site. Though you may choose to take a few liberties, your Twitter background image should reinforce that brand.

Twitter backgrounds for CNN and the NBA maintain the companies' well-known brands:

This tip isn't just for large companies. Note how the Web site and Twitter page of Web designer Christopher Schmitt reinforce each other:

Tip 3: Supply Details
Depending on their monitors' resolution and the size of their Web browser windows, visitors to your Twitter page might see quite a bit of the background to the left and above your status updates. You may want to use this space for information about you or your company, such as a Web site URL, a phone, number, or an email address.

Tip 4: Make the Load Time Speedy
Twitter's background image requirements are pretty liberal: As long as you upload a GIF, JPG, or PNG file that's smaller than 800k, Twitter will accept it. However, just as people will view your page on all sorts of displays, they'll also have all sorts of Internet connections. The smaller the file size of your background image, the faster it will load. 300K is the maximum I recommend. Photoshop's Save for Web & Devices (under the File menu) makes it easy to experiment with different compression levels until you find an image size/image quality compromise you can live with.

One adjustment you can make that doesn't affect load time at all is to change the colors used to display your page's background, text, and links. When you're logged into your Twitter account, click on the word "Settings" at the top of the page, then select the Design tab. Choose "Change design colors" and the world of hexadecimal Web colors is your oyster:

Bonus Tip 5: More Resources
If you need inspiration, there's nothing better than wandering around Twitter itself. You can also check out the scads of free Twitter backgrounds online.

When you come across Twitter backgrounds you admire and want a better look at them, try the free peekr. It temporarily removes a Twitter user's updates, bio, and other information so you can view the entire background graphic.

Here's Rufus Deuchler's page as it appears normally:

And as it appears when you use peekr:

Have you designed a Twitter background you're proud of? Submit it to Twitter Backgrounds Gallery, the "largest showcase of unique Twitter backgrounds submitted and recommended by Twitter users worldwide." Someone may like your work enough to hire you for their Twitter page!

For info on Twitter and much, much more, follow us: @CreativeProse.

Liked This? Read These!

Web site Inspired Magazine calls itself a "daily inspiration source for web designers, illustrators, Twitter addicts, Wordpress lovers, and other creative humans." It recently published an... Read More
Twitter recently redesigned its Web interface. To mark the occasion, it also updated its logos, icons, widgets, and follow and tweet buttons. You can download all the new assets for free from the... Read More
Press Release WHAT: Thinkstock, an image subscription product that offers value-conscious professionals a new industry-standard in quality, simplicity, and value with world-class legal... Read More
If you've signed into your account on the Twitter website lately, you should have seen a popup inviting you to "Meet the new" The recently redesigned Twitter Web interface is a radical... Read More