UPDATE December 2012: Facebook made a change in how it handles the uploaded Profile Picture by default. READ this updated post on creating a cool Facebook Timeline Cover Photo / Profile Picture integration.
ALERT: Apr 27 2012 Facebook has rolled out the new Profile Picture dimensions for all Brand Pages — 160 x 160 pixels.
NOTE:The top of a Page’s Profile Pic is 210px from the top of the Cover Photo. (On Personal Profiles this distance is 193px.)
THIS POST HAS BEEN UPDATED for the new Profile Picture dimensions (160 x 160px, displayed) and includes a NEW downloadable Photoshop Template, with the new Profile Picture dimensions for Brand Pages.
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:
or otherwise cleverly integrated to create a unified whole:
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;
2) Export your Cover Photo image — which, if you’ve done everything correctly, should be 958 x 450px.
Upload the images to your Facebook Timeline Page
Uploading your Cover Photo and Profile Picture to your Facebook Page is fairly straightforward, and chances are you’ve done this before. Here’s a quick rundown….
- 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”.
- 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.
Share your creative work…
I’d love to see what you come up with using our template. Please share in the comments. Thanks!