With the release of Facebook’s timeline profile layout, they’ve have inserted an area known as the Facebook Cover Photo at the top. The profile picture is now a smaller thumbnail version that rests in the lower left of the cover picture. Facebook’s cover picture allows individuals to express themselves with a much larger space.
Most people will just add another picture as the cover photo. However, us creative’s are always looking for a unique way to express ourselves. Customizing Facebook’s cover picture is another way to do that. Below are the dimensions of the cover picture layout.
Dimensions for Facebook’s Cover Picture
Cover Picture area
Width: 851px
Height: 315px
(*note: There is a 1px border around the outside but that will not affect the size of the final image)
Profile Picture Thumbnail
For those of you that are designers and know CSS, the profile picture is positioned absolute. Not that it’s uber important, but just saying. It sits 23px from the left and 92px up in the cover picture.
Width: 125px
Height: 125px
Border: 4px white (#ffffff)
Border-radius: 2px
Padding: 1px all around
There is a div that sits behind the picture and it’s border that has a background that is black with an alpha channel of 0.3. Essentially, it’s opacity is set at 30%. Although the whole background is filled behind the image, it only appears to the user as a gray 1px border. The complete size of the profile picture thumbnail, with the borders and ‘background’ is 135 x 135.
Facebook Cover Picture Template
To customize the Facebook cover picture, I have a Photoshop template that includes the profile picture thumbnail with it’s borders and also guides to help with the layout. It’s pretty easy to set up a template but to save you time, you can download it here!
To see what a few others have done already, check out this list of custom Facebook cover pictures.
I’d like to see what you’ve done already. Post a link below!
Responses to Customize Facebook’s Cover Picture – Dimensions & Template
Posted by Brian on October 10, 2011 at 3:50 pm
Thanks for the template. Looks great
Posted by Dave on October 10, 2011 at 11:20 pm
Brian, you’re welcome. Glad I could help. Thanks for checking it out.
Posted by Joe on October 25, 2011 at 12:43 pm
Facebook is too confusing. Wouldn’t be able to figure it out without some help.
Posted by Dave Demuth on October 25, 2011 at 2:03 pm
That’s why I’m here, Joe.
Posted by Maggie on December 15, 2011 at 4:46 pm
The template was great! I was already to start making a new doc in photoshop and it was all done for me! Fun playing around with all these new changes.
Posted by Dave Demuth on December 19, 2011 at 11:13 am
Thanks Maggie! Glad you were able to use it.
Posted by Stomm on December 19, 2011 at 11:20 pm
I tried to upload a profile picture of 135×135 and facebook gives me an error saying it must be at least 80pixels wide.
Posted by Stomm on December 19, 2011 at 11:21 pm
Sorry that’s *180
Posted by Todd on December 20, 2011 at 1:03 pm
I appreciate the template you’ve provided- how do I use the template in Lightroom 3.6?
Posted by steve on December 21, 2011 at 4:05 pm
Same as you Stomm. What was the resolution? Tried to upload a 135×135 profile pic, and I get an error saying it should be at least 180 pixels wide.
Posted by Dave Demuth on December 21, 2011 at 9:26 pm
Steve and Stomm,
Looks like Facebook has a known issue about images being less then 180 pixels wide.
http://www.facebook.com/KnownIssues/posts/210518708959834
However, you should be able to upload any profile picture with a width of 180 or greater, and then be able to crop the picture to get the correct thumbnail.
Posted by Sad Clownfish on December 29, 2011 at 2:01 am
Nice – I did mine without knowing the proper dimensions, painfully working through trial and error. But this makes life so much easier! Thanks for going through the trouble to map it out.
I’m not much with Facebook, but the dimensions will help me build a few interesting covers for friends. Thanks again!
Posted by mollyscraps on December 29, 2011 at 8:06 pm
Thanks for the template. Digital scrapbooking is my hobby so I wanted to make my own cover. You really simplified it!
Posted by Cary on January 8, 2012 at 8:05 am
So helpful! Thank you so so so very much!
Posted by Tara on January 11, 2012 at 9:40 am
The template worked perfectly. Thanks a bunch!
Posted by Dave Demuth on January 11, 2012 at 10:24 am
Most welcome! Glad I was able to help.
Posted by Brian on January 27, 2012 at 7:51 am
Is there a way to toggle the template to save the profile pic thumbnail separately? I have copied a picture as a new layer in the template and when I save as .jpg it creates the cover picture as expected. I would like to save again and create a new .jpg for the profile pic too, so that it captures the rest of the image as I have placed it. Does this make sense?
Thanks!
Posted by Dave Demuth on January 30, 2012 at 9:56 am
Yes, you can create a slice for just the profile thumbnail pic and then use the save-for-web option, making sure you have the slice selected. However, you may be better off creating a separate image and uploading that separately for the profile pic. As noted in the above comments, Facebook make only except images as low as 185 x 185. They then offer the ‘thumbnail crop’ that displays the 125 x 125px as noted in the template.
Posted by Graham on February 3, 2012 at 1:50 pm
Very cool of you to provide. Looking forward to creating my cover pic with the help of your template. Kudos sir!
Posted by Mohammad on February 3, 2012 at 3:08 pm
Thanks Dave,, you are really creative.
Posted by Michelle on February 11, 2012 at 10:44 am
Thank you for the template. Just what I was looking for.