In: , ,
On: 2009 / 03 / 29
Shorter URL for this post: http://ozh.in/k8

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)
twitter-background-layers

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:
twitter_background_template

1280×1024:
twitter_background_template

1680×1050:
twitter_background_template

1900×1200:
twitter_background_template

Download the template
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 :)

Shorter URL

Want to share or tweet this post? Please use this short URL: http://ozh.in/k8

Metastuff

This entry "Pixel Perfect Background Photoshop Template for Twitter" was posted on 29/03/2009 at 9:34 pm and is tagged with , ,
Watch this discussion : Comments RSS 2.0.

26 Blablas

  1. marcO says:

    Awesome Ozh! I was looking for something like this! Perfect timing ;-)

  2. […] Pixel Perfect Background Photoshop Template for Twitter « planetOzh No TweetBacks yet. (Be the first to Tweet this post) […]

  3. […] Pixel Perfect Background Photoshop Template for Twitter « planetOzh […]

  4. Todd says:

    Excellent template. Thanks a lot!

  5. […] the post by Nantes-born Ozh (who, I learn, can't wait for his two children Ariane and Cyrus to grow up so he can play […]

  6. Jamie Pelaez says:

    Thank you! Wish I would have found this months ago when I was searching for some guidelines and creating one for a client. This is by far the best one yet. You have just made my life so much easier with this and: http://twtbg.me/

    You rock!

  7. Great Resource! I would totally Recommend this, Thank you! I've not quite finished my background as I still have some gaps on the two higher resolutions and a small amount of tweaking. I would have really struggled without this photoshop tutorial. Well done and Thank You!

  8. […] che insegna come realizzare un background compatibile con le risoluzioni video più diffuse: http://planetozh.com/blog/2009/03/pixel-perfect-background-photoshop-template-for-twitter/. Al suo interno troverete anche un file PSD che vi aiuterà a progettare il vostro template […]

  9. Kelli says:

    I work with Photoshop Elements, and I'd love love love to have a version of this template. The masks aren't coming through when I open it up without the full Photoshop app (darn that simplicity). Pretty please?

  10. Susan says:

    This is great! Really useful. Thank you!
    @susangallagher

  11. Cracks says:

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

  12. Nardyello says:

    Thank you for the template. Will use it to create a background of my own!

    Take a look @nardyello in a few :]

  13. DANIEL says:

    check out mine's and say what did u think http://www.twitter.com/schuchterdan ;)

  14. This is great. Your template is so helpful. You rock!!

  15. ap3h3ad says:

    Thanks for the Photoshop template and instructions.

  16. Chandrika says:

    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.

  17. cliftonjan says:

    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

  18. MILO says:

    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

  19. lestat546 says:

    Thanks for the template. check out mine’s and say what did u think http://twitter.com/lestat546

  20. David says:

    Thanks for this Template. Awesomely helpful!

  21. scaz says:

    thanks for the tutorial, here's my new profile page http://twitter.com/scazzini

  22. Brilliant! Glad I found this. About to use it now, thank you!

  23. michelle says:

    I'm a total photoshop newbie and I need some help with the file size. I'm assuming I save the template after I've added my own background as a jpg and then fix the size of the file- is this correct? or is there a different way to save and make sure that the file is below 800kb while saving it as either a gif, jpg, or png as outlined by twitter?

  24. Bradley says:

    hi, yeah i am having a problem, my file size is 16.4 mb and i am only allowed to upload 2kb, help??

  25. Derek says:

    I see this tut is using the old Twitter layout. Does it still pertain to the new one? If not, can we get a new one?

  26. Alex says:

    Just what i was looking for, fantastic! Thankyou!

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
Gravatars: Curious about the little images next to each commenter's name ? Go to Gravatar and sign for a free account
Spam: Various spam plugins may be activated. I'll put pins in a Voodoo doll if you spam me.

Read more ?