« Free Flash CMS open source core.
How to Create Facebook FBML Page, Part 2 »
Jun
23

How to Create Facebook FBML Template

Categories: Graphics, Photoshop Tuts
Tags: , ,

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 we will show you how to design a photographers FaceBook FBML page. Follow carefully what we say and you will get a nice layout like this:

facebook_templates

1. Let’s start with creating a new document 520 * 800 pixels. That’s because FaceBook has recently announced that the page width will be shortened from 760 to 520 pixels.

2. To create a fancy bubbles background we have used this great tutorial.

3. Now take the Rounded RectangleTool (U) and create a rectangle, which will contain our logo. The radius that I’ve used is 15px.

To enhance the rectangle let’s set a Opacity to 70%

and add a tiny shadow to it:

4. Fill in the rectangle with the name of your company using the Type Tool (T). To make it look more like a logo we can play with the fonts a bit. “John” is written with a thin font FuturaBTLight of #f5634a color, while “Marley” is black (#000000) FuturaBTBold. I have also added a tiny slogan at the bottom. It’s a Visitor TT1 BRK font with 10px height.

5. Adding some effects to the texts as shown on screenshots:

Gradient:

Outer Glow:

6. There’s some free space to the right from our 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:

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 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 with Marquee Tool (M).

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

Adding effect:

Stroke settings:

11. We obviously need a scrollbar under the pictures, so take a RectangleTool (U) and draw it. Then add DropShadow, GradientOverlay and Stroke effects as per screenshots:

Stroke:

Drop Shadow:

Gradient Overlay:

12. Pick a Pencil Tool (B) 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 page is ready:

In the next chapter we’ll guide you on how to convert it into HTML and insert into FBML application. Stay tuned!

http://www.webdesign-tutorials.com/blog/wp-content/plugins/sociofluid/images/digg_16.png http://www.webdesign-tutorials.com/blog/wp-content/plugins/sociofluid/images/stumbleupon_16.png http://www.webdesign-tutorials.com/blog/wp-content/plugins/sociofluid/images/delicious_16.png http://www.webdesign-tutorials.com/blog/wp-content/plugins/sociofluid/images/furl_16.png http://www.webdesign-tutorials.com/blog/wp-content/plugins/sociofluid/images/technorati_16.png http://www.webdesign-tutorials.com/blog/wp-content/plugins/sociofluid/images/facebook_16.png

About the author: admin

View all posts by admin

36 Responses to “How to Create Facebook FBML Template”

Leave a Reply

Security Code: