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

    June 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

    HyperArts Fan Page Masthead

    Ford Motor Company Masthead

    Ford Motor Company Masthead

    Corona Timeline Cover Photo & Profile Picture

    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. (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:

    Facebook Timeline for Pages Cover Photo Template

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

    Master Image for Facebook Timeline Masthead

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

    Timeline Masthead Cover Template

    4) Add any additional graphic elements:

    Timeline Masthead Cover Photo Profile Picture

    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

    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….

    1. 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.
    2. 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.
    3. 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.

    View our example Timeline Page — this page was done using our latest template and this tutorial.

    Share your creative work…

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

    Comments

    1. 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.

    2. 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.

    3. 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.

    4. I believe Facebook scales your Cover Photo to 851px wide and displays only the top 315px after scaling.

    5. Thanks! It worked well. I have a brady bunch themed thing planned in the next week: see http://www.facebook.com/kimslawson

    6. 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.

    7. Success! I did mine using Pixelmator and it worked smashingly! :)

    8. megan nalbandian says:

      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 :(

    9. Valentijn says:

      Great tutorial! But i cannot get the brand page template to download, i get an error opening the file!

    10. 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!

    11. 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?

    12. 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?

    13. Are you sure you’re not using the Page template for a Profile, or vice versa?

    14. 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.

    15. 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

    16. Great tutorial! I’ve been trying to figure this out for a while. (I used the personal template)

    17. Fabiana Abraham says:

      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?

      • When I see it in action, I’ll blog about it.

        • Fabiana Abraham says:

          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!

          • 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 says:

              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?

            • Yup. It’s rolled out to you, the user, but not to all users, i.e., me!

            • okamiokami says:

              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.

            • 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

      • Mine hasn’t changed. Send the URL of a profile where the dimensions have changed. Thanks!

    18. So they just changed it again. What are the new dimensions now? lol

    19. Jo Erwin says:

      Please update the template for new layout…
      I really like this old template because it’s really fit for previous layout :)

    20. 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

    21. I’m itchin’ for the new dimensions on your template. Any idea yet when it might be ready?

    22. Very nice!

    23. Shelley Mae says:

      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!

    24. 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.

    25. headlessbody says:

      The masthead image is ok, but the “profile” image is zommed in, because is 168×168 and not 160×160..

      Edit: sorry, late at night.. scaled to fit at the end of your post.
      delete the whole comment, thanks

    26. Marko Marinkovic says:

      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!

    27. I’m attempting to download the template for Facebook Pages, but it keeps freezing about halfway downloaded. Is there another link to this file somewhere? Thanks!

    28. Nothing we can do about that. The relationship between the Cover Photo & Profile Pic is completely different.

    29. Jay Wylie says:

      This helped me out no end thanks ever so much! (p.s. the download worked fine too)

    30. hi,can u help me?i’m having a little problem here. when I try to “scale to fit” my profile picture became like photo cover,,it does not fit like you said..please help me/

      • 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.

    31. 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.

    32. 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.

    33. nadinar says:

      Wonderful tutorial and great template. Thank you for this. It took me under 10 minutes to put this together: https://www.facebook.com/spiceapps.me

    34. Red De Guzman says:

      why don’t get the same result as you have. Idk, I’m sure I followed all your instructions correctly

    35. tnx a lot, it really helped me boost my page <3

    36. Unknown says:

      Hi tim Ware..check out, –>https://www.facebook.com/psyche.magina

    37. SalzSnapz says:

      Hi Tim Ware. Thanks so much for this! Just what I was after. Here’s mine https://www.facebook.com/Salzsnapz

    38. Simon Woodward says:
    39. Spark the Action says:

      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

    40. Muhammad Mahmoud says:

      thanks a lot, Tim this was very helpful here is the page I used made it for:
      http://www.facebook.com/bestaviationphotos

    41. Bipin Zhere says:

      Thanks a lot Tim…I have been working on it for a long long time. But never could align properly. Thanks 4 the template, finally I am successful..:)

      https://www.facebook.com/bipinography

    42. Martin Frickmann says:

      Thanks for the help with this :)

      Testet it on my own facebook page just for the fun of it so uploaded some random picture from a game

      https://www.facebook.com/martin.frickmann

      had to move TEMPLATE BORDERS a bit to the left and a bit up (like 4 px each direction).
      Don’t know why, but after that it worked like a charm :)

    43. Scott Gilbert says:

      Extremely helpful post, a thousand thanks.

      https://www.facebook.com/beginnerbanjostore

    44. Joel Hanes L Bongcaron says:

      Thanks for this Tut! Though I’ve Got a 97% results! :) I was really having hard time doing this thing! :)

      https://www.facebook.com/joelhanes

    45. TheRoad2WD says:

      Tim, Very cool! We put it up here and will do a little more tweaking of the overall design but this is the closest we’ve gotten!

      https://www.facebook.com/littlewooke

    46. Really stoked with how ours turned out. Thanks for all your help, it worked a treat!

      https://www.facebook.com/houndedshop

    47. Thank you, Robyn! The post is amended!

    48. There’s no workaround necessary. Facebook now automatically performs the “scale to fit” on the Profile Picture. I never understood why they made this an extra step anyway!

    49. Karen Barr says:

      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?

    50. Karen Barr says:

      p.s. the TIMELINE template works, but the PAGES template is the one I have probs with

    51. You’re directions and template was FANTASTIC!
      Thanks for helping us jazz up our Facebook page… high fives!
      https://www.facebook.com/PaperGunPictures

    52. Hi,

      Can you update the template to reflect the new layout dimensions? From what I understand all pages are getting updated on Jun 13 2014.

      Thanks!

      • hyperarts says:

        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.

    Speak Your Mind

    *