blog, tutorial
Tutorial: Membuat template wordpress (2) - Desain template
July 4th, 2006
Yeah, akhirnya tutorial bagian pertama dilanjutkan. Dari beberapa komentar dan pertanyaan-pertanyaan yang telah masuk, ternyata masih ada yang belum mengerti beberapa bagian. Perlu diketahui, tutorial lalu hanya berbentuk intro saja. Jadi, masih bisa sedikit ditolerir.
Membuat desain
Seperti pada bagian yang lalu, langkah pertama sebelum membuat template adalah desain. Bagian ini sebenarnya juga bisa di lewati untuk anda yang punya daya imajinasi kuat. Tapi tidak semua orang mempunyai kelebihan ini, maka dari itu desain itu penting. Entah nantinya di tengah jalan mungkin akan keluar opsi-opsi lain.
Untuk membuat desain, aku biasa menggunakan Macromedia Fireworks. Pemilihan Fireworks sebagai software juga bukan sembarangan, karena Fireworks lebih enteng dibanding Photoshop dan lebih mudah menggunakan Fireworks. Apa? Gimp? Gimp sucks! :D
Beberapa hal yang harus diperhatikan sebelum desain
- Keahlian anda dengan desain cetak jangan pernah dibanggakan.
Banyak perbedaan yang mencolok antara desain cetak dan desain web. Karena desain web harus mengenal usability, keterbatasan pemakaian jenis huruf, keterbatasan menggunakan image, dan hal lain. - Desain akan lebih baik dibuat untuk pemakai resolusi 800×600 ke atas.
Itu berarti, lebar maksimal dari desain adalah 760 piksel. Kecuali anda menggunakan teknik liquid. - Font yang akan kita pakai sangat terbatas, untuk menghindari penggunaan image nantinya.
Beberapa font yang bisa kita pakai Arial, Georgia, Lucida, Tahoma, Trebuchet dan Verdana. CMIIW.
Di bawah ini adalah desain yang sangat sederhana. Tanpa image (kecuali icon), dan hanya menggunakan struktur div yang kuat di bagian atas. Untuk melihat detilnya, bisa anda buka di Macromedia Fireworks (File PNG).
Download File PNG yang bisa di buka di Fireworks
Mohon maaf,aku tidak menerangkan masalah desain dengan sangat detil di sini. Tapi dari contoh file yang aku buat, rasanya sudah cukup mewakili. Kalau tidak, ya minta maaf lagi… :D
Mutilasi desain
Pada langkah berikutnya setelah membuat desain adalah memotong-motong desain menjadi gambar-gambar kecil. Tapi dilihat dari desain yang telah dibuat, rasanya kita tidak perlu memotong-motong gambar. Ndak ada gambar toh? Yang kita perlukan adalah berimajinasi bagaimana bentuk div nantinya.
Dan inilah hasil imajinasiku. Jika ada imajinasi lain, silahkan di-share
Oke, sampai disini dulu tutorial bagian kedua. Bagian berikutnya akan kita bahas bagaimana memutilasi ke dalam kode HTML, setelah itu baru kita bisa mengaplikasikan ke dalam template Wordpress. Dikit lagi selesai? kayaknya masih panjang… :D
Oh iya, selamat belajar Fireworks… :D
Daftar sekarang juga untuk cara gampang dapat uang lewat blog
seep… tp tanggung nih… kenapa gak langsung diselesaiin tutorialnya :-(
btw, sebenarnya aku ada beberapa pertanyaan, tp kalau yang terkait dengan tutorial ini mo tanya satu aja deh…
* apa ada perbedaan signifikan antara penggunaan div wrap untuk setiap bagian dengan yang tidak (red:misal, langsung ke div header tanpa ada wrap_header)…