In: , ,
On: 2009 / 03 / 29 Viewed: 99457 times
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. 1
    marcO Germany »
    commented, on 30/Mar/09 at 5:44 am # :

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

  2. 2
    LifeStream Digest for 2009-03-29 - Cadm.... United States »
    pingback on 30/Mar/09 at 8:12 am # :

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

  3. 3
    Webzappr’s Lifestream « My R... United States »
    pingback on 31/Mar/09 at 3:32 pm # :

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

  4. 4
    Todd United States »
    wrote, on 21/Apr/09 at 6:57 pm # :

    Excellent template. Thanks a lot!

  5. 5
    A Photoshop Twitter template that just d... United Kingdom »
    pingback on 05/May/09 at 10:09 am # :

    [...] 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. 6
    Jamie Pelaez United States »
    wrote, on 29/May/09 at 9:35 pm # :

    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. 7
    funkyInteriors United Kingdom »
    commented, on 11/Jun/09 at 1:13 am # :

    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. 8
    Template per Twitter in varie risoluzion... Italy »
    pingback on 19/Jun/09 at 9:27 am # :

    [...] 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. 9
    Kelli United States »
    replied, on 23/Jun/09 at 7:16 pm # :

    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. 10
    Susan Ireland »
    commented, on 24/Jun/09 at 1:20 pm # :

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

  11. 11
    Cracks Australia »
    commented, 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".

  12. 12
    Nardyello United States »
    commented, 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 :]

  13. 13
    DANIEL Brazil »
    thought, on 10/Oct/09 at 8:23 am # :

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

  14. 14
    Madalyn Sklar United States »
    said, on 09/Dec/09 at 7:58 pm # :

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

  15. 15
    ap3h3ad United States »
    thought, on 14/Dec/09 at 6:43 pm # :

    Thanks for the Photoshop template and instructions.

  16. 16
    Chandrika United Kingdom »
    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.

  17. 17
    cliftonjan Portugal »
    replied, 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

  18. 18
    MILO United States »
    replied, 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

  19. 19
    lestat546 Costa Rica »
    replied, 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

  20. 20
    David South Africa »
    said, on 24/Aug/10 at 9:00 am # :

    Thanks for this Template. Awesomely helpful!

  21. 21
    scaz Italy »
    said, on 05/Oct/10 at 4:34 am # :

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

  22. 22
    Daniel Snyder Canada »
    replied, on 02/Dec/10 at 6:56 am # :

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

  23. 23
    michelle United States »
    replied, on 19/Feb/11 at 1:12 am # :

    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. 24
    Bradley United Kingdom »
    replied, on 01/Jun/11 at 1:56 am # :

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

  25. 25
    Derek United States »
    wrote, on 07/Sep/11 at 10:09 pm # :

    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. 26
    Alex United Kingdom »
    thought, on 15/Dec/11 at 1:38 am # :

    Just what i was looking for, fantastic! Thankyou!

Leave a Reply

Comment Guidelines or Die

  • HTML: You can use these tags: <a href=""> <em> <i> <b> <strong> <blockquote>
  • Posting code: Post raw code (no <> &lt; etc) within appropriate tags : [php][/php], [css][/css], [html][/html], [js][/js], [sql][/sql], [xml][/xml], or generic [code][code]
  • Gravatars: Curious about the little images next to each commenter's name ? Go to Gravatar.
  • Spam: Various spam plugins on patrol. I'll put pins in a Voodoo doll if you spam me.
  • I will mark as Spam test comments, all comments with SEO names (ie "My Cool Online Shop" instead of "Joe") or containing forum-like signatures.

Read more ?