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
44 Responses
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)…
whack… gue jadi penikmat theme sajah.
Om didats dicainnya keyen banget lho.. :D
*kabur*
What? Fireworks?? Pasti memorinya kecil ya?? Wakakakka :D
*kabur lagi*
#1 hehehe… tanggung yak? emang sih, tapi takut kecampur antara design dengan coding nantinya. makanya dipisahin… :D
pertanyaan: “apa ada perbedaan signifikan antara penggunaan div wrap untuk setiap bagian dengan yang tidak”.
jawab:
tidak akan menjadi masalah bila kita menggunakan image untuk bagian menu dah header. tinggal taruh di body image-nya, trus ga perlu lagi pake wrap_header dan wrap_menu.
yg jadi masalah, kita menggunakan div dengan solid color. div pertama lebarnya 100% dan div di dalamnya, lebarnya 700px. jadi harus di bedakan.
eh, ngerti gag? :P
#3,#4 heh? kata siapa? perlu di kopi paste neh spek komputerku? :P
aku aslinya kan bukan orang desain. cuma koding. nah, aku ga suka dengan komputer yg lelet. buktinya, aku ga pasang anti virus! virus ada karena terdeteksi anti virus! :))
*loh?*
oke deh… emang penting misah antara desain dan coding…
thanks penjelasannya untuk yang div wrap…
aku ngerti kok, so jangan khawatir hihihi :-P
Apakah Firework adalah satu satunya OPSI? ada alasan kenapa?
* trus kapan mo di launch bli? *
kalo tutorialnya dah selesai dong :D
kn masih belajar~
*garuk-garuk kepala*
I see changes of your style lately :D
comes up with Verdana, Prototype JS up there, Glass effect on your logo. Nice progress.
inkscape keren :)
btw ini kok tulisannya jadi sama kaya latar belakang? skrinsut http://img218.imageshack.us/img218/5092/didat6hb.png
huaaaahheeemmmmm… (tidak ada yang baru) *JUMAWA
beberapa waktu yg lalu berkunjung, ternyata skrg sdh ganti theme lagi :D .. Waah, si yogi mejeng jg di sini :P
ditunggu tutorial berikutnya, kebetulan sekarang jg lagi belajar wordpress.. thanks
#7 bukan satu-satunya opsi, tapi yang jelas, yang biasa aku pakai.
alasannya? lebih mudah menggunakan efek2nya dibanding photoshop. dan penggunaan memorinya lebih sedikit dibanding potosop.
#9 makanya, gajian itu beli sampo… jgn beli buku… ketombe masih banyak noh. dari sini aja keliatan… :))
*ngumpet*
#10 biar jago kaya pakde dental… ini juga masih belajar kok pakde… :P
#11 kayaknya itu masih pake css yg lama deh. cache-nya coba di apus…
nah ini baru bener.. emang masih pake css yg lama.. *baru ripres kes*
makanya ganti file kalo ganti css :P direktorinya deh ganti
Boy….kenapa ngak mencoba buat buku aja sih.
Sidik orang pertama deh yang bakal order bukunya.
More!!..more!!..
Cepetan bikin bagian ke tiganya..
*lagi semangat belajar CSS* :D
wah..wah, kebetulan bgt bli. Baru juga nginstall wordpress tuh bwt domain web.id sayah… cepet dilanjutin lah bli, biar udah ga ada note: Under Construction lagi tuh.
asiiik.. ditunggu kelanjutannya yaa.. masih baru kenal nih sama wordpress, masih bolot soal edit2 php nya, nanti tutorialnya sampai bahas bongkar php juga kan? thank uuu…
#13 si yogi lagi plerting2 hihihi… :D
#15 ya deh, ntar tiap ganti musti ganti pail…
#16 tenang boy, lagi direncanain… :D
#19 hahaha… php kok dibongkar… kayaknya gak deh. secara aku cuma ngasih tau cara bikin template doang… :D
Dats, kenapa ga dibikin di format pdf yang bisa langsung di download? Aku mau download juga.. hehe..
Ayo terusinnya jangan lama2 yakk.. ditunggu..
ganti nih layoutnya, meski masih dengan aroma sama. saya jg lagi demen CSS. kayaknya koding lebih menarik ketimbang desain, hehehe…
Keren euy tutorialnya…
hiks.. teuteup wee ga ngerti :(
gw lebih mantaf pake Gimp… suka gag suka urusan lo… firework gag gratis… liat signature bunda jms… “be legal” :P
Kalo liat gelagatnya sih.., Didats pake Fireworks gara2 make SLICE-nya gampang ‘n enak ya ?
.. Nggak ngerti oom, tapi bagus juga buat nambah referensi
Oom, kalo buat themes yg unik gimana?
Btw, thanks buat tutorial edisi keduanya….
contek..contek…pelan2 ya ngajarinnya :D
No comment-lah. Fitta SpeechLess kalo liat desain2 bagus. (sambil mgamati sekeliling melihat desain yg..ck..ck.ck)
ready to download fireworks… dah lama pengen belajar yang satu ini tapi gak kecapaian sampe sekarang gara2 HD abis hehehe… selama ini sih kalo untuk slice dsb cuma pake photoshop…
Sip.. bagus… untuk mulai belajar… meski tetepa bingung harus mulai dari mana?
Sumpah, setelah web blog saya jadi, saya kasih link tutorial ini di web saya. Ciamik soro soalnya..
Sip, penjeleasannya pas banget… ngedetail dan gak seronok…
*ups..
mana nih lanjutannya……
ingin berguru membuat template…boleh..???
waduh hebat nih
Dooh mas didats,nanggung amat.Diterusin dung.Best part-nyah kan pas mutilasi kode.Hayo mas buruan disambung.Sekalian cara upload desain ya *uda minta tolong..maksa lg hehe* Thanks
Saya pelajari dulu ya mas. Nanti klo saya ada pertanyaan saya pasti tanya…
hehehe
Terima kasih atas tutorialnya……
mas saya baru pemula,jadi nanti kalau banyak tanya harap bantuannya ya………..
n_n.
Ok banget neh tutorial, kapan n dimana ya tutorial lanjutannya, tenks bos
Sip banget nih tutorialnya, tengkyu
Wah, harus belajar lebih banyak niiiih. Pengen banget bisa…..
sip lah buat bos didat
Artikelnya saya kopas bos, tapi jgn takut sya tetap nyatumin link nya