Facebook Timeline Hack Template (update)

1. October 2011 - 15:01 -- Nico

Adaptation of Facebook Timeline cover and avatar with a template

For Facebook, there are already some so-called hacks: Album hack, profile hack and now there is the Timeline hack...
With these "hacks" you change look of your Facebook profiles/pages/etc by individual images that are seen in the whole as a single image.

Facebook Timeline Information Site

Therefore I created a Photoshop template, which allows you a quick and simple preparation.

Photoshop Facebook Timeline Template v1.1

The dimensions of the Timeline header image is 851 x 314 pixels (wxh) and the avatar image 180x180 pixels, but is reduced from Facebook automatically to 125x125 pixels.

 

Timeline Hack Step by Step

  • After the download unzip the file and open fb_timeline_template.psd
  • In the layers folder "personalization" do your personalisation
  • Then hide the layer "overlay" and create two separate pictures (use the guides or the layers "avatar" and "header" for the sizes of the pictures) - you dont need this step if you use the supplied action set!
  • Upload them and choose it as avatar and title picture.
  • Done!

 

Update Facebook Timeline Template v1.1

Paul I. has send me a revised version. Thank you Paul!
Now its bigger to avoid facebook errors with the files and I added a Photoshop action (double-click on the Facebook_timeline_hack.atn Photoshop action to add)
In the action pallet you can run the action and it automatically creates the two needed pictures for you.

 

Video Tutorial: Howto hack your facebook timeline with personalized pictures

Due to strong request I have made a tutorial video for using the template

Links to interesting Timelines

You know another cool timeline? Leave comments and I complete the list!

Comments

thanks for the template. wish it could be more simple though

Guiroadhi (not verified)

hey, any chance you could elaborate on how to save the image that will be uploaded to facebook. i'm assuming that slices are used, but i can't recall how to do it! also, the image size seems to be too big, not to the official fb scale.. or maybe it's just the image i pasted in.

sam (not verified)

@Sam: hide the layer "overlay" and save only the size of the "HEADER" layer to a new file. this is your new timeline picture. for the avatar only copy the size of the "AVATAR" layer to a new file and upload it as your new user picture to facebook.

Nico

@Sam: would a youtube video be helpful?

Nico

What am i doing wrong? I put the photo so it covers everywhere.. but i can't figure out how to save just the pieces. I did go ahead and use the rectangular marquee tool to copy the header into a new jpg. I went to do the save with the avatar, and did that as well. However when I uploaded the avatar, facebook said it had to be 180 pixels. Yours has been the easiest so far to use, however i just feel like im missing a step. Any help would be much appreciated. If it matters, Im using photoshop 7.0 Thanks! (And yes, a youtube video would be a ton of help)

Dylan (not verified)

Now I see... Photoshop7 is a problem, because there are no Smart Objects... Workaround: when you have your Avatar image in a new File, klick on image/image size and give it at least 180x180px and save this image and now you are able to upload it. Better way is to have a bigger Square Image to start with and use it for the Avatar instead to scale a small one... I will check if I can make a simpler template... and if I have time a Video ;)

Nico

Awesome. Thanks. Could you please share how could you do it?

Bee (not verified)

Maybe increase the template size to the point where the avatar reaches 180x180px. That way the avatar is the correct size-- the header will still be the same ratio and Facebook will just downsize for you.

Anonymous (not verified)

v1.1 of the template is online and has now a photoshop action for simplest creation of the needed images! thx for your Support Paul I.!

Nico

or just you can upload it to your timeline and than add it as profile picture, no need to have bigger picture :)))

johny (not verified)

There's some problem with right to left languages ... the avatar photo place on the right of the screen ... this template could be better if it supports both right and left avatar photos

alireza (not verified)

Could anyone please post a video explaining all the process to get this done, (i'm not familiar with photoshop yet) PLEASE! ;)

Anonymous (not verified)

@Nico : A youtube video would really be helpful. Thanks a lot. Cheers!

Yash (not verified)

A lot of people have asked and now I have dona a small Tutorial Video for you!
its in the blog post and also on youtube

hope you like it.

Nico

I use the template, add the pic and arrange it fit the template. But there is no way I can save it into 2 separate pics. Please help. I use CS5

Trung Huynh (not verified)

use the Photoshop Action in the zip file... (in the Video everything is shown :))

Nico

ohh man this is awesome i created my own covers thanks for this.

Mitesh (not verified)

Works good except when you want to use a screenshot as one of the photos. I'd like the screenshot to be shown at 100% in the timeline, however this exports an image that is too big and scales down the screenshot.

Jordan (not verified)

Awesome, although I know little of photoshop I managed through. Thanks for an awesome template.

Add new comment