The Making of "Jore" Layout

Terinspirasi dari film2 terkenal yang hampir selalu dibuatkan film khusus yang menceritakan tentang "The Making of" dari film tersebut. Satu film tersendiri tentang episode-episode di balik layar, dari mulai pengembangan ide hingga proses syutingnya. Dan sepertinya banyak orang yang menyukai tayangan sejenis itu, untuk mengetahui secara lebih mendalam tentang apa yang terjadi di balik layar. So, kenapa enggak, aku juga ikutan mencoba bikin posting soal "The Making of" :D

Di satu sisi, aku memang lagi nggak sempet ngebahas tentang hal2 yang aktual, macam Pilkadal, virus polio ataupun sholat dua bahasa, juga lagi nggak baca novel fiksi yang bisa direview, jadi nggak ada ide mau bikin posting apaan. Di sisi lainnya, daripada entar pada bertanya satu per satu tentang gimana sih bikin layout itu, mending aku jelasin aja secara tertulis. Buat yang suka otak-atik layout bisa jadi media untuk saling berbagi tips dan trik, dan buat yang belum tahu ya biar pada tahu aja.. :)

Kebetulan si Jore ini tiba2 aja ulang tahun. Ya, aku bilang tiba2 karena emang aku tahunya pas hari H. Dan tiba2 juga terlintas pikiran untuk kasih hadiah berupa layout buat blognya. Dia emang pernah minta dibikinin tapi aku nggak pernah sempet. Karena kebetulan aku lagi butuh kesibukan lain untuk menghilangkan kejenuhan dengan kerjaan kantor, ya udah deh aku bikin rencana untuk merancang layout si Jore. Sekalian tanda terima kasih karena udah sukses menenggelamkan aku di dunia blogging :P

1. Nyari Ilham

Aku cuma punya sedikit data sebagai referensi untuk mengembangkan ide layout. Pertama warna favoritnya hijau, katanya sih karena terkagum-kagum dengan lagunya Mpok Nori "Ijo ijo daun kelingkit... Kagak jodo jangan dibangkit"... nggak banget ya :P. Dan kemudian suka sama hal2 yang klasik, nyeni atau berkelas gitu lah. Dia juga bangga banget dengan nick "Jore", yang katanya berarti "jelek" itu, hingga dia pake dimana2. Entah kenapa kok sampe seperti itu, apakah mencerminkan kerendah-hatian, atau malah kerendah-dirian? atau mungkin merendahkan diri agar dipuji sebagai orang yang rendah hati? :P nggak tahu, tanyakan aja sama orangnya.

Dari data itu tercetuslah ide untuk membuat layout yang didominasi warna hijau, dengan kata "Jore" yang ditulis secara klasik sebagai header utama. Sidebar dibikin nyambung dengan header, yang kemudian dibikin terbagi dalam kotak2 untuk tempat berbagai macam pelengkap blog. Tempat posting agar selaras dengan kesan klasik, aku bikin seperti gulungan kertas tua.

Dan semua itu lalu dituangkanlah dalam bentuk skets di kertas, untuk merancang tampilannya secara real. Karena buatku agak susah untuk menyalurkan ide mentah langsung ke software drawing di komputer, bikin sketsa dulu dengan tangan lebih bisa mengalirkan gagasan dari otak.

2. Bikin Gambar

Aku sangat menyukai bentuk2 lengkung dengan kelengkungan yang sempurna. Tulisan kata "Jore" juga dibuat dari lengkungan2 yang mlungker2 kesana kemari. Disamping itu aku juga menyukai efek 3 dimensi, entah itu berupa efek bayangan atau efek pencahayaan yang bisa memberi kesan 3 dimensi yang real. Kedua hal itu bisa aku peroleh dari software 3D studio Max. Dengan software yang penuh dengan berbagai macam tombol dan menu ini, aku bisa membuat lengkungan2 sempurna dengan "Meshsmooth". Dan kemudian sebagai finishing, bisa diperoleh efek 3 dimensi yang nyata dengan memberi material pada obyek, memasang titik cahaya, dan di-render. Agak ribet memang, tapi hasil akhirnya akan sangat memuaskan.

Hasil rendering dari Max, aku proses lebih lanjut di Photoshop. Disini aku menambahkan efek bayang2 datar pada header. Juga membuat background dari kotak2 yang akan terpasang di sidebar. Dan terakhir, yang wajib, harus dan musti, adalah memasang signature-ku di footer :)

3. Mutilasi

Dari hasil gambar ini, bentuk layout blog sudah keliatan. Tapi tidak berarti pekerjaan sudah selesai dan tinggal pasang doang. Tidak sodara-sodara.. perjalanan masih panjang.. dan masih berliku-liku.

Proses selanjutnya adalah memotong-motong gambar itu. Dipotong dan dipisah2kan antara kepala, badan, kaki, dan anggota2 kecil lainnya sebagai gambar tersendiri. Sadis ya.. gambarnya dimutilasi :D Kenapa harus dimutilasi? ya karena layout ini kan harus bisa mengikuti panjangnya tiap posting, dan juga panjangnya masing2 komponen di sidebar.

