template size Twitter background guidelines

Just One Post

Twitter background guidelines
38 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.

Update: This is the background that I based this tutorial on - Croncast background all by itself if you want to use it as a guide.

Here's my current background at work (note: it is now free-form) - http://twitter.com/croncast.

Tags

	template size twitter background Michael Geoghegan twitter

Baby birth announcement Photoshop PSD templates vol13 Current bid: $6.99 on eBay	Baby birth announcements Photoshop PSD template vol12 Current bid: $6.99 on eBay
See all 5,991 template items on eBay.

38 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
13	Thanks! It still took a little bit of fiddling, but your advice was a great time saver! Using your template a a guide was very helpful!
13	Posted by: AA at: 3:08pm 11/26/2008
14	I've just checked the highest screen resolution for my screen, it is 2048x1536. Perhaps that's the reason why the width is recommended at that value. Height is relative, most people with lower screen size won't see the rest of the image anyway. It is better to optimize for background file size, in my opinion.
14	Posted by: Hendry Lee at: 9:21pm 12/05/2008
15	thanks! i got the background up in no time...perfect!
15	Posted by: Nathalie Pelletier at: 7:56pm 12/18/2008
16	just registered today on twitter ... searching for a good background to use on my twitter profile ... the guidance u provided is helpful but will search for some readymade ones ... hehe
16	Posted by: Puneet Thakkar at: 12:52am 01/01/2009
17	Great post! I was able to create a pretty good background for my podcast: www.twitter.com/hopkinsonreport
17	Posted by: Jim at: 2:10pm 01/09/2009
18	Hey, thanks for the great info! Last night when I noticed the logo change, I fired up Photoshop and made a template makes it super easy to make sure your design will look good, check it out at http://twitter.com/tinytemplate!
18	Posted by: TinyTemplate at: 11:34am 02/03/2009
19	Great post. Thanks for sharing. I found a photoshop twitter background that you can download here: http://www.digitaldesignadvice.com/2009/graphic-design/design-your-own-twitter-theme Really easy to modify too.
19	Posted by: Olivia Draven at: 5:53pm 02/11/2009
20	Thanks for the info. I'm new to twitter and designed a background showing some of the books I've designed. Very good feedback from it.
20	Posted by: Picturia Press Books at: 11:15am 02/13/2009
21	Cool tutorial. I really didn't follow much other than the filesize i think. But here it is: http://www.twitter.com/ekindesigns
21	Posted by: Jeff Broderick at: 10:59pm 02/19/2009
22	Phew! finally I've done! thnx!!!
22	Posted by: Evolution - World at: 3:48am 02/24/2009
23	This is a quality post. For ready-made patterns for your Twitter page, check out my site: http://www.hipandtwendy.com/
23	Posted by: Designer at: 3:22pm 03/14/2009
24	I just joined Twitter and am having one hell of a time trying to get my background image to size the right way. It always seems to re-size it wrong for me...
24	Posted by: ShellMedia at: 3:35pm 03/23/2009
25	Don't forget about resolutions. Resolutions to design for: 1024 x 764 (#1 used right now) 1280 x 800 (2nd place) Yes, I'm a twitter background designer and this drove me crazy explaining to my clients. -Jen
25	Posted by: Fresh Jen at: 5:36pm 03/24/2009
26	Great information here. Just posted it to my Twitter followers - http://twitter.com/photoshoptips
26	Posted by: Digital Photography at: 9:07am 04/08/2009
27	Answered my question beautifully about what size I need to make the Twitter background image. Thanks :)
27	Posted by: Cool at: 4:55am 04/12/2009
28	Why don't I have a button for "Use my custom style below??"
28	Posted by: Shawn at: 8:38am 04/14/2009
29	Thanks for the great tips. If you get an error when trying to upload your background it might be because your image is too large. Just be sure to keep the file size under 800kb or Twitter won't accept your background. It may take some fiddling around to get the file size down to 800kb when saving your wallpaper for the web.
29	Posted by: Brenda at: 10:13pm 04/18/2009
30	Here's a great resource for free twitter layouts. http://twitpaper.com
30	Posted by: Twitpaper at: 2:52am 04/25/2009
31	This is a cool place to generate your own twitter backgrounds. http://www.wishafriend.com/twitter/backgrounds/custom/
31	Posted by: wishafriend.com at: 12:41am 04/28/2009
32	Great tutorial! Twitter is tricky to get a background made because people with different screen sizes see backgrounds differently. It's important to remember to research on what the average persons screen resolution is to make it work with the general population. Thanks!
32	Posted by: twitter backgrounds at: 3:11am 05/22/2009
33	Thanks for the neat tips on this, was struggling a bit here to get this going.
33	Posted by: Planet X at: 3:03am 06/01/2009
34	How do I change the sidebar colors, border colors, etc? You need to enter codes for colors?
34	Posted by: lehua at: 6:51pm 06/09/2009
35	Best choice of the week about Bbws, Mature bbws, Adult bbws and Lesbian bbws http://bbw.goodnanoav.com/
35	Posted by: Greessugdug at: 2:56pm 06/18/2009
36	I cant believe how much this helped me. I have been looking for a simple tutorial like this for my wedding background. This makes it so much easier. Thank You!!
36	Posted by: wedding favors at: 9:16pm 06/19/2009
37	Nice post, we do customize twitter skin
37	Posted by: twitterSkin at: 12:34am 06/27/2009
38	Nice post. We used your recommendations to create our first few test backgrounds. Cheers
38	Posted by: Twitter Layouts at: 8:34am 06/27/2009