BlogmyQuery – BMQ

HTML5 is gathering more and more momentum, and is looking very likely to be, in the near future, the language of choice for developers, replacing Flash. As such, in todays news round-up we focus on some fresh HTML5 resources, articles and tutorials for you to enjoy. Here they are:

The HTML5 Roadmap, Past and Present

The most publicized reason for the push to build web apps in HTML5 is that Flash is not allowed on the iPhone and the iPad, but the reasons go deeper and more technical than that. This article gives an insightful overview of how HTML5 has rapidly progressed in the last few years.
The HTML5 Roadmap, Past and Present

Build a HTML5/CSS3 Website Layout Without Images

In this tutorial you will learn how to build a decent-looking HTML5 & CSS3 website that doesn't to rely on any images for the layout elements.
Build a HTML5/CSS3 Website Layout Without Images

How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery

In this tutorial, you’ll take a look and see what you can achieve with HTML5 and CSS3 when it comes to the staple of current web sites: the humble drop-down navigation menu. You’ll also use jQuery to handle the effects and add the finishing touches.
How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery

The State of HTML5 Apps

The State of HTML5 Apps

HTML5 Canvas Cheat Sheet

HTML5 Canvas Cheat Sheet

By Paul Andrew (Speckyboyand speckyboy@twitter).

Decided to simplify things and just start another Tumblr to handle the portfolio here. This enabled me to reuse the new theme with some slight tweaks, and begin my “different shade background for each section� thing. It’s far from comprehensive yet, as I still need to bring over some more of the old stuff.

It’s been interesting going through work that’s several years old. Much of it doesn’t exist anymore. Gone. Vanished. All that hard work, thinking, stressing… poof. It’s a nice reminder of what’s important, and the reality of the ever-evolving web. A lot of this junk is just temporary. 

By Tim Mercer

Pixel art was brought to the mainstream with the release of gaming consoles in the early eighties. Those 8-bit graphics we all loved back then often evoke feelings of nostalgia and take us back in time. Nostalgia aside, pixel art is a beautiful art form on its own that many of us have come to love. With so few pixels to work with, pixel artist’s have to make each one count.

Today we present 40 Examples Of Eye Popping Pixel Art from some of the best pixel artists around. Be sure to check out their sites for more of their amazing work.

Beautiful Pixel Art

R Grillotti
Grillotti uses every pixel perfectly in this rendition of The Birth Of Venus.

Another pixel masterpiece from Grillotti’s model series.

I love these large pixel paintings. Each pixel must be place just right to get the desired results.

Snake
This piece is full of detail and has great shadowing.

Great lighting and vivid colors make this one a standout.

Autumn Pixels
This stunning beauty shows the artist’s mastery of the pixel art form. It has very smooth form and shading.

It’s almost hard to believe this is pixel art with its soft textures.

Lief
This image was created using only eight colors.

Ryan-GFX
This little scene looks like something straight out of the old 16-bit video game days.

This isometric design of Mr. Burns’ casino is complete with a parked limo.

Sven Ruthner
This one reminds me of an Andy Warhol painting with its bright colors and faces.

This piece has awesome character design and charm.

Jamon
The misty atmosphere and low angle of view make this one great.

Endigo
This one has an unusual color pallet and lots of attitude.

Paul Robertson
This one has lots of Sega characters and a cool background.

Another piece from Paul full of action.

Army of Trolls
This one’s got everything from Papa Smurf to Mario. Can you spot Link from Zelda?

Rod Hunt
Great concept and use of color.

Another solid concept for Rod. Robots controlling a larger robot from inside.

Derek Yu
This one gives a whole new meaning to gorilla warfare.

A great design of a mechanical monkey.

Flip Flop Flying
The large pixels give this piece an impressionistic feel.

Seven Heavens
This piece takes pixel art into the third dimension. Dig Dug never looked so cool.

Another trip into 3D. This time it’s Galaga.

Eboy
Eboy is well know for its pixel art and you can see why in this one below.

This awesome little pagoda is full of the Eboy charm.

This piece was for a Coca-Cola advertisement. You can spend a long time exploring all the details.

Tim
This isometric design is just awesome. I love the 3D quality it has.

Another great piece from Tim. It’s like a 16-bit Robinson Caruso.

Tomec
The Blues Brothers look awesome in pixels. The purple highlights make me imagine a nightclub just off to the right.

