Contact Us
  • Facebook's Timeline Cover Photo – Time to Get Creative!

    UPDATE: Apr 15 2012 Facebook — after buggy rollout — has applied the new Profile Picture dimensions to all Personal Profiles — 160 x 160 pixels.

    NOTE:The top of a Personal Profile’s Profile Pic is 193px from the top of the Cover Photo. (On Fan Pages, this distance is 210px.)

    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 Personal Profiles.

    PLEASE NOTE: This tutorial is for Facebook Personal Profiles, NOT Pages!. The alignment of the Cover Photo and Profile Picture is slightly different in Facebook Brand Pages and Personal Pages — Brand Pages: the distance from the top of the Cover Photo to the top of the Profile Pic is 210px; Personal Profiles: the distance from top of Cover Photo to top of Profile Pic is 193px.

    Here is the Cover Photo / Profile Picture Integration article for Brand Pages.

    RELATED: How to Create a Cool Facebook Timeline Cover Photo and Profile Picture Combo for your Page Our tutorial shows you how to create a killer masthead design for your Facebook Page.

    At the 2011 f8 conference, Facebook announced “Timeline” — a major overhaul to the Personal Profiles to which we’ve all grown accustomed.

    When Timeline is rolled out, your Personal Profile will be organized in reverse chronological order, as a “timeline” of your life, an online scrapbook. As Facebook CEO Mark Zuckerberg says, “Timeline is the story of your life … in a new way to express who you are.”

    The Timeline Cover Photo: A Great Opportunity for Creativity

    For those with a creative bent, probably the most exciting change is the Timeline Cover Photo, a 851px x 315px canvas that you can fill with the image of your choice. Inserted into the lower left of the Timeline Cover is your Profile Photo. The fun is coming up with interesting and clever ways to have your Cover Photo and your Profile Photo interact.

    For my Cover Photo, I appropriated a great Rick Griffin poster:

    Tim's Personal Profile Timeline masthead

    Timeline Cover Photo Examples to Kickstart Your Creativity!

    Many will use the Cover Photo to simply put up a beautiful photo, or family picture, whatever. For example, Mark Zuckerberg just has his dog and his face:

    Zuckerberg Timeline Pic

    Not that there’s anything wrong with this, but it’s a missed opportunity to have some creative fun.

    For instance, Kelly Cromwell’s straightforward family picture becomes:

    Kelly Cromwell Cover Photo

    Here's a great way to get Dad into the family photo!

    Creative Approaches to Your Cover Photo

    There are several ways to approach the integration of your Cover Photo and your Profile Photo to create an effect:

    • The Profile Photo shows the user observing the “action” in the Cover Photo;
    • The Profile Photo is a continuation of the Cover Photo;
    • The Profile Photo simply complements the Cover Photo;
    • The Cover Photo extends the theme of the Profile Photo;
    • The Profile and Cover photos provide “meta” commentary on each other.

    Get Inspired by What Others Have Already Done.

    The following examples illustrate the above conceptual approaches, and should help spark your imagination and give you some ideas of the possibilities.

    NOTE: These screen captures represent the previous 125 x 125px width of the Profile Picture. But they give you the concept!

    E3 — Milan, Italy

    A number of creatives at the E3 digital agency in Milan went to work designing artful and clever Cover Photo concepts:

    Gianmarco Carrieri integrates the Cover and the Photo, hinting at endlessly repeating recursivity!

    Gianmarco Carrieri Cover Photo

    Gianmarco Carrieri

    Giuseppe Draicchio cleverly and beautifully integrates Cover and Photo.

    Giuseppe Draicchio Cover Photo

    Giuseppe Draicchio

    Alfredo Tomaselli positions his Photo outside the Cover, using his destructive laser glasses to immolate the old Personal Profile.

    Alfredo Tomaselli Cover Photo

    Alfredo Tomaselli

    Fabio Maravilla gets with the recursive barber-shop-mirror effect.

    Fabio Maravilla Cover Photo

    Fabio Maravilla

    Ivan Marino cleverly removes helmet and head, and makes great use of white space.

    Ivan Marino Cover Photo

    Ivan Marino

    Maurizio Mazzanti turns his Cover Photo into a movie screen, which he watches:

    Maurizio Mazzanti Cover Photo

    Maurizio Mazzani

    Annalisa Modotto nicely illustrates a progression of thought, with an edible resolution.

    Annalisa Modotto Cover Photo

    Annalisa Modotto

    Ekkapong Techawongthaworn’s Experiments

    Ekkapong Techawongthaworn, a San Francisco student, created several great Cover Photo concepts which he posted on his Google+ profile:

    Ekkapong Techawongthaworn Cover Photo

    Creative Profile Photo integration!

    Ekkapong Techawongthaworn Cover Photo 2

    Another very creative combo of Cover and Profile photos.

    Ekkapong Techawongthaworn Cover Photo 3

    Obviously, Mr Techawongthaworn is having great fun coming up with concepts!

    Other Cover Photo and Profile Photo Approaches

    Below are a few more examples, utilizing various techniques and metaphors to entertain and amaze Facebook friends:

    Mohammad L. Azzam creates a clever interaction between the Cover and Profile photos that resonates with the text content.

    Mohammed Azzam Cover Photo

    Mohammad L. Azzam

    Hugh Briss uses his Cover Photo to both say something about himself and promote his business.

    Hugh Briss Cover Photo

    Hugh Briss

    Jeremy Bronson creates a surreal and humorous integration of Cover and Profile photos:

    Jeremy Bronson Cover Photo

    Jeremy Bronson

    I love how Victor Zapanta used the barber-shop-mirror effect for some radical recursivity! And check how that distant road continues the effect…

    Victor Zapanta Cover Photo

    Victor Zapanta

    How to Create Your Own Cool Cover Photo / Profile Picture Combo

    First, you can click here to download a Photoshop PSD Template (updated with 160 x 160px Profile Picture dimensions) I created to help you create your Cover Photo / Profile Picture combination with an effect similar to the above examples.

    You can then follow the step-by-step instructions in this article on creating a cool Facebook Cover Photo / Profile Picture combo for your Facebook Personal Profile.

    As noted at the top of the article, the alignment of the Cover Photo and Profile Picture is slightly different in Facebook Brand Pages and Personal Pages.

    The distance from the top of the Profile Pic to the top of the Cover Photo is:

    • Brand Pages: 210px
    • Personal Profiles: 193px

    Cover Photo - Profile Pic - Different distance from top

    The key thing to understand: Although your 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.

    Why my Photoshop Template is 958 pixels wide

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

    This width is 958 pixels, and the total height — including Cover Photo and Profile Picture — is 419 pixels (Facebook requires a minimum height of 399px for the Cover Photo image). These are the dimensions I’ve made the Timeline Masthead Template PSD.

    Once you’ve created your Cover Photo and Profile Photo, you just need to add them to your Timeline.

    How to Add Your Timeline Cover Photo

    Just to the left of the vertical Timeline bar, you’ll see:

    Add Timeline Cover Photo

    Click "Add a Cover"

    Once you have selected the image you want for your Cover Photo, click “Save Changes”.

    Remember, the displayed size of your Cover Photo is 851 x 315 pixels. When you upload the 958px-wide Cover Photo image, Facebook re-sizes it to 851px, and displays only the top 315px. You have the option to vertically position your image. Superimposed on your image you’ll see “Drag to Reposition Cover”; just mouse over the image, at which point your cursor becames a hand icon, and drag the image to where you want it to be, then click “Save Changes.”

    Upload your Profile Photo

    Once you’ve added your Cover Photo, you can upload your Profile Photo which, as I mentioned above, is inset on the left side of your Cover Photo.

    The displayed size of your Profile Photo image is 160 x 160 pixels, but the total space taken up is 170 x 170 pixels due to the 4-pixel white border and 1-pixel dark outline. The minimum width for an uploaded Profile Photo image is 180 pixels.

    FACEBOOK Profile Picture width

    Your displayed Profile Photo is 160px square. The total space, with borders, is 170px square.

    Once you’ve uploaded the Profile Photo you want to use with your Cover Photo, you can position it vertically by mousing over the image and selecting “Edit Thumbnail” from the contextual menu. Then edit the thumbnail in the popup window to get it where you want it.

    You can also continue to position the Cover Photo by mousing over it and selecting “Reposition” from the “Change Cover” contextual menu:

    Facebook Timeline - Change Cover

    Take Advantage of this Fun Opportunity for Creatives!

    It’s time to flex your creative muscles! Have fun expressing who you are in a unique and creative way.

    And feel free to post URLs to your Timeline in the comments.

    Comments

    1. lots of celebrities on my profile :-)www.facebook.com/clemensfischer

    2. So many ideas, so little time! – https://www.facebook.com/Strike25

    3. amazing designs, i also have a related post on this one 45 Fantastic Facebook timeline Covers ~ Pix Gateway: http://www.pixgateway.com/2011/12/45-fantastic-facebook-timeline-covers.html

    4. Very nice, Νικολαΐδης!

    5. I really like your idea of doing chronological photos! I was thinking of doing something similar… How did you set it up? Did you use a template to help with importing photos?

    6. I really like you cover photo idea! I was thinking of doing something similar… How did you set it up? Did you use a template to import all the photos you wanted and then uploaded it onto Facebook?

    7. http://www.facebook.com/goran.jakovljevic  this is mine, from one inpired morning 🙂

    8. Here’s mine
      https://www.facebook.com/shrawankumarshrestha?ref=tn_tnmn

      But this cover photo breaks facebook new rule about photo (no commercial photo in personal timeline cover). BTW Tim, Can you tell me ; are we allowed to put  fanpage, youtube and twitter url in business fanpage cover photo?

    9. Kevin Kinnersley says:

      some pretty unique designs here, I like the beach one the best! 🙂 
      Heres mine: http://www.facebook.com/skywebstudios – not really unique but I wasn’t really going for that, just want to showcase what I do and stuff.

    10. Here’s mine
       http://www.facebook.com/alen.ibrelic

    11. here’s my design… a tab builder for facebook fan pages… see the tab design that’s related to the cover and the profile pic
      http://www.facebook.com/pages/Timeline-For-Fan-Pages/290935777640957 

    12. Bill Richmond says:

      Hey there – the PSD template link is broken! Where can I get the template? Cheers ;O)

    13. Sorry about that, Bill! I’ve fixed the link and it should now work for you. :-p

    14. Hmmm, I guess I need to change mine soon since I see a lot of people have gone the same direction.. http://www.facebook.com/sotowebtechnologies

      • Remember that your Profile Picture is also your brand’s thumbnail on Page posts. Make sure it makes sense at that size (50 x 50px). Yours really doesn’t work. You may want to think about cramming so much info into your Profile Picture.

    15. Jodi Stammer says:

      Is there a way to MOVE cover photos to another album? Mine wasn’t lined up perfectly and by the time I got it right (using your template, thankyouverymuch!), people were commenting on it. I HATE THAT! So I don’t necessarily want to lose the comments, just want it to not be in my cover photo album anymore, now that I have the one I want there.

      Note to self — and others — add new photos to an album that only you can see before publishing.

      • There’s no way to do that as far as I can see, Jodi.

      • I totally know how you feel… I think it’s stupid we can’t move photos from our timelines to another album and keep the comments like we can do with ALL our other photos….. Facebook needs to get this bug fixed…. it’s definetly irritating..

    16. Looking through the comments it appears that the psd file link was broken before, it’s broken again now. Is there a quick fix that I can do with the page profile psd that I can do? Or can you relink the personal profile psd?

    17. Kevin Andres says:

      hello I am from Colombia I would like to know how to profile Victor Zapanta .. I really liked .. or if there was a tutorial would be good thanks (sorry my English)
       
      http://www.facebook.com/Kevin.A.Pianda

    18. Hi Steve,

      The links are working for me. Try this one and let me know if you get satisfaction.

    19. Steve, Can you tell me which link is “still broken”? I thought I fixed them all. Thanks.

    20. Fineline_Studio says:

      I see that the profile picture on the new timeline is clickable.  How do I edit where I want the click go to?

    21. How do I create the cover that Victor Zapanta used to create the barber-shop-mirror effect  on my timeline. I really liked that one

    22. The link is just to the picture in your photos. You could add a comment to that photo with the URL you’d like to promote. But I don’t think you can change where the initial click takes a user.

    23. zaidniazi says:
    24. Very entertaining post – gets the creative juices flowing.

      I did a recent cover art with my daughter, hands overlapping edege – it came out good, but would love to turn borders off  frame which would complete the effect. I don’t think I can touch the CSS though.

      Cheers!

      LJ

    25. great idea,, just edit mine,,
      http://www.facebook.com/siti.f.rahmat

    26. Daisy Helber says:

      I’m wondering why my 850×315 cover design is cropped when I look at it in the facebook app on my iPhone, but the cover design for my business page resizes just right to fit the top of my iphone screen. Frustrated 🙁 Can you help?

    27. Thanks Great Tutorial 😉

    Trackbacks

    1. […] Cover Photo is a 851px x 315px canvas that you can fill with the image of your choice.” Check out their blog post which includes images of great Tiemline Cover Photo examples to kickstart your […]

    2. […] the long space you have. Check out Mashable’s slideshow of how big brands use cover photos and HyperArts Blog’s gallery of cover photo creativity for […]

    3. […] the long space you have. Check out Mashable’s slideshow of how big brands use cover photos and HyperArts Blog’s gallery of cover photo creativity for […]

    Speak Your Mind

    *