|
| Wednesday, November 01, 2006 |
| How to create a web page using opensource softwares (design) |
Haai, maaf untuk keabsenan untuk waktu yg cukup lama, selain dipenuhi oleh pekerjaan, saya juga sibuk memasukkan berbagai pelajaran dan ilmu baru untuk otak ini, sayang sekali jika tidak diisi sesuatu yg juga bisa menghasilkan karya2 dan tentu saja uang! hahaha
Belajar apaan sih? ha, semenjak memutuskan untuk membuat forum blender indonesia saya banyak belajar PHP programming, terus keterusan mencoba membuat ini - itu yah semacam web based application, seperti invoice, penjualan online, stock list, sampai memutuskan untuk membuat CMS sendiri, karena masih belajar adakalanya otak nih tersendat2 karena kita ga kursus, untungnya ada temen yg siap membantu, naaaah sekarang bersama dia, kita membuat CMS made in sendiri, yang nantinya bisa dipakai untuk berbagai macam web based application, itu juga yang menyebabkan forum blender indonesia masih tersendat2 pengembangannya, memang bisa sih pakai CMS yg sudah ada seperti Joomla, tapi setelah dipikir2 ada untungnya juga belajar membuat yg seperti itu.
Hey! jangan khawatir pasti forum itu akan jadi! tunggu aja
tutorial kali ini : Bagaimana membuat halaman Web dengan program opensource (desain)
apa hubungannya dengan Blender? well, kita desain content atau illustrasinya dengan menggunakan Blender,LOL, sori masih terkena demam web desain,
meskipun begitu saya berharap ini bisa jadi pembuka untuk siapa2 yg ingin memiliki web site dan mulai menyebarkan ilmu blendernya secara Online!
Hi, Sori for the long delay, i got a lot of work to do, beside that, i'm also inputing many new knowledge into my brain, its pityfull if i cant fill it with some new creativity and ofcourse some way to make money!hahaha
What kind of knowledge? ha, since i'm deciding to made a blender indonesia forum, i do learning a lot of PHP programming, and addicted to it, make this and that - a web based application, like invoice, online shopping, stocklist, until i'm deciding to create my own CMS, and because i'm learning it by my self many problems came, luckily theres a friend of mine who can help me to solving it, now we're trying to create our own CMS that we can use it later for many purpose, yeah, i know there is many good - great - free CMS out there like joomla, but then its also a good thing that i'm learning how to create it.
new tutorial : How to create a web page using opensource softwares (design)
Blender related? well, we will trying to create its content or illustrations using blender, LOL, sorry,still in Web fever i guess, so with this tutorial i'm also hoping that anyone can make their own web and publish many Blender tutorials Online!
-------------------------------------------------------------------
OK, jalankan Blender, buatlah sebuah jeruk, beri ia texture yang sesuai, jika anda sudah terbiasa dengan blender atau minimal mengikuti tutorial sebelumnya saya kira proses pembuatan jeruk ini akan selesai paling tidak setengah jam saja,
OK, open Blender, create an orange, give it a texture, if youre already know how to use blender or follow the previous tutorial i think this process only take a minutes
jika sudah selesai, pada panel render jangan lupa untuk mengaktifkan tombol RGBA dengan output TGA, kemudian renderlah jeruk ini dengan beberapa pose, saya sendiri merender 6 pose (disini hanya saya perlihatkan 4 pose), save setiap hasil render
if youre done, dont forget to activate RGBA button and a TGA output, render this orange with 6 different poses (i'm only showing you 4 poses) save every render result
jalankan Gimp, buka hasil render tadi copy-paste kan kesebuah dokumen baru yang berukuran 800x600, pada panel layer akan terdapat sebuah Floating selection, jadikan ia sebuah layer baru dengan meng-klik tombol new layer.
open Gimp, open your orange image and copy-paste it into a new document (800x600), make it ( the floating selection) into a new layer by pressing "New Layer" button
lakukan hal ini kepada setiap hasil render ke dokumen baru tersebut, sehingga sekarang anda memiliki 6 buah jeruk yang berbeda pose dan layer, rubahlah ukuran dan aturlah posisi jeruk2 tersebut hingga menjadi seperti gambar berikut
do the previous process to every orange images, so now you have 6 different poses and layers of orange in one document,
change their size and position so it will be look like this:
matikan gambar mata pada layer background, kemudian lakukan merge visible layer
turn off the eye in background layer and do merge visible layer
untuk kesan 3d, beri jeruk2 ini sebuah drop-shadow dari menu Script fu, anda tidak perlu mengutak-atik opsi yang keluar, karena nantinya drop-shadow ini akan keluar sebagai layer baru yang bisa di-edit lagi nantinya
for the 3d effect, give em a drop shadow using Script fu, you dont have to change the parameters in the popup menu, you can do the editing later because the drop -shadow will appear as a new layer
kemudian aturlah setiap shadow hingga memberikan kesan jauh yang kemudian mendekat
arrange every shadow so it will have a different depth looks
untuk title, saya akan membuat sebuah dokumen tersendiri.
as for the title, i'll create a new document
disini saya memberikan efek cool metal dengan warna gradasi kuning-orange
tapi anda bebas bereksperimen dengan efek2 yg tersedia di Gimp
i give it a cool metal effect with yellow-orange gradient, but
you can give it your personal taste or even a different effect
dengan membuang beberapa layer yg saya anggap tidak perlu, saya kemudain meng-copy title tersebut
ke dokumen web sebelumnya dan memberikan drop-shadow lagi dan mengaturnya agar sesuai
i'm only picking one layer and copy-paste it into the previous document and give it a drop-shadow
kemudian memberikan sub-judul dan menu
adding a sub header and menu
dan menggunakan merge untuk semua layer termasuk background
and merge all the layer including the background
untuk tahap selanjutnya perlu anda perhatikan baik2
Gimp, menggunakan Ruler/Guide-nya sebagai Slice-nya yg nantinya menjadi tabel pada file html,
jadi sebaiknya yang dilakukan pertamakali adalah menandai menu2 yg akan digunakan
For the next step, please read and watch it carefully,
Gimp make a Rulers/Guides as a Slice tool, the sliced parts will turn into a table later in html file,
so, its a good idea to slice the menus first
pada gambar dibawah ini anda akan melihat hasil potongan yg saya gunakan
hijau: gambar yg akan digunakan
biru: menu
merah: nantinya bagian yg akan dibuang pada html editor
in the image below you'll see the result of my slice
green : we will using this slice as an images
blue : menus slices
red : we're gonna delete it later in the html editor
Gunakan fasilitas Web-O-Tine dari menu Script Fu (tidak terdapat pada installasi dasar Gimp, silahkan download dari
http://registry.gimp.org/file/webotine.scm?action=download&id=2825)
Use the Web-O-Tine from Script fu menu (basic Gimp dont have it, download it from
http://registry.gimp.org/file/webotine.scm?action=download&id=2825)
pada opsi yg keluar beri nama pada html dan image base name
give your html a name and an image base name
hasil save ini nantinya (biasanya) akan ada pada folder my picture di my document (windows) atau home (linux)
and save it, (usually) the files will be saved in my picture folder at my document (windows) or at home (linux)
buka file HTML tersebut menggunakan NVU, gunakan tab Normal (ada di bawah halaman)
open the html using NVU, activate the normal tab (at the bottom of the page)
pilih kolom2 yg tidak memiliki gambar didalamya (sebenarnya ada, tapi berwarna putih) karena sama dengan warna backgrond
anda bisa menghapus gambar yg ada didalamnya sehingga bisa menghemat waktu loading nantinya
select the cells that dont have any images in it (they do have the images actually, but we dont need it) since their color same as the background
and delete it, so the loading times will much faster later
jika dirasa perlu anda bahkan bisa menghapus kolom2 yg tidak berguna setelah menghapus gambar dengan menekan tanda silang pada kolom tersebut
you can also deleting the unused cells in a rows or columns by pressing the x button that appear on top or side a cell
masuklah pada tab SOURCE, disana anda akan melihat hasil penghapusan yg telah dilakukan, yg tersisa hanyalah td/td
yg berarti kolom anda tidak berisi apapun
enter the SOURCE tab, you can see the results, theres a td/td mean this cells are empty
kembali pada Normal tab, klik kanan pada tabel kemudian pilihlah Table Cell Properties
back to Normal tab, right click on table and choose Table Cell Properties
pada opsi yg keluar pilih tab Table, beri center pada table alignment dan warna putih pada background color
in the popup menu click Table tab, assign it to center at table alignment and pick white as a background color
untuk menu, pilih menu yg anda inginkan, klik kanan pilih Image Properties, pada opsi yg keluar pilih tab Location, isi lah kolom tooltip (akan keluar keterangan nantinya jika mosue rollover di atasnya) dan alternate text (bila image pada browser dimatikan, kolom ini akan tetap bisa diketahui fungsinya)
for menus, select and right click on it, choose Image Properties, in the popup click Location tab, fill the tooltip with name or note (appear when a mouse is rollover it) and an alternate text (appear inside the cell if the browser turn off their images function)
pada tab Link isikan halaman tujuan dari menu ini (harus sudah ada file html tujuan), pada source nantinya akan terlihat a href =..... yg artinya menu ini adalah link ke halaman lain
in Link tab fill it with the name of the linking pages to this button (you must have the destination html file first), at source you'll see the a href=... which mean this images is a link to the other page
save dalam bentuk html, jangan lupa untuk mematikan "read only" dari file property untuk bisa men-savenya
dan halman web kita sudah jadi....
coba secara offline!
save it into html files, if it happens that you cant do save, turn off the "read only" for this files at File properties. and try it again
and now our web page are done...
try it offline!
 |
posted by Eddie @ Wednesday, November 01, 2006  |
|
|
|
|
| About Me |
|
Name: Eddie
Home: Jakarta, Tangerang, Indonesia
About Me: There's nothing interesting about me...
Profile
|
|
