Created a new logo
I decided that the logo redesign is my next step for the project. Blender and GIMP are two editors that I used to design the current logo. The tools I used to create redesigned logo are Inkscape and GIMP. I used Inkscape to design the basic text and add shadow and reflection effects using GIMP. This is the first time I have used Inkscape so I only can discover its features through using it. I found out that it has the ability to directly change the font size without converting the text to image like GIMP does. This means that I can change the content of the text after I changed font size. Inkscape also has drag and drop feature to import different image files into the document, including JPG and PNG. Below is my finished text created using Inkscape:
Click to enlarge
The file saved by Inkscape is a SVG file. It can be imported into GIMP as an image file. By following this tutorial, I was able to create a shadow effect for the logo, as well as the reflection effect. Below is the logo with effects added:
This image is directly linked from beta.robbychen.com
Note that this logo might change based on the future development of the site. For instance, I might add or remove some open source software images, such as Ubuntu logo for letter o in my name. However, I will write a post about the change once I make a change on the beta site.
Draw vector graphics using JavaScript with Raphael JS Library
Raphael JS JavaScript library includes features that are similar to HTML 5 Canvas element JavaScript. However, it’s missing some of the functionality that Canvas has. In my test, Raphael JS doesn’t support RGBA color scheme, it only supports RGB. Its drawing technique is followed under SVG specification, which means that it could work on older version of browsers, including non-SVG and non-HTML5 compatible browsers. Here is my stick finger demonstration using Raphael JS library:
Click to view the original page
Here is the source code:
window.onload = function() {
var paper = new Raphael(document.getElementById(‘canvas-container’),500,500);// Face
var face = paper.circle(230,120,50);
face.attr({fill:’rgb(125,240,100)’});// Left eye
paper.path(‘M 200 100 s 5 -5 10 0′);
var eye1 = paper.circle(205,106,5);
eye1.attr({
fill: ‘#000′
});// Right eye
paper.path(‘M 250 100 s 5 -5 10 0′);
var eye2 = paper.circle(255,106,5);
eye2.attr({
fill: ‘#000′
});// Mouth
paper.path(‘M 210 150 s 20 15 45 0′);// Nose
var nose = paper.path(‘M 225 125 l 10 0 l -5 10 z’);
nose.attr({
fill:’rgb(0,0,255)’
});// neck
var neck = paper.path(‘M 230 170 l 0 20′);
neck.attr({
‘stroke-width’: 2,
stroke: ‘rgb(255,0,100)’
});// Body
var body = paper.rect(220,190,20,100,8);
body.attr({
fill:’rgb(255,230,100)’,
‘stroke-width’:2
});// Left hand
var hand1 = paper.path(‘M 220 200 l -40 80′);// Right hand
var hand2 = paper.path(‘M 241 200 l 40 80′);// Left leg
var leg1 = paper.path(‘M 225 290 l -20 50′);// Right leg
var leg2 = paper.path(‘M 235 290 l 20 50′);}
As you can see, the code is much cleaner than HTML 5 canvas JS code. The documentation page for Raphael JS JavaScript library is very compact. It provides an example for each topic. It is very easy to read. Also note that it provides animation effects just as jQuery, including translate/move, scale, rotate, transform, as well as other effects. However, it doesn’t provide the explanation and an example for how to draw an arc. Instead, it provides a link to the SVG specification page on W3C website in order to discover how to do it yourself. Fortunately, after numerous trials, I finally have perfect eye hair for the stick figure demo. You can visit this section on the SVG specification to find out how to draw an arc. Remember to always experiment with them by writing your own code.