This fantastic Monkey Island piece has a really cool transition from night to day.

Gunstar Red
This is a mock-up of a video game. Check out the pixel patterns use to make the gradient in the background.

Another great mock-up from Gunstar Red. Great cartoon style.

Bugpixel
This isometric building has enough details to keep you looking for quite a while.

The texture and shading on this balloon are just amazing.

Tom Schieter
This piece is loaded with details. Notice the water splashes and little fish.

This wonderful visage looks great with its muted tones.

Fool
Awesome character design and excellent textures make this one a favorite.

This one by Fool is simple stunning. The atmosphere, concept, color pallet and details are truly inspiring.

Another great character full of whimsy and charm.

Further resources

Create your own pixels with the pixel toy.
Check out a pixel map of Hong Kong.
Pixel art tutorials to get you started.
Pixel art forum and galleries.

Despite its privacy issues, Facebook clearly has a key role in global Internet activity. It has become a kind of universal social network, being used for both personal and business needs. For many individuals, companies and organizations, Facebook has become an integral part of their branding strategy and promotional campaigns.

Facebook provides many tools for maximizing the effect of your presence on the social network, most of all by means of business pages, also known as fan pages. Using a variety of applications and Facebook API tools, one can get creative not only with the page content, but with the design, too.

In this post, we’ll give you an idea of how to use Facebook for your business and self-promotional efforts. Below, you will find best practices for custom Facebook fan page designs, with various approaches to creating an attractive, descriptive and engaging Facebook business page. In addition, the selection of tutorials and resources for Facebook fan page development might help you get started with your own effective Facebook presence.

By the way, it’s been two years since Smashing Magazine’s Facebook fan page launched (now with 18,500 fans). We have worked hard to integrate discussions, useful tips and give-aways to make the fan page more appealing and engaging.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]

Showcase Of Well-Designed Facebook Fan Pages

Giants of the Industry

Big brands demonstrate the best use of Facebook by far. Getting millions of fans may not seem like a big deal for Coca-Cola or Victoria’s Secret, but these companies managed to create fan pages that engage users on a much deeper level than by just asking them to click the “Like” button. An interesting trend seen across this category is of large companies taking Facebook to a new level, putting it at the center not only of their social media campaign, but of their entire online presence.

Starbucks
Currently with the number one fan page for a brand on Facebook (with almost 8 million fans), Starbucks takes a distinctive approach, focusing less on loud entertaining apps and more on high-quality content and beneficial offers for its fans. Starbucks has learned how to effectively use status updates and how to share a lot of interesting, useful and engaging material aside from its product updates. The company also offers a couple of interactive apps that not only are fun (e.g. the Instant Story tab) but that offer tangible benefits (e.g. discount coupons, and functionality that allows fans to manage their Starbucks accounts right in Facebook). The fan page also has an interactive map that links to the company’s regional Facebook pages (just as BlackBerry does, as we’ll see). With no unusual visual indicators on its fan page, Starbucks demonstrates that functionality is at least as important as aesthetics.

Red Bull
The fan page for Red Bull is by far one of the best on Facebook. By implementing a number of innovative ideas and engaging apps, Red Bull makes the best of its Facebook presence and thus stands out from business pages for other brands. A good example of this is its Twitter stream, which, instead of featuring just Red Bull’s corporate feed, assembles tweets from sponsored sports athletes and allows fans to connect with them beyond Red Bull’s domain. Live Web TV that anyone can view right on Facebook and a variety of fun games also encourage users to interact with the brand. While the welcome page is not in the default menu bar, it’s quite informative and serves as a compact graphic map of the entire Facebook page. Red Bull is also a pioneer of using Facebook as a recruiting tool; adding a careers board to a profile with so many fans makes sense indeed. Bravo Red Bull!

Skittles
Although Skittles’ fan page features two brightly designed, eye-catching tabs (one a graphic presentation with links, the other promoting its “Mob The Rainbow” campaign), the company has set its Wall tab as the default. This is typical of popular brands that don’t require an introduction. It allows fans and visitors to the page to immediately follow the company’s updates and join the conversation.

