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:
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).
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.
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:
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:
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:
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:
You can download source file for Photoshop here!