Branding Yourself with a Twitter Background featured on Twitter Backgrounds Gallery

How to Brand Yourself with a Twitter Background

Mar 07, 2009
by CALVIN LEE (@mayhemstudios)

Posted in: branding, Get Noticed, How To

Twitter is probably one of the biggest social media websites out there. Twitter offers a great opportunity for people looking to market their goods and services, leads on new clients or landing that next big job.

By sharing, connecting, engaging and retweeting, that opportunity becomes even greater. Over time, you gain trust and credibility: resulting in being an expert in your field. It’s a good way to build your brand.

When marketing yourself, you want all pieces to look similar and cohesive: logo, business cards, letterhead, envelope, website, brochure, media kit, marketing materials, signage, etc.

Twitter profile backgrounds are another tool to help market and promote your self. The background should match your existing brand or look. Twitter backgrounds get noticed: if they’re unique, fresh and stand out from the crowd.

I know everyone is not a professional designer. Here are a few tips to help you get started with your own Twitter background. This is what has worked for me.

What size should the Twitter background be?

It really depends on the size of the screen; the target audience is viewing your Twitter background on and the type of design. Some backgrounds will not look great on both smaller and larger screens. Sometimes you must compromise.

A safe number is 1500 pixels x 1300 pixels, which works both on a 1024 pixels x 768 pixels and a 1280 pixels x 800 pixels or larger screen. Looks good even on larger monitors, 20,” since most people will not open to the full length.

The spacing from the top header bar is 83 pixels. When placing information on the left side of the background, it should be within 115 pixels to 250 pixels from the left edge, and 500 pixels to 700 pixels down from the top, or any information you may have on the left side will get cut off from the bottom. This is especially true for smaller laptop/macbook

I don’t recommend any information on the right side of the side bar. Since the center tweet area is a centered design. Most times, it will be covered up as you resize the window larger.

Designs in three flavors

There are three types of Twitter backgrounds you can design that come in the form: full screen image, combination of a smaller graphic with a solid background color or a pattern.

Full screen images are one of the most commonly used. It looks great and fills the entire screen. The cons of using a full screen image, is the time it takes to load. It may take longer on a slower Internet connection.

@mayhemstudios

Combination of a smaller graphic/image with a solid background color is a good compromise, as the graphic fades/blends into the background color. It loads much faster because of the smaller graphic/image.

@imjustcreative

A repeating pattern is the quickest to load, out of the three. It’s based off one very small graphic/image but also limiting, as you can’t add graphics separate from the pattern.

@KrisColvin

Tile or not to tile

Should you title the background or not gets asked often. The answer again, depends on your design. If the design has graphics/image that take up the full screen, the answer is no, don’t tile it. The repeating tile looks awful on larger screens, but there should be a background color that matches your design. If the background only has a repeating pattern, definitely use the tile option.

Contrast and readability

Your Twitter background should to be attractive, clean and unobtrusive. Keep away from making the background too busy. You don’t want people to be distracted by the background when reading your profile, updates or favorites. There should also be a good contrast between the background and fore ground of the tweet content area for easy readability.

About the Author

Calvin Lee, Principal & Creative Director of Mayhem Studios – a small award-winning design firm located in Los Angeles, California, developing identity and brand recognition for the business sector across the nation – is a graduate of Platt College and serves as a member of the Platt College Advisory Board for the Visual Communications Department, NO!SPEC Committee and on the Creative Latitude Management Team.

Share and Enjoy:

What people are saying:

Alison Lee Cousland

March 8th, 2009 at 5:06 pm

Calvin, Ths is the sort of information most people really need when starting Twitter.

Just to have the correct measurements will be a great starting point for redesigning my own background now.
Rahul

March 8th, 2009 at 5:24 pm

CALVIN from @mayhemstudios has always been a great inspiration to me. He is one of the great guys one can follow @twitter.

This article is very helpful for those building their own background for twitter. I also would love an interesting background to represent myself and all about me too.
Googled in 60 minutes

March 9th, 2009 at 5:27 am

I’ve been looking everywhere for a decent article about Twitter backs. There really was just one and it had been copied many times but wasn’t that good or accurate.

You have a great article here that is accurate and of use to everyone who wants to create their own Twitter backgrounds.
Efren

March 9th, 2009 at 8:19 am

How will the new Search area affect the overall dims of the layout? Have there been any new layout guidelines released?
Efren

March 9th, 2009 at 8:21 am

BTW. Great post!! Sorry, brain working faster than my interpersonal synapses can fire.
Winning Mark

March 9th, 2009 at 8:54 am

