What is an Integrated Facebook Masthead Design?

When I say “integrated” masthead design, I mean a masthead where the Cover Photo (the big image) and the Profile Picture (the image inset on the lower left corner of the Cover Photo) seem of a piece, where the Profile Picture appears to be transparent:

HyperArts Fan Page Masthead

Ford Motor Company Masthead

Corona nicely integrates the Cover Photo with the Profile Pic which also makes a good thumbnail icon

Creating the Cover Photo and Profile Picture images in Photoshop

This tutorial will show you how to create an integrated Timeline masthead using Photoshop, and the Timeline Template I offer for download is in Photoshop format. If you use other image-editing software, the following instructions won’t fit. However, you should get the general idea and be able to apply it to your image-editing software of choice.

There are several things that make the integration of the two images tricky:

Aligning the Cover Photo and Profile Picture to create a seamless continuity between the two images;

Although the Profile Picture renders at 160 x 160px (with an additional 5px border), Facebook requires the image you upload be a minimum of 180 x 180px — it then CROPS your 180px image, 10px on each edge, to display the 160px image;

Your Profile Picture also functions as your icon, on all your Page posts on your own or other Facebook Pages, so make sure that it works well in both roles, icon and part of the Timeline masthead.

Aligning the Cover Photo and Profile Picture to create a seamless whole

I have found that the best way to create your Facebook Timeline masthead is to create one image that includes both elements, so that you work out exactly how the two images will look when rendered together on your Facebook Timeline.

How to Use the Timeline Masthead Photoshop Template

Because of Faceboook’s requirement that the uploaded Profile Pic image be at least 180 x 180 pixels — which Facebook crops to 160 x 160 pixels, i.e., 88.88% of the original size), it’s best to create your entire masthead design at a width that, when re-scaled to 88.88% its size, will be 851px.

This width is 958 pixels, and the total height — including Cover Photo and Profile Picture — is 450 pixels(Facebook enforces a minimum height of 399px for the Cover Photo), and those are the dimensions I’ve made the Timeline Masthead Template PSD. (Facebook DID enforce a 399px height for your uploaded Cover Photo image, but no longer, it appears.)

Let’s get started!

FIRST: It’s now June 2013 and I noticed that Facebook had made changes that caused me to have to update this post. This is the latest as of June 22, 2013…

1) Download, unzip and open the template file in Photoshop. Note the transparence where the Cover Photo and Profile Picture will go:

2) Create the main image for your masthead at 958 x 450px — or larger so you can experiment with different positions.

3) Drag your image into the Cover Photo Template, and move the template layer to be ON TOP of your image layer:

4) Add any additional graphic elements:

After you designed your masthead to your satisfaction, it’s time to export the Cover Photo and Profile Picture and upload them to Facebook.

Export the Profile Picture image as GIF, JPEG or PNG

1) With the layer called “TEMPLATE BORDERS” selected, select the Magic Wand tool — set to “0” tolerance, “contiguous” checked, and “Anti-alias” UNchecked — and click inside the Profile Picture (the inset box) area so that it’s selected (this will be 180 x 180px).

2) From the top menu, select: Image > Crop — and crop the image;

3) Export this Profile Picture image, either as a JPEG, GIF or PNG.

4) Undo (Mac: Command+Z; Windows: Control+Z) until you’re back to the full template image.

Export the Cover Photo image for your Timeline masthead

Now it’s time to export your Cover Photo.

1) Disable the “TEMPLATE BORDERS” layer;

2) Crop your Cover Photo image, from the top, to a height of 353 pixels. So you’re going to cut off 97 pixels from the bottom of the image. Your image should now be 958 x 353 pixels.

3) Export your Cover Photo image — Facebook downsizes, via CSS, your 958 x 353px image to 851 x 315px (approx. 88.8%), with the ability to use the “Reposition” feature to make one horizontal adjustment to the right of up to 4px — and you WILL have to adjust your uploaded image!

Upload the images to your Facebook Timeline Page

If this is the first Cover Photo you’ve created for your Page, just click on “Add a Cover” to locate it on your computer and upload it.

