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:
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 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 image berikut.
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:
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!
Download File: GUI Design Episode #1: Transparent Form.
April 26th, 2006 at 1:50 pm
Untuk ajang tutor bagus sekali, cuma kalo bisa dibuat page yang baru untuk ajang diskusi dalam hal pemrograman baik C, java, VB.NET, dll. And kalo bisa tutornya diupdate terusnya pak, biar kami-kami bisa belajar lebih banyak mengenai pemrograman selain lewat waktu perkuliahan.
Thanx
April 27th, 2006 at 8:56 am
OK deh, nanti kalau ada topik yang bisa saya jadikan tutorial saya posting di sini.
Btw, klo ada usulan topik tutorial silahkan Anda sampaikan saja. Nanti saya usahakan tuk membuatnya.
May 10th, 2006 at 1:37 pm
Gimana kalo dibuka diskusi forum untuk tukar pikiran mengenai Desain Grafis, Web Programming, dan Windows Application….
Soalnya forum inf kita sudah gak bs diharapin untuk bertukar pikiran ato sejenisnya, yang ada hanya caci maki dan argumentasi yang gak enak didengar belaka.
Trims.
May 10th, 2006 at 1:47 pm
terima kasih atas usulannya… secepatnya akan segera saya realisasikan…
June 28th, 2006 at 11:30 am
Pak usul neh..bikin tutorial yang coding jaringan juga dong. Seperti CHAT yang di buat di PI ato P2P application.Tapi mulai dari yang simpel2 dulu ya pak.
Socket Programming ternyata asyik juga, meskipun mikirin kodenya aja lama banget ngertinya.
thx
September 13th, 2006 at 4:39 am
setuju!!! saya setuju juga kalo ada forum design grafis, apalagi yang tentang bikin vector image kaya punya pak sigit! hwehehehe… kan mau curi2 ilmu gitu… ^^
December 1st, 2006 at 1:41 am
Pak, gimana konsep design dan layout form maupun tombol yang standar di dalam pembuatan aplikasi atau software kantoran.
December 2nd, 2006 at 9:28 pm
wah pak.sebelumnya lam kenal nih..saya mahasiswa CEP-CCIT FTUI angk 2005
hemppp trnyata klo teknik regioning di vb.net tinggal seting sana sini yah pak
thx atas infoya
klo di vb6 harus pake region API gdi32
December 8th, 2006 at 5:11 am
#@nto dan #enji: ok… ntar saya coba buat tutorialnya… sabar ya :p
#boeneo: konsep design dan layout form maupun tombol yang standar di dalam pembuatan aplikasi atau software kantoran biasanya mengacu pada corporate application style guide… klo kantornya blm punya dokumen itu, so kita bisa buat sendiri tp menyesuaikan dengan nuansa warna dari logo kantor tersebut, trus mengenai bentuknya berarti kemungkinan besar harus formal, kecuali perusahaannya nggak begitu formal…
#arizane: salam kenal juga, btw di .NET ada juga kok GDI32…
December 18th, 2006 at 3:51 am
pak tutorial java ada ga pak….??? mhs FTI
December 18th, 2006 at 4:29 am
#krisna: wah, klo untuk yang Java belum… saya rencana mo buat tp untuk yang mobile device…
December 27th, 2006 at 2:36 am
maaf pak saya baru pemula di design web….
apa ada tutorial untuk design web menggunakan asp untuk pemula…
ato mungkin ada panduan book yang lengkap dengan cd. mohon infonya
January 2nd, 2007 at 3:23 am
#tiyo: setau saya asp lebih cenderung digunakan untuk web development dari sisi server side (seperti php, asp.net) & bukan untuk design web… klo ingin belajar design web coba pelajari xhtml dan css… btw, untuk bukunya sepertinya terbitan Elex sdh ada…
January 16th, 2007 at 10:20 am
Wah tutorial yang saya cari nich…
Terima kasih. saya tunggu kelanjutannya
Oya…kalau bisa tutorial yang buat VB 6.0 dong soalnya baru belajar
(Maaf masih pakai VB 6.0 belum Vb.NET)
January 16th, 2007 at 1:58 pm
mas sigit, mau tanya nih !
punya tutorial lengkap tentang basic VB.NET nggak ?
soalnya saya sangat asing sekali dengan VB.NET, padahal di kampus harus pake itu. Atau mungkin punya link yang bagus.
makasih.
January 17th, 2007 at 2:40 am
#agus, #rev: klo untuk tutorial dan contoh-contoh program dengan VB bisa dilihat di Planet Source Code… trus untuk VB.NET coba ke VB.NET Heaven atau VB.NET Indonesia
April 19th, 2007 at 2:57 pm
pak, mau tanya nih…
saya senang dan terbiasa dengan pemrogramman terstruktur, apakah bentuk terstruktur masi bagus di dunia pemrogramman? atau sudah tidak banyak lagi yang pakai?
kapan harus pakai yang tersruktur, dan kapan pakai OO? bahkan sekarang ada yang Component Oriented kan?
-vip-
June 13th, 2007 at 12:56 pm
wah untuk tutorialnya lumayan bagus pa….
klo bisa ada juga dunk tutorial sejenis untuk vb
masalahnya saya penggemar vb 6.
oh y untuk masukan saja, gmn kalo ada rubrik buat
sharing..y masalah kuliah…tugas..asal jgn berbau sara..
hanya usul sech pa
thanx
^kodok
June 15th, 2007 at 2:04 am
untuk tutorial transparant form apa bisa di jalankan di vb .net ataukah hanya di c#.
saya pernah mencoba di vb .NET tapi form tidak dapat di transparantkan. thanx
June 15th, 2007 at 3:27 am
#vidyaputra: kalau menurut saya, sekarang sudah saatnya kita beralih ke OO, alasannya apa sudah diajarin di kuliah kan? hehehe…:p
#blueboy: kalau untuk VB (Visual Studio 6) biasanya harus pakai teknik khusus dan tidak semudah itu… di Internet sudah ada beberapa contoh code-nya tp saya lupa URL-nya…
#eries hermanto: seharusnya di VB.NET juga bisa, mungkin ada yang kelupaan atau format image-nya…
September 25th, 2007 at 5:33 pm
pak mau tanya nih, saya sudah coba praktekin tutor nya .
tapi gambar latarnya yang seharusnya transparan kok setelah saya buka explore dan saya minimize explorenya tampilan latarnya menjadi seperti gambanr yang ada di explore yang saya minimize ? apakah saya yang salah mengeditnya atau memang dari sananya begitu ?
makasih Pak sebelumnya..
April 12th, 2008 at 1:06 pm
ga bisa tuh pak…saya dah coba n gbrnya dah transparan tapi ga bisa…saya dah test klo itu gambar saya jadiin picture box bisa transparan terhadap formnya tapi klo jadi background form yg spt bapak kasi tau koq ga bisa yah…saya butuh neh pak soalnya lagi buat skripsi…thx…
April 15th, 2008 at 1:48 pm
#ken:
form captionnya sudah dikosongin blm?
July 18th, 2008 at 2:39 pm
Setahu saya kalo properti ControlBox form dirubah menjadi False, maka form tersebut tidak bisa dipindah menggunakan mouse. Mohon bantuan bagaimana cara mengatasinya, soalnya saya dulu pernah membaca buku yang membahas tentang masalah saya ini, tapi saya lupa judul bukunya.
July 18th, 2008 at 3:38 pm
#dana:
hmmm… sejauh yang saya tau, memang kalau ControlBox-nya False form tidak bisa dipindah menggunakan mouse
untuk solusinya saya juga belum tau… sorry
December 1st, 2008 at 8:59 am
mas mw naya gimana cara memotong image,misal *.bmp yang bergambar 2564,yg sy maksu memotong angka-angka tersebut,makasih sblmnya
December 1st, 2008 at 4:01 pm
@ruri:
mungkin bisa dilakukan dengan menggunakan algoritma image processing (misal deteksi tepi)… coba search di Google dengan keyword image processing…
December 25th, 2008 at 12:50 pm
Mas bgm cara buat desain seperti http://blog.gooddesignweb.com/archives/91 .Minimal cara membuat kolom posting & sidebarnya semi transparant.Tlg jwbnya di cc ke email ya.TK
January 9th, 2009 at 3:07 pm
@dhyan:
setelah saya lihat Web-nya, efek transparent-nya berasal dari gambar background-nya (http://blog.gooddesignweb.com/wp-content/themes/Infinity-theme/images/topback.jpg) dan file background lainnya untuk setiap DIV… jadi kita tinggal buat gambar desain/layout (bisa pakai Fireworks/PhotoShop) yang memiliki karakteristik seperti di situs tersebut kemudian kita jadikan background…
btw, ini ada sedikit tips dari saya:
kalau ingin melihat “dapur” desain web suatu situs, save aja halaman Website yang kita ingin lihat “dapur”nya dari Web browser ke harddisk, kemudian kita pelajari file-filenya… kalau ada file yang belum ikut ke-save, kita buka saja file style.css (biasanya) atau file html-nya, nah dari situ kita cari lokasi gambar2 yang tidak muncul kemudian kita download dengan memperhatikan URL/lokasinya… nah, kita jadi tau deh “dapur”nya…
January 23rd, 2009 at 3:52 pm
He…he…he… pak saya mau tanya tentang blog neh, maklum baru belajar pake wordpress
maklum tuntutan jaman. Gimana caranya bikin blog wordpress gratisan kita banyak menampilkan foto atau galeri foto gitu deh kata lainnya. mohon bimbingannya, maklum klo yang di i-net terlalu rumit bagi saya 
. makasih ya Pak. GBu.
January 26th, 2009 at 1:49 pm
@Tinoes:
coba install/activate plugin NextGen Gallery…
February 5th, 2009 at 9:35 am
Cara Instalnya gimana pak? Untuk software FileZilanya saya sudah ada cuma saya blom coba instal soalnya di kantor kayaknya di blok deh pak. Boleh minta langkah praktisnya nda pak? Thanx a lot. GBu
February 5th, 2009 at 9:46 am
@Tinoes:
coba cek di menu Plugins, kemudian lihat plugins apa saja yang sudah disediakan oleh WordPress… nah kalau ada Plugins NextGen Gallery atau plugins lainnya untuk galeri foto, cek apakah sudah di Activate atau belum… kalau belum berarti tinggal Actiavate aja…
February 9th, 2009 at 4:01 pm
Waduh… klo mo liat menu pluginsnya dimana pak? apakah versi wordpress berpengaruh dengan menu built in-nya? BTW saya blom pake wordpress 2.7 yang terbaru pak, saya masih pake wordpress yang lama deh sepertinya soalnya beda tuh menunya
. Mohon bimbingannya ya pak 
. Trims Pak Sigit. GBu
February 9th, 2009 at 4:50 pm
@Tinoes:
coba di cek di Menu Manage trus pilih Plugins…
July 17th, 2009 at 3:39 pm
Postingan yang bagus untuk desain grafis, cuma untuk efisiensi memory, metode ini sangat tidak cocok, karena memperbesar ukuran aplikasi. sebaiknya kita sendiri yang membuat form dengan memanfaatkan API. tutorial dan contoh coding program menggunakan API ada di http://www.codeproject.com
July 26th, 2009 at 9:01 pm
Oke Lumayan
December 22nd, 2009 at 2:41 am
kok cuman gitu thok…??
yang ubah bentuk desain dari form ada pa gak??
mksudnya ubah dari bentuk yg standar yaitu KOTAK jadi bentuk yang kita inginkan.
January 15th, 2010 at 3:18 pm
@Bodit:
kamuflase agar tidak keliatan kotak dapat dilakukan dengan membuat desain form sendiri yang tidak kotak lalu dijadikan background seperti pada tutorial di atas… bentuk formnya kan sudah tidak kotak…