Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Tutorials Web Layout How to Create Facebook Fanpage Profile Picture in Photoshop

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

img

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

img

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).

img

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

img

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

img

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.

img

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

img

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

img

You should have something like this, pretty simple eh?

img

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.

img

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

img

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.

img

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

img

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).

img

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.



Author's URL: sanjaykhemlani.com
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: