Photoshop Templates for Facebook’s Timeline Redesign
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 170px from the top and 15px from the left.
I 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
Use 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 Cover Photo & Profile Image
This 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.
Facebook Profile Image Cropped or Scaled?
There 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”.
Note: We ask for your email so that we can notify you of updates to these templates, just in case something changes or the information we’ve received is incorrect. You will not be added to a mailing list.
Download v2.0 of The Templates. Now with 20% Text Grid & Backward Compatible.
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).
Related Articles
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.
20 Responses to “Photoshop Templates for Facebook’s Timeline Redesign”
Leave a Comment
Search
Quick Find
-
Most Recent Articles
Follow Us on Facebook
Great information Michael, thank you.
Happy to share. Let me know how your page comes out.
Thanks for this Michael! I’m so glad I stumbled upon your site. Great stuff.
You’re welcome. Glad to have you :)
Thank you. I really appreciate your work!
Thankyou for free template
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.
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.
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!
Thanks so much for the templates and the info. I appreciate you sharing.
Thanks! Not sure I like the automatic “gradient” fbook puts in at the bottom. Great template. Worked first time.
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.
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.
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!
Awesome, looking forward to it!
http://www.facebook.com/casey.kleypas
Nice! Mind if we share a screenshot on our social sites?
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.
Sorry for the last post, i’ve finally managed to get it work!
Hi, Michael
Thanks for the Cover Temlate… I will let you know how it turns out… :D