RSS Twitteer Facebook linkedIn YouTube foursquarePinterestGoogle

Photoshop Templates for Facebook’s Timeline Redesign

Jan 9th, 2013
3/13/2013 Templates have been updated after Facebook’s Developer Blog announces roll-out of updated Timeline.

These templates are for personal profiles only

Update 3/13/2014 There is a new design for Facebook business pages. Download the template for the new design

new Kyle Meyer profile As you can see from the screenshot, the profile photo is much higher than before and a bit to the left.
My measurements for the location of the profile photo (with 5px frame) are 173px from the top and 15px from the left.

Mari Smith's overview of the new Timeline layoutI heard a few weeks ago that Mari Smith had seen a new design for Facebook’s Timeline and held off on updating my Photoshop templates until I felt the layout was final and the change was imminent…

Yesterday I read Search Engine Journal’s post saying that the new layout was rolling out in New Zealand so I got to work. I have two templates this time, one that is the normal 851×315 for when you only need to create the cover photo itself and a larger one that is 1233px wide for when you want to make an “integrated” cover photo and profile image.

Cover Photo Only Template

Cover photo template for personal profiles on FacebookUse this template when you’re only concerned with creating a cover photo. Profile images are uploaded at 180x180px and then Facebook shrinks them down to 160x160px. The main reason I even have a template for this is that I like to know exactly where the profile image is and what it’s going to cover up.

Integrated, or Seamless Cover Photo & Profile Image

Cover photo template for personal profiles on Facebook - SeamlessThis template is 1233px wide and is great when you want your cover photo and profile image to seem like they are one image. There are lots of great examples out there so get creative! I would love to see your work so please post links to your Facebook pages in the comments so we can share them.

Mobile App Preview

New design for personal profile on Facebook for iOS[Updated March 20, 2014] As always there’s been an update to the design of Facebook profiles on mobile (iOS).

There is a big difference in how your cover photo will look on mobile vs desktop.
I have included an extra layer group in the Photoshop file that will give you a preview of how your cover photo will be displayed. It’s not pretty. It basically gets cropped off on the sides. If there’s something really important you want people to be able to see, make sure it’s in the center of your cover photo.

Facebook Profile Image Cropped or Scaled?

facebook profile picture edit scale to fit settingThere is a setting to control whether your profile image is displayed at 180×180 and cropped or scaled down to 160×160. The template for the “integrated” design is based on the idea that your profile image gets scaled down, if you see that your profile image is not lining up with your cover photo you probably need to edit the setting.
When you hover your mouse over your profile image you will see a pop-up to “Edit Profile Picture”. Click on it and you will see a menu of options. Select “Edit Thumbnail”. You will see a checkbox to “Scale to fit” in a pop-up window. If the box is not selected you will be able to “Drag the image to adjust position”. Select “Scale to fit”.

Templates updated March, 20, 2014

Download The Templates – PSD & PNG

Simply enter your email address and the download link will be sent directly to your Inbox (we can only send you the download link if you enter a valid email address).

Like the template? Why not buy me a cup of coffee?


About the author:

Michael Currey is an experienced web designer, front-end developer and social media manager with 15 years of experience and an education from the Academy of Art University in San Francisco.

TwitteerFacebooklinkedIn

24 Responses to “Photoshop Templates for Facebook’s Timeline Redesign”

  1. Gordon Diver says:

    Great information Michael, thank you.

  2. Andy says:

    Thanks for this Michael! I’m so glad I stumbled upon your site. Great stuff.

  3. [...] I have released new templates that work for both the “original” Timeline and the “updated” Timeline [...]

  4. Jack says:

    Thank you. I really appreciate your work!

  5. Ramandeep says:

    Thankyou for free template

  6. Jim H says:

    Perhaps I’m being daft, but the templates I downloaded from the emailed link are for the old (existing) dimensions, not for the new timeline format currently trialling in NZ and shown in your sample JPGs.

    I’m not in NZ, so the “old” dimensions are exactly what I need for right now — thank you! But did you intend to release an updated version of the templates too? It would be great to get ahead of the game on updating my cover images and profile pics for when the new format rolls out to the rest of the world.

    • michael says:

      Did you get timeline-redesign-templates-20-percent-grid_v2.zip?

      This file has one layer labeled “original timeline mask” and a layer group labeled “updated timeline mask”. To design for the new Timeline layout that has rolled out in NZ you need to hide the “original timeline mask” and use the “updated timeline mask” as a guide.

      • Jim H says:

        See, that’s what I get for being a complete Photoshop newbie and doubting a pro…!

        I see the two layers now — and should really have seen them before. Thanks for spelling it out for me!

  7. Thanks so much for the templates and the info. I appreciate you sharing.

  8. Thanks! Not sure I like the automatic “gradient” fbook puts in at the bottom. Great template. Worked first time.

  9. D says:

    I love the new template.. I’m still trying to get it to properly work… When I upload the 180×180, it looks for a brief second that it lines up perfectly, then facebook resizes it and it’s off a bit.

    • michael says:

      Sometimes there’s a glitch on Facebook where the profile photo is displayed and it’s regular size (180×180) inside the 160×160 box and it messes everything up… It seems to come and go with no explanation.

  10. SieghartXx says:

    I’ll try this template, and if all goes well, I’ll post a link for you to see how it went. I’ve been searching everywhere for a template that can help me do a profile+cover style (the ones that seem to be one image), but I always ended up with a profile picture with a higher resolution haha. Thanks for sharing!

  11. Joul says:

    Hi, your work looks great. Thing is i know little about photoshop. Could you (or anyone else) explain step-by-step how to use the template for people like me ? I’d like to do something just like Casey K did.

  12. Joul says:

    Sorry for the last post, i’ve finally managed to get it work!

  13. Simon Darling says:

    Hi, Michael

    Thanks for the Cover Temlate… I will let you know how it turns out… :D

  14. Me says:

    Not good, the profile picture is not made to measurements.. Facebook keeps telling me that the profile picture must be at least 180 pixels wide..

  15. Tom says:

    Hi Michael,
    Thanks for the great template.
    Question: Where can I find the ‘Action’ file to export the images? In the old PSD-template I had an ‘Action’

    Thank you,
    Tom

  16. Sean T says:

    Worked Great, Thanks!

  17. [...] are an abundance of blog posts detailing the sizes of images for Facebook Cover Photos, App Icons, Event Covers, Ad images and more; but until recently I had not thought much about what [...]

Leave a Comment

2 Trackbacks

  1. Facebook Timeline Cover Photo and Profile Image Sizes | InlineVision: Web Design / E-Commerce / PPC / Social Media | Las Vegas, NV

    [...] I have released new templates that work for both the “original” Timeline and the “updated” Timeline [...]

  2. Choosing the best image size for facebook photo posts » FAQs & Blog | InlineVision: Web Design / E-Commerce / PPC / Social Media | Las Vegas, NV

    [...] are an abundance of blog posts detailing the sizes of images for Facebook Cover Photos, App Icons, Event Covers, Ad images and more; but until recently I had not thought much about what [...]