Coca-Cola
Another giant with a million-plus Facebook fans, Coca-Cola has a fan-centric Facebook page. It encourages active user participation and interaction between the brand and its fans. The landing tab is set to the Coca-Cola introduction, which contains a dynamic box with latest updates and a “Like” button, links to other social network profiles for the brand, a fan highlights strip, and info about the product and the page’s creators (by the way, this Facebook page was created by two Coke fans and then later supported officially by the company). Another highlight of the Coke fan page is photo albums: in addition to some standard product shots and event photographs, many other albums are included, presenting Coca-Cola not only as a popular beverage but as a multi-generational icon. Here is a good example of how to make use of photos on Facebook.

Twilight Saga
The default tab for the official fan page of the blockbuster series Twilight Saga is a large graphical tab promoting the latest episode, Eclipse. The custom tab incorporates elements of the movie’s website and the trailer, live Twitter updates, links to official websites and other info. Two other custom tabs are dedicated to the second film, New Moon, and the official movie soundtrack. The entire page is rich in content and delivers its information effectively.

More Beautiful and Engaging Facebook Pages

Room 214
A nice approach to the Facebook welcome page is demonstrated by social media agency Room 214, based in Boulder, Colorado. The default tab, with its nice duo-tone and sketchy font, looks minimalist and attractive, and it focuses on introducing its team members. The “About” tab has a clean two-column layout, with some basic info about the company in the left column and cute roll-over links to the staff’s Twitter accounts, official website, blog, contact page and corporate Twitter page. Another graphic tab covers the agency’s clients. A simple yet well-executed fan page design.

Porsche
The ColorStyler tab on the fan page for Porsche is so darn great that one immediately wonders why on Earth they didn’t make it the default tab? The pure FBJS tab allows users to select a Porsche model and customize its look in a live preview mode, with a nifty color and rims picker. One then can send the Porsche image to a friend or publish it on the page’s wall. This hidden gem makes the entire page shine.

Digital Turf
The fan page for Digital Turf is an interesting and rather confusing case. The page design itself is wonderful: the excellent company presentation, two-level sub-navigation, diverse data and cute style is a feat of FBJS and makes this one of the most attractive business pages you’ll see on Facebook. Here’s the confusing part: Digital Turf specializes in developing Web-building and media solutions for political campaigns and organizations (maybe not exclusively, but that does figure prominently in its list of services). The question is whether this design style communicates the company’s strengths well enough to attract its target audience. If it solved this concern, Digital Turf could turn its fan page, which is awesome as it is, into a Facebook promo bomb.

Revision Eyewear
The main tab of the Revision Eyewear fan page features an impressive Flash intro, with bold photographs and transitions and a dynamic “Become a Fan” link. The eye-wear manufacturer also uses Facebook for its charity work; a custom graphic tab on the page explains its causes and displays donation links (the “Become a Fan” button turns into a donation button—very clever).

Thurston & Betts PLLC
The Facebook page for law firm Thurston & Betts is notable for its “Like Us!” tab. A simple informational scheme in the center, with nice roll-over buttons leading to the company’s website, is a clever solution: neat yet substantial. The tab also includes the firm’s main contact info and a map of its location. It’s difficult to imagine a better Facebook page design for a law consultancy.

Daddy Design
The fan page of Miami-based Web design studio Daddy Design includes two custom tabs: “About” and “Portfolio.” Both tabs use the page’s entire width, which, along with the striking orange color scheme, makes this page hard to pass by. The business page is tied closely to the company’s official website design, and it highlights a neat FBJS portfolio, with links to Daddy Design’s social profiles. It actually creates the feeling of a website within the Facebook page. Great work.

1-800-Flowers
In our opinion, this is one of the best uses of a Facebook business page for e-commerce. By becoming a fan of 1-800-Flowers on Facebook, you can access up-to-date content, send virtual gifts to friends and shop for flowers right on Facebook (via the Flash-based application Alvenda). The company’s “Welcome” page has a simple and attractive grid, consisting of four sections that engage visitors with various activities. Also, the cool promo code field offers a discount to anyone who hits the “Like” button.

The Game – Team A
The Game, for the Sony PS3, has two beautiful fan pages on Facebook, dedicated to each of the two teams in the game. The two pages have a similar design, featuring beautiful graphical tabs (and especially fine typefaces) that link to the interactive Facebook applications. The “About” tab includes an interactive worldwide game stats map, which is a nice touch.

Oxelo
Oxelo’s fan page would be rather generic if not for the inventive Diabolo Roller tab, which promotes its new model of roller blades. Built with a Flash app, it allows a nifty 360-degree view of the product.

