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

No related posts.

Kategori: blog, tutorial

 

44

Komentar

Gravatar
 

sigit @04.07.2006

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

 
 
Gravatar
 

Pujiono @04.07.2006

whack… gue jadi penikmat theme sajah.

 
 
Gravatar
 

Yogi @04.07.2006

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

 
 
Gravatar
 

Yogi @04.07.2006

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

 
 
Gravatar
 

didats @04.07.2006

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

 
 
Gravatar
 

sigit @04.07.2006

oke deh… emang penting misah antara desain dan coding…

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

 
 
Gravatar
 

Jauhari @04.07.2006

Apakah Firework adalah satu satunya OPSI? ada alasan kenapa?

 
 
Gravatar
 

anima @04.07.2006

* trus kapan mo di launch bli? *

kalo tutorialnya dah selesai dong :D
kn masih belajar~

 
 
Gravatar
 

Rinnie @05.07.2006

*garuk-garuk kepala*

 
 
Gravatar
 

dental @05.07.2006

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

 
 
Gravatar
 

Iang @05.07.2006

inkscape keren :)

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

 
 
Gravatar
 

saylow @05.07.2006

huaaaahheeemmmmm… (tidak ada yang baru) *JUMAWA

 
 
Gravatar
 

yuli @05.07.2006

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

 
 
Gravatar
 

didats @05.07.2006

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

 
 
Gravatar
 

Iang @05.07.2006

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

 
 
Gravatar
 

sidikManjur @05.07.2006

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

 
 
Gravatar
 

sunday @05.07.2006

More!!..more!!..

Cepetan bikin bagian ke tiganya..

*lagi semangat belajar CSS* :D

 
 
Gravatar
 

Kalong's @05.07.2006

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.

 
 
Gravatar
 

wanda @05.07.2006

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…

 
 
Gravatar
 

didats @05.07.2006

#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

 
 
Gravatar
 

Tina @06.07.2006

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

Ayo terusinnya jangan lama2 yakk.. ditunggu..

 
 
Gravatar
 

firman @06.07.2006

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

 
 
Gravatar
 

KampungBlog.com @06.07.2006

Keren euy tutorialnya…

 
 
Gravatar
 

ShOFa @06.07.2006

hiks.. teuteup wee ga ngerti :(

 
 
Gravatar
 

isdah @06.07.2006

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

 
 
Gravatar
 

Charly Silaban @06.07.2006

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

 
 
Gravatar
 

Herbi @06.07.2006

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

 
 
Gravatar
 

noize @06.07.2006

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

 
 
Gravatar
 

Desain Blog @12.07.2006

contek..contek…pelan2 ya ngajarinnya :D

 
 
Gravatar
 

fitta @25.07.2006

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

 
 
Gravatar
 

Daniel @07.10.2006

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…

 
 
Gravatar
 

Ahmad Daniyal @05.11.2006

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

 
 
Gravatar
 

Prayoga @11.11.2007

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

 
 
Gravatar
 

Anak Medan @28.02.2008

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

 
 
Gravatar
 

wahyuni @04.03.2008

mana nih lanjutannya……

 
 
Gravatar
 

m1qbal @08.03.2008

ingin berguru membuat template…boleh..???

 
 
Gravatar
 

grandika @11.03.2008

waduh hebat nih

 
 
Gravatar
 

dizzyChan @22.03.2008

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

 
 
Gravatar
 

2FuN @27.04.2008

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

 
 
Gravatar
 

kaDaL_emO @03.07.2008

Terima kasih atas tutorialnya……

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

n_n.

 
 
Gravatar
 

Giet @14.11.2008

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

 
 
Gravatar
 

shidiq @18.12.2008

Sip banget nih tutorialnya, tengkyu

 
 
Gravatar
 

Basrul @10.02.2009

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

 
 
Gravatar
 

nadasumbang.com @18.02.2009

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

 
 

Maaf, form komentar saya tutup. Jika ada pertanyaan atau pendapat, langsung saja ke halaman kontak.