template size Twitter background guidelines

From Your Search

Twitter background guidelines
12 comments Added on 01/27/08 by Kris

Ever wanted to make an interesting Twitter background? Here's how I did it.

Side note: This post comes to you straight from an email reply to fellow long-time podcaster Michael Geoghegan in regards to my Twitter background.

Also of note, this layout works best on higher res monitor settings. I imagine that most active Twitter users that are going to be viewing the site as opposed to sms or mobile versions are on high res settings. That said, let's roll.

Creating your background
-----------------------------

File Dimensions: 2048 px by 1707 px (no clue why i used these dimensions but I am sure I knew what I was doing at the time)
Branding Dimensions: 80 px by 587 px
Coordinates: X=20, Y=14
Horizontal position: 20 px from the left (give yourself some padding)
Vertical position: 14 px from the top (will line up your graphic with the top of the twitter logo. our eyes like symmetry) File size and type according to Twitter: "Images must be smaller than 800k. GIF, JPG, PNG."

Aesthetics
------------

Color palette: Pick colors that match that with default Twitter stylesheet colors. If they contrast too much follow the Change Background directions above and change the colors for Text, Name, Link, Sidebar fill and Sidebar border as needed.
Recommendation: Choose colors that work with the default and save yourself the headache of matching the CSS to your image. Follow Twitter's lead.

Uploading your background
------------------------------

Change Default Background: Login and click 'Settings' >> click 'Design' >> Select 'Use my custom style below' radio button >> Upload your image

It took me quite a bit of time to get a background image that I was happy with. There was a lot of editing and uploading again, and again until I got it right. I would suspect if you're like me your experience will be much the same. So have patience when getting it just right. And remember that you are working within someone else's website and can't control all the features.

Here's my background at work - http://twitter.com/croncast. And here's a link to the background all by itself if you want to use it as a guide.

Tags

	template size twitter background Michael Geoghegan twitter

Christmas Card Holiday Photo Photoshop Templates Vol 1 Current bid: $15.99 on eBay	3 1/2' Wall MURAL of Meet THE WONDER PETS Template W5 Current bid: $24.95 on eBay
See all 4,997 template items on eBay.

12 Comments

1	Ooooh, yummy! What a great post to stumble across via a mutual Twitter bud. Thx for step-by-step instructions. :) I'm collecting all kinds of useful Twitter tools/resources & will add your post/link. (Pssst - your Twitter hyperlink isn't formatted properly at the foot of the post... might want to correct that?)
1	Posted by: Mari Smith at: 10:08pm 02/25/2008
2	Question what exactly are you using for your images? Because I am using photoshop CS3 and when I set my image to the dimensions you specified? I ask this because photoshop makes the filesize 10mb and twitter only accepts 800k WTF?! Help!
2	Posted by: Adrian at: 9:42pm 05/19/2008
3	Thanks for the simple and quick examples. I was able to change my Twitter background in no time! http://twitter.com/indielab
3	Posted by: IndieLab at: 11:16am 06/10/2008
4	Great post! My twitter page as well is now full of Zen. htt://twitter.com/adriarichards
4	Posted by: Adria Richards, But You're A Girl.com at: 8:09pm 06/30/2008
5	Cool! Thanks for this tip...
5	Posted by: Lucas McDonnell at: 8:39pm 07/10/2008
6	Sweet! Thanks for the work on this. Worked perfectly with GIMP and my total lack of design skill!
6	Posted by: Jack Humphrey at: 10:40pm 07/27/2008
7	Great tute. If you're looking for some off the rack gear for your twitter, check me out http://www.hipandtwendy.com/
7	Posted by: Designer at: 10:46pm 09/07/2008
8	This is great. Thanks!
8	Posted by: Tyler at: 4:23pm 09/29/2008
9	Wow I just transformed my Twitter backgrounds on several sites, I can't wait to see the difference. I didn't understand half of your stuff but I took a lot of screenshots and made some killer backgrounds. Thanks, Mike
9	Posted by: Mike X. at: 10:35am 09/30/2008
10	Stumbled it!
10	Posted by: John Haydon at: 8:39pm 09/30/2008
11	Kris, you're a star. I've managed to go from ugly to gorgeous background in seconds!
11	Posted by: Michelle at: 7:45am 11/17/2008
12	thanks for the instructions -- worked perfect with Inkscape
12	Posted by: molotv at: 8:44pm 11/18/2008