The second step is arrange our sitemap based on brainstorming at the first step above, we can also used freemind od xmind to do this. the simple sitemap can help us to manage and simplify our work.

Third step is create design concept of our interactive layout and design using Vector Ilustrator, I am used Inkscape Vector Graphic Editor to do this, this tool is popular vector editor in linux environment. this is the preview of design.

The Fourth step is make the html layout, we can used our basic concept idea in above as a guide to create and manage out HTML pages. we need HTML editor to facilitate our editing process, the famliar text editor whose support WYSIWYG (What You See Is What You Get) is NVU/Kompozer, but this program often crash if we open and edit many table or content. Another WYSIWYG is Amaya, this program presented byW3C, Amaya is complete web browsing and authoring environment, for more information you can visit the official site here. This is the preview of amaya.

The fifth step is burning and duplicate our Interactive CD Project, we can use Brasero Cd Burning or K3b Cd Writing Program, before we
completed our job, we must create the start up script, we must create autorun.inf files into root project directory, this is the autorun code:

[autorun]
open=ShellRun.exe index.html Starting CD now...

another script running on linux env. we can use .sh extention, but it’s dosen’t run as well as autorun.inf in windows . this is the code

#/bin/bash
/bin/bash firefox index.html &

the last step is burning our Project on cd with Brasero or K3B cd writer program.

// Inkcscape Vector Graphic Editor
this’s my favourite tool to make anything about graphic design, create object and make the web from scratch. it’s like Corel Draw on wind$ platform. This application’s the first choice if we need any Vector ilustrator, in example in windows platform, we know Adobe Ilustrator, Macromedia Freehand and Corel Draw. We know about how to use legal tool to make our design and avoid the piracy, so we can use the legal and free graphics design software, This’s inkscape for you.

//GIMP
GIMP is the GNU Image Manipulation Program. It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages. I’m use this application to optimize image and slice another picture. It’s very powerfull, we can call it “Linux Photoshop” ), we cna use GIMP to replace Adobe Photoshop, Corel Photopaint and Paint. This’s the GIMP Screenshoot.

//Bluefish Editor
Bluefish is an editor for experienced web designers and programmers. It supports many programming and markup languages, but focuses on editing dynamic and interactive websites. Bluefish is an open source development project, released under the GPL license. Ilike using Bluefish Editor to remote client editing via ssh, the editing process necessary filemanager, i’m using nautilus file manager to remote conecting to server and do the editing process. This application can replcae the webeditor like Dreamweaver or MS Frontpage, it’s better if we know the real code than see the preview only and make drag your mouse.

//Quanta Plus
It’s have the same function than Bluefish Editor, but i’m rarely use this editor, this editor can’t remote editing, it’s because the QuantaPlus use KDE Environment to run as well, and my desktop dosen’t use the KDEdesktop. this’s the quanta view:

//KcolorChooser
this’s the simple aplication the help me to pick colour from desktop to make a hexcode colour for css properties. we can use this application for color picker and get the html colour code. this’s the kcolour chooser capture

//Kruler
This’s also simple application to size measure the layout, it’s specific to layout process on webdesign, this program and KcolorChooser based on KDE for their dependencies,this’s the Kruler view:

All of these application is free and we can use and share to our friends.

You can create another design and apply the start menu on your custom desktop . This is step by step how to create the custom start menu using inkscape vector Graphic Editor.

1. launch the inkscape vector ilustrator, Application >> Graphics >> Inkscape.
2. Set the default documents properties, i’m create the start menu dimension on 100×34 pixel. it’s up to you to determine this dimension. to set this document properties :File >> Document Properties. and set your documents dimension on the field. Close the window to complete your configuration.
   
3. create rectangle using Tool Rectangles and square (f4), this is create for the background of the start button. you can set the dimension :92 x 34px.
   
4. Next step we can make flection on right side, it’s like as windows xp button, to create the flection convert the rectangle to path, choose form menu bar: Path >> Object to Path or use the shoort cut (Ctrl + Shift + C )
5. Chose the right line using path selector (F2). and the next task is make the strike line to flection line, press the F2 and click on right border line, then click on top menu bar “Make Selected Custom Curve” button, and fly your imagination in here..
   
