web analytics

Timeline tutorial

Playing with your profile pic is fun and rewarding and it’s something I’m not going to renounce to. Changes to profile layouts allow you to do just that. (BTW, you can still adapt my old profile pic tutorial for your Google Plus profiles.) Now that the timeline feature is up, here’s my profile pic and how I did it.

FB profile screen

Here’s also my previous pic.
Previous profile pic


What you need
– Photoshop (my copy is CS5, you can download a fully functional 1 month trial from the Adobe website).
– Your Facebook Timeline activated (if you don’t know how to do this, follow this tutorial).
– A pic of at least 1227×508 resolution, with what is going to be your profile pic in the lower left angle of the pic.

1. I’ll use the template I found on Ausgetrock.net (whom I’d like to thank), but own amended version of it (I made it slightly bigger, so that the profile pic won’t look like a lo-res picture). Mine is uploaded here (right-click and choose Save As to save it on your hard drive).
2. Open the PSD file and select the timeline hack template layer.


3. Select File > Place and select your pic in the dialog that opens.


4. Your pic is placed in the center of the image.


Drag it or enlarge/reduce it as needed until it looks like you want it to. You can use the arrows on your keyboard (if you press Shift + arrow the layer content will move faster). To enlarge or reduce your pic without screwing up its proportions, press Shift + select one of the four angles with your left mouse button and drag the image. Once it looks right, press Enter on your keyboard. If you wish to change it further, press CTRL (CMD) + t on your keyboard: handles will reappear. Once again, when you’re ready press Enter.


5. Click on the eye of the Overlay layer – all the Facebook-simulated images will disappear


6. Select your pic’s layer again (mine is called winter_coming and is visible just below the personalisation layer.

7. In the toolbar on the left of your pic, select the Rectangular Markee Tool (or press M on your keyboard).


8. Now use the light blue guides on the pic to select the part of the picture that will be used as profile pic. Photoshop will help you with that, snapping your selection to the guides. (If you’ve deactivated the default option, reactivate it from View > Snap To > Guides).


9. Copy the image ( CTRL/CMD+C or Edit > Copy)

10. Select File > New and you’ll see a dialog like this.


Don’t change anything, press OK and paste the image you’ve copied (CTRL/CMD+V or Edit > Paste).


11. Now go to File > Save for web and devices.


12. The following dialog opens: edit your settings to get a JPEG of good quality, click on Save and name it “profilepic”.


13. Now go back to the original fb_timeline_template_big.psd file and select the part of the pic you wish to set as cover photo with the Rectangular Marquee Tool.


14. Copy it, click again on File > New and press OK. Paste the image in the new file.


15. Now go to File > Save for web and devices but WAIT. We’ll need to change a few values here.

16. Set all values as indicated in the screenshot, i.e. 851 horizontal x 314 vertical. Click on Save and save the pic as “coverpic”.


17. Now go to Facebook, hover over your profile pic, select “Upload photo” and upload “profilepic.jpg”. Do the same thing for your cover photo. Save settings and you’re done 😀

2 comments on “Timeline tutorial

  1. It helped

  2. I loved your blog post. Will read on…

Leave a Reply