Teesey Tees
Teesey Tees use its Facebook presence effectively: it partially implements an e-commerce element from its website that allows Facebook users to browse t-shirt designs in a sleek FBJS gallery, directing them to the regular store for purchases. The fan page also includes a blog and a charming fan-only tab containing a discount code. There is no “About” or “Welcome” tab, and the default tab is set not to the product gallery (which one would expect) but to the Wall. While this is normal for big brands, it’s not so clear why a company with a smaller audience, such as Teesey Tees, would do this. Still, this is an attractive and well-executed fan page.

Threadless
Popular t-shirt producer Threadless takes the e-commerce on its Facebook fan page to the next level. Here, the native Facebook tee design gallery is supplemented by a size-selection menu and shopping cart buttons, which direct the user to the cart on Threadless’ website. The customer review section, with its “Share” and “Like” buttons, enhance the shopping experience of this fan page. Threadless also makes good use of the video and photos tabs, which, along with the live webcast section and active discussion board, make for an engaging, community-oriented Facebook presence.

Cranium
Board game Cranium has a beautiful Facebook fan page, which includes several promotional FBML pages. It doesn’t have any JavaScript gimmicks, just cutely drawn illustrations and cheerful colors that make for a positive visual experience.

Mark Meyer Photography
Mark Meyer’s business page is a good example of how to promote one’s personal brand effectively on Facebook. Using FBML and FMJS, the Alaska-based photographer outfits his custom tab with sub-tabs for his blog and photo gallery and an exquisite image slideshow. Status updates are also cleverly done, so that the Wall (the default tab) takes on the appearance of a photoblog.

Livescribe
The “Buy Now” tab on the Livescribe Smartpen fan page has an Amazon-ish design: it’s rich in content and options, but may require the touch of someone like Jacob Nielsen to be truly usable. Livescribe effectively uses multimedia on its Facebook page, which certainly presents its product favorably and is good for fan interaction on the page. But we would suggest that the company rearrange the position of its tabs, putting some interesting sections (such as the Pencasts, which are animated Flash videos of handwritten notes and audio captured by the Smartpen) in the main bar, instead of, say, the standard “Boxes” tab.

Bodum USA
The highlight of Bodum’s Facebook business page is its excellent use of an iFrame to embed the company’s online store and interactive catalogue, which is powered by iPaper, onto the Facebook profile. In other words, Facebook users can shop for Bodum products without leaving the page.

Soul City Church
The “Welcome” tab of the Soul City Church Facebook page is by far the smoothest pearl in our collection of fan page designs. The clean layout, the neat typography and icons and, of course, the awesome combination of black-and-white photography and energetic green elements result in a stunning intro page. It portrays the church as a progressive and contemporary community. Credit for the great job goes to Monster Eyes.

Diesel
Famous apparel brand Diesel has three out-of-the-mold tabs, the most noteworthy of which is the one labelled “Sex Sells.” It is built on a Flash app and provides a stylish and original showcase for the denim collection of the same name.

Lancome Germany
This one will appeal to those who admire good typography. The “About” section of Lancome Germany’s Facebook page takes on a website-within-a-tab format. It features elegant and polished typography, accompanied by high-quality photography.

Eco-Artware.com
The Facebook business page for Eco-Artware.com features a nice FBJS “Shop” tab. It’s a pseudo-shop, though; in fact, it’s just a featured product gallery, in which both product thumbnails and catalogue categories are linked to the official online store. Nevertheless, the clean grid layout and nice roll-overs for the product images make this a beautiful and useful fan page tab. Eco-Artware.com also makes good use of the “Boxes” tab by setting it as the default.

311
The official Facebook page of music band 311, particularly the “News & Multimedia” tab, is eye candy. Designed in a cool retro poster style, it contains basic info about the band and a built-in multimedia player. A large “Fan Photos” section reflects the band’s commitment to communicating with its fans. Well done!

Rei
Outdoor gear and clothing provider REI uses its Facebook profile to foster strong interactivity, rather than merely to present a plain front. Its fan page is basically a community portal where the company engages people with its social campaigns and projects. The fan page includes two Flash tabs that feature community pictures, links and fun family games.

