Facebook Timeline Cover Template & GUI .PSD

   design / facebook / facebook cover / facebook timeline cover / freebies / photoshop / PSD / timeline cover / timeline cover photo      Posted on May 22, 2012 by Darin

In the fall, Facebook unveiled and rolled out Timeline, its new profile layout for all. And because Facebook is such an integral part of marketing and brand awareness in modern times, most advertisers and designers have found themselves working around its ever-changing layouts and facelifts. Whether you're mocking up a client's Facebook brand page to push live, or simply creating an image for use in a pitch or presentation, having a customizable template at the ready is a handy tool for any designer or marketer with access to Photoshop, which is why I'm making my Template/GUI Photoshop file available for free download.

Early this year, I released a Facebook Timeline cover photo template for download, which received several hundred downloads. Since then, Facebook has adjusted their Timeline layout slightly, and this new file reflects the new changes. Some users and brands are doing some pretty creative things with their Facebook Timeline cover photo, and this file allows you to easily experiment with your own photos to come up with a unique design of your own. A couple of notes regarding the Timeline cover and profile photos:

• The cover photo's dimensions are 851 x 315px, even though the visible dimensions are 815 x 314px (one row of pixels gets obscured by the top bar). If you upload an image that is 314px tall, Facebook will stretch it an extra pixel, causing your image to become distorted and appear in an unnecessary lower-quality than you intend.
• Facebook compresses all cover images quite a bit once uploaded, which reduces the sharpness and quality as well. If you have access to hi-resolution images, uploading a hi-res version will help to counteract the compress and improve image clarity. If you only have access to normal-res images or are grabbing pics from the web, unfortunately, you'll just have to deal with Facebook's compression.
• Your profile photo is scaled down to 160 x 160px and displayed over the cover photo as shown in the PSD. However, Facebook will not allow you to upload a profile photo smaller than 180 x 180px, so you'll have to compensate for that when designing.

While you can use this file as a template for your own cover photo design, I've also recreated the full Facebook GUI in the file, as well. So that means every shape, line, button, text, etc. is fully editable and can be changed based on your needs for whatever project you happen to be working on, which will make mocking up Facebook profile "screenshots" for clients a breeze.

You can download the file here. I hope you'll find it useful, and if you do, let us know on our Facebook page, or send us a tweet!