Very helpful post for sharing with our campaigns. Thanks
Sam

March 9th, 2009 at 9:16 am

I made my own background, too!
Travis Campbell

March 9th, 2009 at 1:47 pm

Calvin-
Nice work, great detail, and very helpful. Keep it coming.
René Silva

March 9th, 2009 at 2:52 pm

Awesome post, you don’t have to forget to personalize your Twitter background because it says a lot of you. Thanks!
Leanne Boyd

March 9th, 2009 at 3:16 pm

Hi Calvin … so glad you twittered your article. Very good info! When I came aboard Twitter a few months back, the background image did prove to be a challenge, even with my long Photoshop experience. I finally did opt for the full screen image.

But with a minor difference. I used Photoshop to do a mirror image of the original and then tweaked the center with some special effects. But with a mirror image, when the background is tiled, it does not matter how large or small the viewer’s monitor is. For smaller than my 1280×800 image, it simply chops a bit of ‘non-relevant’ image off the right side (I planned the area to be ‘non-relevant.’

For larger monitors, the tiling is seamless and just goes into a smooth second rendition to the right.

The same for the height of the image… using those same techniques, if the monitor is larger, then the image tiles again vertically.

It takes a bit of time using Photoshop filters, especially “Other > Offset” so you can see the area you want to be seamless, and touch it up. I go about 40 pixels on the horizontal, touch things up, and then ‘put it back.’ And same with the vertical. You can use the Clone stamper to smooth things in this process, as well as Gaussian blur.

For the center of the image, the only time one really sees the center is at the top of your Twitter page. As you go down that page, the Twitter window covers it all… except the left and right hand sides of the background. So, concentrate on making the sides work and the rest takes care of itself.

As for size of the image, bandwidth, etc. The vintage postcard of roses that I started with was MUCH higher in KB than my finished product. It was over 200KB. And my 1280×800KB image is only 51KB. So there is no problem loading.

I used a combo of the above techniques, after choosing the left hand side of the original image (to later “mirror” for the right side), and then enlarging it to 1/2 of the 1280 monitor size (my monitor). Then, toward the bottom, I picked up some of the color and texture, and carried the design on down the total height of 800. I then copied a thin portion (about 20-30 pixels) of the top of the image, pasted, flipped it horizontally, and laid it down at the very bottom of the image. I then used clone and Gaussian blur to blend things. So… on a vertical roll, the tiling is seamless.

I admit to not having access to a larger monitor, so I’ve not tested this in actuality. However, in my tests with making the background image smaller, then tiling, it works very well. So I’m 99% sure it will work with the image of 1280×800, tiled, and on a larger monitor. In fact, if you (anybody) are reading this and wouldn’t mind posting here… is this working with a larger monitor?

You can see this Twitter background at: http://twitter.com/LeanneBoyd

Warm regards,
Leanne
Ruhani Rabin

March 11th, 2009 at 12:59 am

I’ve absolutely agreed with Calvin but here are some of the additional spots we might want to look at

1. 1280 bg fixed design will look really bad if it is running on a res like 2600++.

2. Fading to a solid color and use that solid color as background .. need an example? see the second twitter BG image Calvin posted. As he noted “Combination of a smaller graphic/image with a solid background color is a good compromise”

3. Fading to a solid color also helps reducing the image size dramatically (eg. from 400KB to 70KB)

we can always take a snapshot of twitter screen itself and overlay it with the design we want to implement so that we will know how much space we have and where to fade it out. here is a example of my photoshop screen for reference –
http://twitpic.com/1zx0g/full

I am not a professional designer but that is my lay man term of getting things done

Last but not least, Thanks Calvin Lee for the Wonderful informative post which really speak my mind.
Zena

March 11th, 2009 at 1:37 am

As usual Calvin has this wealth of knowledge that he shares with everyone!

Calvin you’re a gem.
mayhemstudios

March 11th, 2009 at 8:23 am

Thanks guys for all comments. Hope the article was helpful to everyone.

-Cal
George

March 19th, 2009 at 1:50 pm

Another killer article, Calvin. These dimensions are excellent reference to keep a Twitter background looking good across most resolutions. Thanks!
Twitter Backgrounds

March 21st, 2009 at 9:06 pm

Yep this article was v useful. I think people need to take notice of the left and right sides though, placing a vertical graphic displaying website page is the best option.
mark mason

March 24th, 2009 at 5:42 pm

calvin,

this is what I was looking for. Thanks a lot. I appreciate your time and help.

Mark
Ben

April 6th, 2009 at 4:06 am

Thanks Calvin, I’ve been making Twitter backgrounds for a while now but it was good to read your informative guide; like your designs too (mainly the repeating pattern Twitter background).
Nice work mate.
Tom - Estate Marketing

April 6th, 2009 at 11:32 pm

Nice information about creating those backgrounds!
I will design some backgrounds both for our company and personal profiles.
Alastair McDermott

April 7th, 2009 at 5:24 am

Finished my background before reading this – exactly the info that would have been useful. Ah well!

Any suggestions or comments on my twitter background very welcome.

Cheers,
Alastair.
mayhemstudios

April 8th, 2009 at 6:10 pm

Thanks for everyones comments. I’m glad I was able to offer some good information on branding and Twitter backgrounds. Maybe I will write another one. Any suggestions?

- Cal
Greqo

April 10th, 2009 at 1:19 pm

great post. I’m going to bookmark it.
Cynthia Hernandez

April 10th, 2009 at 1:25 pm

Wish I would have found your article yesterday! Everything I needed to know in one post.

Although I did find other articles with info, you put it together quite nicely. Thanks.

Once you know what to do creating a Twitter background is a piece of cake!
Scott Eisenhuth

April 13th, 2009 at 3:10 pm

Calvin,

Thanks for putting this out on Twitter. I have not gotten around to putting up a custom background for my Twitter page. This information will help me figure things out.
patinanni

April 13th, 2009 at 3:54 pm

i’m finish my background, tanks. i’m so glad. bye, see u =)
Susan Critelli

