Sigit Purnomo

GUI Design: Transparent Form

Posted: April 20th 2006

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:

My About Image

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.

C# New Project

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:

Form Properties: Background Image

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:

Result for Background Image

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.

Form Properties: Control Box

Control Box Result

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:

Form Properties: Border Style

Border Style Result

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:

Form Properties: ForeColor

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:

Final Result

Selamat mencoba!

Download File: GUI Design Episode #1: Transparent Form.


39 responses to “GUI Design: Transparent Form”

  1. 43r1 says:

    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
    🙂

  2. y_sigit_p says:

    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.

  3. Ivan says:

    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.

  4. y_sigit_p says:

    terima kasih atas usulannya… secepatnya akan segera saya realisasikan…

  5. @nto says:

    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

  6. enji says:

    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… ^^

  7. Boeneo says:

    Pak, gimana konsep design dan layout form maupun tombol yang standar di dalam pembuatan aplikasi atau software kantoran.

  8. Arizane says:

    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

  9. y_sigit_p says:

    #@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…

  10. krisna says:

    pak tutorial java ada ga pak….??? mhs FTI

  11. y_sigit_p says:

    #krisna: wah, klo untuk yang Java belum… saya rencana mo buat tp untuk yang mobile device…

  12. tiyo says:

    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

  13. y_sigit_p says:

    #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…

  14. agus says:

    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)

  15. rev says:

    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.

  16. y_sigit_p says:

    #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

  17. vidyaputra says:

    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-

  18. blueboy says:

    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

  19. eries hermanto says:

    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

  20. y_sigit_p says:

    #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…

  21. suryanto says:

    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..

  22. ken says:

    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…

  23. y_sigit_p says:

    #ken:
    form captionnya sudah dikosongin blm?

  24. dana says:

    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.

  25. y_sigit_p says:

    #dana:
    hmmm… sejauh yang saya tau, memang kalau ControlBox-nya False form tidak bisa dipindah menggunakan mouse
    untuk solusinya saya juga belum tau… sorry 🙁

  26. ruri says:

    mas mw naya gimana cara memotong image,misal *.bmp yang bergambar 2564,yg sy maksu memotong angka-angka tersebut,makasih sblmnya

  27. y_sigit_p says:

    @ruri:
    mungkin bisa dilakukan dengan menggunakan algoritma image processing (misal deteksi tepi)… coba search di Google dengan keyword image processing…

  28. dhyan says:

    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

    • y_sigit_p says:

      @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…

  29. Tinoes says:

    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.

  30. y_sigit_p says:

    @Tinoes:
    coba install/activate plugin NextGen Gallery…

  31. Tinoes says:

    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

  32. y_sigit_p says:

    @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…

  33. Tinoes says:

    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

  34. y_sigit_p says:

    @Tinoes:
    coba di cek di Menu Manage trus pilih Plugins…

  35. v3rdee says:

    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

  36. Bodit says:

    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.

  37. y_sigit_p says:

    @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…

Leave a Reply

Your email address will not be published. Required fields are marked *

© 2020 Universitas Atma Jaya Yogyakarta
css.php