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.
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, or Seamless 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.
Mobile App Preview
[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?
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”.
