Facebook Timeline: Creating one image from your Cover and Profile pic

Screen_shot_2011-09-23_at_11

You’ve probably seen images of the new Facebook Timeline which will be replacing your profile in a few weeks. You may have also tried it out yourself. But there was something niggling me about having a Cover image and a Profile pic. I like the idea, but I was wondering if I could combine the two into one composite image. As you can see, I managed it. 

So let’s look at how I did this, and some useful info I learned along the way. By the way, I’m assuming some knowledge of Photoshop here…

The first thing I had to do was to take a screen grab of the Timeline display – as it never resizes I knew what I was up against… I then pulled this screengrab into Photoshop. 

Finding a photo to use
To do this effect you’ll ideally have a photo of yourself where you are small and to the bottom left of an image, and a wide letterbox shaped one at that. What about that pic of you wistfully looking out across the sun setting on the sea? Or a family picture with you on the extreme left. This is because your profile picture part of the image will obviously continue to be your profile picture across Facebook, so it would be good if it was meaningful when viewed on its own too. I didn’t have such a photo really, and had to make use of something I had kicking around on Flickr. 

Composing your image
You might get away with not starting with a screengrab but I found it helped, take a grab of the whole Cover and profile pic area, with some space round the edges. Put your screengrab in Photoshop, and in another layer dump your photo. If you put it on top with blending mode of Multiply it will help you position the top image so it lays over as you want. You can see in my screengrab where I’ve got the closeup of me on top… 
Screen_shot_2011-09-23_at_11
Cutting out the Profile pic
I then zoomed in around the square profile pic part of the screengrab, and used the Rectangular Marquee Tool to select the  square shape from the screengrab. Then selecting  the photo layer, I copied this small square from the photo layer into a new layer. At this point if you start a new Photoshop file it should be to the dimensions of the square crop, hit paste and it will dump it in, as shown. 
Screen_shot_2011-09-23_at_11
The dimensions of this small square crop are 125 pixels by 125. You will then unfortunately need to enlarge this (losing some quality) to 180 pixels by 180 in order for Facebook to allow you to upload it.

Cutting out the Cover image
You now need to do the same with the wide letterbox Cover image. Select the shape from the screengrab layer, then copy and past that part of the image from the photo layer. This image you don’t need to resize, and it’s 851 pixels by 314 pixels, by my count (I’m guessing it might actually be 850 pixels by 315…?)

Into Facebook
Export both images as jpgs. Now in your new Timeline, add the wide Cover image, and do not reposition it, it’s fine as it is. Then add the Profile pic. And voila! 

You might liek to play around with the idea. Maybe use the profile pic part as if it’s a magnifying glass zooming into the larger image? I’m sure thre will be lots of people juxtapositioning various images for maximum effect… 
Advertisements
This entry was posted in Uncategorized and tagged . Bookmark the permalink.

13 Responses to Facebook Timeline: Creating one image from your Cover and Profile pic

  1. Edison says:

    This post is awesome! I will try them later. I am actually using a nice cover from http://pickacover.com right now. They have tons of amazing covers too.

  2. auto_magical says:

    Hey Jerome, Like your post! I created a photoshop template to help create my own Facebook Covers ??? might be of use – would be great if you could give it a mention!http://facebookcoverwallpapers.com/covers/news/facebook-cover-photo-photoshop-psd-templateThanks!

  3. Micah says:

    Great post, but I have a question. Doesent really apply to the photo but more to the Timeline itself. On your page pic it shows "Friends" section box as it does on all of the Timeline pages but below that on the right side of the page yours only shows: "Recent Activity" How were you able to have your page look like that without having "Friends" show up twice on your page? Everyone elses Timeline page I see has both and yours doesent. Anyway I can go about this? I’d really appreciate it thanks.

  4. James T says:

    Nice post, but if you want to save some time just use:http://www.trickedouttimeline.com/

  5. chloe says:

    like 4 a like bk

  6. victor stanescu says:

    Here’s a complete guide on Facebook Cover photos, examples, web sites and a psd template for a good start: http://www.vectorash.ro/facebook-timeline-cover-photo/

  7. Jass says:

    There is a http://fbprofilecovers.com which has lot of creative covers like this, so if you aren’t that good at Photoshop you may want to try that.

  8. Aleka Stone says:

    It is especially rewarding to see you continuing to practice what you preach in a simple and unequivocal way. Thanks for your willingness to spend your time in the lab testing what really works and then freely sharing the results with the rest of us.

  9. Chetan Trivedi says:

    Thanks its very helpful for me Idea can change life

  10. mevlut says:

    thanks , worked for me

  11. cover facebook photo says:
  12. Cover for Facebook says:

    You can find many tips & cool cover for facebook in http://FreeCoverForFacebook.com

  13. Aliencide says:

    There is actually a special app for croping avatar image from cover photohttp://www.softpedia.com/get/Internet/WEB-Design/Web-Design-related/Slicetige-Lite.shtml

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s