How to Make a Custom Facebook Profile Cover Photo

UPDATE II 10/1/2011: Matt points out down in the comments that your profile picture has to be at least 180 x 180 for Facebook to upload it, even though it’s displayed at 135 x 135 in the Timeline. Thanks.

Also, if you’re using Photoshop, this helpful post includes a template as a .psd file, with all the correct dimensions you’ll need. (Thanks to Harry in the comments for this one)

UPDATED 9/29/2011: I took some time and whipped this up for reference. It shows all the dimensions for the cover photo, as far as I could determine them. Click through to go to the full size version (this one’s a bit smaller to fit), or here for a better blank template than the one I originally posted below.

Facebook Timeline Cover Photo

ORIGINAL POST

The new Facebook Timeline includes the option of having a “cover photo” on profile pages, a kind of profile-pic-on-steroids that takes up a good portion of the top of the page. It’s a good feature, but it can be tricky to find something that will fit the dimensions Facebook has chosen, as well as the weird need to scroll up to see the full image (more on that in a bit).

The Timeline is only open to developers for the time being, so some things will change in the coming weeks. But if you have Facebook Timeline and want to make a custom cover photo, I spent some time playing around with it this afternoon. Here are some things that should help you make one that flows nicely with the rest of your profile.

As I mentioned, when you land on a profile page/timeline, only about the lower third of your cover photo will appear, which I suspect a lot of people don’t know yet. The rest is hidden above, and you have to scroll up to see it (Note: These screencaps had to be squeezed to fit here, but you can click them to see full size versions in a new tab/window):

This means the bottom of the cover photo is where the action is, specifically the bottom 115 pixels. (UPDATE March 12, 2012: Since this was posted, Facebook changed the layout a bit. Now when you land on someone’s profile, the bottom 225px are visible — not 115.) The space for the photo is 850px wide, so you would think that making a 850 x 115px image would make a nice cover photo, but it doesn’t.

For some reason, the photo uploader doesn’t like pictures that aren’t tall enough to fill the scrollable space, those top two-thirds of the image. If it’s too small, the uploader will center the picture and it might not appear at all.

To work around this, we just have to make our photo a bit taller. When you scroll up all the way, the dimensions of the cover photo become 850 x 315px. You should make your image this size:

Let’s make a sample banner, one which blends into the Facebook homepage and just has some text on it.

Our canvas should be 850 px wide and 315 px tall. The background color should be #e7ebf2 to match the space around it, and we’ll make the text the color of the Facebook toolbar at the top of the page, which is #3b5998. It should look something like this:

Remember, the bottom 115px will show up when someone goes to your profile, so make sure to put text where it will be visible. This is what it looks like on my Timeline:

When I scroll up, it’s just boring empty space. But I imagine others will start doing some pretty creative stuff when Timeline becomes available to the public.

So, if you want to create a custom cover photo for your Facebook profile, you’ll want to make a 850x315 image, keeping in mind that the bottom 115px of the picture is what people will see when they first land on your profile. For text banners, here’s a blank background file you might want to use (right click and hit “Save Image As…”).

Catch up with me on Facebook by subscribing to my updates: 

  1. stefanjbecket posted this

Stefan Becket ©2010-2012 unless otherwise specified. All rights reserved.