Desigual
The fan page for Spanish apparel brand Desigual is bursting with color, freshness and style. It is versatile, with various types of promotional and entertaining content, yet not overwhelming. The mood is set equally by great content and classy design elements. Desigual points out that the page was started by fans and then made official by the brand; this is clearly illustrated on the Wall feed, where user-created updates are set to default along with the company’s messages.

Volkswagen
Currently featuring its soccer fan campaign, VW shows amazing use of FBJS on its page. Rich in content, up to date, well designed and heavily supportive of user-created content, this is the best Facebook business page that a popular automotive brand could have.

Living Proof
The fan page of cosmetics manufacturer Living Proof is all about interactivity and dialogue between the company and its customers. Chief among its many features is the dynamic Flash introductory tab, containing basic info about the company,a lab tour,a mini blog, links to customer support services and a corporate Twitter feed. The business page also includes an interactive app that helps customers choose the most suitable products.

Inspired Magazine
Inspired Magazine is one of the few Web design blogs that have customized their Facebook fan page. No fancy applications or high-volume presentations here; a minimalist FBML tab is quite enough to grab the attention of a random Facebooker and give them reasons to “Like” the page.

Sony Ericsson
Current Sony Ericsson promotions are presented via beautifully designed tabs, with videos, contest forms and interactive applications inside.

BlackBerry
Besides its several promotional tabs built with Facebook Javascript and Flash, the BlackBerry fan page features a nice FBJS map with links to local Facebook business pages. This does a good job of integrating the company’s Facebook presence and promoting its local pages.

Resources And Tutorials

Here is a list of websites and tutorials to help you understand the basics of developing and promoting your Facebook business page.

Facebook Developers
This is the ultimate resource for anyone who wants to take advantage of the variety of opportunities offered by Facebook. Related documentation, forum discussions, wikis and a showcase of best practices for Facebook integration are all aggregated in one place for both beginners and advanced developers.

Hyperarts
A lot of excellent tutorials related to Facebook fan page development can be found in the Static FBML & FBML archive on the Hyperarts Blog. The tutorials are geared to both beginners and advanced developers. The blog also features a series of video tutorials, which we’re sure will come in handy for many of you. Some of the most interesting tutorials from Hyperarts are highlighted below.

All Facebook
On the unofficial Facebook Blog, you will find news, articles, tips and stats related to the world’s fastest-growing social network. An extensive guide titled How to Develop a Facebook Page That Attracts Millions of Fans addresses its subject well.

How to Use Facebook for Business and Marketing
This guide takes a look at the potential of Facebook for business and reviews the various options business owners have in order to be effective with Facebook business marketing. Recommended reading.

How to Create a Facebook FBML Template
In this tutorial, you’ll learn how to create a Facebook fan page in Photoshop. It uses a page for a photographer as an example. This is the first in a series; the second lesson covers the coding part. The source files, including the code, are available for download.

Facebook Programming step-by-step tutorial
This tutorial series consists of 22 lessons and covers all aspects of Facebook programming, including application development, displaying fan-only content and creating an interface for a Facebook page.

Static FBML: Not Every Facebook Fan Page Needs an Application
In this tutorial the well-known blogger Alison Gianotto walks you through what a Static FBML is and why it’s sometimes quite enough to create an attractive and efficient Facebook fan page.

Extending Facebook Static FBML Tabs with Dynamic Content
Continuing from the previous guide, this tutorial explains how to add some spice to your Facebook fan page using the DynamicFBML function. You can build an image or video gallery or even a micro-site inside a Static FBML tab quite easily.

Taking Your Static FBML Microsite to the Next Level

Learn how to create sub-nav tab navigation within your Static FBML microsite using only DynamicFBML.

Creating a Custom Facebook Page
This useful guide gives you a head start on building your own fan page on Facebook. The tutorial includes such basics as Facebook page creation, restrictions on Facebook, creating tabs and displaying navigation and content elements using FBML and FBJS.

Google Analytics for Facebook Fan Pages
Another great post by Webdigi.co.uk, in which they show you how to get around Facebook’s limitations. Even though Facebook supports only restricted JavaScript, which is usually not enough for Google to correctly track visitors, the guys from Webdigi.co.uk successfully managed to get all functions of Google Analytics working on their fan page. You can learn how they did it by reading this tutorial.

How To: Build a Facebook Landing Page for Your Business
This is Mashable’s brief guide on how to add and configure a Static FBML tab on your Facebook fan page.

