Create a Cool Profile Picture & Cover Photo Combo for your Facebook Timeline Page (April 2013)

December 5, 2012 By Tim Ware 54 Comments

APRIL 2013 — UPDATED! This post is for Facebook Pages, NOT Personal Profiles. For Personal Profiles, read my tutorial + Photoshop template for Facebook Timeline for Personal Profiles, updated to reflect the Spring 2013 Timeline layout changes.

Cover Photo / Profile Picture Tutorial + Downloadable Photoshop Template — For Brand Pages

This article will show you how to create an integrated Cover Photo and Profile Picture for your Facebook PAGE, and I’ve created a Photoshop Template for Facebook Brand Page Timelines to help you in this effort. Just follow the instructions below.

Want to create a Profile Picture / Cover Photo Integration for your Personal Profile?

There are some differences in the relationship between the Profile Picture and Cover Photo on Personal Profiles and Brand Pages. If you’re doing this for your Personal Profile Facebook page, read Photoshop Template for Facebook Personal Profile Timelines.

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.

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.

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.

Let’s get started!

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) Export your Cover Photo image — which, if you’ve done everything correctly, should be 958 x 450px. Facebook will resize it to 851 x 315px, and display from the top of your image. So once your image is resized to 315px in height nothing below that will be displayed.

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.
IMPORTANT: In order to retain the Profile Picture / Cover Photo integration you worked on, there’s one more step:

Mouse over the new Profile Picture and click “Edit Profile Picture”
You’ll then see a list of options: select “Edit Thumbnail”

Then tick the box next to “Scale to Fit” (this will ensure your entire Profile Picture image is resized to 160 x 160px instead of being cropped by 10px on a side which is the Facebook default (seems it should have NOT been the default!):

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

View our example Timeline Page.

Share your creative work…

I’d love to see what you come up with using our template. Please share in the comments. Thanks!

Filed Under: Facebook, Facebook Design Tagged With: Facebook, Facebook Cover Photo, Facebook Design, Facebook Profile Picture, Facebook Timeline

http://www.socialidentities.com/ Hugh Briss

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.
- http://www.hyperarts.com/blog/ Tim Ware
  
  Well, that changes everything! Thanks for the tip, Hugh.
  
  Tim Ware
  t1mware@HyperArts.com
  (510) 339-6084
http://www.facebook.com/people/James-Pyle/1193090735 James Pyle

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
- http://www.hyperarts.com/blog/ Tim Ware
  
  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.
http://www.facebook.com/people/James-Pyle/1193090735 James Pyle

To not lose quality the image needs to be saved at the proper height so Facebook doesn’t resize it..but doing this renders the template unusable..this is driving me nuts.
http://www.hyperarts.com/blog/ Tim Ware

I believe Facebook scales your Cover Photo to 851px wide and displays only the top 315px after scaling.
http://www.facebook.com/kimslawson Kim Slawson

Thanks! It worked well. I have a brady bunch themed thing planned in the next week: see http://www.facebook.com/kimslawson
- http://www.hyperarts.com/blog/ Tim Ware
  
  Nice!
  - http://www.facebook.com/kimslawson Kim Slawson
    
    It’s in full swing now! Thanks Tim, for the inspiration
http://www.facebook.com/Gitarkin David Phelps

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.
- http://www.hyperarts.com/blog/ Tim Ware
  
  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.
  - http://www.facebook.com/drofidnas Chris Sandiford
    
    Since my faux pas with the wrong template, I realise that your personal template is 958×419. This dimensional difference needs adding to your tutorial. Cheers.
    - http://www.hyperarts.com/blog/ Tim Ware
      
      I have updated the post to indicate that the Personal Profile template is 958 x 419px. Thanks Chris!
http://twitter.com/joebob2406 Jason Doiron

Success! I did mine using Pixelmator and it worked smashingly!
- http://www.hyperarts.com/blog/ Tim Ware
  
  Congrats, Jason. Thanks for sharing your success!
megan nalbandian

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
Valentijn

Great tutorial! But i cannot get the brand page template to download, i get an error opening the file!
- http://www.hyperarts.com/blog/ Tim Ware
  
  With what app are you trying to open the file? It’s in Photoshop (PSD) format.
  - Valentijn
    
    I even can’t get the .zip to download fully… maybe it’s my connection!
    - http://www.hyperarts.com/blog/ Tim Ware
      
      Yes, sounds like your connection.
http://www.urbancorning.com Myles

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).
- http://www.urbancorning.com Myles
  
  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!
