How to Create Facebook Fanpage Profile Picture in Photoshop

On 26 Oct, 2011 By With 12 Comments

Yesterday I finally finished my Facebook Fan page design; it took me a while to think about the design though. Today I will show you how to create Facebook Fanpage profile picture in Photoshop. I will show you step-by-step and how we can achieve the effect and deliver the message that we want to the user.

Here is the final image

fanpage pic How to Create Facebook Fanpage Profile Picture in Photoshop

Most of the things I noticed when looking at fan page profile pictures is they try to put so much space inside, remember that the size limit is 180px by 540px. And there’s some many things you can do with that much space, I tried creating an ad on 125px and still it’s pretty small for me.

Here are things we need to set up first

1. Goals for the fan page

  • What do you want to accomplish on your fan page?
  • To boost your traffic?
  • New fans?

2. Impression to the user

  • What do you want the user / fan to remember after visiting your fanpage?

3. User interaction

  • What do you want the user to do while visiting your fan page?

Before we start

Download this folder that contains everything that we need. For the pattern,  copy the pattern and Open C: > Program Files > Adobe > Open Photoshop and find the Presets > Patterns, paste it inside. Now you can use the pattern.

The font that we will use on the Title, is MINSPSW_-webfont and paste it in your font’s folder.

After that, we can head to our good pal Photoshop. Make sure you answered all the questions above, ok?

Hit the Canvas

1 fanpage canvas How to Create Facebook Fanpage Profile Picture in Photoshop

Open your Photoshop and set your canvas to 180px by 540px, make sure it is on white background.

3 Pattern How to Create Facebook Fanpage Profile Picture in Photoshop

Create a new layer, fill it white color using Paint Bucket Tool (G) and right click the layer > select Blending Options > Pattern Overlay and select the Crossed Stripes. You’ll have something like the one below (not the actual size).

2 canvas patterned1 How to Create Facebook Fanpage Profile Picture in Photoshop

Now we will create the Title which in this case my name 🙂 Use the font that you downloaded from the top.

4 Sanjay name How to Create Facebook Fanpage Profile Picture in Photoshop

Select Text (T) and Type in Sanjay using the font MinstrelPosterWHG. Fill it with #0db7ee and for your Background color use this #1985a8.

5 Gradient for text How to Create Facebook Fanpage Profile Picture in Photoshop

We will use a gradient to add effect, in the text layer right click and select Gradient > Set the color and Angle to 90.

Set the Stroke size to 1 and use this color #044155.

6 Outer glow for text How to Create Facebook Fanpage Profile Picture in Photoshop

For the Outer Glow use this color #727272 and follow the settings above.

7 Drop shadow for text How to Create Facebook Fanpage Profile Picture in Photoshop

Select Drop Shadow and use this color # 8e8e8e, and follow the settings above.

8 sanjay with stlye How to Create Facebook Fanpage Profile Picture in Photoshop

You should have something like this, pretty simple eh?

9 light effect How to Create Facebook Fanpage Profile Picture in Photoshop

To add a light effect, create a new layer (CTRL + SHIFT + N) select Elliptical Tool (M) and a circular shape above the text. Fill it with white color and in the above menu select Filter > Blur > Gaussian Blur and set it to 13.

10 light effect move up How to Create Facebook Fanpage Profile Picture in Photoshop

This is the result; I also moved the white layer up to create an effect that the light was coming from the very top.

11 additional text How to Create Facebook Fanpage Profile Picture in Photoshop

I also added a couple of text below, this is the message that we want to give to our fans. For this just use Arial regular and 14pt.

12 arrow blue How to Create Facebook Fanpage Profile Picture in Photoshop

Grab the arrow from the folder that you downloaded, and just duplicate it in the layer by pressing CTRL + J.

13 icons with text How to Create Facebook Fanpage Profile Picture in Photoshop

Add the text above, now grab those icons on downloaded folder above and the HTML icon that we created few months ago (Who said we won’t use it? Lol).

14 add url text How to Create Facebook Fanpage Profile Picture in Photoshop

At the very bottom, add some text again and don’t forget to put your url at the very end. I think this will help you to gain some direct traffic (maybe not much, but still.)

And we are done! I think we did a pretty good job on sending the message just by looking at the Facebook fanpage profile picture, and we only use a couple of simple designs techniques. If you have a facebook fanpage that you think is not sending enough message, you can use the questions that we asked above, then start from the drawing board. It’s better to re-make everything than to stick with something that doesn’t work.

Feel free to give out your suggestions by using the comments below, let’s see what you guys did with your Facebook fanpage profile picture.

12 Responses to “How to Create Facebook Fanpage Profile Picture in Photoshop”