How to Create a Cool Timeline Cover Photo and Profile Picture Combo for your Facebook Page

When Facebook rolled out Timeline for Personal Profiles last year, creatives jumped at the opportunity to make eye-catching and clever Cover Photo / Profile Picture combinations, and I featured a number of these in an article about creative Timeline designs for Personal Profiles.

Now that Facebook is in the process of rolling out Timeline for Pages, the same creative impulses can be applied to Facebook Brand/Business Page mastheads.

Cover Photo / Profile Picture Tutorial + Downloadable Photoshop Template

This article will show you how to create an integrated Cover Photo and Profile Picture, and I’ve added a downloadable Photoshop template to help you in this effort.

When I say “integrated” masthead design, I mean a masthead where the Cover Photo ( the big image) and the Profile Picture (the image overlaid in 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

or otherwise cleverly integrated to create a unified whole:

Pragmatic Design Masthead

Creating the Cover Photo and Profile Picture images in Photoshop

I have found that the best way to create the images for the Timeline masthead is in Photoshop, although your mileage may vary.

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;
• Your Profile Picture also functions as your icon, on all your Page posts on your own or other Facebook Pages, so it has to work both with your Cover Photo AND function as a stand-alone icon.

Make sure your Profile Picture works well as a thumbnail / icon for your brand!

It’s great to be creative with the Cover Photo / Profile Picture combination, but remember your Profile Picture does double-duty as your brand icon wherever you post comments.

Here is how the above three example Pages’ Profile Picture thumbnails display:

As you can see, the Ford thumbnail doesn’t render too well at the reduced size, whereas the HyperArts and Pragmatic Design thumbnails render better. (Although, I think the Pragmatic icon would look better if it wasn’t clipped at the top.)

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 on Facebook.

To make your life easier, I have created a Photoshop Timeline for Pages Cover Photo Template you can use to create your Cover Photo and Profile Picture for your Facebook Timeline Page.

NOTE: If you’re using this for your Personal Profile Timeline (as opposed to a Brand Page), use this Photoshop Template.

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 re-scales 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.

Let’s get started!

1) Download, unzip and open the template file in Photoshop. Notice 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” 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

3) Export the cropped image — your Profile Picture — as 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 as GIF, JPEG or PNG

Now it’s time to export your Cover Photo.

1) Disable the “TEMPLATE BORDERS” layer;