http://www.facebook.com/drofidnas Chris Sandiford

Not quite working for me here.

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?
Guest

Further to my post, Facebook appear to have dropped the profile box by roughly 12-15 pixels which means your template is out. Can you check?
http://www.hyperarts.com/blog/ Tim Ware

Are you sure you’re not using the Page template for a Profile, or vice versa?
http://www.hyperarts.com/blog/ Tim Ware

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.
http://www.facebook.com/jai.marland Jai Marland

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
http://www.facebook.com/ashdcar Ashley Carter

Great tutorial! I’ve been trying to figure this out for a while. (I used the personal template)
- http://www.hyperarts.com/blog/ Tim Ware
  
  Approve.
- http://www.hyperarts.com/blog/ Tim Ware
  
  Approve.
Fabiana Abraham

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?
- http://www.hyperarts.com/blog/ Tim Ware
  
  When I see it in action, I’ll blog about it.
  - Fabiana Abraham
    
    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.
    
    I found this information:
    http://www.sociallystacked.com/2013/01/new-facebook-dimensions-for-the-single-column-timeline-design-save-this/
    but still can’t quite get it to all match up.
    
    Thanks again!
    - http://www.hyperarts.com/blog/ Tim Ware
      
      Thanks Fabiana. I’m aware of the change but it hasn’t rolled out to where I am yet. As soon as it does, I’ll update the post to reflect the latest layout.
      - Fabiana Abraham
        
        Huh — that’s interesting. Every profile *I* look at shows the updated look — yours, my friends, etc. Maybe that’s because I have the updated look already?
      - http://www.hyperarts.com/blog/ Tim Ware
        
        Yup. It’s rolled out to you, the user, but not to all users, i.e., me!
      - okamiokami
        
        Hello Tim,
        first of all thank you for the great tutorial.
        I had a perfectly integrated design before the new look.
        Would it help if I sent you a screenshot?
        Please let me know.
      - http://hyperarts.com Jason
        
        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
      - http://www.hyperarts.com/blog/ Tim Ware
        
        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.
      - http://hyperarts.com Jason
        
        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
- http://www.hyperarts.com/blog/ Tim Ware
  
  Mine hasn’t changed. Send the URL of a profile where the dimensions have changed. Thanks!
http://www.facebook.com/jonardlarosa Jonard La Rosa

So they just changed it again. What are the new dimensions now? lol
- http://www.hyperarts.com/blog/ Tim Ware
  
  I haven’t seen the new layout. Post a URL that displays “the new dimensions”. Thx.
Jo Erwin

Please update the template for new layout…
I really like this old template because it’s really fit for previous layout
- http://www.hyperarts.com/blog/ Tim Ware
  
  As soon as the changes are rolled out here in the SF Bay Area I will update.
http://twitter.com/HelloAlexCL Alex Caring-Lobel

Do you have any tips for keeping a logo in the profile pic sharp? This is a problem that’s preceded the template, which has been most useful! https://www.facebook.com/tricyclemag
- http://www.hyperarts.com/blog/ Tim Ware
  
  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.
  - http://twitter.com/HelloAlexCL Alex Caring-Lobel
    
    Thanks so much for the suggestions, and the template and instructions, Tim!
http://www.facebook.com/RJRey Rob Reynolds

I’m itchin’ for the new dimensions on your template. Any idea yet when it might be ready?
- http://www.hyperarts.com/blog/ Tim Ware
  
  Rob: The new tutorial reflecting the new Facebook Personal Timeline dimensions is now up, with download PSD template.
http://www.facebook.com/profile.php?id=602074578 Julius Myszkowski

Thanks for this. Worked a treat!
https://www.facebook.com/pages/Webkite/360481784070787
http://www.hyperarts.com/blog/ Tim Ware

Very nice!
Shelley Mae

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!
- http://www.hyperarts.com/blog/ Tim Ware
  
  I would just check online Photoshop forums and other help. This post isn’t really about how to use Photoshop!