One of the most important parts of a person’s Facebook presence is their profile photo. This is displayed in the top left corner of a page. The photo can be a newly uploaded image or it may be drawn from any of your online albums.
Typically, a profile photo shows someone’s face, and appears in front of the light blue-grey line that connects from the left side of the profile to the left-most tab. View an example of a typical profile page with a normal photo.
Unlike Myspace, Facebook’s uses a common color and layout for every profile. This makes the site look better overall, but also limits your ability to affect the look of your profile. You can display Facebook applications on the left sidebar, and have them in tabs, but any changes to how the page’s style or how it is displayed overall are limited.
Download Rock Show, the Concert Posters app for the iPhone and iPad
Hacking the Facebook Profile Photo
There isn’t a legal way to ‘hack’ Facebook, but there is a method to changing your profile photo to make your profile look subtly different and cooler. It isn’t obvious, but the placement of a profile photo allows you to lightly innovate on Facebook’s sacred profile layout.
How does it work?
When you create a profile photo from an existing album image, Facebook lets you crop the photo down to whatever dimensions you choose. When you visit your profile the selected photo is displayed scaled down to a maximum height and width allowed by Facebook.
The first thing you need to understand is how much space you have to play with. Facebook displays profile photos at a maximum of 200 pixels in width. If you go beyond this, Facebook resizes your profile photo down to 200 while maintaining the aspect ratio vertically. Facebook will display a photo in your profile that is up to 600 pixels in height. This means that Facebook will happily display any image as large as 200 x 600 without otherwise changing or resizing it.
Now that you know the maximum dimensions of your profile photo, the base trick is simple. Facebook is set up to display the top of an image 52 pixels north of the thin grey line. Normally, all profile photos are placed at this height above the line.
In order to achieve an unbroken line across your profile you need only create an image with a grey (#D8DFEA) 52 pixels below the top. In addition, you’ll need to paintbucket the area above the line to match the light blue (#EFF0F5) used in the profile header.
For more information about the colors used in Facebook’s style sheet, see this guide for Facebook application developers by Bill Konrad. I wrote a Facebook application about a year ago, read about the DMB Facebook application here.
Subbing this blank template allows you to achieve something Facebook normally does not allow: the option to not display a profile photo at all. A new Facebook account with no profile photo displays a box with a drawing of a mystery person with soft-serve icecream hair on it. Using a blank lined template allows you to add a little ‘negative’ space to your profile that is normally not possible.
The fun begins when you overlay a photo or image on top of the blank template. The hardest part about doing this is isolating an image so that it can cleanly offset the background template. My suggestion for this is to use Adobe Photoshop to draw a selection area around your photo or image and then remove the edges.
There are a lot of fun things you can do pairing foreground cutout images with the background Facebook template. The first one I did was to create a sort of mini-living room for me to hang out in. Here’s a screenshot of my profile using this particular photo.
I wanted to do a play on the little grey line and decided to try to create the illusion that I was hanging from it. I started by taking a photograph of me hanging from a doorway and then isolating the image. I then overlayed the photo on a longer version of the blank Facebook profile photo template.
Here’s a look at that process and the final result:
And here’s a screenshot of my profile using this effect.
Another fun foreground image I used was a colored in Giraffe. This gave my profile a fun look and because it pushed down the information in my left sidebar, a lot of negative space around my wall updates.
View a screenshot of the complete profile using the ‘giraffe hack.’
A lot more can be done with the look of the thin grey line, such as creating a jagged or curved edge that interacts with an overlayed image. I got a little weird and created some stalactites over a green unicorn with the Earth floating above and below the header line. View a screenshot of the complete profile using the ‘green unicorn hack.’
Image isolation in Photoshop is like using scissors to cut very closely around a photo torn from a magazine. Photoshop has a magnetic lasso, a magic wand and a quick selection tool to help you. There are a lot of guides on how to perform selections, here are a few that will help you:
- A PDF on object selection and isolation
- A video on object selection and isolation
- A web tutorial with images on the Quick Selection tool.
I’m including the some example images to help you get started in a zip file at the end of this entry.
Hack Caveats
The hack falls apart a few different ways. The easiest is to post a status update that is long enough to wrap around to two lines of text. You can avoid this by posting your long status update, and then clearing it afterwards. View a screenshot of this problem. This leaves your current status as blank, but the update will still appear on your news reel and the illusion of the hack will be maintained.
Another point of note in using this hack is the display of your profile photo in wall listings. The profile photo is shrunk down quite a bit. A plus of this is that if you choose a long, 200×600 photo, it can look rather cool and set you apart from other Facebook people when you’re shown in a list.
Conclusion and Downloads
For many, your Facebook presence is an important part of your online presentation of self. You can differentiate yourself on Facebook by tweaking the look of your profile by using a specialized profile photo.
I’m making available a zip file that includes a number of original, layered .psd files that will help you get a quick start on hacking your Facebook profile photo. I’d love to see some examples of other ideas people come up with. Feel free to post or send me a screenshot of what you came up with and I’ll add it to this blog post.
- Digg this article if this was helpful / interesting to you or post it on your Facebook.
- Download the ‘Hack’ your Facebook Profile Photo Kit (includes the blank background template and some example overlayed images.)
LOL, nice ideas.. especially hanging from your wall.
Thanks. I’d like to see what other people do with this. It is attracting some interesting search keywords.
Rob, you are a clever guy.
I’m digging the full length rss feed.
I can’t wait to try this!! Thanks for writing this up with so much detail!!
Great article, when will the zip file be uploaded?
Err is that you at allfacebook.com?
Link : http://www.allfacebook.com/2009/02/facebook-profile-photo-hacks/
If not, then you’ve been ripped off!
:/
Hah! Excellent idea! Here’s mine: http://profile.ak.facebook.com/v229/542/64/n1069395418_7551.jpg
Rob, this is great!
I updated my FB profile to give a plug for my drumming business:
http://photos-h.ak.fbcdn.net/photos-ak-snc1/v2411/105/51/1318719748/n1318719748_30307063_9295.jpg
thanks for the cool idea.
here’s mine:
http://www.facebook.com/profile.php?id=530038658&ref=profile
That’s Awesome , Very creative
I tried this hack and it didnt work out perfectly , but I’d like to send you the aftermath
Hello,
Could you update your Giraffe PSD layer to reflect the new Facebook home page, then reupload your ZIP? The new Facebook home page appears to mess up the effect by moving where the white/gray meet.
Thank.s
Awesome idea. It takes some work to play with layers and sizes.. but the end product is worth it …that is if you have 15 minutes that you have nothign to do =)
here is mine:
http://img8.imageshack.us/img8/748/blockssharptiltlarge.jpg
Awesome! 🙂
I win: http://i54.photobucket.com/albums/g103/pusheject/ProfileImage.jpg
Push Eject. I love your picture.
Very creative tips. Gonna send this to a few friends.
nice post…. thanks..
Thanks for the tips for the profile page.
What are the ideal dimensions for the thumbnail that shows up on the wall. I cropped mine to 200×200 and the thumbnail for a wall clip is cropped tighter than I’d like.
Should I post a profile picture of 200×200 but plan on having a centered focal area that is a fixed size (say 150×150) that would then be centered in the thumbnail?
Ha! I got the idea to “hack” my profile in this way after seeing a newly signed up friend’s default profile picure. I googled “facebook profile dimensions” or something along those lines so I could start, but found something even better: this! I was originally just going to do something with me peering over the white part or sitting on it, but I eventually decided on this:
http://img20.imageshack.us/img20/892/screenshot76tdr.png
The giraffe idea is so great but I am not able to make the basic profile picture in Photoshop… the one that can be used as a blank profile pic. How do I create a grey box 54 pixels below the top? I am a novice Photoshop user and cannot figure this out for the life of me.
Please help! Thanks 🙂
Hi Rob,
Great post, thanks! I wonder whether you or another reader can help with a related issue: I’d like to know how facebook determines which part of your profile image — if it’s larger than 200×200 pixels — to use to make the 50×50 pixels version which appears with all your updates (e.g. when your friends see what you’re doing in their feed).
It’s not just the top 200×200 pixels resized to 50×50. There’s some extra maths, but I haven’t figured it out yet. Anybody?
Hey please find a way to put animated pics on profile photo like gifs or .ani or .swf files. I tried gif but it shows only the first frame and does not animate……
Hey David,
This is totally on the side of Facebook. You can imagine, they do not want animated gifs showing up on folks’ pages as that would ruin the ascetic and drag us back towards Myspace. There is no magic bullet to hacking a profile page look and feel, only creating things that work with it, as this guide suggests. Regardless, I wish you the best in standing out on Facebook.
Eoin, you can choose that thumbnail yourself by hovering over your profile picture on your profile until an options bar appears and selecting ‘Change Picture’ and ‘Edit Thumbnail’
Hi, I’m trying to solve a problem with by Business Page. I created a 200×600 profile image. The problem is that when another site tags my business page, the entire 200×600 image shows up in their page like a sore thumb. I do have a thumbnail of the portion I would like to show created. That thumbnail shows up on all my page updates, but not when I’m tagged. Also, there’s no option to select no image when you tag someone. Does anyone have a solution?
Thanks,
Pamela
Hmm, am I just missing it? I downloaded both the zip file from here and the one on allfacebook.com. Neither one, that I see, has the blank background template.
I don’t have PS; I was planning on using a different photo editing software. If you have it on hand, would you be able to email me the blank one…even as a JPEG? I was excited to play around with this! 🙂
Thanks for the great article.
Howdy, JU.
Thanks for the comment. I have to recommend Photoshop to do this type of work. The psd files both allow you to hide extra layers and see only the default template. I have not re-visited this set of graphic assets in some time, however, so it may be that Facebook has updated their profile with a few pixels of changes. I can’t promise an update soon, but if I do it for myself, I will change this post with the updates. Good luck to you.
Rob
Rob,
Facebook has changed their profile pages recently, which allow for greater flexibility and creativity in new ways. I offer a variety of Photoshop templates on my blog to help people “hack” the new profile. There are also links to other services that can automate things for our non-Photoshop using friends.
http://fatwalr.us/2010/12/facebook-profile-picture-hack/
I hope people find this helpful!
My brother suggested I may like this blog. He used to be totally right.
This submit actually made my day. You can not consider just
how so much time I had spent for this information!
Thank you!