If you’re replacing an existing Cover Photo, just mouse over the Cover Photo and click “Change Cover”. Once it is uploaded, you’ll have to use “Reposition” to move the image to the right, as you just want to move your Cover Photo image to the right. Just click and drag the Cover Photo image and drag it to the right as far as possible (this should make it align with your Profile Pic. You need to move it the maximum to the right — 4px — so just give it a tug to the right, and Save.

Repeat for the Profile Picture, mousing over it and selecting: Edit Profile Picture > Upload Photo.

If you’ve followed the above instructions to the letter, it should look just as you planned it.

Comments

The update about the size of the profile picture is actually not correct. The reduction is still the same but you need to edit the thumbnail and select “scale to fit”. As soon as you do that the 180×180 image will be correctly reduced to 160×160 as it always has been.

This is awesome but it doesn’t work for Fanpage pics..because I guess the image size for cover is different.. it works but facebook resizes it down thus losing a lot of quality See http://facebook.com/TheVacuumDoctor

Your fan page masthead looks great, James. I’m not seeing the issue. Can you describe what it should look like?
And, as you should have noticed, there are two templates, one for Personal Profiles and one for Fan Pages.

I wish you would make a video on youtube explaining this because I am having trouble. First, when I crop my profile pic, it comes out 160×160, not 180×180 like you say it should be. Second, my cropped cover photo comes out as 958×419, not958x450. It would be much easier for you to show idiots like me, as I obviously cannot get this done.

If you crop your Profile Pic in the downloadable template, as instructed, it should definitely be 180 x 180px.
And you don’t have to “crop” your Cover Photo. The dimensions of the TEMPLATE are 958 x 450px. I’m not sure how you’re getting 958 x 419px.
You should just OPEN the TEMPLATE and use it as instructed. You don’t need to scale it down.

This is such a helpful post, and my profile image came out beautifully after much effort. However I am still having issues with my timeline cover image… What’s very strange is that after hitting save it looks great but as soon as I refresh my browser the logo appears pixelated again – so strange! I am also still having issues when I try to use bright colors like orange

Having a (very) slight misalignment between my header and profile pic. Not overly annoying but thought I’d reach out for help. First, I’m using GIMP. Everything seems about the same, but I’m just having this one issue. Here’s a closeup showing the edges of my pic extending into my header image. (I’ve tried edit / scale to fit, doesn’t seem to make a difference).

Actually! The Scale to fit is what did the trick! Sorry about that, for some reason it wasn’t working yesterday (probably just my cache or something), but I did it today and it looks OK. Still not perfect, but more so than the it was previously. Thanks!

I’ve done everything correctly in Paint Shop Pro 9. I checked the dimensions and I have 958 x 450 and 180×180. Once uploaded, my profile pic is the right scale (when scaled to fit) but is 17 pixels too high up. I took a screen dump of the facebook page, pasted it back into Paint shop then shrunk the original profile pic to 160 and lined it up and counted.. The cover is too low it would seem.

Is there a chance facebook have changed anything wth the upload and the 958×450 is now wrong?

You may be using the Page template for a Personal Profile, or vice versa. The Personal Profile Profile Picture is 17px higher than the Profile Picture for a Page.
Let me know if this is what’s causing your issue, Chris.

OK I feel very “duh” about this. I have Ps7 open next to your instructions. I have downloaded & unzipped both files- only business template shows up as gif checkerboard tho’ I want personal. I have tried all 3 options of Ps “keep imbedded profile-discard etc., none give me the gif look so I stuck w/ business which does…?

When I drag my 958×419 image over template I still have 1 layer & cannot trade first/second levels. Obviously not working at all for me. Sure it’s operator error, Plzzz help or direct me to simpler (idiot proof) instructions. Thanx

Hi Tim, and thanks for your helpful template — worked like a charm. However, now FB is rolling out a single column timeline (for personal profiles) and the dimensions have changed. Any chance you’ll be updating your template for the new look?

Thanks for your reply, Tim (and I apologize if you see a double comment from me — it wasn’t clear from my Disqus dashboard whether my first comment was recorded). It looks like your own FB profile has the new single column design — single column meaning a person’s posts are now all in one column on the right, with friends, photos, and other info blocks on the left. The tell tale sign is that a person’s name now appears on top of the cover photo, rather than beneath it. There is also a darkened area at the bottom of the cover photo so that the name, which is in white, shows up on all backgrounds.

Thanks for your email. I’ll be out of the office until Monday, April 8th. If your request is urgent you can email workrequest@hyperarts.com. Otherwise, I’ll get back to you upon my return.
Thanks,
Jason

Yes, the Cover Photo / Profile Picture relationship has changed with the new layout which is being rolled out gradually. Unfortunately, it’s not yet showing for me. As soon as it does I will create a new tutorial to reflect the new relationships.

Thanks for your email. I’ll be out of the office until Monday, April 8th. If your request is urgent you can email workrequest@hyperarts.com. Otherwise, I’ll get back to you upon my return.
Thanks,
Jason

You might experiment with saving the logo image as either a .PNG, .JPG or .GIF and see which best survives Facebook’s copying it for your page.
Assuming that your source image is sharp, that’s the best I can suggest.

Hi. I’m new to photoshop but did manage to do the personal cover from your template. Now I am trying the other masthead,but the profile pic I am trying to add to the cover has a background of it’s own. I would like to get rid of the original background and just have the picture of the person. How on earth do I do this? Your help much appreciated – driving me nuts!

No, you can’t do anything about that darkening gradient at the bottom of the Cover Photo. Facebook renders your name in a white font, so the darken the bottom to ensure that it’s always readable.
By “none of your images has the greying out” do you mean in my examples? I just didn’t bother. If you mean my personal profile, the darker the Cover Photo is, the less noticable the dark gradient.

Hi mr Ware, I was extensively using your previous cover page template, but it doesn’t seem to work with this one. Can you please provide me a direct link to download a new template for 2013 page changes? The one in the text above is Dec_2012 version. Tnx!

And, by the way, Facebook appears to have changed things a bit, causing me to update this tutorial. So read above. It should work now. It works on our example which I did using our template and this updated tutorial.

Hi Marko: Facebook appears to have changed things a bit, causing me to update this tutorial. So read above. It should work now. It works on our example which I did using our template and this updated tutorial.

Hi Tim, thank you for keeping this post active and for the templates. My problem is the aligning of the profile and cover pics – I am a few pixels off and not sure where I made the mistake (assuming it is not a FB thing) I am using Gimp instead of PS, but can follow all instruction you provide. My page is: https://www.facebook.com/SparkTheAction and you can see what the logo should look like on my blog site: http://www.sparktheaction.com/blog
Many thanks for your help –
Best regards,
Carl

I’ve tried multiple times, but I cannot download & open the file in PS. I download, it, unzip it and try to open in PS and get a message saying “Cannot complete action as desired as it it not a photoshop document” or similar message. Any help?

Due to inconsisten display issues across various devices, I’ve decided not to update this approach to having a Cover Photo and Profile Picture integration. The important thing is for your timeline masthead to look good everywhere.