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
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
Open your Photoshop and set your canvas to 180px by 540px, make sure it is on white background.
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).
Now we will create the Title which in this case my name 🙂 Use the font that you downloaded from the top.
Select Text (T) and Type in Sanjay using the font MinstrelPosterWHG. Fill it with #0db7ee and for your Background color use this #1985a8.
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.
For the Outer Glow use this color #727272 and follow the settings above.
Select Drop Shadow and use this color # 8e8e8e, and follow the settings above.
You should have something like this, pretty simple eh?
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.
This is the result; I also moved the white layer up to create an effect that the light was coming from the very top.
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.
Grab the arrow from the folder that you downloaded, and just duplicate it in the layer by pressing CTRL + J.
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).
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.
