Create an awesome Facebook timeline cover

16 March 2012

This tutorial teaches you how to create an awesome Facebook timeline cover. Or header. Or banner. Or whatever you want to call it.

As of 30 march 2012 facebook automatically converts all pages to the new Timeline layout. Lot's of people complain about it and some think it's cool, but I think it gives us an opportunity to be creative. The new timeline has your user profile image partly overlaying the cover image. With this you can do awesome stuff like this:

Since the profile image is used everywhere without the cover image, you should make sure that image makes sense on its own, but apart from that you're only limited by your imagination!

Before starting

At the end of creating this tutorial I found out there is a little difference between normal "people-pages" and "page-pages"... I used the Wangan Warriors facebook page to take a screenshot of and uploaded the files in my personal facebook page. This didn't turn out well, because the profile image is placed slightly higher on personal pages...

Why, Facebook, why?!

Anyway: before you start to create this template you need to make sure you are creating it for a personal page or a fanpage because of this difference! Again, the screenshot used in the tutorial is for a fanpage!

Creating a template

Lets create a template first. Open photoshop, take a screenshot of a new timeline page and paste it in a new file.

1. Got to click like and take a screenshot (The "print screen" button on your windows PC). Go to photoshop and press "CTRL+N" and a new dialog will popup:

2. The dimensions will match the screenshot you took, so you'll only need to click on "OK". Then a new, blank canvas will be created. Press "CTRL+V" to paste the screenshot in the new file.

3. Now press "M" to select the selection tool (first icon in the toolbar) and select a smaller portion of the screenshot. This is to make your workingspace a little smaller.

4. Go to "image" in the main menu and click "crop". I attached a shortkey to this function, but normally you need to select it via the main menu.

5. Now comes the hard part... selecting and creating a mask. First select the complete cover image in the screenshot. Make sure the selection is exactly as big as the image (851 x 314).

6. Then zoom in on the profile image and carefully select the outer shape of the profile image while pressing the ALT key. This subtracts the selection from the previous selection. Make sure to also select the light-grey border around the avatar placeholder!

7. Then select the profile image itself whilest pressing the SHIFT key. This adds the selection to the previous selection.

8. This was the hardest part! Now create a new layour-group in the layerpanel:

9. This creates a new group. Select the group and press the layer-mask-button:

10. This adds the current selection to the layergroup as a mask:

11. Whatever you place in this group will be masked so it will only show in the cover and the profile image! Have a try and place a photo in the group to see for yourself. I found a nice free image of some colorfull crayolas and put it in the masked group. The resulting image lookes like this:

12. Nice! Now we just add my face, some text and then we can go and put the image in Facebook. Make sure to put the images, logo's and other decorations in the masked group we created before. You can shift them in this group, but they will never "pop out" the cover and profile image.

13. Now select the complete cover image, like we did before, and crop the image again. Then press CTRL+ALT+SHIFT+S to open the "safe for web" dialog. And safe your image on your desktop (or somehwere you can find it when we upload it later on).

14. Then pres CTRL+Z a few times until you went back in your undo-history long enough to be beack at the point somewhere before you cropped the image. Select the avatar image and crop again.

15. Now you have a 125 x 125 pixel sized image, but the minimum size for a facebook profile image is 180 x 180 pixels. We need to upscale the image a bit before we save it. Press CTRL+ALT+I and enter 180 pixels in the dialog that pops up.

16. Click "ok" and press CTRL+ALT+SHIFT+S again to save this image to your harddrive.

Lets put it in Facebook!

17. Go to your facebook timeline page and hover over the cover image. In the right bottom corner a button should appear. Click it and select "upload image". Since i'm dutch all the buttons and texts are in Dutch, but I guess they'll be on a similar place in other languages. This shouldn't be too hard to figure out.

18. After finding and double-clicking your cover image the image should align perfectly on the page and you should only have to click the "save changes" button in the right bottom corner:

19. Then go to the profile image and button should also popup to change this image. Select "upload image" and seek the profile image on your harddisk.

20. Check out your result!

You can download the template PSD here.
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

1 comment

  1. Gravatar


    06 April 2013

    Nice tutorial its use for my fb cover page....
    Thank u ...