One of Twitter’s cool features is that you can really customize your profile, in particular with any background you want. Doing this, you are soon facing a design constraint: Twitter is a fixed width centered column, and your background image will be aligned from the top left corner. So despite all your artistic efforts, your background might just look dull or clumsy if visitors viewing your profile are not using the same screen resolution as yours.
To help with designing a background that fits every desktop resolution (from 1024×768 to 1900×1200), I made a convenient Photoshop template (.psd file).
The Photoshop template contains a set of layers that will mimic intermediate resolutions, so you can mask what lower screen sizes won’t see. Each layer contains a background mask (the screen real estate), a twitter mask (centered Twitter column) and the outer mask (everything that doesn’t fit in the current resolution)
Design your background to fit the biggest resolution (1900×1200), but move and align elements so that each screen size won’t look like something weird or unexpected (half of a logo or a few missing words from your witty slogan). For instance, in the background I made for @scr_im, I tried to place elements so that the whole stuff does not look too bad in each resolution:
1024×768:
1280×1024:
1680×1050:
1900×1200:
twitter-background-photoshop-template.zip
(This 2.3 MB file contains a PSD file, for Photoshop)
Credits: the idea of a multi layered mask showing resolution goes to someone I totally forgot. I’ve seen this before, I just can’t remember where. But it was way less cooler than mine and I added a bunch of stuff :)
If you happen to make a cool background using this template file: please tweet it! The short URL of this post is http://ozh.in/k8. Or use the one clickTweet this link.
Once you made a killer background, be sure to check it under different resolutions with twtbg.me, it’s a fun little site that will show how your profile page will look on bigger and smaller screen sizes. It’s cool!
And be sure to leave a comment here so I can check your work :)
Related posts
Shorter URL
Want to share or tweet this post? Please use this short URL: http://ozh.in/k8
Pages: [2] 1 » Show All
wrote, on 24/Aug/10 at 9:00 am # :
Thanks for this Template. Awesomely helpful!
commented, on 31/May/10 at 1:59 am # :
Thanks for the template. check out mine’s and say what did u think http://twitter.com/lestat546
said, on 20/May/10 at 3:33 am # :
this template worked really well. I added some pics on the right side. I then copy and pasted a copy of the pics and got it to line up so that you can see the pics at most resolutions.. chk it out http://twitter.com/smrsound … @smrsound
THANKS
said, on 07/Jan/10 at 7:05 pm # :
Thanks for this – have tried one quickly and pleased with how easy it is. Am looking forward to getting ringing more changes in the future. Check @cliftonjan for my trial attempt!
Cheers,
Jan
said, on 05/Jan/10 at 9:43 pm # :
Thanks for the template, I have tweeted that I used it, you can see the background I made here @2010Hairstyles
I think this template is really useful, thanks so much for making it available, it saved me alot of time.
wrote, on 14/Dec/09 at 6:43 pm # :
Thanks for the Photoshop template and instructions.
said, on 09/Dec/09 at 7:58 pm # :
This is great. Your template is so helpful. You rock!!
commented, on 10/Oct/09 at 8:23 am # :
check out mine’s and say what did u think http://www.twitter.com/schuchterdan ;)
thought, on 28/Jul/09 at 7:14 pm # :
Thank you for the template. Will use it to create a background of my own!
Take a look @nardyello in a few :]
thought, on 27/Jul/09 at 10:10 am # :
so the same template & dimensions would apply to desktop wallpapers, wouldn’t they ..?
trying to find some expert advice on “how to design desktop backgrounds, and make different sizes available for download”.