*** From the Archives ***

This article is from July 27, 2009, and is no longer current.

Design a Unique Twitter Background

22

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.

  • Pariah Burke says:

    Great article, Terri!

  • amarie0 says:

    Great stuff. I’m stealing its ideas for my lynda.com twitter/facebook title!

    ;-)

    AM

  • Anonymous says:

    I’ve been wondering the best way to do this for a while now. I can’t wait to get started! Thanks!

  • Anonymous says:

    I wish you would show a version of a page as it shows on a smaller laptop menu, showing what is often cut off. As you mention, some people (and many designers) have wide screens. Many have smaller laptops. A client who asked me to work with a designer to create a background for him, has a wide screen. I had to show him how most things look on smaller screens.

    The left side where most people put their info is often cut in half vertically, and covered by Twitter’s blocks of info. So you see half of someone’s phone number, website, linkedin profile link, and photo or whatever.

    The other space HAVE seen used well, is the space between the top “home, find people” etc text links and the start of the profile box. Yes, if you scroll down the page it is hidden, but it is a prime spot that your eye hits first – great place for a tagline or website URL.

    Very timely post for me, thanks

    @CathyWebSavvyPR

  • Anonymous says:

    Wow. Peekr looks kindof pointless. I mean, why dont you just right click the background and choose “view background image”? that’ll do the same thing.

  • Terri Stone says:

    Good point, CathyWebSavvyPR, about using the top space!

    Editor in Chief, CreativePro.com

  • Anonymous says:

    waw…..a beautiful…this a html

  • Anonymous says:

    This is wonderful tutorial. Thanks lot baba

  • Anonymous says:

    Wow! Thanks for the great informative post.
    I think the above article is informative for all concerned people. For me the Informations are really really useful.

    I’ve Bookmarked this page for future reference.

    Thank you
    Robin Jokes

  • morganjames says:

    really cool

    I’ve been having some twitter homepage envy myself and really want a custom page.

  • Anonymous says:

    It is very nice. Customize everything in business. The world needs to know you as you are and have something special. This is the secret.
    vanzari auto |piese auto online|auto parts stores |vanzari auto

  • Abdul Kader Zilane says:

    I want Education cover design and Inner Layout

  • Anonymous says:

    Apparently, twitter background can be changed. Therefore, the background is original, looks so monotonous and lacking a touch of art. I’ll try it. Long Island Web Design

  • Anonymous says:

    I love it! Providing the template makes this easy and fun. Anyone can do this! Thanks for taking the time. Perfect for anyone doing their own social media marketing.

  • Anonymous says:

    erm.. someone say good article but where is the article??

    – Dexter, a kellyville dentist

  • Anonymous says:

    thanks for the great information…

  • nucreature says:

    This is right on time, my company just started tweeting, so this article is going to spice things up, thanks. We need followers! @NuCreatureMedia

    ————————————–
    NuCreature Media is an online web, graphics, & printing company that assist businesses and ministries in getting their message to the masses.

    Visit @ https://nucreature.com

  • Anonymous says:

    very beautiful ! i actually do these in my site for
    text-decoration:none;”href=”https://etwitterbackgrounds.com”>twitter backgrounds
    All the best =) …

  • Marke8now says:

    perfect article for researcher thank you for sharing

  • fabitcorp says:

    great article
    thank you,

  • 24Layouts says:

    Very Nice.. Really Thanks for Sharing….

  • PartsBBQ says:

    Thanks for the useful info….

  • >