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

Pin It

20 thoughts on “How to design perfect Twitter background Ultimate Guide

  1. I recommend the extended twitter profile if twittering as a company. Use the space to tell your potential follower what you do, what your USPs are. have a look at @wildscreenTV nice post! chris

  2. Tiled non seamless backgrounds are such a 90’s web design thing :-) IMO they look dreadful regardless of the image, suggesting people use this in this day and age is surely a sackable offence? :-) I think seamless have to be the way to go on twitter. Any fixed size image will break on any machine that doesn’t share the res of the image uploaded. Bearing in mind the popularity of netbooks though even the faded image is going to look awful on a tiny screen.

  3. Very useful guide. I have seen tweet fellows playing with their background but I was unsure of measures on layout schema besides you just gave a good idea to extend my profile I have to try :)

  4. Great blog post. Completely agree that having a unique Twitter background sets you apart and your Twitter page apart. But take caution, it’s not just about having a different background, making sure it’s clean, easy to navigate, and speaks to who are you, what you do, and what you’re passionate about. Avoid clutter at all costs. Cindy Kim @CindyKimPR Blog: cindykimblog.wordpress.com

  5. Thanks so much for this extremely useful tutorial. I’ve wanted to create a nice customized background and didn’t know the dimensions I needed to use. Off now to create a new Extended sidebar.

  6. 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.

  7. Thanks for this wonderful guide. I was wondering what dimensions are the right one and this article just answered the question that’s been bothering me for a while now. This should be a Sticky in creating Twitter BG!

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

  9. 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!

  10. Hello, thanks for that post, unfortunatly I’m not pr0 enough to make this http://i28.tinypic.com/cp661.png work for me :\ Looks great with 1280×800 but others told me that it looks stupid with an other resolution. Someone knows how to “fix” that? Is it even possible with this pic?

    • Michael Garmahis August 10, 2010 at 3:40 pm - Reply Author

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

  11. I’m glad other people feel the same as I about Twitter backgrounds. I haven’t tried the extended profile yet but it’s given me a good idea for making one. When I create a Twitter background, I try to make sure it works in the 1024×768, 1280×960, and the 1600 arenas. I always consult on complementary text and sidebar colors so everything looks cohesive. Great blog post!

  12. 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! ;)

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>