Homepage / Blog link
February 26th, 2007

You can include a personal homepage or blog link into your profile card as shown below.

Filed under: Features
by Adam Soh |
Add Comments

You can include a personal homepage or blog link into your profile card as shown below.

Filed under: Features
by Adam Soh |
Add Comments

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:
<h1></h1><h2></h2><h3></h3>… |
Header element, normally reserve for title. |
<p></p> |
Paragraph element, for writing new paragraphs. |
<font></font> |
Font element, normally used togther with “face” attributes. e.g<font face=”Arial, Helvetica, sans-serif”></font> |
<br> |
Line break element, start with a new line. |
<ul></ul> |
Unnumbered list element, used for creating an unnumbered or unordered list. |
<li></li> |
List item element, list the items. |
<hr> |
Horizontal ruler element, create a horizontal ruler. |
<b></b> |
Bold element, bold text. |
<i></i> |
Italic element, italize text. |
<u></u> |
underline element, underline text. |
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.
Filed under: Tips and Tricks
by Adam Soh |
Add Comments

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.
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”.

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.


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.

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.

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 ![]()
Filed under: Tips and Tricks
by Adam Soh |
Add Comments