Nuffnang Ads

Saturday, August 20, 2011

Adobe Photoshop Template - Facebook Profile Picture + Banner

Hi, all.

Before this, I've made 2 tutorials about making cool Profile Picture and Profile Banner in MyOwnSpace blog.

Refer to this posts :
i. Facebook Profile Picture
ii. Facebook Banner Tutorial

However, I want to make it easy for you to be creative and less on the technical aspect. Unless you like the hands on approach, which means, carry on with the tutorials that I've made.

To simplify the process, I've made this Easy-To-Edit template for those who don't really know what I was talking about in the tutorials or you are just too lazy to do it. I can show you the door but only you could decide whether to walk in or push me into the room and lock me up. Alright, that is just drift too far from the topic we are discussing. So, let's get down to business.

1. Download
You just need to download the file from one of these links :
Filename : Facebook Template (1.13MB)

Download link :

* Inform me if any link is dead.

2. How to use it?
After you successfully download and open the file, you'll get the screen similar to this.
(If you are on Adobe Photoshop CS4 or later, kindly change the workspace to 'Design' so that we are on the right track like shown below.)

(Click on the image to enlarge.)

Figure 1 : Changing the workspace. (For Adobe Photoshop CS4 or later.)

Figure 2 : The screen you should get.

* To hide guide lines for clearer view, press "Ctrl + ;" and the same key can be use to show the guide lines again.


At first glance, I think you've seen the shape for the profile picture and profile banner.

You should also see the layer panels like below on the bottom right side. If you don't, go to "Window > Layers" or simply press "F7".

Figure 3 : Layer panel.

In the panel, you can see 4 layers. You don't want to mess around with the layers except for the "Example Photo". Now click the "Visibility Button" that looks like the "Eye Icon" next to the layer name "Test Cover Switch". You'll get something similar to this :

Figure 4 : Test Cover Switch feature

As you turn the icon on and off, there is a certain part that shows up a bit but not entirely visible. I added this feature so that we can distinguished between the part that we do not need and the part that will shows up as the profile banner and profile picture when adjusting the position and scale of your photo.

For the best part :

I know. You've been waiting for me to tell you how to replace the photo of your own. No? I'm going to tell you anyway.

What you need to do is drag in your photo into the document and press "ENTER".

Figure 5 : Dragging the photo.

Next, place the layer of you photo just above the layer "Example Photo" by drag and drop the layer in the layer panel.

Figure 6 : Dragging

Now, all you need to do is as same as what I've wrote in the previous posts. You need to scale and position it as you like using Move Tool (V). Then, you'll need to crop everything one by one and upload all of them on Facebook.

Refer to the following posts for more info on cropping and tagging yourselves :
i. Facebook Profile Picture
ii. Facebook Banner Tutorial

So, I guess that's it for now. Have fun spreading your creativity to the whole world and be sure to check this blog regularly and be a follower to this blog. There'll be more exciting tutorials or templates coming on.

Until next time, good bye and have a nice day. :)

*Don't forget to comment if you have any problem with the template or the steps in using the template.

No comments:

Post a Comment