Slicing untuk Web Element dari Fireworks

Terkadang orang kurang memahami fungsi sebenarnya Fireworks, malah ada seorang web designer tidak tahu menau tentang Fireworks sama sekali. Memang kebanyakan design from scratch rata-rata menggunakan Photoshop, walaupun fungsi utamanya buka untuk web design dan fungsi-fungsi nya banyak yang tidak mendukung untuk slicing ke web elemen.

Disinilah salah satu keunggulan Fireworks, memudahkan kita untuk slicing elemen untuk web yang akan nanti di proses ke html. Artikel ini sebenarnya lanjutan dari artikel sebelumnya yang

Membuat Desain Template Blog

Boleh di lihat dlu biar ngerti langkahnya, atau mau langsung download yang udah jadinya disini.

Pertama kita akan konfigurasi shortcut di Fireworks agar memudahkan kita untuk menggunakannya. Di menu Edit > Crop Doxument, lihat jika belum mempunyai shortcut konfigurasi melalui Keyboard Shortcuts…

Di menu keyboard shortcuts, pilih add new shortcut, ketikkan shortcut Crtl+Shift+C. Lalu tekan Change.

Tekan OK. Akan muncul window Duplicate Set, masukkan nama sesui kehendak anda, klik OK.

Pada logo, klik lalu lakukan shortcut yang tadi dibuat (Ctrl+Shift+C).

Logo telah di crop, lalu hilangkan background atau jadikan transparan. Kemudian Save file. Setelah tersimpan Ctrl+Z ulangi terus sampai tampilan kembali seperti semula.

Lakukan hal tersebut hingga kita mendapatkan komponen-komponen yang kita butuhkan ada. Jika anda pernah membaca artikel saya tentang tehnik sprites disini ada beberapa icon yang harus kita buat sprites agar tidak terlalu memakan tempat dan load web.

Baik, jika kita sudah mendapatkan semuanya seperti yang saya dapatkan ini:

Satu masalah lagi, sebelum image ini siap produksi ada baiknya kita compress terlebih dahulu agar flat dan size lebih ringan dengan beberapa tools yang saya sarankan seperti:

• PNGGauntlet - Offline / Software
• PunyPNG – Online / Web Based

Baiklah, selesai. Dan kita akan ke tahap pembuatan template html. Tapi mungkin di lain tulisan saya selanjutnya