Pengembang indie seringkali harus menggabungkan beberapa peran sekaligus: desainer game, programmer, komposer, artis. Dan dalam hal visual, banyak orang memilih seni piksel - sekilas tampak sederhana. Namun untuk melakukannya dengan indah, Anda memerlukan banyak pengalaman dan keterampilan tertentu. Saya menemukan tutorial untuk mereka yang baru mulai memahami dasar-dasar gaya ini: dengan deskripsi perangkat lunak khusus dan teknik menggambar menggunakan dua sprite sebagai contoh.
Latar belakang
Seni piksel adalah bentuk seni digital yang perubahannya dilakukan pada tingkat piksel. Hal ini terutama terkait dengan grafis video game dari tahun 80an dan 90an. Saat itu, seniman harus memperhitungkan keterbatasan memori dan resolusi rendah. Saat ini, seni piksel masih populer dalam game dan sebagai gaya seni pada umumnya, meskipun ada kemampuan untuk membuat grafik 3D yang realistis. Mengapa? Terlepas dari nostalgia, menciptakan karya keren dalam kerangka yang ketat merupakan tantangan yang menyenangkan dan bermanfaat.
Hambatan untuk masuk ke seni piksel relatif rendah dibandingkan seni tradisional dan grafik 3D, yang menarik perhatian pengembang indie. Namun bukan berarti hal itu akan mudah menyelesaikan permainan dengan gaya ini. Saya telah melihat banyak pengembang indie dengan metroidvania pixel art di platform crowdfunding. Mereka pikir mereka akan menyelesaikan semuanya dalam satu tahun, namun kenyataannya mereka membutuhkan enam tahun lagi.
Siput Logam 3 (Arkade). Dewan Komisaris Rakyat, 2000
Seni piksel pada tingkat yang diinginkan kebanyakan orang membutuhkan banyak waktu, dan hanya ada sedikit tutorial singkat. Saat bekerja dengan model 3D, Anda dapat memutarnya, mengubah bentuknya, memindahkan bagian-bagiannya, menyalin animasi dari satu model ke model lainnya, dan seterusnya. Seni piksel tingkat tinggi hampir selalu membutuhkan banyak upaya untuk menempatkan piksel secara cermat pada setiap bingkai.
Secara umum, saya memperingatkan Anda.
Dan sekarang sedikit tentang gaya saya: Saya terutama menggambar seni piksel untuk video game dan menemukan inspirasi di dalamnya. Secara khusus, saya penggemar Famicom/NES, konsol 16-bit, dan game arcade tahun 90-an. Seni piksel dari game favorit saya pada masa itu dapat digambarkan sebagai sesuatu yang cerah, percaya diri, dan bersih (tetapi tidak terlalu bersih), daripada mencolok dan minimalis. Ini adalah gaya yang saya kerjakan sendiri, namun Anda dapat dengan mudah menerapkan ide dan teknik dari tutorial ini untuk menciptakan sesuatu yang benar-benar berbeda. Jelajahi karya berbagai seniman dan ciptakan seni piksel yang Anda sukai!
Perangkat lunak
Alat digital dasar untuk seni piksel adalah Zoom dan Pensil untuk menempatkan piksel. Anda juga akan menemukan Garis, Bentuk, Pilih, Pindahkan, dan Ember Cat berguna. Ada banyak perangkat lunak gratis dan berbayar dengan seperangkat alat seperti itu. Saya akan memberi tahu Anda tentang yang paling populer dan yang saya gunakan sendiri.
Cat (gratis)
Jika Anda memiliki Windows, Paint bawaannya adalah program primitif, tetapi program ini memiliki semua alat untuk seni piksel.
(gratis)
Editor seni piksel yang berfungsi secara tak terduga yang berjalan melalui browser. Anda dapat mengekspor karya Anda sebagai PNG atau GIF animasi. Pilihan bagus untuk pemula.
(gratis)
GraphicsGale adalah satu-satunya editor yang pernah saya dengar yang dirancang khusus untuk seni piksel dan menyertakan alat animasi. Itu dibuat oleh perusahaan Jepang HUMANBALANCE. Ini telah tersedia secara gratis sejak 2017 dan masih diminati, meskipun popularitas Aseprite meningkat. Sayangnya, ini hanya berfungsi di Windows.
($)
Mungkin editor paling populer saat ini. , banyak fitur, dukungan aktif, versi untuk Windows, Mac dan Linux. Jika Anda serius dengan seni piksel dan masih belum menemukan editor yang tepat, mungkin ini yang Anda butuhkan.
($$+)
GameMaker Studio 2 adalah alat 2D luar biasa dengan Sprite Editor yang bagus. Jika Anda ingin membuat seni piksel untuk gim Anda sendiri, akan sangat mudah melakukan semuanya dalam satu program. Sekarang saya menggunakan perangkat lunak ini saat mengerjakan , kumpulan 50 game retro: Saya membuat sprite dan animasi di GameMaker, dan ubin di Photoshop.
($$$+)
Photoshop adalah perangkat lunak mahal, didistribusikan dengan berlangganan, dan tidak dirancang untuk seni piksel. Saya tidak menyarankan membelinya kecuali Anda terlibat dalam rendering ilustrasi dalam resolusi tinggi, atau Anda tidak perlu melakukan manipulasi rumit dengan gambar, seperti saya. Anda dapat membuat sprite statis dan seni piksel di dalamnya, tetapi ini cukup rumit dibandingkan dengan perangkat lunak khusus (misalnya, GraphicsGale atau Aseprite).
Lain
Perlengkapan seni piksel saya. Semuanya hitam, aku baru menyadarinya sekarang.
Tablet grafis ($$+)
Saya merekomendasikan tablet grafis untuk pekerjaan ilustrasi digital apa pun guna menghindari sindrom terowongan karpal. Mencegahnya jauh lebih mudah daripada mengobatinya. Suatu hari Anda akan merasakan sakit dan itu akan semakin parah - jagalah diri Anda sejak awal. Karena dulu saya menggambar dengan mouse, sekarang saya kesulitan memainkan game yang mengharuskan saya menekan tombol. Saat ini saya menggunakan Wacom Intuos Pro S.
Dukungan pergelangan tangan ($)
Jika Anda tidak bisa mendapatkan tablet, setidaknya dapatkan penyangga pergelangan tangan. Favorit saya adalah Penjepit Pergelangan Tangan Mueller Green Fitted. Sisanya terlalu ketat atau tidak memberikan dukungan yang cukup. Kaliper dapat dipesan secara online tanpa masalah.
96 Γ 96 piksel
Pertarungan Terakhir. Capcom, 1989
Mari kita mulai! Mari kita mulai dengan sprite karakter 96x96 piksel. Sebagai contoh, saya menggambar orc dan meletakkannya di screenshot dari Final Fight (gambar di atas) sehingga Anda dapat memahami skalanya. Ini Π±ΠΎΠ»ΡΡΠΎΠΉ sprite untuk sebagian besar game retro, ukuran tangkapan layar: 384x224 piksel.
Pada sprite sebesar itu akan lebih mudah untuk menunjukkan teknik yang ingin saya bicarakan. Render per piksel juga lebih mirip dengan bentuk seni tradisional (seperti menggambar atau melukis) yang mungkin lebih Anda kenal. Setelah menguasai teknik dasar, kita akan beralih ke sprite yang lebih kecil.
1. Pilih palet
Pixel adalah konsep seni piksel yang jauh lebih dalam dibandingkan dunia digital lainnya. Seni piksel ditentukan oleh keterbatasannya, seperti warna. Penting untuk memilih palet yang tepat, ini akan membantu menentukan gaya Anda. Namun pada awalnya, saya sarankan untuk tidak memikirkan palet dan memilih salah satu yang sudah ada (atau hanya beberapa warna acak) - Anda dapat dengan mudah mengubahnya di tahap mana pun.
Untuk tutorial ini saya akan menggunakan 32 palet warna yang kami buat . Untuk seni piksel, mereka sering kali dirangkai dari 32 atau 16 warna. Konsol kami dirancang untuk konsol fiksi yang akan muncul di antara Famicom dan Mesin PC. Anda dapat mengambilnya atau yang lainnya - tutorialnya tidak bergantung sama sekali pada palet yang dipilih.
2. Garis besar kasar
Mari mulai menggambar menggunakan alat Pensil. Mari menggambar sketsa dengan cara yang sama seperti yang kita lakukan dengan pena dan kertas biasa. Tentu saja, seni piksel dan seni tradisional saling tumpang tindih, terutama jika menyangkut sprite berukuran besar. Pengamatan saya menunjukkan bahwa seniman pixel art yang kuat setidaknya pandai menggambar dengan tangan dan sebaliknya. Jadi mengembangkan keterampilan menggambar Anda selalu bermanfaat.
3. Elaborasi kontur
Kami menyempurnakan kontur: menghapus piksel tambahan dan mengurangi ketebalan setiap garis menjadi satu piksel. Tapi apa sebenarnya yang dianggap berlebihan? Untuk menjawab pertanyaan ini Anda perlu memahami garis piksel dan ketidakteraturan.
Penyimpangan
Anda perlu mempelajari cara menggambar dua garis dasar dalam seni piksel: lurus dan melengkung. Dengan pena dan kertas, yang terpenting adalah kontrol otot, namun kami bekerja dengan blok warna yang sangat kecil.
Kunci untuk menggambar garis piksel yang benar adalah jaggies. Ini adalah piksel tunggal atau segmen kecil yang merusak kehalusan garis. Seperti yang saya katakan sebelumnya, satu piksel membuat perbedaan besar dalam seni piksel, sehingga ketidakrataan dapat merusak keseluruhan estetika. Bayangkan menggambar garis lurus di atas kertas dan tiba-tiba seseorang memukul meja: tonjolan pada seni piksel terlihat seperti coretan acak.
ΠΡΠΈΠΌΠ΅ΡΡ:
Langsung
kurva
Ketidakteraturan muncul pada kurva ketika panjang ruas garis tidak bertambah atau berkurang secara bertahap.
Mustahil untuk sepenuhnya menghindari gundukan - semua game retro favorit Anda memilikinya (kecuali, tentu saja, seni piksel hanya terdiri dari bentuk-bentuk sederhana). Sasaran: Meminimalkan ketidakrataan sambil tetap menunjukkan semua yang diperlukan.
4. Aplikasikan warna pertama
Warnai karakter Anda menggunakan isian atau alat lain yang sesuai. Palet akan menyederhanakan bagian pekerjaan ini. Jika software tidak menyediakan penggunaan palet, Anda dapat menempatkannya langsung pada gambar, seperti pada contoh di atas, dan memilih warna menggunakan pipet.
Di pojok kiri bawah saya menggambar teman kita, ketemu, ini Ball. Ini akan memudahkan untuk memahami apa yang sebenarnya terjadi pada setiap tahap.
5. Bayangan
Saatnya menampilkan bayangan - cukup tambahkan warna yang lebih gelap pada sprite. Ini akan membuat gambar terlihat tiga dimensi. Anggaplah kita memiliki satu sumber cahaya yang terletak di atas orc di sebelah kirinya. Artinya segala sesuatu yang berada di atas dan di depan karakter kita akan diterangi. Tambahkan bayangan ke kanan bawah.
Bentuk dan volume
Jika langkah ini sulit bagi Anda, anggaplah gambar Anda sebagai bentuk tiga dimensi, bukan sekadar garis dan warna. Bentuk ada dalam ruang tiga dimensi dan dapat memiliki volume, yang kita bangun dengan bantuan bayangan. Ini akan membantu Anda memvisualisasikan karakter tanpa detail dan membayangkan bahwa ia terbuat dari tanah liat dan bukan piksel. Shading bukan sekadar menambahkan warna baru, namun merupakan proses membangun suatu bentuk. Pada karakter yang didesain dengan baik, detailnya tidak menyembunyikan bentuk dasarnya: jika Anda menyipitkan mata, Anda akan melihat kumpulan besar cahaya dan bayangan.
Anti-aliasing (anti-aliasing)
Setiap kali saya menggunakan warna baru, saya menerapkan anti-aliasing (AA). Ini membantu memperhalus piksel dengan menambahkan warna perantara di sudut tempat dua segmen garis bertemu:
Piksel abu-abu memperhalus βjedaβ pada garis. Semakin panjang ruas garisnya maka semakin panjang pula ruas AAnya.
Ini penampakan AA di bahu Orc. Hal ini diperlukan untuk menghaluskan garis-garis yang menunjukkan lekuk ototnya
Anti-aliasing tidak boleh melampaui sprite yang akan digunakan dalam game atau pada latar belakang yang warnanya tidak diketahui. Misalnya, jika Anda menerapkan AA pada latar belakang terang, anti-aliasing akan terlihat jelek pada latar belakang gelap.
6. Garis besar selektif
Sebelumnya, garis luarnya seluruhnya hitam, yang membuat sprite terlihat sangat kartun. Gambar itu sepertinya terbagi menjadi beberapa segmen. Misalnya, garis hitam di lengan memberikan terlalu banyak kontras pada otot, sehingga membuat karakter terlihat kurang kohesif.
Jika sprite menjadi lebih natural dan segmentasinya menjadi kurang jelas, bentuk dasar karakter akan lebih mudah dibaca. Untuk melakukan ini, Anda dapat menggunakan garis selektif - ganti sebagian garis hitam dengan yang lebih terang. Pada bagian sprite yang diterangi, Anda dapat menggunakan warna paling terang, atau, jika sprite menyentuh ruang negatif, Anda dapat menghilangkan garis luarnya sepenuhnya. Alih-alih hitam, Anda perlu menggunakan warna yang dipilih untuk bayangan - dengan cara ini segmentasi akan dipertahankan (untuk membedakan otot, bulu, dan sebagainya).
Saya juga menambahkan bayangan yang lebih gelap pada tahap ini. Hasilnya adalah tiga gradasi warna hijau pada kulit orc. Warna hijau paling gelap dapat digunakan untuk garis selektif dan AA.
7. Sentuhan terakhir
Terakhir, ada baiknya menambahkan highlight (titik paling terang pada sprite), detail (anting, kancing, bekas luka) dan peningkatan lainnya hingga karakter siap atau hingga Anda harus melanjutkan ke yang berikutnya.
Ada beberapa teknik berguna yang bisa diterapkan pada tahap ini. Putar gambar secara horizontal, ini sering kali membantu mengidentifikasi kesalahan dalam proporsi dan bayangan. Anda juga dapat menghapus warna - atur saturasi ke nol untuk memahami di mana Anda perlu mengubah bayangan.
Menciptakan kebisingan (dithering, dithering)
Sejauh ini kita kebanyakan menggunakan area bayangan yang besar dan solid. Namun ada teknik lain - dithering, yang memungkinkan Anda berpindah dari satu warna ke warna lain tanpa menambahkan warna ketiga. Lihatlah contoh di bawah ini.
Gradien gelap ke terang atas menggunakan ratusan warna biru yang berbeda.
Gradien rata-rata hanya menggunakan sembilan warna, namun masih terlalu banyak corak dengan warna yang sama. Muncul apa yang disebut pita (dari bahasa Inggris band - stripe), di mana, karena garis-garis seragam yang tebal, mata berfokus pada titik kontak warna, bukan pada warna itu sendiri.
Pada gradien bawah kami menerapkan dithering, yang menghindari garis melintang dan hanya menggunakan dua warna. Kami menciptakan kebisingan dengan intensitas berbeda-beda untuk mensimulasikan gradasi warna. Teknik ini sangat mirip dengan halftone (gambar halftone) yang digunakan dalam pencetakan; serta bintik-bintik (gambar kasar) - dalam ilustrasi dan komik.
Di Orc, saya ragu-ragu sedikit untuk menyampaikan tekstur. Beberapa seniman piksel tidak menggunakannya sama sekali, sementara yang lain, sebaliknya, tidak malu dan melakukannya dengan sangat terampil. Menurut saya gentar terlihat paling baik di area luas yang diisi dengan satu warna (lihat langit pada tangkapan layar Metal Slug di atas) atau di area yang seharusnya terlihat kasar dan tidak rata (seperti tanah). Putuskan sendiri bagaimana menggunakannya.
Jika Anda ingin melihat contoh dithering berskala besar dan berkualitas tinggi, lihat game The Bitmap Brothers, sebuah studio Inggris dari tahun 80an, atau game di komputer PC-98. Ingatlah bahwa semuanya adalah NSFW.
Kakyusei (PC-98). Peri, 1996
Hanya ada 16 warna di gambar ini!
8. Tampilan terakhir
Salah satu bahaya seni piksel adalah tampilannya yang mudah dan sederhana (karena keterbatasan struktur dan gayanya). Namun pada akhirnya Anda akan menghabiskan banyak waktu untuk menyempurnakan sprite Anda. Ini seperti teka-teki yang perlu dipecahkan - itulah sebabnya seni piksel menarik perhatian para perfeksionis. Ingatlah bahwa satu sprite tidak boleh memakan banyak waktu - itu hanyalah bagian kecil dari kumpulan potongan yang sangat rumit. Penting untuk tidak melupakan gambaran besarnya.
Meskipun seni piksel Anda bukan untuk bermain game, terkadang ada baiknya Anda berkata pada diri sendiri, "Ini sudah cukup bagus!" Dan lanjutkan. Cara terbaik untuk mengembangkan keterampilan Anda adalah melalui seluruh proses dari awal hingga akhir sebanyak mungkin, dengan menggunakan topik sebanyak mungkin.
Dan terkadang berguna untuk meninggalkan sprite untuk sementara waktu sehingga Anda dapat melihatnya dengan pandangan segar nanti.
32Γ32 piksel
Kita buat sprite berukuran besar 96x96 pixel terlebih dahulu karena pada ukuran tersebut lebih seperti menggambar atau melukis, namun dengan pixel. Semakin kecil sprite, semakin tidak mirip dengan apa yang seharusnya ditampilkan, dan semakin penting setiap pikselnya.
Di Super Mario Bros. Mata Mario hanya berukuran dua piksel, satu di atas yang lain. Dan telinganya juga. Pencipta karakter Shigeru Miyamoto mengatakan bahwa kumis diperlukan untuk memisahkan hidung dari bagian wajah lainnya. Jadi salah satu ciri utama Mario bukan hanya sekedar desain karakter, melainkan taktik pragmatis. Hal ini menegaskan kebijaksanaan lama β βkebutuhan adalah ibu dari penemuan.β
Tahapan utama pembuatan sprite 32x32 piksel sudah tidak asing lagi bagi kita: sketsa, warna, bayangan, penyempurnaan lebih lanjut. Namun dalam kondisi seperti itu, sebagai sketsa awal, saya memilih bentuk berwarna daripada menggambar garis karena ukurannya yang kecil. Warna memainkan peran yang lebih penting dalam mendefinisikan karakter daripada garis besar. Lihat Mario lagi, dia tidak punya outline sama sekali. Bukan hanya kumisnya saja yang menarik. Cambangnya menentukan bentuk telinganya, lengan bajunya memperlihatkan lengannya, dan bentuk keseluruhannya kurang lebih memperlihatkan seluruh tubuhnya dengan jelas.
Membuat sprite kecil adalah kompromi yang konstan. Jika Anda menambahkan guratan, Anda mungkin kehilangan ruang untuk bayangan. Jika karakter Anda memiliki lengan dan kaki yang terlihat jelas, kepalanya mungkin tidak terlalu besar. Jika Anda menggunakan warna, guratan selektif, dan anti-aliasing secara efektif, objek yang dirender akan tampak lebih besar dari yang sebenarnya.
Untuk sprite kecil saya suka gaya chibi: karakternya terlihat sangat lucu, mereka memiliki kepala dan mata yang besar. Cara yang bagus untuk menciptakan karakter penuh warna dalam ruang terbatas, dan secara keseluruhan gayanya sangat bagus. Namun mungkin Anda perlu menunjukkan mobilitas atau kekuatan karakter, lalu Anda bisa memberi sedikit ruang pada kepala agar tubuh terlihat lebih bertenaga. Itu semua tergantung pada preferensi dan tujuan Anda.
Seluruh tim sudah berkumpul!
Format file
Hasil ini bisa membuat artis piksel mana pun gelisah
Gambar yang Anda lihat adalah hasil penyimpanan gambar dalam format JPG. Beberapa data hilang karena algoritma kompresi file. Seni piksel berkualitas tinggi akan terlihat buruk, dan mengembalikannya ke palet aslinya tidaklah mudah.
Untuk menyimpan gambar statis tanpa kehilangan kualitas, gunakan format PNG. Untuk animasi - GIF.
Cara berbagi seni piksel dengan benar
Berbagi seni piksel di jejaring sosial adalah cara terbaik untuk mendapatkan masukan dan bertemu seniman lain yang bekerja dengan gaya yang sama. Jangan lupa gunakan hastag #pixelart. Sayangnya, jejaring sosial sering kali mengonversi PNG ke JPG tanpa diminta, sehingga memperburuk pengalaman Anda. Selain itu, tidak selalu jelas mengapa gambar Anda diubah.
Ada beberapa tips tentang cara menyimpan pixel art dalam kualitas yang dibutuhkan untuk berbagai jejaring sosial.
Agar file PNG Anda tidak berubah di Twitter, gunakan kurang dari 256 warna atau bahwa file Anda berukuran kurang dari 900 piksel pada sisi terpanjang. Saya akan meningkatkan ukuran file menjadi setidaknya 512x512 piksel. Dan agar penskalaannya merupakan kelipatan 100 (200%, bukan 250%) dan tepi tajamnya tetap terjaga (Nearest Neighbor di Photoshop).
GIF animasi untuk Postingan Twitter beratnya tidak lebih dari 15 MB. Gambar harus berukuran minimal 800x800 piksel, animasi perulangan harus diulang tiga kali, dan frame terakhir harus setengah panjang frame lainnya - teori paling populer. Namun, tidak jelas sejauh mana persyaratan ini harus dipenuhi, mengingat Twitter terus-menerus mengubah algoritma tampilan gambarnya.
Sejauh yang saya tahu, tidak mungkin memposting gambar di Instagram tanpa kehilangan kualitas. Namun pasti akan terlihat lebih baik jika Anda memperbesarnya setidaknya menjadi 512x512 piksel.
Sumber: www.habr.com