Internet Explorer and Static FBML: Using External Style Sheets for CSS
This insightful article discusses aspects of applying CSS styles to your Static FBML application in Internet Explorer versions and other browsers. The post includes an important update that takes into account changes in Facebook’s API that affect the implementation of CSS styles in static tabs.

8 Essential Apps for Your Brand’s Facebook Page
This article suggests a number of Facebook apps you could use to attract fans to your brand’s landing page and to make them return repeatedly.

Add a Custom Tab to Your Facebook Fan Page (Starter Template Included)
Like some of the aforementioned tutorials, this one teaches you how to embed a custom tab in your Facebook fan page. But this tutorial is a bit more detailed than previous ones, explaining how to build HTML and CSS that adheres to the new 520-pixel width requirements set by Facebook, how to add a YouTube video and how to avoid using iFrames. Also, it contains a starter template code with comments.

Facebook Best Practices for Non-Profit Organizations
This Facebook fan page guide is written by Diosa Communications, a company that specializes in social-media consulting for non-profit institutions and small businesses. It’s not exactly a list of best practices in the traditional sense, but rather a number of recommendations on how to set up and promote a fan page to the best effect.

How To Create the Perfect Facebook Fan Page
Some tips you can apply to your Facebook marketing strategy that will put your Facebook Page leaps and bounds ahead of the competition.

Adding iFrames to Your Facebook Applications: 2010
Recent modifications in Facebook’s API further restricted the use of iFrames. For instance, you can’t embed one in Static FBML anymore. iFrames can still be used in the Canvas Pages application, though, which is the topic of this tutorial.

Developing a Facebook Application for Absolute Beginners
Applications have proven to be an essential component of successful Facebook fan pages. They’re an effective tool for enhancing interactivity and engaging users. Fortunately, creating a Facebook application is not that difficult. Learn how to do it by reading this thorough tutorial by Emanuele Feronato.

Showcase

Not many galleries of Facebook pages exist yet. Still, the ones that do give us a pretty good idea of trends in this area.

Facebook Designs
This gallery is rarely updated, but it features some really cool Facebook page designs that we haven’t seen in other showcases.

Custom Facebook Page gallery
Custom Facebook Page is run by the social media marketing group North Social. The gallery contains over 60 Facebook page designs, sorted into several categories. The most recent showcase is dated December 2009.

Facebook Showcase
Facebook Showcase is the most frequently updated gallery of the ones covered here. A lot of inspirational Facebook page designs can be found here.

Facebook Platform Showcase
This showcase is slightly different. Here you can explore how companies around the world integrate Facebook on their websites.

Customize Your Facebook Fan Page: Tips, Tricks, Applications
A quick overview of basic tips and tricks for customizing and improving your Facebook fan page.

Facebook Fan Page Templates

Many freelance designers and design studios offer customization services for Facebook pages. Standalone fan page templates are less widespread, at least so far. To provide you with the best possible starter kit, we’ve collected Facebook business page themes that you can get either free or at a cost.

Free Templates

Free PSD Facebook Template | Preview | Details
This 520-pixel Photoshop layout of Facebook fan page tab is available for free downloading. If you are looking for a simple graphical presentation for your Facebook page, this template may come in handy.

Free PSD: Facebook Fanpage Template | Preview | Details
This is a free mock-up Facebook fan page with editable text, posting times and other elements.

Absolutely Free Cool Facebook Template | Preview| Details
This graphic FBML template, along with the PSD file, fonts and HTML mark-up, is available for free downloading. The package also includes an installation manual.

Free FBML Template | Preview | Details
You can use this multi-tabbed Facebook page template for free only if you maintain the links to its creators and the copyright info in the footer.

Facebook Template Page | Details
This is quite a different Facebook page template. Basically, it’s a worksheet available in text and PDF formats, allowing school students to construct a Facebook page for a character from a story or some other purpose. The template has been downloaded over 10,000 times and has gotten a lot of positive feedback because it is a new and exciting way for students to comment on their readings. You have to register to download the template.

Commercial Templates

Photographer Facebook Template | Preview | Details | All FB templates
A sleek graphical FBML tab, with an image gallery, text sections, social networking buttons and a reminder to “Like” the page. The template package consists of source files and the Facebook installation guide. Price: $15.

