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).

Pertamax-theme
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

Hasil imajinasi

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

Related posts:

  1. Tutorial: Membuat template WordPress (1) Siapapun yang punya blog dengan mesin WordPress tentunya ingin membuat...
  2. Tutorial: Membuat template WordPress(3) – Header Lanjut lagi. Setelah membahas masalah desain, kini kita berlanjut ke...
  3. Tutorial WordPress: Membuat daftar komentar lebih menarik Saya masih saja agak kesulitan untuk menulis tutorial baru tentang...
  4. Tutorial: Membuat 2 kolom sama tinggi tanpa bantuan image Perhatian: Tulisan ini sangat panjang. Lebih baik invite aan sebelum...
  5. Tutorial: Mengubah foto ke dalam bentuk vektor Tentunya sangat menyenangkan bila kita bisa mengubah semua photo diri...



Kategori:blog, tutorial



44 Responses

  1. sigit says:

    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)…

  2. Pujiono says:

    whack… gue jadi penikmat theme sajah.

  3. Yogi says:

    Om didats dicainnya keyen banget lho.. :D
    *kabur*

  4. Yogi says:

    What? Fireworks?? Pasti memorinya kecil ya?? Wakakakka :D
    *kabur lagi*

  5. didats says:

    #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?*

  6. sigit says:

    oke deh… emang penting misah antara desain dan coding…

    thanks penjelasannya untuk yang div wrap…
    aku ngerti kok, so jangan khawatir hihihi :-P

  7. Jauhari says:

    Apakah Firework adalah satu satunya OPSI? ada alasan kenapa?

  8. anima says:

    * trus kapan mo di launch bli? *

    kalo tutorialnya dah selesai dong :D
    kn masih belajar~

  9. Rinnie says:

    *garuk-garuk kepala*

  10. dental says:

    I see changes of your style lately :D
    comes up with Verdana, Prototype JS up there, Glass effect on your logo. Nice progress.

  11. Iang says:

    inkscape keren :)

    btw ini kok tulisannya jadi sama kaya latar belakang? skrinsut http://img218.imageshack.us/img218/5092/didat6hb.png

  12. saylow says:

    huaaaahheeemmmmm… (tidak ada yang baru) *JUMAWA

  13. yuli says:

    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

  14. didats says:

    #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…

  15. Iang says:

    nah ini baru bener.. emang masih pake css yg lama.. *baru ripres kes*
    makanya ganti file kalo ganti css :P direktorinya deh ganti

  16. sidikManjur says:

    Boy….kenapa ngak mencoba buat buku aja sih.
    Sidik orang pertama deh yang bakal order bukunya.

  17. sunday says:

    More!!..more!!..

    Cepetan bikin bagian ke tiganya..

    *lagi semangat belajar CSS* :D

  18. Kalong's says:

    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.

  19. wanda says:

    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…

  20. didats says:

    #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

  21. Tina says:

    Dats, kenapa ga dibikin di format pdf yang bisa langsung di download? Aku mau download juga.. hehe..

    Ayo terusinnya jangan lama2 yakk.. ditunggu..

  22. firman says:

    ganti nih layoutnya, meski masih dengan aroma sama. saya jg lagi demen CSS. kayaknya koding lebih menarik ketimbang desain, hehehe…

  23. Keren euy tutorialnya…

  24. ShOFa says:

    hiks.. teuteup wee ga ngerti :(

  25. isdah says:

    gw lebih mantaf pake Gimp… suka gag suka urusan lo… firework gag gratis… liat signature bunda jms… “be legal” :P

  26. Kalo liat gelagatnya sih.., Didats pake Fireworks gara2 make SLICE-nya gampang ‘n enak ya ?

  27. Herbi says:

    .. Nggak ngerti oom, tapi bagus juga buat nambah referensi

  28. noize says:

    Oom, kalo buat themes yg unik gimana?
    Btw, thanks buat tutorial edisi keduanya….

  29. Desain Blog says:

    contek..contek…pelan2 ya ngajarinnya :D

  30. fitta says:

    No comment-lah. Fitta SpeechLess kalo liat desain2 bagus. (sambil mgamati sekeliling melihat desain yg..ck..ck.ck)

  31. Daniel says:

    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…

  32. Sip.. bagus… untuk mulai belajar… meski tetepa bingung harus mulai dari mana?

  33. Prayoga says:

    Sumpah, setelah web blog saya jadi, saya kasih link tutorial ini di web saya. Ciamik soro soalnya..

  34. Anak Medan says:

    Sip, penjeleasannya pas banget… ngedetail dan gak seronok…
    *ups..

  35. wahyuni says:

    mana nih lanjutannya……

  36. m1qbal says:

    ingin berguru membuat template…boleh..???

  37. grandika says:

    waduh hebat nih

  38. dizzyChan says:

    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

  39. 2FuN says:

    Saya pelajari dulu ya mas. Nanti klo saya ada pertanyaan saya pasti tanya…
    hehehe

  40. kaDaL_emO says:

    Terima kasih atas tutorialnya……

    mas saya baru pemula,jadi nanti kalau banyak tanya harap bantuannya ya………..

    n_n.

  41. Giet says:

    Ok banget neh tutorial, kapan n dimana ya tutorial lanjutannya, tenks bos

  42. shidiq says:

    Sip banget nih tutorialnya, tengkyu

  43. Basrul says:

    Wah, harus belajar lebih banyak niiiih. Pengen banget bisa…..

  44. sip lah buat bos didat
    Artikelnya saya kopas bos, tapi jgn takut sya tetap nyatumin link nya