April 15th, 2009 at 3:47 am

Finally, clear instructions about background measurements! I have a 22″ monitor and just couldn’t get a satisfactory result from a few other articles that tried to explain it to me. Excellent comments make this post an even better resource. Thank you, Calvin.
Paris Vega

April 16th, 2009 at 10:29 am

Thanks for sharing those pixel perfect measurements. Very useful.
Lil' Peekr

April 17th, 2009 at 7:28 am

If you use the peekr twidget (it’s a bookmarklet/favelet) you can easily view Twitter backgrounds with just a click. It’s free and works in almost all browsers and OS’s (not sure about IE6) and you can get it from peekr.net
Rosana Hermann

April 20th, 2009 at 5:06 pm

A friend of mine made a great background for me, using more than 6 thousand followers’ avatars. If you want to make one just that this for your profile page, tweet me @rosana
See my background here
TylerSchaefer

April 20th, 2009 at 7:42 pm

Nice post! This helped me create my own and it turned out real good! check it out http://twitter.com/tylerschaefer
wishafriend.com

April 27th, 2009 at 9:52 pm

Hi Calvin, Can you check out our custom backgrounds section at- http://www.wishafriend.com/twitter/backgrounds/custom/.

We have added some cool themes for twitter users.

Thanks
wishafriend

April 27th, 2009 at 9:55 pm

Hi, Nice post. I am particularly fond of black themes. I liked the black one “imjust”
Mike Archibald

April 29th, 2009 at 12:48 am

Some good examples…
Alex

April 29th, 2009 at 9:16 am

I’m really not a fan of Twitter backgrounds. It all goes back to the Facebook vs. Myspace debate. I just think too much customization and pressure on users to stand out actually does more harm than good.
Jen Ruhman

April 29th, 2009 at 9:42 am

Calvin, always helpful information. Thanks!

Great guidelines, wish all twitter designers read this.

My clients like to take screen shots of their twitter page, so it looks perfect for their own usage. Just a tip.

Thanks again! I’m a true fan of yours.

-Jen
Hiro

May 1st, 2009 at 6:10 am

Thank you for the info.
4little1s

May 1st, 2009 at 10:49 pm

Great article, really got me thinking about how I use Twitter better, thanks
LB

May 3rd, 2009 at 8:24 am

I’m a twitter design newbie, but some free backgrounds on twitterhelps.com!
Christena

May 7th, 2009 at 7:49 am

Awesome article. The dimensions really helped me get mine just right! Thanks so much!

Check mine out @PhotoMemories

Christena
Kari Lonning

May 9th, 2009 at 10:04 pm

It’s a shame more artists don’t take advantage of this frree way to show off their work. Most of us like to see a bit more about the people we’re interested in. Whether one uses Tweet Deck or straight twitter, the opportunity is offered – To graphically share more of what you do. Nice article.

Have you considered adding Google Friend Connect to this site … ?
EL

May 9th, 2009 at 10:50 pm

Thanks! Really helpful! Best article on twitter backgrounds I’ve read so far.
mao

May 10th, 2009 at 11:44 am

thanks 4 the info, doing my bg now
Cheri Renee

May 11th, 2009 at 10:12 pm

