Putting up a profile in social sites can be a daunting task, imagine having to wade through all the given textfields. More often than not, these textfields only recognise and accept normal text entry, thereby limiting your creativity to create something unique.

Wouldn’t it be fun and interesting if you can have some control over how your profile is been displayed to others? Hiitch allows you to do that by including simple HTML tags to enhance your profile layout. Don’t worry, you don’t have to be a software junky to learn and understand HTML. In this article, I’m going to show you how easy it is to spice up your profile with HTML.

Below is an example of my profile card.

Notice some of the text are in colors. These are text that has been wrapped around with HTML tags. Now take a look at the profile interface below.

Your profile interface is where you enter your profile information. At first glance, the above layout may seems abit overwhelming. Actually they are just lines of text with HTML included in between. To make things easy, I will highlight all the HTML elements used as shown below.

Do you see a pattern? To convert a text into HTML, simply surround it with HTML tags.

Example:

<h4 color=”#EE5A00″>Pimp my Hiitch with <em>HTML</em>;)</h4>

HTML tag always start with an opening tag and end with a closing tag. Closing tag is precede with a backward slash /. Most HTML element can contain attributes. As in this example, the header tag <h5 color=”#EE5A00″> has a color attribute of value #EE5A00. Some HTML element can have more than one attributes.

Here is a list of HTML tag and its definition that you can used in your Hiitch profile:

Above are just some commonly used HTML element, if you are keen to learn more you can visit:
http://www.w3schools.com/html/default.asp.
For HTML cheat sheet, visit:
http://lesliefranke.com/files/reference/htmlcheatsheet.html.

Please note that not all elements will work with Hiitch profile, currently our application only supports basic html tag. However I hoped this does not deter you from creating your own unique profile card. Now go and let your profile shine

Disclaimer: The off-site resource mentioned above are not affiliated with Hiitch in any way, nor do we endorse the content they offer. They are mentioned here simply because we think it might be helpful or useful to you.

Cheese Head, Block Face, Squarely these are some of the names our user used to associate with Hiitch emoticons. Well, today I’m going to show you how to create your own cheese head, block face and squarely emoticons.

Before I begin, I would like you to download the emoticon package. Inside this package contain the eyes and heads of Hiitch emoticon to get you started quickly.

For this tutorial, I’m going to show you how “Silly” is done.

Step 1:

Open a 23px by 23px transparent background with your favourite image editing tools. I’m using adobe photoshop for this example.

Unzip the emoticon package and open “cube_head1.png”. Select the head (Ctrl+A) and copy and paste it to the transparent background. Name this layer “head”.

Step 2:

Open “eyes1.png” in the package, select the eyes (Ctrl+A) and copy and paste it to the transparent background. Move this layer on top of the “head” layer as shown below. Shift the eyes until you are happy with its position.

Step 3:

Now to draw the pupil and eyebrows of the emoticon.
Choose the rectangular marquee tool and draw a 2px by 2px square. Then create a new layer “left pupil” and fill the rectangular marquee with dark grey #3F3F3F. Deselect (Ctrl+D) the marquee and shift the pupil to the lower left corner of the eyes.

Duplicate the “left pupil” layer and rename this layer “right pupil”. Shift the right pupil to the top right corner of the eyes as shown below.

The eyebrows for “Silly” is drawn using a 1px pencil tool . Create a new layer “eyebrows” and draw 4 black dots as shown below.

Step 4:

To accentuate the expression of the emoticon, I’m going to give it a rosy cheek and add some freckles to the face.
Create a new layer “cheek 1″. Using the elliptical marquee tool , draw a circle on the left side of the face and fill it with light pink #F5AFAE. Then deselect it and apply a Gaussian blur of radius 1.5 to the cheek. Change the blending mode to “Linear Burn”.

Create another layer “cheek 2″ above “cheek 1″. Using the elliptical marquee tool, draw a similar circle but this time fill it with light yellow #F6C668. Apply a Gaussian blur of radius 1.5 and change the blending mode to “Linear Burn”. Reduce the opacity of “cheek 2 “to 30%.

For the freckles, I use a brown colour 1-2px soft brush to paint across the bottom of the eyes.

Step 5:

Finally, we will add in the mouth/lips for the emoticon. For “Silly” I used a polygonal lasso tool to draw out the mouth. After I am satisfy with the shape, I used dark red #680000 to fill it.

There you have it, your own cheese head or whatever you called it emoticon. You can save your final result as .png file.

I hoped you enjoy this tutorial, feel free to send me your creation at cbsoh[at]hiitch[dot]com. If we like your emoticons alot, we may just include it in our next Hiitch release. Ciao for now