How to create a Facebook profile banner in Photoshop

The current Facebook layout features five recent tagged photos on top of your wall. You can play with this photos in conjunction with your profile photo to create a cool-looking profile page. Take for example this FB profile.

Here’s a simple guide on how to do this trick using Photoshop. I did this in less than 5 minutes (the profile banner not the guide I mean).

First let’s take a look at some limitations.

  • For the profile pic, the width must be 180 and height should be no more than 532. (180 x 532 pixels)
  • The tagged photos must exactly be 97 x 68 pixels
  • This won’t work on Pages because Facebook treats tagged photos on Pages differently. Use it for your personal profile instead.

Now that’s out of the way, fire up Photoshop and let’s do this.

1. Print screen (PrtSc) your Facebook page so you would have a guide in Photoshop.

2. Next, place the image you would want to use for your profile banner on top of the Facebook page image. Lower the opacity of your image so you can position it properly.

3. Select the Slice tool. It’s located in the Crop tool.

4. What you want to do here is create the image slices for your profile banner. Use the slice tool to select the upper left corner of each slice up to the lower corner. Do this for the profile pic and the 5 photos. Zoom in for a more accurate slice. You can drag the edges to adjust the slice size.

5. When all slices are done it’s time to save but first, don’t forget to set the opacity back to 100%. Next go to File > Save for Web & Devices.

6. Click Save and select All User Slices. Then click Save again.

7. You should see 6 images in the folder where you saved it to.

8. Now you’re set. Upload the images in your Facebook and tag them with your name/page from last to first. Then the set the very first to be your profile pic.

This won’t work for pages because Facebook displays images from your album in random sequence every time you visit or reload your page. I know it sucks right? I did all this slicing for nothing. Do this for your personal profile instead.

Now here’s the thing. If somebody tags you, it will mess up your banner. What you can do is click the “x” in the upper right portion of the image and hide the new tagged photos, or just un-tag yourself on those photos.

 

You may also like...

12 Responses

  1. Xyzsor says:

    I think there’s an easier way to do this,, My girlfriend made me one before.. She just used a facebook app like this one http://apps.facebook.com/profile-banner/

    All she did was upload a pic, and it was all done automatically i think.. I’m not quite sure coz i wasn’t the one who did it..

  2. I tried doing this for GeekGirlManila’s Facebook page. I just gave up since you’re right, FB randomly jumbles up the photos.

    Pfft :)

    Great tutorial! :)

  3. Jam. says:

    Too bad, Facebook pages jumbles up the picture. BTW, made one a few months ago.

  4. Calvin says:

    Yeah… i don’t know why Facebook has a separate algo for page and profiles when it comes to tagged photos.

  5. Nino says:

    So nobody can mess it up, change your profile settings to disallow others from tagging you in their photos…

  6. xyzsor says:

    I’m not trying to spam here, but a trick is to upload five photos that look good in any order like the one on mine.. http://www.facebook.com/MiniMaxima

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>