Monday, March 8, 2010

How to create an effective Twitter Background

Create a Custom Design
An effective Twitter background should be a reflection of who you are, or what your message is. When a person first goes on your Twitter account, the first thing they'll notice is your background. Before they read any text, they'll form judgements about who you are based on your background image.

That's why picking a proper background, or creating your own custom background is so important. It's too easy to just use one of the default Twitter backgrounds. Instead, do a little work and custom design your own! There are many resources that have background images you can use.

For instance, this site: has several photos and illustrations you can use to create your background. Finding a background photo or illustration is just the beginning though. A good size to use for your backgrounds is 2100 x 1800. This size of picture will work well in just about any resolution setting.

Also, when it comes to exporting your image from your graphics program, you have to remember to keep it under 800kb.

Create a Sidebar
When you start to create your background image for Twitter, you'll want to use the space on the far left to place more information about yourself or business. On many computers, especially laptops, only a thin strip of the backround image will be seen on the left, so you'll want to place your sidebar within this area to make sure it's seen by everybody.  A good rule of thumb is to place the most important information within 230 pixels from the left edge, and no more than 500 pixels from the top.

Below is the background image created for Non-Geek Tutorials Twitter account:

You'll notice that on the far left we have the website address, at the top left we have a sign declaring free tutorials, and below that a little fellow holding several program icons.

So, by looking at this sidebar, you would be able to deduce that our company creates tutorials for Flash, After Effects, Photoshop and Twitter. Here is what this background looks like on Twitter with a small monitor:
Twitter Tutorial

So even on a small monitor our website address is still visible. You'll notice that on smaller windows much of the background image is hidden. That's why the left side of the image is so important.

Use All the Space!
Some people like to create a small background image and then let it tile (repeat over and over again across the back of their Twitter page). That's probably not the best use of the screen's real estate. Why have just one message on your background image when you can have several? For instance, this is our background image on a 1920 x 1080 setting:

If the background image was tiled, then the images on the left of the background would be repeated on the right of the screen. That usually doesn't look too good. So why not just use the right side of the image? Since it's nearly impossible to determine which parts of the background image are going to be covered by the main Twitter window, you need to place images and text in several different locations.

As you can see in the above image, our website address is visible at the top right of the background image. At the bottom you can make out Non-Geek Tutorials on the golf ball. It's all about being creative and using all the space of your background image. 

Try, Try, and Try Again!
The first time you upload your image you'll have to double-check it on at least three computers. Try testing it on a laptop, a desktop, and a wide-screen monitor. The main priority should be that the sidebar at the left is visible on the smallest of monitors.

You will probably have to tweak your image a few times to get it just right. Once the sidebar is finished, you can then start tweaking the rest of the image. Keep experimenting with the picture until it looks good on even the widest of monitors. When you're finally done it's ready to be uploaded to your Twitter account. Remember to keep the final JPEG size under 800kb.

If you have Photoshop and you're ready to create your own customized background, we've got a tutorial just for you! This tutorial will walk you through how to create the proper canvas, how to drop images onto it, and how to mask the images. The tutorial will then show you how to optimize the final image.  You can click here to go to the tutorial.