{"id":1200,"date":"2009-03-29T21:34:15","date_gmt":"2009-03-29T19:34:15","guid":{"rendered":"http:\/\/planetozh.com\/blog\/?p=1200"},"modified":"2009-05-13T16:19:07","modified_gmt":"2009-05-13T14:19:07","slug":"pixel-perfect-background-photoshop-template-for-twitter","status":"publish","type":"post","link":"https:\/\/planetozh.com\/blog\/2009\/03\/pixel-perfect-background-photoshop-template-for-twitter\/","title":{"rendered":"Pixel Perfect Background Photoshop Template for Twitter"},"content":{"rendered":"

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.<\/p>\n

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).
\n<\/p>\n

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)
\n\"twitter-background-layers\"<\/p>\n

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<\/a>, I tried to place elements so that the whole stuff does not look too bad in each resolution:<\/p>\n

1024×768:
\n\"twitter_background_template\"<\/p>\n

1280×1024:
\n\"twitter_background_template\"<\/p>\n

1680×1050:
\n\"twitter_background_template\"<\/p>\n

1900×1200:
\n\"twitter_background_template\"<\/p>\n

\nDownload the template
\ntwitter-background-photoshop-template.zip<\/a>
\n(This 2.3 MB file contains a PSD file, for Photoshop)\n<\/div>\n

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 :)<\/p>\n

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<\/a>. Or use the one clickTweet this<\/a> link.<\/p>\n

Once you made a killer background, be sure to check it under different resolutions with twtbg.me<\/a>, it's a fun little site that will show how your profile page will look on bigger and smaller screen sizes. It's cool!<\/p>\n

And be sure to leave a comment here so I can check your work :)<\/p>\n","protected":false},"excerpt":{"rendered":"

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\u2026<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[22,58,292],"class_list":["post-1200","post","type-post","status-publish","format-standard","hentry","category-published","tag-images","tag-photoshop","tag-twitter"],"_links":{"self":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts\/1200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/comments?post=1200"}],"version-history":[{"count":0,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts\/1200\/revisions"}],"wp:attachment":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/media?parent=1200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/categories?post=1200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/tags?post=1200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}