6. Next step, we can make shadow, it’s like a 3d button, select the object then  we can duplicate it, we can use Ctrl + D to easy our work. Scale your duplicate result using select and transform object tool (F1) an then press on the 2nd object, drag and pres Shift button to have scalable result, it’s better if we give the different colour for the 2nd objet like this.
   
7. Oh, it’s haven’t seen it, next we make blur effect for 2nd object, show theFill and Stroke properties side tab using Ctrl + Shift + F . Select the 2nd Object and chose from Fill and stroke Properties, you can see the blur slide, fill blur number on the field(ie i’m using 5.0). and this’s the result.
   
8. Ok, it’s better then the past view:P, next step we make the glass effect, i’m usually use the previous object an then using Ctrl + D to duplicate it, Ok, select the 2nd obcject and duplicate this object, the result is 3rd object and it’s better when we change the fill color to more easy our work. this’s the result. ups..don’t forget to adjust the blur number and opacity number to get the best view on your mind like this.
   
9. It’s not enough glass effect, we must add another effect on the flection side, we can duplicate the 3rd object an rotate(use button “[" or "]“) the object result(4th Object) and place the position like this. it’s more interested if we’re make the shadow like a flection.
   
10. We can add the glass shine effect to make our start like a lamp. Chose (F1) the first object (background) and the duplicate it(Ctrl + D), we get 4th object, change the fill objet, i’m use white fill color to give glass effect. the 4th object will  be positon in front of all, it’s ok, next step we must adjust the size and shape for get the glass as we need, like this.
    
11. It’s need to be adjust the transparency, select (F1) the 4th object an then press the Create and Edits Gradient (Ctrl +F1),and then drag from top to bottom, it’s the result.
12. It’s look like a button now, we can add more glass effect, we can repeat the step-8, but we must set the colour to soft fill, and we can place the 5th objet in behind of 4th object, and this’s the view.
    
13. The last, we can add the text ,it’s better if we choose the right font type and the postion, in example we add the UGOS logo company profile, and the text menu is “Menu”, you can use “Start” or “Mulai” it’s up to you . and This is the final start button. 
    
14. Export the custom icon, Ctrl+ Shift + E, and give the custom name.png

Ok, The custom start menu was ready to use for our desktop, i’m using ubuntustudio 8.10 to apply this custom start menu button, an this is the step.

1. Right click on bottom panel, and then >> add to panel >> choose the “main menu”  an place the new start on position as you like, in example bottom left.
2. Press Alt+F2 to Launch the gconf-editor
3. Find the /apps/panel/object_0
4. check on use_custom_iconcheckbox on”use_custom_icon”
5. Browse the locate file custom icon
6. finish

Dock Transform (Perpindahan)
Dock ini berfungsi untuk melaukan modifikasi pada objek yang diolah pada bidang kerja inkscape. Untuk menampilkan Dock ini dengan menggunakan Shortcut Ctrl + Shift + M , Huruf M bisa diingat dari kata [M]ove. Pengaturan yang bisa dilakukan antara lain: Move , Scale , Rotate, Skew, matrix. Tampilan Dock nya dapat dilihat pada gambar dibawah ini.

Dock Align and Distribute
Dock ini berfungsi untuk menata dan mengurutkan objek, menata objek berdasarkan objek lain yang digunakan sebagai patokan. Dock ini bisa juga untuk perataan pengaturan, rata bawah, rata atas, rata samping kiri dan lain sebagainya. Untuk menampilkan Dock ini dapat menggunakan Shortcut Ctrl + Shift + A , yang berasal dari [A]lignment. Tampilan Dock nya seperti gambar dibawah ini.

Dock Fill dan Stroke (Pengaturan Pewarnaan dan Outline )

Dock ini berfungsi untuk mengatur pewarnaan dan outline dari objek. Pewarnaan (Fill) objek dapat lebih leluasa dari Dock in dibandingkan dengan penggunaan color palette, ada beberapa pilihan tab pengaturan warna (CMYK, RGB, wheel dan CMS) yang memudahkan user untuk memilih warna yang dirasa paling sesuai keinginan. Fasilitas lain adalah pengaturan Opacity (transparansi) objek dan efek blur. Masih banyak pengaturan yang dilakukan Untuk menampilan Dialog ini dapat menggunakan Shortcut Ctrl + Shift + F , untuk mengingatnya,huruf F berasal dari kata [F]ill. Gambar Dock Dialognya dapat dilihat pada gambar dibawah ini.

[bersambung]