Web instan menggunakan Slice Tool Photoshop

Dalam membuat website tahapan yang umum biasanya dimulai dari draft layout, desain layout, setelah itu coding dengan wysiwyg editor.

Akan repot bila kita membuat project dengan tengat waktu yang sangat kecil, apalagi dengan desain yang Kompleks, proses cropping - save akan memakan waktu yang sangat lama. Belum lagi yang menggunakan teknik layout css atau table secara manual, akan sangat memakan waktu

Tapi ada cara lebih cepat (instan) bagi para Web designer..

lansung saja , pertama buat desain layout dengan photoshop



Kemudian, pilih display ruler (ctrl+r), drag line dari ruler. pisahkan header,menu content, dan footer. Klik crop tool- pilih slice tool. Tandai setiap bagian header,menu content, dan footer dengan slice tool. seperti dibawah ini :



Pilih File > Save For Web & Device .. akan muncul window seperti dibawah ini, tentukan ekstensi file yang akan digunakan.




Save kemudian pilih save as type HTML and Images simpan dengan nama test-slice.html



Setelah di save setelah otomatis photoshop akan mengenerate images dan dan kode html pada folder tempat file tersebut disimpan. Hasil di browser akan sama persis dengan desain.

Dengan teknik ini, hanya dalam waktu kurang dari 3 menit saya sudah bisa membuat halaman website saya beserta kodenya. (^^)

Untuk membuat agar content, header, menu dan foooter dapat di masukan teks dll. cukup mengganti gambar pada tag img menjadi background pada tag td/tr dan sesuaikan width dan heightnya dengan layout.

Hal yang sama juga dilakukan untuk spacer. Selamat Mencoba.