Corporation Number 1: Facebook Tab | Preview | Details | All FB Templates
A minimalist Facebook page theme, with space for one main image, the company’s logo or tagline, two paragraphs of text and links to social media resources, including an optional RSS feed. The user can also add images, contact forms, videos and other elements to the template (no coding skills are required). Price: there are two subscription plans to choose from, although only one of them (Standard) is active at the moment – $14.99 per month. Free trial option is available, too.

My Style Facebook Flash Template | Preview | Details | All FB Templates
Among the highlights of this Flash-based FBML template are diverse transitions, multi-tab sub-navigation and a large image gallery in the tab header (760 pixels in width, of course). Instructions on how to upload the template are attached; and the developer offers additional customization services. Price: $18.

Website Image Gallery Template | Preview | Details | All FB Templates
This FBML template features a FBJS image gallery, horizontal top menu navigation, social networking links and side images. The website does not mention whether installation documentation is provided; perhaps it is provided upon purchase. Price: $20.

Facebook Flash Template | Preview | Details
This is another version of the Flash-based “Welcome” tab for Facebook fan pages. It’s actually a mini-site, 520 pixels in width, with three sub-pages, including a slideshow and image gallery. It comes with step-by-step instructions on setting it up on Facebook. Price: $13.

(al)

© Julia May for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: facebook

This Photoshop tutorial will include the use of the 3D software – Daz3d that you can download for free at www.daz3d.com. This great easy-to-use 3d software which also has been doubles as a virtual photo studio is a 98 MB file. I opted for Daz3d because it offered to me the option to manipulate the posture of the models I used in any form. This is great if you have a limited gallery of stock images or you can’t find a model with the exact posture, lighting, body weight or skin color you looking for.

The second part of the tutorial would deal mainly with Photoshop. Here, the use of the advanced options of Curves command would be pivotal in enhancing the tonal state of our model. This means that the midtones, highlights and shadows are crucial for our project.

Step 1

Launch Daz3d and open a new document (Ctrl+N). To load the pre-installed model, Victoria 3 RR LE, head on to the Content tab. Go to Studio > People > Victoria. Below the left window pane, you see a thumbnail image of Victoria figure.

Step 2

Double-click on the thumb image of Victoria to load the model into your scene (main window). The anatomy of the model isn’t very detailed; its comparable to that of a doll and so its probably not going to set your pulse racing.

Step 3

To apply a pose preset to your figure, click the Content tab and beneath it, go to Studio > People > Victoria > Poses > Fairie and select Turning 01 by double-clicking or dragging to the scene.

Step 4

There are a couple of ways you could manipulate the posture of your figure but now will stick with the PowerPose feature for simplicity. Under the PowerPose tab, you’ll find a figure with dots at various points. These dots are used to position or ‘pose’ parts of the body to the direction desired with the use of the mouse.

Step 5

For the point at the neck, drag downwards just slightly to set the head to face downwards.

Step 6

Raise the shoulder upwards and a move it backwards a little.

Step 7

The chest should stoop forward a bit.

Step 8

The hips here were raised.

Step 9

Now to add lighting for the figure itself. Go to Studio > Lights> General and double click on General Lights 01 to apply the preset lighting effects to Victoria.

Step 10

On the left of the scene is the Rotate Camera icon along with other camera options. To adjust the light to shine down more to the front of the figure, left-click the Rotate Camera icon and with the mouse held down, rotate the camera to the desired direction. The rotation I made was only just slightly to the left-hand side.

Step 11

Before we have the scene rendered, on the menu bar, go to Render > Render Settings and click on the General tab. For the Speed option, I set the slider to its midpoint as I did put into consideration the capabilities of my ‘not-so-old’ graphics card. If you’ve got a recent or decent GPU, you could set the Speed to the maximum for better quality rendering results. When done with the Render Settings, click ‘Accept’ and then Render. From the File menu, save the rendered scene as a .png image file to your choice folder and name it “girl_model”.

Step 12

We’ll drag the “girl_model” file into Photoshop and head on to Image > Image Size and set new dimensions for the picture. The image size of “girl_model” could also have been set in Daz3d before rendering as well.

Step 13

I’ll be using the Magnetic Tool (L) because its much faster to work with and more effective on high contrast backgrounds.With the Magnetic Lasso Tool, make a selection around our ‘girl’. Right-click the selection and choose Layer Via Copy to extract the selection from its white background to a new layer. *Note: if you do have any white markings left around the figure , use the Eraser Tool (E) with a Hard Brush to clear these markings.

