Did you know?
Teman-teman tentunya apabila mendesain grafis di komputer tidak akan asing dengan tool–tool semacam line tool, shape tool, pen tool, brush tool, dll. Nah, satu tool lagi yaitu pencil tool deh. Jujur, saya sendiri kalau pake pencil tool menggunakan mouse kadang susah kalau ingin membuat suatu bentuk. Gini deh, sekarang hanya gunain pencil tool untuk menggambar sebuah kubus, bisa kan? 🙂
Wah, menggambar kubus pake pencil tool? Kubus kan harus lurus garisnya, baik garis vertikal, horizontal, maupun diagonalnya dan kalau pake pencil tool kan susah ngendaliinnya. Nah, oleh karena itulah teknik menggambar piksel ini bisa ngebantu kita untuk membuat kubus menggunakan pencil tool.
Coba deh perhatikan gambar kubus di bawah ini. Untuk membuatnya kita bisa menggunakan si pencil tool tersebut. Kok bisa? Tentu saja bisa, triknya dengan menggambar pixel-by-pixel (pencil tool, ukuran 1px) dengan zoom yang besar (misal 1600% atau 16x). Nah, gampang kan jadinya:)
Sedikit tips
Highlight and Shadow
Nah, kita tentunya pengen mewarnai dalam gambar piksel ini (masa cuman garis polos aja:). So, untuk memberikan warna yang ‘hidup’, kita bisa menggunakan tiga warna patokan yakni: main color, highlight, dan shadow. Main color adalah warna utama yang akan kita berikan untuk objek gambarnya. Kemudian agar lebih ‘hidup’ , kita tambahkan highlight (lebih terang dari main color) dan shadow (lebih gelap dari main color). Maksudnya kita berikan unsur pencahayaan di dalamnya. Apabila gambarnya ingin lebih smooth lagi, ya bisa saja ditambahkan misal dua level warna highlight dan dua level warna shadow. Untuk pengaplikasiannya cek deh gambar berikut.
Gambar tersebut dibuat dengan zoom 1000%. Tentu jadi lebih mudah saat menggunakan pencil tool-nya. Untuk mewarnainya juga tetap menggunakan pencil tool, tidak harus menggunakan bucket tool karena objeknya tidak terlalu besar dan kita memberikan warna highlight dan shadow yang ukuran ketebalannya hanya 1px saja.
Sebagai patokan aja biar memudahkan, warna highlight diberikan pada sisi atas dan kiri sedangkan warna shadow pada sisi kanan dan bawahnya. Tergantung arah cahayanya juga sih, tetapi kalau gambar tersebut istilahnya ‘di depan kita’ ya patokan tersebut dapat digunakan.
Nah, hal menarik dalam memberikan warna highlight dan shadow ini adalah kita dapat memberikan efek level atau tingkatan dalam bentuk gambarnya. Pada gambar di atas, efek sunken (cekung) dapat kita buat dengan ‘membalikan‘ arah pencahayaannya. So, apaliba warna shadow kita taruh di bawah dan kanan, maka untuk efek sunken ini kita taruh di sisi sebaliknya, yaitu atas dan kiri. Penggunaan warna highlight untuk efek sunken ini opsional aja tergantung bentuk gambarnya. Kemudian untuk membuat efek emboss (timbul), tinggal menggunakan warna highlight dan shadow ‘searah‘ dengan pencahayaannya. Singkatnya, efek sunken dibuat dengan membalikan pencahayaan dan efek emboss searah dengan pencahayaan.
Pencil Tool
Tool yang digunakan untuk menggambar piksel ini adalah pencil tool. Mengapa? Karena pencil tool dapat kita gunakan untuk menggambar sebuah titik dengan ukuran 1px. Titik-titik piksel ini kemudian kita bentuk menjadi sebuah objek. Nah, seperti pada gambar-gambar di atas, kita perlu menggambar pixel-by-pixel dan untuk hal ini pencil tool-lah yang tepat digunakan.
Zooming
Menggambar piksel pada zoom 100% (normal) dengan pencil tool bukan hal yang mudah. Kalau kita ingin membuat suatu objek dengan pencil tool, baik itu sebuah garis lurus maupun diagonal, maka dengan menggunakan zoom yang besar–objek yang kompleks sekalipun–dapat dibuat. Kalau menggunakan Photoshop (saya menggunakan versi CS2), ukuran zoom maksimalnya adalah 1600% (16x). Dengan zoom sebesar ini, mengendalikan pencil tool jadi hal yang mudah. Tentu ada kelemahannya, dengan zoom sebesar ini maka objek yang muat di layar jadi terbatas. So, atur aja zoom yang diperluin, misal 600%, 800%, 1000%, atau 1600%. Saya sendiri seringnya pake 1600% (maksimal) dan 800% (setengah dari maksimal), ya gimana enaknya aja pas kita menggambar piksel-nya.
Doing Something Useful
Oh ya, teman-teman tentunya tau dong apa itu Winamp (jadul sekali:)? Ya pemutar musik yang tentu namanya udah ‘melegenda’ bagi pengguna komputer (bersistem operasi MS Windows:). Hal yang menarik dari Winamp dan sekaligus jadi inovasi pada saat itu adalah skin-nya. Ya, umumnya kita pengen pake skin yang keren atau nyaman di Winamp ini. Seperti biasanya, ada aja hal yang dirasa kurang meskipun kita udah nemuin skin yang bagus. Kita pengen yang ini bentuknya gini dan yang itu bentuknya gitu. So, untuk hal tersebut kita kustomasi aja si skin yang dipake itu.
So, apa hubungannya dengan menggambar piksel? Tentu ada, karena objek-objek dalam tampilan Winamp ini kecil-kecil (misal volume bar, seeking bar, scroll bar, dll.) So, teknik menggambar piksel ini akan sangat berguna untuk membuat atau memodifikasi gambar objek tersebut. Nah, berikut merupakan skin original yang saya akan modif: SoftshapeAmp Release II by Vlad Gerasimov.
Beberapa hal yang ingin saya modif dari skin ini adalah: tombol kontrol, seeking bar, volume bar, scroll bar, tombol edit playlist, dan tweak pada background dan fontnya. Nah, biar gak bingung mana-mana yang akan dimodifnya, berikut gambar bagian yang telah dimodif.
Untuk tombol kontrol (atas—play, pause, stop, dll) dan edit playlist (bawah—add playlist, remove playlist, dll) cukup dengan menggambar ulang bentuknya dengan menggunakan palette warna objek aslinya. Untuk menghapusnya pun sama ‘replace warnanya dengan warna background‘. Dengan mengunakan palette warna sesuai aslinya, kita bisa melakukan modifikasi tanpa mengubah ‘kesan’ yang dibawa skin tersebut:)
Berikutnya, untuk seeking bar, volume bar, dan scroll bar saya lakukan modifikasi sedikit berbeda dengan bentuk aslinya. Nah, agar objek yang dihasilkan terlihat lebih ‘hidup’ dan smooth, maka highlight dan shadow yang sesuai dibutuhkan untuk memunculkan dua hal tersebut:) Jadi, tetap menggambarnya pixel-by-pixel ditambah pewarnaan untuk highlight dan shadow. Dengan bantuan zoom yang besar, modifikasi tersebut jadi gampang dilakukannya. Nah, berikut untuk gambaran kita lihat deh antara objek dalam zoom normal dan zoom yang besar.
Untuk gambar grafik visualisasi tidak dilakukan dengan menggambar pikselnya, tetapi edit pada file konfigurasinya (“vIscolor.txt”). Untuk tweaking pada fontnya, coba perhatiin angka 8 pada skin original dan skin yang udah dimodif:) Sementara untuk title bar dan warna background pada main window-nya diganti dengan warna gradasi yang lebih smooth putih. Untuk menggantinya, tinggal hapus aja pixel-by-pixel, tidak mengunakan wand tool.
So, dengan menggunakan teknik menggambar piksel dan penerapan warna highlight dan shadow (pencahayaan), kita bisa deh menggambar grafis kompleks sekalipun. Bisa juga kita melakukan modifikasi pada skin Winamp misalnya. Nah, berikut hasil filenya sesuai dengan yang saya inginkan.
Download:
Original skin: SoftshapeAmpReleaseIIColor11-0
Modified skin: SoftshapeAmpReleaseIIColor11-mods
(modified skin)
(review original skin-nya)
Further Steps
Menarik kan? Kalau tertarik pengen nyoba juga, berikut tips yang bisa ngebantu kita agar lebih cepat dan efisien dalam menggambar piksel ini. Karena tool-tool akan sering digunakan, so biasain dengan menggunakan shortkey-nya.
- Pencil Tool (B): untuk merubah dari Brush menjadi Pencil dan sebaliknya, tekan Shift+B beberapa kali. Untuk mengubah size-nya, tekan [ untuk lebih kecil dan ] untuk lebih besar.
- Eyedropper Tool (I): untuk mengambil sampel warna. Nah, apabila saat menggunakan Pencil tool tahan tombol Alt: untuk merubah sementara kursornya untuk menjadi Eyedropper tool. Hal inilah yang paling berguna apabila menggunakan Photoshop.
- Zoom Tool (Z): bisa digunakan untuk area zoom (blok area yang akan dizoom) atau click zoom (zoom bagian yang diklik). Selain itu bisa juga menggunakan ‘Ctrl +’ untuk zoom-in dan ‘Ctrl -‘ untuk zoom-out. Untuk kembali ke zoom normal, tekan Ctrl+Alt+0.
- Switch Foreground and Background Colors (X): sangat berguna untuk menukar warna aktif yang digunakan antara warna foreground dan background. Coba deh biasain tool ini. Kita bisa manfaatin untuk menyimpan dua warna aktif saat menggambar.
- Default Foreground and Background (D): untuk mengubah warna aktif foreground menjadi hitam dan warna aktif background menjadi putih. Sangat berguna pada saat-saat tertentu.
- Hand Tool (H): nah, berhubung kita menggambar dengan zoom yang besar, maka tampilan yang dimuat di layar pun terbatas. Hand tool sangat berguna saat kita menggambar objek yang melebihi tampilan di layar. Tidak perlu langsung menggunakannya (tekan H), tetapi cukup tahan tombol Space saat menggunakan tool lainnya untuk mengubah sementara menjadi Hand tool. Hal ini juga yang paling berguna di Photoshop:)
Nah, sekarang udah tau kan tentang fun-nya menggambar piksel. Kalau tertarik lebih lanjut, bisa juga terjun di aliran Isometric drawing seperti gambar berikut (dari mana dapetnya lupa, ntar deh:) Grafis ini dapat dibuat dengan teknik menggambar piksel. Have fun!
For your information: skin Winamp yang berekstensikan .wsz adalah file zip biasa. So, kita bisa mengekstraknya dengan, misal, WinRAR, 7-Zip, WinZip, dll. Apabila tidak ada opsi ‘extract‘ saat klik kanan pada file tersebut, rename dulu ektensinya dari .wsz menjadi .zip. Oh ya, untuk menggunakannya kembali menjadi skin Winamp tidak harus di-compress menjadi file .wsz atau .zip, cukup semua komponen skin ditaruh di dalam sebuah folder yang diletakkan di foldernya Skins Winamp, misal, ‘..\Skins\MySkins\’.
Serious Fun 