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.
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:
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:
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:
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!
Giuseppe Draicchio cleverly and beautifully integrates Cover and Photo.
Alfredo Tomaselli positions his Photo outside the Cover, using his destructive laser glasses to immolate the old Personal Profile.
Fabio Maravilla gets with the recursive barber-shop-mirror effect.
Ivan Marino cleverly removes helmet and head, and makes great use of white space.
Maurizio Mazzanti turns his Cover Photo into a movie screen, which he watches:
Annalisa Modotto nicely illustrates a progression of thought, with an edible resolution.
Ekkapong Techawongthaworn’s Experiments
Ekkapong Techawongthaworn, a San Francisco student, created several great Cover Photo concepts which he posted on his Google+ profile:
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.
Hugh Briss uses his Cover Photo to both say something about himself and promote his business.
Jeremy Bronson creates a surreal and humorous integration of Cover and Profile photos:
I love how Victor Zapanta used the barber-shop-mirror effect for some radical recursivity! And check how that distant road continues the effect…
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
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:
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.
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:
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.