Untuk bentuk layout seperti model "Jore" itu, selain aku harus memisahkan header, footer, sidebar, dan main body dari gambar utuhnya, aku juga harus memotong2 lagi bagian2 dari gambar tempat posting, tempat komen, dan kotak sidebar. Masing2 dipisah menjadi bagian atas, tengah, dan bawah. Bagian atas (header) dan bawah (footer) dari masing2 komponen itu aku potong secara utuh. Sementara bagian tengah hanya aku ambil gambar selebar 1 pixel yang nantinya akan dijadikan background yang diulang atau di"tile" sesuai panjang dari posting atau komponen sidebar. Pemotongan header dan footer harus pas, sehingga nanti kalo disambung dengan background selebar 1 piksel yang diulang tersebut bisa tampak sambung menyambung menjadi satu. Selengkapnya bisa dilihat disini.

4. CSS dan HTML

Ini dia bagian paling bikin pusing.
Dengan HTML kita menyusun penempatan masing2 komponen di halaman weblog. Dan dengan CSS masing2 komponen itu bisa kita beri style yang sesuai dengan keinginan kita. Tapi semua itu harus diatur dan dibaca dalam bentuk tulisan huruf dan angka. Ruwet dan tidak ada indah-indahnya. Harus bisa ngebayangin kode2 itu akan menyebabkan bagaimana di halaman blog nantinya. Serasa seperti Neo lagi membaca kode2 The Matrix... :D

Tentunya nggak bisa dibahas lengkap disini ya soal css dan html itu. Bakalan panjang banget. Mending, buat yang pengen tahu silakan aja buka tutorial2 gratis yang ada di internet. Yang sering aku buka antara lain dari Web Design Group, atau dari Echoecho. Mau cari yang berbahasa Indonesia juga ada kok, tapi aku lupa alamatnya, googling sendiri aja ya.. :P

Ngedit CSS dan HTML aku lakukan dengan menggunakan Notepad. Memang sih kalo pake FrontPage atau DreamWeaver bakalan banyak fasilitas yang membantu dan memudahkan. Tapi aku lebih suka pake Notepad yang sederhana aja. Diedit dan dirubah sana-sini, lalu untuk liat hasil tampilannya langsung buka aja di browser dari file yang disimpen lokal itu. Ada yang nggak cocok edit lagi, save, dan di browser tinggal direfresh untuk tahu hasilnya. Perlu dicatet juga, bahwa ngedit css dan html ini bukan cuma buat blognya aja, tapi juga untuk masing2 komponen tambahan dari blog, seperti shoutbox dan commenting-system yang kadang punya css dan html tersendiri... banyak bo'

Yang sering bikin keki adalah, nggak samanya tampilan layout kalo diliat pake browser yang berbeda. Yang aku tahu antara Internet Explorer dan FireFox, kadang tampilan yang muncul bisa beda. Di IE udah tampil bener, di FF malah pencolotan kesana kemari. Harus cari2 sendiri mana yang harus diubah agar bisa tampil dengan benar di kedua browser itu.

Aku sendiri belajar css baru2 aja. Belajarnya juga dengan proses tabrak langsung. Ngambil css yang udah jadi, rubah sana-sini untuk ngeliat apa pengaruhnya, sambil baca tutorial sepotong2. Hasilnya aku sering pusing sendiri, karena nggak belajar secara sistematis dari dasar. Masih suka bingung bedanya DIV ama P, bedanya CLASS dan ID, bedanya # dan "."... Tapi lama2 belajar sendiri dan otak-atik sendiri ya bisa paham juga pelan2.

5. Proses Spiral

Jarang sekali satu rancangan layout, sekali dibikin langsung jadi dan berhasil memuaskan. Kadang setelah sampai proses akhir ternyata ada yang nggak cocok sehingga harus balik lagi dari awal. Berputar dan berputar terus sampai akhirnya berada pada tahap yang... ya udahlah cukup memuaskan kok.

Seperti di proses bikin "Jore" layout ini. Awalnya gambar 3D di Max aku render dengan pencahayaan "spotlight", tapi ternyata di hasil akhirnya, gambar antara bagian atas, tengah dan bawah tidak bisa menyatu karena perbedaan titik cahaya. Aku harus balik lagi ke Max untuk merubah pencahayaan menjadi "directional light" yang lebih merata. Dirender lagi, dipotong2 lagi, muter deh.

Hingga pada proses ini, semuanya masih aku lakukan secara offline. Gambar2 dan file html masih tersimpan di komputer lokal. Biar proses loadingnya lebih cepat dan kalo ada perubahan gampang melakukannya.

6. Publish

Akhirnya, setelah semua tampilan dirasa sudah sempurna. Mulailah dilakukan persiapan untuk mengangkut semua perlengkapan layout tersebut ke internet. Semua potongan gambar di-upload satu2 ke server yang menyediakan diri sebagai tempat penyimpanan gambar seperti Photobucket atau Geocities. Aku pake geocities karena kayaknya proses download gambar di web lebih cepat daripada photobucket. Untuk layout "Jore" ada sekitar 9 potong gambar yang harus di-upload.

Setelah itu barulah template html dari layout ini di-upload ke blogger. Karena ini blognya orang lain, dan aku nggak punya hak untuk mengakses blognya, maka aku bikin aja sendiri blog baru untuk tempat percobaan. Dari sini pun kadang masih ada saja yang kurang dan salah, dan harus diutak-atik sana-sini. Setelah cocok semuanya, barulah template html ini aku kirim ke pemiliknya.

7. Nunggu Komentar

Selesai semuanya, terakhir nunggu aksi pemilik blog tersebut untuk me-launch layout barunya. Aku tinggal melihat hasilnya dan menunggu komentar..... :D