Get Our Free Ebook
Beginners Guide to HTML

  Tutorials Photoshop Web Layout Facebook Template

Facebook Template

Everyone knows a social network called FaceBook. Itâ??s the place where lots of people are constantly spending lots of time. It didnâ??t take a long time for brands and local businesses to join FaceBook too. So when the amount of non-human accounts started to grow, FaceBook guys have decided to add an ability to create separate pages for businesses and brands.

Today FaceBook pages can be equipped and customized with a lot of different widgets and applications. However the most important of all is the FBML box â?? it lets you create awesome landing pages, using HTML, CSS, FBML, FBJS, iframes and even Flash.

In this tutorial I will show you how to design a Facebook template for photographer. Follow my instructions carefully and you will get a nice layout like this:

image 1

Step 1. Open a new document 520x800. The maximum width of Facebook fanpage and it's template is 520px.

Step 2. Now choose a background that will suit your Facebook landing page.

Step 3. Time to create a place for the Logo. Round Rectangle Tool with 15px corner radius will work for creating a rectangle place with the logo element in it. Add some Shadow to it and make it a bit transparent (70% opacity).

image 2

Step 4. Logo. To make your company name look attractive you should find some good looking font for it. My choice was Futura Bold and Visitor BRK.

image 3

5. Adding some effects to the texts. Gradient: Soft Light 46% opacity. Outer Glow: Blend mode - Screen, Opacity - 34%

6. Thereâ??s some free space to the right from the logo â?? a perfect place to insert some photographers attribute. The most obvious one is undoubtedly a camera

7. The title of our page is â??Welcome to my FaceBook pageâ?? which is also made of two above fonts of different colors.

8. Fill the page with some text content and add a bit styling to it by making some phrases bold and some underlined. Iâ??ve used Tahoma font in this part. Here is how everything looks right now:

image 4

9. As far as weâ??re creating a photographer layout, we need to add a tiny photo gallery to a page. Insert some photos and resize them to 210 * 115 pixels. Order them in a line with a 10px distance between them. The third picture will not fit to a page, so weâ??ll have to cut it. So futher it will be our gallery.

10. Add a Stroke effect on the layer with pictures â?? this will create a nice border:

image 5

11. We obviously need a scrollbar under the pictures, so take a RectangleTool and draw it. Then add DropShadow, GradientOverlay 73% and Stroke 1px effects.

12. Pick a Pencil and draw 3 white and 3 black lines in the center of the scroller.

13. To finish the scroll box we need a scroll holder. Pick a Rectangle tool and make a black rectangle of the same height as the scroll. The width should be adjusted in accordance to the photo thumbs. Set the Opacity of the layer to 10%. The scroll box is all set:

image 6

14. Using a Text Tool add 2 more boxes in the footer â?? â??Latest Newsâ?? and â??Contactsâ??. At the very bottom add the copyrights:

15. You can also add the icons of your social profiles to the header. And donâ??t forget to ask people to become a â??Fanâ?? of your page. Add a â??Likeâ?? button with a supporting text to engage them to join:

Finally our FaceBook template  is ready:

Facebook template

You can download source file for Photoshop here!

subscribe to newsletter