@mayhemstudios I really enjoyed this article. One thing I would add is that you can also upload an original photograph to be used as the entire background. I have enjoyed this option for several months now, although I will probably change up soon, utilizing some of your suggestions. @Cheri_Renee
mayhemstudios

May 12th, 2009 at 1:01 am

I’m glad to hear the article is helpful to everyone. I’m thinking about writing another article about Twitter backgrounds.

Any suggestions? What do you want to know?

- Cal
Neil J

May 14th, 2009 at 2:20 am

It really is a nightmare getting it spot on for all size resolutions, some handy hints here… Thanks for the post!
ClarityWEB

May 20th, 2009 at 11:01 am

A very useful little article.
Joel Thomas

May 22nd, 2009 at 9:17 am

Great info on the pixels…was looking for it
reezluv

June 18th, 2009 at 6:30 am

really great tips.I’m working on it now!:D
CathyWebSavvyPR

June 24th, 2009 at 7:19 pm

Love the post, very useful info. But I wish you could show an image of what one of these full-sized images or larger sizes looks like when viewed on a smaller laptops screen. I’ve had people say, well it looks great on my screen (a large desktop screen). Many folks don’t realize how their info is cut off/covered over. Very often, on my 17″ laptop, 1/2 of the info on the left is covered by twitter’s info. Maybe my screen is the minority…but showing the problem one’s here, might make it ‘graphically’ clear to folks that some sizes are a problem.

I have seen effective twitter backgrounds where the information went up the left side perpendicular to the twitter info. that is rotated 90 degrees or a quarter turn from portrait view.

Another cool idea is to plan a website or branding sentence that is placed right between the
Home Profile Find People Settings Help Sign out line at top
and your profile photo and username; that always stays clear. no mater the screen size, I think.
Robby

June 26th, 2009 at 7:59 am

Nice article, thanks.
For those who are interested I am giving away a professional, pretty Twitter Background here:
http://robbydesigns.com/portfolio-twitter-backgrounds.html

I’m only linking to that url to help your readers.
Trudy

July 9th, 2009 at 11:11 am

This rocks. I saw your twitter page long before I started following you, which made me make mine the way it is…not as good as yours but better than what I had before which was nothing. LOL.
Scott Ashby

July 15th, 2009 at 4:37 am

Thanks for saving me some money! This was easy.
chemist2dio

July 31st, 2009 at 8:34 am

really great read, i just revamped my existing background, and make it as close to my blog design ^_^
Teg

August 1st, 2009 at 3:34 pm

Hi Calvin,
Thanks for the great post, I am doing my twitter background at the moment and this is great help.
Teg Brar
Abhijeet

August 25th, 2009 at 7:18 am

thanks exctelly what i am finding
Diane

September 8th, 2009 at 9:49 pm

Very well written. Great advice. Thanks!
Gopal Raju

November 5th, 2009 at 1:15 pm

Useful Article and your background rockz!
Andre

November 6th, 2009 at 2:25 am

This is great information and I am another who needs a background. Thanks for a super article.
maxdoro

December 7th, 2009 at 2:00 pm

How to brand yourself with a Twitter background
maxdoro

December 7th, 2009 at 2:01 pm

Calvin-
Nice work, great detail, and very helpful. Keep it coming.
David Masterson

February 22nd, 2010 at 8:26 am

Great post! Always looking for new ways to design my Twitter page.

Thanks,
Dave
Angela

February 25th, 2010 at 10:45 am

Thanks for this great information, Cal. When I was trying to create a background for my page, I couldn’t find anything this informative. A friend of mind discovered that a screen saver is approximately the correct size for a background. That’s what she put in place for my background, and I have been happy with mine. It might not be good for a professional, but it’s a good stopgap for someone like me who enjoys Twitter as something fun to do.
Rainer

February 10th, 2011 at 6:45 am

Hi, great post and comments area. Would be very useful, if “…A safe number is 1500 pixels x 1300 pixels, which works both on a 1024 pixels x 768 pixels and a 1280 pixels x 800 pixels or larger screen. Looks good even on larger monitors, 20,” since most people will not open to the full length.

The spacing from the top header bar is 83 pixels. When placing information on the left side of the background, it should be within 115 pixels to 250 pixels from the left edge, and 500 pixels to 700 pixels down from the top, …” could be explained graphically, based on 0,0 coordinates top left corner of the screen. I’ve been playing around with some screen dimensions and resolutions (15″, 17″, 20″…), but the result was not that I would say – wow!
Thanks and best regards
XNYS

April 18th, 2012 at 9:42 pm

Great post Calvin Lee!
Thanks