Browse By

How to design perfect Twitter background Ultimate Guide

Twitter background designMy main advice: never use default blue Twitter background. If you’re not that into designing your Twitter background at least choose another Twitter template from 12 stock backgrounds available. Every non default Twitter background will stand out when the majority of Twitter profiles have the same look. If you like to get more followers and use Twitter as business card or promotion brochure for your service, you definitely need custom Twitter background. Besides great first impression, a professional looking Twitter background would let you stand out from the crowd and pick up followers.

While there’s no official guidelines how to make Twitter background, I put all major kinds of Twitter backgrounds into groups and explain why and how to use every one. Hint: you can browse through popular Twitter users’ profiles and then use what you like the most for inspiration. However respect the copyrights of photographers and designers and don’t copy anything word by word.

1. Seamless pattern Twitter background

Twitter seamless background
Using seamless pattern you get fast loading Twitter profile which still have specific look and feel. If you like abstract textures and don’t care much about putting additional information using your Twitter background this would be ideal for you.
Showcase: @KrisColvin @queenoftheclick

2. Tiled Twitter background

twitter tiled background
The repeating tiled background pattern is very common in web design. You need just to play with image file dimensions and upload the file to your account. The main advantage of this way to design Twitter background is that repeating pattern will work at any monitor resolution. And you can change it very often depending on your mood.
Showcase: @Scobleizer @BigRichB @brooksbayne @stephenkruiser

3. Single image fading to solid color

twitter background design fading
You can make stylish and good looking Twitter background using this technique. This type of Twitter backgrounds are fast loading and easy to scale because most space will be filled in with solid color. Make sure image you choose is perfectly faded and blends with a solid color, you specified as the background color.
Showcase: @BarackObama @TheBusyBrain @shannonseek @stanleytang

4. Large image as Twitter background

twitter background large
You just use one large image as your Twitter background, I’d choose at least file with 1600×1200 dimensions to scale it properly on large monitors. Make sure that Twitter content area hiding some part of background is not making your background look weird. Showcase: @zaibatsu @caseywright @MichaelMillman

5. Extended Twitter profile/background with sidebar

twitter extended profile
Many Twitter users prefer now to have an informative Twitter background and implement a sidebar. The sidebar is an area of Twitter background used to display additional information about the user, such as large profile image, bio and lists of websites and other social networks. For companies it would be a logo along with some promotion. Because there’s not much screen space on 1024×768 resolution monitors, profiles using the sidebar only usable starting from 1280x1024s, with anything less being hidden by the main Twitter website content.
Showcase: @Jonathan360 @chrispirillo @unmarketing

Here’s information and scheme to help you design extended Twitter background with a sidebar.
twitter profile scheme
File Dimensions: 1600×1200
Sidebar Dimensions: 235×450
Horizontal position: 20 px from the left
Vertical position: 95 px from the top

Top Twitter users background design statistics

twitter_stat_design.jpg
As you can see on this pie chart which I made, most of Top Twitter users (according to Twitterholic) have default Twitter template or one of the 12 stock backgrounds available on Twitter. Please let them know, they should read this post!

Twittter background design resources

Extended Twitter Background screenshot Pool on Flickr
Twitterbacks Tag on Flickr
Pattern Cooler
500+ Free Seamless Patterns
Flickr’s Creative Commons pool
Stock.xchng
Image search bookmarkets

Twitter profile design tips

  • Besides background you can customize text, links, sidebar background and the sidebar border. Try to choose complimentary colors. Make sure that all information is easy to read.
  • Leave some free space to the left of the main content area since the content area shifts left and right depending on the browser’s window size.
  • Avoid using sidebar or put some information on the right side since larger monitor resolution will hide up graphics placed to the right side of the Twitter content area.
  • These two Firefox plugins are very useful to design an extended Twitter profile: MeasureIt is a handy Firefox plugin that allows you to measure elements and space between them on the screen. ColorZilla lets you determine colors used for Twitter background, links, text and sidebar border.
  • While Twitter allows you to go as high as 800kb for background image (using JPG and PNG as file types, try to keep it around 300kb or otherwise your Twitter background will take too long to load. Play with compression settings to achieve best look and minimal file size at the same time.

How to set up your Twitter background

Click Settings -> Design-> Change background image
If you will use Single image fading to solid color, Large image as background or Extended Twitter profile with sidebar uncheck Tile background radio button. Click Save changes. To set up other colors used in your profile (Text, Name, Link, Sidebar fill and Sidebar border) click Change design colors.

If you liked this post, please follow me on Twitter @garmahis

Share This
facebooktwitterpinterest

8 thoughts on “How to design perfect Twitter background Ultimate Guide”

  1. Janel at XHI says:

    Michael, thanks so much for this info. I had tried miserably before to create a background that worked. Your dimension grid saved me. Since Twitter has widened their platform screen, I changed the dimensions of the sidebar to 110 x 600. It worked great. Cheers to a prosperous 2011! 😉

  2. Debate Website says:

    Great article! I have been looking for some help with my Twitter Backgrounds.

  3. Michael Garmahis says:

    There’s not perfect solution to look great with all resolutions. You can try what works best with most used.

  4. Renee says:

    Thanks for the informative post. We’ve been struggling for a while with this issue — wanting to update our Twitter background image but having trouble figuring out how to size it. This should point us in the right direction!

  5. RichardStep says:

    Nice information here! I especially appreciate the stats – very telling! Time to go update my twitter background! :) Thank you!

  6. CSSReX says:

    Thanks for these tips, I am going to design one for me right now.

  7. KarmaLynx says:

    Thanks for the tutorial, i am putting it to use tonight. I also put a link to your site on KarmaLynx. Hope it helps you out someday.

  8. twitter backgrounds says:

    this is a very thorough post on twitter backgrounds. i found the sidebar dimensions helpful.

Leave a Reply