Photoshop to Expression Blend

Photoshop, tool desain keluaran Adobe yang udah sering banget kita denger. Desainer biasanya pasti jagoan banget make Photoshop. Saya pribadi, dalam membuat desain aplikasi, seneng ngedesain pake Photoshop sebelum saya transformasikan ke dalam form aplikasi. Tapi biasanya apa yang udah saya bikin keren-keren di Photoshop jadinya biasa aja di form aplikasinya (biasanya desain keren ngga bisa diulang dua kali, hehe). Nah, untungnya, Microsoft Expression Blend memungkinkan kita untuk meng-import file psd langsung ke XAML pada aplikasi Silverlight atau WPF kita. Disupportnya file psd ini merupakan bagian dari interoperability Microsoft yang sekarang semakin gencarnya. Oke, mari kita cobain..

Pertama, sediakan dulu file photoshop yang akan kita import. Sebelum diimport ke XAML, sebaiknya susun dulu layer-layer dalam photoshop dengan rapi. Beri nama yang jelas untuk setiap layer. Misalkan, gambar tombol berilah nama “MyButton” atau nama apapun yang sesuai dengan fungsi layer itu nantinya. Pastikan juga kamu udah menggabung (merge) setiap komponen yang akan jadi satu. Misalnya buletan tombol dan teks diatas tombolnya usah disatuin dalam satu layer. Tujuan me-merge komponen itu adalah supaya waktu nanti diimport ke Expression Blend udah dalam kondisi rapi dan siap pakai. Oke, kalo sudah rapi layer-layernya, langsung aja save jadi file psd.

Sekarang kita pindah ke Expression Blend. Buat project baru, bisa Silverlight, bisa WPF, tapi kali ini biar seragam, kita cobain aja WPF Application dulu. Setelah project terbentuk, pastikan MainPage.xaml yang menjadi halaman utama kita dalam keadaan aktif. Supaya nanti import photoshopnya rapi, sesuaikan dulu ukuran MainPage.xaml sesuai dengan ukuran file psd yang udah kita bikin. Sekarang bagian magic-nya..

Klik File->Import Adobe Photoshop File, dan browse file psd yang akan kita import. Setelah dipilih, akan muncul window baru. Nah, keliatan kan di situ, layer-layer yang udah kita bikin di photoshop. Kita bisa pilih semua atau beberapa layer aja yang mau diimport. Kalau udah sesuai, tekan OK dan BOOM jadilah sudah user interface XAML kita. Tapi tunggu dulu, button yang udah kita bikin belom bisa langsung dipake karena bentuknya masih berupa image. Kita harus bikin dia jadi button yang sebenar-benarnya button..

Klik aja ke gambar tombol yang akan kita jadikan button. Klik kanan pada gambar tombol, lalu pilih Make into control. Nah, akan muncul window macem-macem control yang bisa kita assign ke gambar tombol tadi. Pilih “Button” dan klik OK, maka sekarang gambar kita udah bisa dipakai sebagai button. Ulangi proses tersebut ke komponen-komponen lain dalam user interface kita.

Gimana, seru kan, ngedesain di Photoshop dan langsung disulap jadi user interface keren di Expression Blend?

-- Koding Sambil Ngopi --
-- Farhad Alaydrus --