Tutorial Desain Pixel Art di Inkscape

Desainew - Setelah lebih dari seminggu tidak posting di blog ini. Akhirnya ada ide untuk posting hari ini. Pada posting kali ini, kita akan belajar membuat desain pixel art di Inkscape. Sebagai bahan percobaan, kita akan membuat desain flappy bird bergaya Pixel Art. Meski sekarang pengembang game menarik game flappy bird dan digantikan dengan Swing Copter. Mungkin anda sudah tahu tentang pixel art ini. Itu lho, saat kita main konsol game berbasis 2D klasik yang gambarnya kotak-kotak. Meski tampilan sangat sederhana, pada waktu itu saya sangat senang memainkannya (pengalaman soalnya).

Untuk membuat desain Pixel Art ini cukup mudah kok. Kita dapat mengandalkan grid lalu buat objek kotak sesuai dengan grid menyusunnya menjadi flappy bird (gunakan duplikat tool) dengan gaya Pixel Art. Selain itu aktifkan juga snap toolnya. Yang perlu diperhatikan saat pemberian warna. Coba imajinasikan sendiri dari mana arah cahaya datang sehingga kita dapat menentukan area mana yang terkena cahaya dan bayangannya. Berikut tutorialnya :

1. Buka inkscape seperti biasa. Lalu buka File – Document Properties (Shift + Ctrl + D) Di tab Page disini saya isikan Width = 700 px dan Height = 600 px (lihat gambar).

Lalu pilih menu tab Grid (disini kita pakai Recatangular Grid). Klik New lalu isikan Spacing X = 6 dan Spacing Y = 6 serta pada bagian Major grid line every = 1 sehingga otomatis gridnya akan muncul di lembar kerja inkscape.

2. Buat objek kotak/persegi dengan ukuran 6 x 6 px dengan Rectangle and Square tool (F4). Gambar sesuai gridnya karena grid tersebut sudah disetting 6 x 6 px pada langkah sebelumnya.

3. Untuk dapat memindah objek persegi yang telah dibuat agar bisa sejajar/lurus dengan grid, aktifkan Snap tool (Snap bounding box corner). Setelah mengaktifkan tool ini kita dapat memindah objek persegi sesuai/tegak lurus dengan grid.

4. Nah, disini kita akan memulai desain pixel lebih banyak dan bervariasi. Setelah kita membuat objek persegi tadi. Seleksi dengan klik objek tersebut, lalu tekan Ctrl+C kemudian arahkan kursor di kotak grid setelah objek tadi dan tekan Ctrl+V. Objek persegi akan menyesuaikan letaknya sesuai dengan gridnya. Disini objek perseginya saya ubah ke warna abu-abu dengan kode warna 727272ff.

5. Lanjutnya dengan arahkan kursor ke kotak grid lain lalu tekan Ctrl+V dan diulangi seterusnya. Buat gambar seperti bawah ini.

6. Setelah membuat bentuk dasarnya, seleksi semua objek persegii berwarna abu-abu itu lalu Group dengan tekan Ctrl+G.

7. Lalu sama seperti langkah ke-5, tapi kita ubah warnanya kuning dengan kode eded3cff. Caranya Ctrl+V satu kali lalu ubah warna ke kuning. Lalu seleksi persegi kuning tekan Ctrl+C kemudian tekan Ctrl+V di kotak grid lain.

8. Lakukan langkah yang sama pada objek persegi lain. Untuk warna merah kodenya ff6969ff, kuning cerah kodenya fbfbd9ff, bagian mata warnanya ecececff, serta warna kuning tua c1c112ff (lihat gambar)

Bagaimana? mudah bukan? Berikut saya juga sertakan tutorial dalam PDF dan juga source SVGnya

DOWNLOAD PDF - via Mediafire
DOWNLOAD SVG - via Mediafire

Sudah itu saja posting hari ini. Jika anda masih bingung tanyakan saja pada kolom komentar di bawah ini. Terima kasih...