Photo Into Painting transforming your photos into art.

How to Make a Creative Facebook Profile Photo

How to Make a Creative Facebook Profile Photo

Today I want to share with you a technique for making a creative Facebook Profile Photo in Adobe Photoshop. Facebook uses a consistent color scheme and layout throughout the site which is great for usability and overall appearance, but it limits your ability to visually express yourself within your profile page. Yes you can add cool little sidebar gadgets and thingamajigs to your tabs, but your profile image is all about you.

Where to begin?

Well the first thing you need to know are the maximum dimensions allowed for your Facebook profile photo. Facebook displays your profile images at a maximum 200 x 600px. If you upload an image larger then these dimensions then Facebook will automatically resize and crop your image to fit their layout.

The trick I am going to show you today is nothing new or groundbreaking, but its a fun way to break out of the creative box Facebook has placed all of us in. Ill show you how to create the background in three easy steps.

Step 1

Creat a new document in Photoshop with a width of 200px and height of 600px. Fill the background layer with white.Step1

Step 2

Next we need to create the top of our image which sits 52px above the thin 1px gray border. We will use this area to give the illusion that we are breaking out of the box.Step 2

Select the Rectangular Marque Tool (M) and create a selection 200 x 52px and fill this selection with #edeff4.

Step 3

Now select the Single Row Marque Tool and create the 1px border below the previous step. Fill this selection with #dee3ed. Name this layer background.Step 3

All that is left to do now is find a nice picture of whatever you like and overlay the image on top of our background layer.

Here is a screen shot from one of my profile images. I simply used a variety of grungy brushes on a layer mask to remove some of the image background. You can see that my head extends past the border and allows me to break from the page.


Facebook Screen Shot After

The trickiest part is isolating your image but never fear below is a video tutorial on how to use the Extract filter in Photoshop. Also I suggest you watch a video from a preivious post: How To Replace Your Digital Backdrops for your Digital Portrait Photography.

There are a ton of different ways to remove your subject from a background, but experiment with different techniques and have fun with the process. Not all techniques work on all images. Ultimately your image will dictate what method you should use or combination of methods.

Here is the PSD file for you to play with! Facebook Profile Picture Background PSD file

Remember have fun and feel free to share you background removal tips and screen shots of your Facebook profile photos below.

Have a look at our pricing to create a Stylized Vector Profile Portrait from your photo.

6 Responses to “How to Make a Creative Facebook Profile Photo”

  1. Soumya says:

    Thanks for the Tutorial… It did help me while i was working on the Image. I am new to this but did it well. Het just wanted to tell i used the Polygonal lasso tool to select the picture & gave a feather effect to just 1 to 2(depending on the requirement) and it did work too.
    What is Layer mask tool? Can you Pls show how & where to use?
    Thanks

    • Jason Marti says:

      Hi and thanks for your feedback! Layer masks are a very powerful and flexible tool when designing and editing images because they are a non-destructive editing technique. Layer masks preserve pixel data and easily allow you to fine tune your image and bring back information. Unlike the eraser tool for example once it’s gone it’s gone. Below I have provided a link to a quick tutorial I did on how to use the quick mask mode to quickly select a subjects eyes and preserve the color information when converting it to black and white. Also below is another link to and article by Smashing Magazine that explains the different methods and uses of layer masks.

      Retouching a Portrait Using Selective Color
      Unveiling Photoshop Masks

  2. rohan advani says:

    hey wonderful post :) .. loved it !!! change my profile picture and my friends like it , thank you :)

  3. Jakolien says:

    Great post, I tried to make my own with the help of your .psd, worked great UNTIL I uploaded to FB. Then the grey went above where it should be?!

    site: http://www.facebook.com/pages/Hoofddorp-Netherlands/Sokrates-Academy-Training-Recruitment-20-Labourmarket-communication-NL/197460568371

    Could you plse have a look and let me know what is wrong?

    Thanks from Amsterdam!
    Jakolien

    • Jason Marti says:

      Hi Jakolien. It looks like you need to keep the gray border I mentioned above in step 2. This is what gives the illusion of the image breaking from the box. Basically your Logo would be floating above the thin gray border.

      I hope this helps! I like that you used your profile image to give additional information to your fans and prospects.

  4. Damien Ryken says:

    Just wanted to give you a shout from the valley of the sun, great information. Much appreciated.


Leave a Reply

Home | About | Contact | Archive | Privacy Notice | Conditions of Use

Copyright © 2017 Photo Into Painting. Theme Modified by Jason Marti. Designed by Woo Themes

Get Adobe Flash player