Sumber : http://inf.uajy.ac.id/~sigit/2006/04/20/gui-design-transparent-form/
Seringkali (bahkan setiap kali) pada saat kita membangun sebuah aplikasi atau menggunakannya, kita akan menemukan bahwa bentuk form yang kita buat atau lihat adalah standar yaitu segi empat (dengan nuansa Windows tentunya…). Bosankah Anda dengan bentuk form standar tersebut? Jika iya, sudah saatnya Anda mencoba untuk membuat form Anda menjadi tidak standar lagi bentuknya, alias lebih fancyl. Namun, jika Anda masih belum bosan, silahkan membuat form Anda tetap standar dan berikan sentuhan melalui pemilihan font, warna maupun penentuan layout yang proporsional dan menarik sehingga form Anda tetap bisa menjadi fancy.
Bagi Anda yang sudah bosan, saya akan mencoba memberikan sedikit tutorial tentang bagaimana membuat bentuk form kita menjadi tidak standar dan tentunya menjadi lebih menarik. Tools yang akan saya pakai ada 2, yaitu Adobe PhotoShop (Anda bisa pakai graphic design tools yang lain) untuk membuat image yang akan kita jadikan sebagai perwujudan dari bentuk form kita dan Microsoft Visual Studio .NET 2003 sebagai software development tools-nya.
Fisrt Step
Langkah pertama yang harus Anda lakukan adalah membuat image yang merupakan perwujudan dari bentuk form yang akan Anda buat. Yang harus Anda perhatikan pada langkah pertama ini adalah image yang Anda buat harus sesuai dengan konteks form atau aplikasinya. Jangan sampai image yang Anda buat sama sekali tidak ada hubungannya dengan aplikasi Anda. Misal Anda ingin membuat form splash screen untuk sistem informasi kepegawaian dan image yang Anda buat adalah bentuk segilima lengkap dengan logo Superman :p. Pada tutorial ini saya akan mencoba membuat form About untuk menampilkan informasi mengenai diri saya (sorry narsis dikit nih :p), so image yang saya buat dengan PhotoShop adalah seperti berikut:
Langkah pertama yang harus Anda lakukan adalah membuat image yang merupakan perwujudan dari bentuk form yang akan Anda buat. Yang harus Anda perhatikan pada langkah pertama ini adalah image yang Anda buat harus sesuai dengan konteks form atau aplikasinya. Jangan sampai image yang Anda buat sama sekali tidak ada hubungannya dengan aplikasi Anda. Misal Anda ingin membuat form splash screen untuk sistem informasi kepegawaian dan image yang Anda buat adalah bentuk segilima lengkap dengan logo Superman :p. Pada tutorial ini saya akan mencoba membuat form About untuk menampilkan informasi mengenai diri saya (sorry narsis dikit nih :p), so image yang saya buat dengan PhotoShop adalah seperti berikut:
Jangan lupa, atur latar belakang dari image yang Anda buat menjadi transparent dan simpan ke dalam format JPG atau PNG (web-safe format).
Next Step
Setelah Anda berhasil membuat image yang akan menjadi bentuk form Anda, langkah berikutnya adalah membuat project baru dengan tools Microsoft Visual Studio .NET. Pada tutorial ini saya memilih Visual C# Projects dengan templates Windows Application dan nama project GUIDesign.
Setelah Anda berhasil membuat image yang akan menjadi bentuk form Anda, langkah berikutnya adalah membuat project baru dengan tools Microsoft Visual Studio .NET. Pada tutorial ini saya memilih Visual C# Projects dengan templates Windows Application dan nama project GUIDesign.
Setelah kita masuk ke dalam worksheet Visual C#, maka akan ditampilkan sebuah form yang masih kosong. Silahkan diubah terlebih dahulu properti Name dan nama file-nya menjadi About. Jika sudah, maka langkah berikutnya adalah mengatur properti BackgroundImage dari form tersebut untuk memilih image yang telah kita buat pada langkah pertama. Caranya seperti pada image berikut:
Hasilnya bisa Anda lihat yaitu form akan berubah background-nya. Langkah berikutnya adalah me-resize ukuran form kita agar image kita bisa terlihat semua dengan sempurna. Pada langkah ini Anda harus teliti, karena jika tidak, maka bentuk form-nya akan menjadi tidak sempurna karena setting properti BackgroundImage pada form adalah tile seperti pada saat Anda mengatur setting wallpaper dekstop Anda, sehingga image kita akan ditampilkan berulang-ulang. Hasil akhir langkah ini adalah sebagai berikut:
Setelah langkah di atas selesai, hal berikutnya yang harus Anda lakukan adalah mengatur properti ControlBox form Anda menjadi False. Fungsi dari langkah ini adalah untuk menghilangkan ControlBox dari form Anda yang biasanya berisi judul form, tombol Minimize, Maximize dan Close. Cara dan hasilnya dapat Anda lihat pada imageberikut.
Jika Anda perhatikan hasil dari langkah di atas masih terlihat bingkai (border) dari form Anda. Bingkai atau border tersebut harus kita hilangkan sehingga hasilnya menjadi sempurna. Langkah yang harus Anda lakukan adalah dengan mengatur properti FormBorderStyle dari form Anda menjadi None. Cara dan hasilnya dapat Anda lihat pada image berikut:
Final Step
Langkah terakhir yang merupakan inti dari tutorial ini adalah membuat form Anda menjadi transparent sehingga bentuk form-nya nanti akan sesuai dengan image yang Anda buat. Caranya adalah dengan mengatur properti ForeColor dari form Anda menjadi Transparent. Nilai Transparent terdapat pada tab Web. Caranya sebagai berikut:
Langkah terakhir yang merupakan inti dari tutorial ini adalah membuat form Anda menjadi transparent sehingga bentuk form-nya nanti akan sesuai dengan image yang Anda buat. Caranya adalah dengan mengatur properti ForeColor dari form Anda menjadi Transparent. Nilai Transparent terdapat pada tab Web. Caranya sebagai berikut:
Jika sudah dilakukan, maka nanti form Anda pada saat dieksekusi akan menjadi transparent sehingga bentuknya sesuai dengan image yang Anda buat. Agar hasilnya dapat menjadi lebih sempurna, jangan lupa Anda atur agar form Anda ditampilkan di tengah layar monitor. Jika sudah, maka langkah terakhir adalah men-debug atau menjalankan aplikasi Anda dan hasilnya adalah sebagai berikut:
Selamat mencoba!
Read more: http://inf.uajy.ac.id/~sigit/2006/04/20/gui-design-transparent-form/#ixzz1tJsTdTZV
Tidak ada komentar:
Posting Komentar