Step 14

Delete the “girl_model” layer from the Layers Palette and name the new layer with the girl, “model” if you wish.

Step 15

Have the model’s color desaturated (Shift+Ctrl+D). Go to Image > Adjustment > Brightness/Contrast to increase the brightness of our model.

The result:

Step 16

Reduce the “model” layer opacity to about 60% and then go to Filter >
Artistic > Plastic Warp. The PlasticWarp Parameters are shown below:

The resulting effects gives the image a more ‘fluid’ look. I also created a new layer,”background” and with the Paint Bucket Tool (G), click the empty space to apply the foreground color (#071431).

Step 17

On the Layers Palette, set the “model” layer’s Blend Mode to Pin Light. To make the figure look a lot more opaque hence, adjusting its tone, go to Image > Adjustments > Curves or alternatively, click Ctrl+M to bring up the Curves dialog box. Now bend the Curve’s diagonal line just slightly at its base or just enter the Input/Output values as shown below:

Step 18

We’re not done yet with the Curves. Click on its Options for the Auto Color Correction Options and ensure that Enhance Per Channel Contrast is selected. For the Highlights, increase Clip to 1.0%.

Here’s our image with a lot more transparency.

Step 19

Select the Dodge Tool (O) and set its brush size to between 8 px to 12 px and highlight most part of the edges and other parts of the body as shown below.

Step 20

With the Smudge Tool (R) selected, and its Strength reduced to about 70%, have the feet of our model smelted together.

Step 21

We’ll now enhance the liquid state of the watery model with the Liquify command. Go to Filter > Liquify and set the Tool Options.

Step 22

Starting off with the arms, use the Pucker Tool (S) to create little ‘waves’ or ‘protrusions’ by holding down the mouse and dragging. After wards, use the Bloat Tool (B) with a reduced brush size and increased Pressure of about 65% for more sensitive. The aim of this is to reduce the protrusions made by the Pucker Tool into dispersed droplets.

Step 23

Still maintaining a relatively high Brush Pressure for the Bloat Tool and a smaller Brush size of 8, proceed to virtually disintegrate small parts of the left arm into liquid forms.

Step 24

For the feet, use varying Brush Pressure and Sizes.

You’ll get an appreciable ‘wet’ result.

Step 25

I found some areas a little too whitish or bland and so I used the Burn Tool on choice areas I was dissatisfied with. The purpose was to maintain a shiny look for the figure.

Step 26

The effects previously applied on the model with the Liquify command look a little too matte and so, we use the Marquee Tool (M) to select these areas one at a time. When the selection is made, go to Filter > Sharpen > Sharpen to make the watery waves so to speak, look more crisp by sharpening twice. The Sharpen Tool (R) could have been used here but I wanted to see the results on a level-by-level basis.

Step 27

Create a new layer and name it “splashes” for the water brushes we’ll be employing. This set of water brushes that can be downloaded from its creator – Redheadstock for free at redheadstock.deviantart.com. With the Brush Tool selected, choose the Water Brush (splash 1) and change its color to #dbdcde and paint around the model’s feet. Switch the color to a white one and paint over the first splash.

Step 28

Use other water brushes out and about the figure. For instance ’splash 3′ and ’splash 6′ were used to create trails of droplets. Also for the tip of the splashes, reduce the brush opacity for a faded dispersal of water. Though I at point, I would have ended the tutorial right here but the show must go on as we explore other techniques to apply to the figure.

Step 29

For the “background” layer, apply a Gradient Overlay Layer style to it with the parameters below:

Step 30

Select a Soft Round Brush with its color – #eaebed; size – 25 px; opacity – 75%. Then go to Brushes Palette and select Scattering. Increase the Scatter Randomness by 190% and set Count to 2.

Step 31

With a new layer named “motion” created, paint three short brush strokes as depicted below:

Step 32

Head on to Filter > Blur > Motion Blur and set the blur Distance to 692 pixels. You may have to readjust the Blur Distance if the final effects overlaps the right-hand side of the model.

This tutorial for now ends here! There’s so much more one could with this image. These are just the basics.

Here’s a variation of the image with a black background. This brings out the image a lot more

By David Ella Ella