Mata seni piksel. Seni Piksel

Istilah "grafik piksel" tidak asing bagi semua orang, juga bukan bahasa gaul bawah tanah. Apa yang akan membantu Wikipedia untuk mencari tahu. Hal utama yang harus dipahami adalah itu seni piksel ditentukan oleh cara pola dibuat (piksel demi piksel), bukan oleh hasilnya. Oleh karena itu, gambar yang diperoleh dengan menggunakan filter atau perender khusus juga tidak termasuk di dalamnya. Di bagian pertama artikel, dan bahkan mungkin serangkaian artikel yang didedikasikan untuk seni ini, saya akan menunjukkan beberapa karya yang saya sukai.

Ilustrasi yang luar biasa, bayangan yang bagus. (Seni Piksel Polyfonken).

Topiknya cukup luas. Ada variasi dadu.


Ilustrasi oleh Rod Hunt sangat berwarna dan realistis. Seniman menggabungkan grafik vektor dengan seni piksel.


Blogger Brasil-Jerman Thiago, Pi, Jojo, dan Mariana menampilkan diri mereka sebagai karakter piksel tertawa yang menyenangkan.

Lukisan ini dikerjakan oleh Juan Manuel Daporta hanya dengan menggunakan MS Paint! Pengerjaannya memakan waktu 8 bulan. Menakjubkan.

Piksel juga hidup di luar layar komputer. Sungguh menakjubkan seberapa baik plot gambar pixelated dipahami.

Perang luar angkasa dengan gaya Super Robot Wars. Dalam dunia pixel art, Roberson memiliki gaya uniknya sendiri.


Kota boneka gila. Ilustrasinya, meski digambar dalam vektor, tetap terlihat seperti pixel art. Pekerjaan yang menarik.

Arah seni piksel ini sangat menarik bagi saya. Lukisan-lukisan ini tidak digambar di layar, melainkan di atas kanvas dengan cat akrilik. Mahakarya ini dibuat oleh Ashley Anderson.

Kota piksel adalah topik besar yang terpisah. Biasanya ada banyak detail dan alur cerita. Di gambar ini ada tanggul dan balon warna-warni serta bar sushi dan bahkan pengunjuk rasa.

Pixel Art sangat populer untuk bermain game bahkan saat ini dan ada beberapa alasan untuk itu!

Jadi, apa yang memikat Pixel Art:

  1. Persepsi. Seni piksel terlihat luar biasa! Ada banyak yang bisa dikatakan tentang setiap piksel dalam sprite.
  2. Nostalgia. Pixel Art menghadirkan kembali perasaan nostalgia yang luar biasa bagi para gamer yang tumbuh besar dengan bermain Nintendo, Super Nintendo, atau Genesis (seperti saya!)
  3. Kemudahan belajar. Pixel art adalah salah satu seni digital termudah untuk dipelajari, terutama jika Anda lebih sebagai programmer daripada seniman;]

Jadi, Anda ingin mencoba Pixel Art? Kemudian ikuti saya dan saya akan menunjukkan cara membuat karakter yang dapat dimainkan sederhana namun efektif yang dapat Anda gunakan dalam gim Anda sendiri! Selain itu, sebagai bonus, kami akan melihat cara mengintegrasikannya ke dalam game iPhone!

Untuk pembelajaran yang sukses, Anda memerlukan Adobe Photoshop. Jika Anda tidak memilikinya, Anda dapat mengunduh uji coba gratis dari situs web atau torrent Adobe.

Apa itu Seni Piksel?

Sebelum kita mulai, mari kita perjelas tentang apa itu Pixel Art, tidak sejelas yang Anda kira. Cara termudah untuk mendefinisikan apa itu Pixel Art adalah dengan menentukan apa yang bukan, yaitu: segala sesuatu di mana piksel dibuat secara otomatis. Berikut beberapa contohnya:

Gradien: Pilih dua warna dan hitung warna piksel di antaranya. Terlihat keren, tapi bukan Pixel Art!

Alat Buram: mendeteksi piksel dan mereplikasi/mengeditnya untuk membuat versi baru dari gambar sebelumnya. Sekali lagi, bukan bagan piksel.

Alat penghalus(kebanyakan menghasilkan piksel baru dalam warna berbeda untuk membuat sesuatu "mulus"). Anda harus menghindarinya!

Beberapa orang akan mengatakan bahwa bahkan warna yang dihasilkan secara otomatis bukanlah Seni Piksel, karena memerlukan lapisan untuk memadukan efek (memadukan piksel antara dua lapisan sesuai dengan algoritme yang diberikan). Namun, karena sebagian besar perangkat saat ini berurusan dengan jutaan warna, pernyataan ini dapat diabaikan. Namun, menggunakan sejumlah kecil warna adalah praktik yang baik dalam Seni Piksel.

Alat lain seperti (garis) atau alat ember cat(Ember Cat) juga menghasilkan piksel secara otomatis, tetapi karena Anda dapat mengaturnya agar tidak menghaluskan kurva piksel yang terisi, alat ini dianggap ramah Pixel Art.

Jadi, kami menemukan bahwa Seni Piksel membutuhkan banyak perhatian saat menempatkan setiap piksel dalam sprite, paling sering dengan tangan dan dengan palet warna yang terbatas. Ayo mulai bekerja sekarang!

Awal pekerjaan

Sebelum Anda mulai membuat aset Pixel Art pertama Anda, Anda harus tahu bahwa Pixel Art tidak dapat diskalakan. Jika Anda mencoba menguranginya, semuanya akan terlihat buram. Jika Anda mencoba memperbesarnya, semuanya akan terlihat dapat diterima selama Anda menggunakan penskalaan yang merupakan kelipatan dua (tetapi, tentu saja, tidak akan ada kejelasan).

Untuk menghindari masalah ini, Anda harus terlebih dahulu memahami seberapa besar karakter game Anda, atau elemen game, dan kemudian mulai bekerja. Paling sering ini didasarkan pada ukuran layar perangkat yang Anda targetkan dan berapa banyak "piksel" yang ingin Anda lihat.

Misalnya, jika Anda ingin game Anda terlihat dua kali lebih besar di iPhone 3GS (“Ya, saya benar-benar ingin memberi game saya tampilan retro pixelated!”), yang memiliki resolusi layar 480x320 piksel, maka Anda harus bekerja pada setengah resolusi dalam hal ini akan menjadi 240x160 piksel.

Buka dokumen Photoshop baru ( File → Baru…) dan atur ukurannya menjadi ukuran layar game Anda, lalu pilih ukuran untuk karakter Anda.

Setiap sel berukuran 32x32 piksel!

Saya memilih 32x32px bukan hanya karena bagus untuk ukuran layar yang saya pilih, tetapi juga karena 32x32px juga merupakan kelipatan 2, yang berguna untuk mesin mainan, (ukuran petak seringkali kelipatan 2, tekstur sejajar). kelipatan 2, dll.

Meskipun mesin yang Anda gunakan mendukung ukuran gambar apa pun, Anda selalu dapat mencoba bekerja dengan jumlah piksel genap. Dalam hal ini, jika gambar perlu diskalakan, ukurannya akan dibagi dengan lebih baik, menghasilkan kinerja yang lebih baik.

Cara Menggambar Karakter Pixel Art

Pixel Art dikenal dengan grafik yang jernih dan mudah dibaca: Anda dapat menentukan fitur wajah, mata, rambut, bagian tubuh hanya dengan beberapa titik. Namun, ukuran gambar memperumit tugas: semakin kecil karakter Anda, semakin sulit menggambarnya. Untuk mendekati tugas secara lebih praktis, pilih ukuran karakter yang paling kecil. Saya selalu memilih mata karena itu adalah salah satu cara terbaik untuk menghidupkan karakter.

Di Photoshop pilih alat pensil(Alat Pensil). Jika Anda tidak dapat menemukannya, cukup tekan dan tahan alat tersebut alat sikat(Alat Kuas) dan Anda akan segera melihatnya (harus berada di urutan kedua dalam daftar). Anda hanya perlu mengubah ukurannya menjadi 1px (Anda dapat mengklik bilah opsi alat dan mengubah ukurannya, atau cukup tahan tombol [).

Anda juga akan membutuhkan Hapus alat(Eraser Tool), jadi klik (atau tekan tombol E) dan ubah pengaturannya dengan memilih dari daftar dropdown Mode:(Mode:) Pensil(Pensil) (karena tidak ada dithering dalam mode ini).

Sekarang mari kita mulai membuat piksel! Gambarlah alis dan mata seperti yang ditunjukkan pada gambar di bawah ini:


ey! Saya pixelated!!

Anda bisa mulai dengan Lineart (di mana menggambar dilakukan dengan garis), tetapi cara yang lebih praktis adalah dengan menggambar siluet karakter. Kabar baiknya adalah Anda tidak perlu menjadi seorang profesional pada tahap ini, coba bayangkan saja dimensi bagian tubuh (kepala, badan, lengan, kaki) dan pose awal karakter tersebut. Coba lakukan sesuatu seperti ini dengan warna abu-abu:


Anda tidak perlu menjadi seorang profesional pada tahap ini
Perhatikan bahwa saya juga meninggalkan beberapa ruang kosong. Anda tidak perlu mengisi seluruh kanvas, sisakan ruang untuk bingkai selanjutnya. Dalam hal ini, akan sangat berguna untuk menjaga ukuran kanvas yang sama untuk semuanya.

Setelah Anda menyelesaikan siluetnya, inilah saatnya . Sekarang Anda harus lebih berhati-hati dengan penempatan piksel, jadi jangan khawatir tentang pakaian, baju besi, dll untuk saat ini.Agar aman, Anda dapat menambahkan layer baru agar siluet asli Anda tidak pernah hilang.


Jika Anda merasa alat Pensil terlalu lambat untuk menggambar, Anda selalu dapat menggunakannya (Alat Garis), ingatlah bahwa Anda tidak akan dapat memposisikan piksel seakurat yang Anda lakukan dengan pensil. Anda perlu mengatur seperti di bawah ini:

Pilih dengan menekan dan menahan Alat persegi panjang(Alat Persegi Panjang)

Buka panel opsi alat, di daftar tarik-turun Pilih Mode Alat(Outline Draw Mode) pilih Pixel, ubah Berat(Lebar) sebesar 1px (jika belum selesai) dan hapus centang Anti-alias(Menghaluskan). Beginilah seharusnya Anda:

Harap dicatat bahwa saya tidak membuat garis bawah untuk kaki. Ini opsional, karena kaki bukanlah bagian kaki yang penting untuk membuatnya menonjol, dan Anda menyimpan satu baris piksel di kanvas.

Menerapkan warna dan bayangan

Sekarang Anda siap untuk mulai mewarnai karakter kita. Jangan khawatir tentang memilih warna yang tepat, nanti akan sangat mudah untuk mengubahnya, pastikan masing-masing memiliki "warnanya sendiri". Gunakan warna default pada tab Swatch(Jendela → Swatch).

Warnai karakter Anda seperti yang ditunjukkan di bawah ini (namun jangan ragu untuk berkreasi dan menggunakan warna Anda sendiri!)


Warna yang bagus dan kontras meningkatkan keterbacaan aset Anda!
Perhatikan bahwa saya masih belum membuat garis luar untuk pakaian atau rambutnya. Selalu ingat: simpan piksel sebanyak mungkin dari garis luar yang tidak perlu!

Jangan buang waktu mengecat setiap piksel. Untuk mempercepat, gunakan garis untuk warna yang sama, atau alat ember cat(Paint Bucket Tool) untuk mengisi kekosongan. Omong-omong, itu juga harus dikonfigurasi. Pilih alat ember cat di bilah alat (atau cukup tekan tombol G) dan ubah toleransi(Toleransi) ke 0, dan hapus centang Anti-alias(Menghaluskan).

Jika Anda perlu menggunakan Alat Tongkat Sihir(Magic Wand Tool) - alat yang sangat berguna yang memilih semua piksel dengan warna yang sama, lalu mengaturnya dengan cara yang sama seperti alat "Paint Bucket" - tanpa toleransi dan anti-aliasing.

Langkah selanjutnya, yang membutuhkan sedikit pengetahuan dari Anda, adalah keringanan dan bayangan. Jika Anda belum memiliki pengetahuan tentang cara menunjukkan sisi terang dan gelap, maka di bawah ini saya akan memberikan sedikit petunjuk. Jika Anda tidak punya waktu atau keinginan untuk mempelajarinya, Anda dapat melewati langkah ini dan pergi ke bagian Bumbui Palet Anda, karena bagaimanapun juga, Anda dapat membuat bayangan Anda terlihat seperti contoh saya!


Gunakan sumber cahaya yang sama untuk seluruh aset

Usahakan untuk memberikan outline sesuai keinginan/bisa, karena setelah itu aset mulai terlihat lebih menarik. Misalnya, sekarang Anda bisa melihat hidung, mata cemberut, pel rambut, lipatan celana, dll. Anda juga bisa menambahkan beberapa titik terang di atasnya, itu akan terlihat lebih baik:


Gunakan sumber cahaya yang sama saat membuat bayangan

Dan sekarang, seperti yang saya janjikan, panduan kecil untuk cahaya dan bayangan:

Bumbui palet Anda

Banyak orang menggunakan warna palet default, tetapi karena banyak orang menggunakan warna ini, kami melihatnya di banyak game.

Photoshop memiliki banyak pilihan warna dalam palet standar, tetapi jangan terlalu mengandalkannya. Yang terbaik adalah membuat warna Anda sendiri dengan mengeklik palet utama di bagian bawah bilah alat.

Kemudian, di jendela Color Picker, telusuri sidebar kanan untuk memilih warna dan area utama untuk memilih kecerahan (lebih terang atau lebih gelap) dan saturasi (lebih segar atau lebih redup) yang diinginkan.


Setelah Anda menemukan yang tepat, klik OK dan mengkonfigurasi ulang alat Paint Bucket. Jangan khawatir, Anda kemudian dapat menghapus centang pada kotak 'Bersebelahan' dan saat Anda melukis dengan warna baru, semua piksel baru dengan warna latar belakang yang sama juga akan dicat ulang.

Ini adalah alasan lain mengapa penting untuk bekerja dengan sedikit warna dan selalu menggunakan warna yang sama untuk elemen yang sama (kemeja, rambut, helm, baju besi, dll.). Tapi jangan lupa untuk menggunakan warna berbeda untuk area lain, jika tidak, gambar kita akan terlalu berlebihan!

Hapus centang "Bersebelahan" untuk mengisi piksel yang dipilih dengan warna yang sama

Ubah warna jika Anda suka dan dapatkan pewarnaan karakter yang lebih glamor! Anda bahkan dapat mewarnai ulang garis luarnya, pastikan garis tersebut berbaur dengan baik dengan latar belakang.


Terakhir, lakukan tes warna latar belakang: buat layer baru di bawah karakter Anda dan isi dengan warna berbeda. Ini diperlukan untuk memastikan bahwa karakter Anda akan terlihat pada latar belakang terang, gelap, hangat, dan dingin.


Seperti yang Anda lihat, saya mematikan anti-aliasing di semua alat yang saya gunakan sejauh ini. Jangan lupa untuk melakukan ini di alat lain juga, misalnya, Tenda Elips(Area pemilihan oval) dan Laso(Laso).

Dengan alat ini, Anda dapat dengan mudah mengubah ukuran bagian yang dipilih, atau bahkan memutarnya. Untuk melakukan ini, gunakan alat seleksi apa saja (atau tekan tombol M) untuk memilih area, klik kanan dan pilih Perubahan Bebas(Transformasi Gratis), atau cukup tekan Ctrl + T . Untuk mengubah ukuran area yang dipilih, seret salah satu pegangan yang terletak di sepanjang bingkai transformasi. Untuk mengubah ukuran pilihan sambil mempertahankan rasio aspek, tahan tombol Shift dan seret salah satu gagang sudut.

Namun, Photoshop secara otomatis memperhalus semua yang diedit dengan Perubahan Bebas jadi sebelum mengedit pergi ke Edit → Preferensi → Umum(Ctrl + K) dan ubah interpolasi gambar(Interpolasi gambar) aktif Lingkungan terdekat(Tetangga terdekat). Singkatnya, di Lingkungan terdekat posisi dan ukuran baru dihitung dengan sangat kasar, tidak ada warna atau transparansi baru yang diterapkan dan warna yang Anda pilih disimpan.


Mengintegrasikan Pixel Art Drawing ke dalam Game iPhone

Di bagian ini, Anda akan mempelajari cara mengintegrasikan pixel art kami ke dalam game iPhone menggunakan framework game Cocos2d. Mengapa saya hanya mempertimbangkan iPhone? Karena, berkat serangkaian artikel tentang Unity, (misalnya :, atau Game ala Jetpack Joyride di Unity 2D), Anda sudah tahu cara bekerja dengannya di Unity, dan dari artikel tentang Crafty (Game browser: Ular) dan Dampak (Pengantar untuk membuat game game browser di Impact) Anda telah mempelajari cara menyematkannya di kanvas dan membuat game browser.

Jika Anda baru mengenal Cocos2D, atau pengembangan iPhone secara umum, saya sarankan Anda mulai dengan salah satu tutorial Cocos2d dan iPhone. Jika Anda telah menginstal Xcode dan Cocos2d, baca terus!

Buat proyek baru iOS → cocos2d v2.x → templat iOS cocos2d, beri nama PixelArt, dan pilih iPhone sebagai perangkatnya. Seret seni piksel yang dibuat, misalnya: sprite_final.png ke dalam proyek Anda, lalu buka HelloWorldLayer.m dan ganti metode inisialisasi dengan yang berikut:

-(id) init ( if((self=)) ( CCSprite * hero = ; hero.position = ccp(96, 96); hero.flipX = YES; ; ) return self; )

Kami memposisikan sprite di sisi kiri layar dan memutarnya sehingga menghadap ke kanan. Kompilasi, jalankan, dan kemudian Anda akan melihat sprite Anda di layar:


Namun, ingat, seperti yang telah kita bahas sebelumnya dalam tutorial ini, kami ingin memperbesar piksel secara artifisial sehingga setiap piksel tampak berbeda dari yang lain. Jadi tambahkan baris baru ini di dalam metode inisialisasi:

Skala pahlawan = 2.0;

Tidak ada yang rumit, bukan? Kompilasi, jalankan, dan... tunggu, sprite kita buram!

Ini karena, secara default, Cocos2d meratakan gambar saat diskalakan. Kami tidak membutuhkannya, jadi tambahkan baris berikut:

Baris ini mengonfigurasi Cocos2d untuk menskalakan gambar tanpa anti-aliasing, jadi anak laki-laki kita masih terlihat "piksel". Kompilasi, jalankan, dan... ya, berhasil!


Perhatikan manfaat menggunakan grafik Pixel Art - kita dapat menggunakan gambar yang lebih kecil dari yang ditampilkan di layar, menghemat banyak memori tekstur. Kami bahkan tidak perlu membuat gambar terpisah untuk tampilan retina!

Dan apa selanjutnya?

Saya harap Anda menikmati tutorial ini dan belajar lebih banyak tentang pixel art! Sebelum berpisah, saya ingin memberi Anda beberapa saran:

  • Selalu coba untuk menghindari penggunaan anti-aliasing, gradien, atau terlalu banyak warna untuk aset Anda. Ini untuk kebaikan Anda sendiri, apalagi jika Anda masih pemula.
  • Jika Anda BENAR-BENAR ingin meniru gaya retro, lihat seninya di game konsol 8-bit atau 16-bit.
  • Beberapa gaya tidak menggunakan garis gelap, yang lain tidak memperhitungkan pengaruh cahaya atau bayangan. Itu semua tergantung gaya! Dalam pelajaran kami, kami tidak menggambar bayangan, tetapi ini tidak berarti Anda tidak boleh menggunakannya.

Bagi seorang pemula, Pixel Art sepertinya merupakan grafik yang paling mudah dipelajari, namun nyatanya tidak sesederhana kelihatannya. Cara terbaik untuk meningkatkan keterampilan Anda adalah latihan, latihan, latihan. Saya sangat menyarankan untuk memposting karya Anda di forum Seni Piksel agar seniman lain memberi Anda saran - ini cara yang bagus untuk meningkatkan teknik Anda! Mulai dari yang kecil, berlatih keras, dapatkan umpan balik, dan Anda dapat membuat game luar biasa yang akan memberi Anda banyak uang dan kegembiraan!

seni piksel(ditulis tanpa tanda hubung) atau seni piksel- arah seni digital, yang terdiri dari pembuatan gambar pada tingkat piksel (yaitu, unit logis minimum yang terdiri dari gambar). Tidak semua gambar raster adalah seni piksel, meskipun semuanya terdiri dari piksel. Mengapa? Karena pada akhirnya, konsep pixel art tidak terlalu banyak memasukkan hasil melainkan proses pembuatan ilustrasi. Piksel demi piksel, dan hanya itu. Jika Anda mengambil foto digital, kurangi itu (sehingga pikselnya terlihat) dan klaim bahwa Anda menggambarnya dari awal - ini akan menjadi pemalsuan yang nyata. Meskipun pasti akan ada orang bodoh yang naif yang akan memuji Anda atas kerja keras Anda.

Sekarang tidak diketahui secara pasti kapan teknik ini berasal, akarnya hilang di suatu tempat di awal tahun 1970-an. Namun, teknik menyusun gambar dari elemen kecil kembali ke bentuk seni yang jauh lebih kuno, seperti mozaik, jahitan silang, tenun karpet, dan pembuatan manik-manik. Ungkapan "seni piksel" sebagai definisi seni piksel pertama kali digunakan dalam artikel oleh Adele Goldberg dan Robert Flegal di jurnal Komunikasi ACM (Desember 1982).

Pixel art telah menerima aplikasi terluas dalam game komputer, yang tidak mengherankan - memungkinkan untuk membuat gambar yang tidak membutuhkan sumber daya dan terlihat sangat cantik pada saat yang sama (pada saat yang sama, mereka membutuhkan banyak waktu dari artis dan membutuhkan keterampilan tertentu, dan karena itu menyiratkan gaji yang baik) . Masa kejayaan, titik tertinggi dalam pengembangan, secara resmi disebut video game di konsol generasi ke-2 dan ke-3 (awal 1990-an). Kemajuan lebih lanjut dalam teknologi, munculnya warna 8-bit pertama, dan kemudian Warna Sejati, pengembangan grafik tiga dimensi - selama ini mendorong seni piksel ke latar belakang dan rencana ketiga, dan kemudian piksel itu benar-benar mulai tampak seni telah berakhir.

Anehnya, tetapi Tuan Kemajuan ilmiah dan teknologilah yang mendorong grafik piksel ke posisi terakhir di pertengahan tahun 90-an, dan kemudian mengembalikannya ke permainan - mengungkapkan kepada dunia perangkat seluler dalam bentuk ponsel dan PDA. Lagi pula, tidak peduli seberapa berguna perangkat bermodel baru, kita semua tahu bahwa jika Anda setidaknya tidak dapat memainkan solitaire di dalamnya, itu tidak ada gunanya. Nah, dimana ada layar dengan resolusi rendah, disitu ada pixel art. Seperti yang mereka katakan, selamat datang kembali.

Tentu saja, berbagai elemen retrograde memainkan peran mereka dalam kembalinya grafik piksel, yang suka bernostalgia tentang game-game masa kanak-kanak yang bagus, sambil berkata: "Oh, mereka tidak melakukannya sekarang"; aesthetes yang mampu mengapresiasi keindahan pixel art, dan developer indie yang tidak merasakan keindahan grafis modern (dan terkadang, meski jarang, tidak tahu bagaimana menerapkannya dalam proyek mereka sendiri), itulah sebabnya mereka memahat pixel art . Tapi mari kita tetap tidak mengabaikan proyek komersial murni - aplikasi untuk perangkat seluler, periklanan dan desain web... Jadi sekarang seni piksel, seperti yang mereka katakan, tersebar luas di kalangan sempit dan telah mendapatkan semacam status seni "bukan untuk semua orang" . Dan ini terlepas dari kenyataan bahwa untuk orang awam yang sederhana itu sangat mudah diakses, karena untuk bekerja dalam teknik ini, cukup memiliki komputer dan editor grafis sederhana! (kemampuan menggambar, omong-omong, juga tidak ada salahnya) Cukup kata-kata, langsung ke intinya!

2. Alat.

Apa yang Anda butuhkan untuk membuat seni piksel? Seperti yang saya katakan di atas, komputer dan editor grafis apa pun yang mampu bekerja pada level piksel sudah cukup. Anda dapat menggambar di mana saja, bahkan di Game Boy, bahkan di Nintendo DS, bahkan di Microsoft Paint (hal lainnya adalah menggambar di yang terakhir sangat merepotkan). Ada banyak sekali editor raster, banyak di antaranya gratis dan cukup fungsional, sehingga setiap orang dapat memutuskan perangkat lunaknya sendiri.

Saya menggambar di Adobe Photoshop karena nyaman dan karena sudah lama. Saya tidak akan berbohong dan mengatakan, menggumamkan gigi palsu saya, bahwa "Saya ingat Photoshop masih sangat kecil, ada di Macintosh, dan dengan nomor 1.0" Ini bukan. Tapi saya ingat Photoshop 4.0 (dan juga di Mac). Jadi bagi saya pertanyaan tentang pilihan tidak pernah ada. Dan oleh karena itu, tidak, tidak, tetapi saya akan memberikan rekomendasi mengenai Photoshop, terutama yang kemampuannya akan sangat membantu menyederhanakan kreativitas.

Jadi, Anda memerlukan editor grafis yang memungkinkan Anda menggambar dengan alat dalam satu piksel persegi (piksel juga bisa non-persegi, misalnya, bulat, tetapi kami tidak tertarik padanya saat ini). Jika editor Anda mendukung rangkaian warna apa pun, bagus. Jika itu juga memungkinkan Anda untuk menyimpan file - bagus sekali. Alangkah baiknya mengetahui cara bekerja dengan lapisan, karena saat mengerjakan gambar yang agak rumit, lebih mudah untuk menguraikan elemennya menjadi lapisan yang berbeda, tetapi pada umumnya ini adalah masalah kebiasaan dan kenyamanan.

Haruskah kita mulai? Apakah Anda mungkin menunggu daftar beberapa trik rahasia, rekomendasi yang akan mengajari Anda cara menggambar pixel art? Dan sebenarnya, tidak banyak. Satu-satunya cara untuk mempelajari cara menggambar pixel art adalah dengan menggambar diri sendiri, coba, coba, jangan takut dan bereksperimen. Jangan ragu untuk menyalin karya orang lain, jangan takut terlihat tidak orisinal (asalkan jangan menganggap karya orang lain sebagai milik Anda, hehe). Analisis dengan cermat dan cermat karya master (bukan milik saya) dan gambar, gambar, gambar. Beberapa tautan bermanfaat menunggu Anda di akhir artikel.

3. Prinsip umum.

Namun, ada beberapa prinsip umum yang perlu diketahui. Jumlahnya sangat sedikit, saya menyebutnya "prinsip" dan bukan hukum, karena sifatnya lebih bersifat penasehat. Lagi pula, jika Anda berhasil menggambar seni piksel yang cerdik dengan melewati semua aturan - siapa yang peduli?

Prinsip paling dasar dapat dirumuskan sebagai berikut: unit minimum suatu gambar adalah piksel, dan jika memungkinkan, semua elemen komposisi harus proporsional dengannya. Saya akan menguraikan: semua yang Anda gambar terdiri dari piksel, dan piksel harus dibaca dalam segala hal. Ini tidak berarti bahwa tidak boleh ada elemen sama sekali dalam gambar, misalnya 2x2 piksel, atau 3x3. Tetapi masih lebih baik untuk membuat gambar dari masing-masing piksel.

Goresan dan secara umum semua garis gambar harus setebal satu piksel (dengan pengecualian yang jarang terjadi).

Saya sama sekali tidak mengatakan bahwa ini salah. Tapi itu masih tidak terlalu cantik. Dan untuk membuatnya cantik, ingat satu aturan lagi: menggambar tanpa kekusutan, bulat dengan mulus. Ada yang namanya kinks - fragmen yang tidak beraturan, membuat garis terlihat tidak rata dan bergerigi (di lingkungan seniman piksel berbahasa Inggris disebut jaggies):

Kinks menghilangkan kehalusan dan keindahan alami gambar. Dan jika fragmen 3, 4 dan 5 jelas dan mudah diperbaiki, situasinya lebih rumit dengan yang lain - panjang satu bagian dalam rantai putus di sana, tampaknya sepele, tetapi sepele yang terlihat. Dibutuhkan sedikit latihan untuk belajar melihat dan menghindari tempat-tempat seperti itu. Ketegaran 1 tersingkir dari garis karena merupakan piksel tunggal - sedangkan di area yang terjepit, garis terdiri dari segmen 2 piksel. Untuk menghilangkannya, saya melunakkan masuknya kurva ke tikungan dengan memperluas segmen atas menjadi 3px, dan menggambar ulang seluruh garis dalam segmen 2px. Jeda 2 dan 6 identik satu sama lain - ini sudah merupakan fragmen dengan panjang 2 piksel di area yang dibangun oleh satu piksel.

Serangkaian contoh dasar garis miring, yang dapat ditemukan di hampir setiap manual seni piksel (tidak terkecuali milik saya), akan membantu menghindari jeda seperti itu saat menggambar:

Seperti yang Anda lihat, garis lurus terdiri dari segmen dengan panjang yang sama, digeser satu piksel saat digambar - ini adalah satu-satunya cara untuk mencapai efek linearitas. Metode konstruksi yang paling umum adalah dengan panjang segmen 1, 2 dan 4 piksel (ada yang lain, tetapi opsi yang disajikan harus cukup untuk mengimplementasikan hampir semua ide artistik). Dari ketiganya, yang paling populer dapat dengan aman disebut panjang segmen 2 piksel: menggambar segmen, memindahkan pena sejauh 1 piksel, menggambar segmen lain, memindahkan pena sebanyak 1 piksel, menggambar segmen lainnya:

Mudah, bukan? Hanya butuh kebiasaan. Mengetahui cara menggambar garis miring dengan peningkatan 2 piksel akan membantu dengan isometrik, jadi kita akan melihatnya lebih dekat lain kali. Secara umum, garis lurus itu bagus - tetapi hanya sampai tugas menggambar sesuatu yang ajaib muncul. Di sini kita membutuhkan kurva, dan banyak kurva yang berbeda. Dan kami mengadopsi aturan sederhana untuk membulatkan garis lengkung: panjang elemen kurva harus berkurang/meningkat secara bertahap.

Keluar dari garis lurus ke pembulatan dilakukan dengan lancar, saya menunjukkan panjang setiap segmen: 5 piksel, 3, 2, 2, 1, 1, lagi 2 (sudah vertikal), 3, 5 dan seterusnya. Belum tentu casing Anda akan menggunakan urutan yang sama, semuanya tergantung kelancaran yang dibutuhkan. Contoh pembulatan lainnya:

Sekali lagi, kami menghindari kekusutan yang sangat merusak gambar. Jika Anda ingin memeriksa materi yang dipelajari, di sini saya memiliki skin untuk Winamp yang digambar oleh penulis yang tidak dikenal, kosong:

Ada kesalahan besar pada gambar, dan hanya pembulatan yang tidak berhasil, dan ditemukan kekusutan - coba perbaiki gambar berdasarkan apa yang sudah Anda ketahui. Itu saja untuk saya dengan garis-garisnya, saya mengusulkan untuk menggambar sedikit. Dan jangan biarkan kesederhanaan contoh membodohi Anda, Anda hanya bisa belajar menggambar dengan menggambar - bahkan hal-hal sederhana seperti itu.

4.1. Kami menggambar botol dengan air hidup.

1. Bentuk objek, sedangkan warna tidak bisa digunakan.

2. Cairan merah.

3. Ubah warna kaca menjadi biru, tambahkan area teduh di dalam gelembung dan area terang di permukaan cairan yang diinginkan.

4. Tambahkan sorotan putih pada gelembung, dan bayangan merah tua selebar 1 piksel pada area cair yang berbatasan dengan dinding gelembung. Terlihat bagus, bukan?

5. Demikian pula, kami menggambar botol dengan cairan biru - di sini warna kaca yang sama, ditambah tiga warna biru untuk cairannya.

4.2. Kami menggambar semangka.

Mari menggambar lingkaran dan setengah lingkaran - ini akan menjadi semangka dan potongan potongan.

2. Mari kita tandai potongan pada semangka itu sendiri, dan pada irisan - batas antara kerak dan daging buah.

3. Isi. Warna dari palet, rata-rata warna hijau adalah warna kerak, rata-rata merah adalah warna daging buah.

4. Tunjukkan area transisi dari kulit ke pulp.

5. Garis-garis tipis pada semangka (akhirnya, dia terlihat seperti dirinya sendiri). Dan tentu saja, biji! Jika Anda menyilangkan semangka dengan kecoak, mereka akan menyebar dengan sendirinya.

6. Kami mengingatkan. Kami menggunakan warna merah muda pucat untuk menunjukkan sorotan di atas biji di suatu bagian, dan dengan meletakkan piksel dalam pola kotak-kotak, kami mencapai semacam volume dari irisan potongan (metode ini disebut dithering, tentang itu nanti). Kami menggunakan warna merah tua untuk menunjukkan tempat teduh di bagian semangka, dan hijau tua (sekali lagi, piksel kotak-kotak) untuk memberi volume pada semangka itu sendiri.

5. Bingung.

Dithering, atau blending, adalah teknik pencampuran piksel dalam pola yang tertata dengan jelas (tidak selalu) di dua area yang berbatasan dengan warna berbeda. Cara paling sederhana, paling umum, dan efektif adalah mengganti piksel dalam pola kotak-kotak:

Penerimaan lahir karena (atau lebih tepatnya bertentangan dengan) keterbatasan teknis - pada platform dengan palet terbatas, dithering memungkinkan, dengan mencampurkan piksel dari dua warna berbeda, untuk mendapatkan yang ketiga yang tidak ada di palet:

Sekarang, di era kemungkinan teknis tanpa batas, banyak yang mengatakan bahwa kebutuhan akan dithering telah hilang dengan sendirinya. Namun, penggunaan yang tepat dapat memberikan karya Anda gaya retro khas yang akan dikenali oleh semua penggemar video game lama. Secara pribadi, saya suka menggunakan dithering. Aku tidak terlalu mengenalnya, tapi aku menyukainya.

Dua opsi lagi untuk dithering:

Apa yang perlu Anda ketahui tentang dithering untuk dapat menggunakannya. Lebar minimum zona campuran harus minimal 2 piksel (pemeriksa yang sama). Lebih banyak mungkin. Lebih baik tidak melakukan lebih sedikit.

Di bawah ini adalah contoh dithering yang buruk. Terlepas dari kenyataan bahwa teknik seperti itu sering ditemukan pada sprite dari video game, Anda perlu menyadari bahwa layar TV menghaluskan gambar secara signifikan, dan sisir semacam itu, dan bahkan bergerak, tidak diperbaiki oleh mata:

Yah, cukup teori. Saya sarankan Anda berlatih sedikit lagi.

Seni piksel dapat digambar dalam program grafik raster apa pun, ini masalah preferensi dan pengalaman pribadi (serta kemampuan finansial, tentu saja). Seseorang menggunakan Paint yang paling sederhana, saya melakukannya di Photoshop - karena, pertama, saya sudah lama mengerjakannya, dan kedua, saya lebih nyaman di sana. Entah bagaimana saya memutuskan untuk mencoba Paint.NET gratis, saya tidak menyukainya - sepertinya dengan mobil yang mengenali mobil asing dengan transmisi otomatis di Zaporozhets tidak mungkin duduk. Majikan saya memberi saya perangkat lunak berlisensi, jadi saya memiliki hati nurani yang bersih sebelum Adobe Corporation ... Meskipun harga untuk program mereka tidak terpikirkan, dan mereka terbakar habis-habisan karenanya.

1. Persiapan kerja.

Buat dokumen baru dengan pengaturan apa pun (biar lebar 60 piksel, tinggi 100 piksel). Alat utama seniman piksel adalah pensil ( Alat Pensil, dipanggil oleh hotkey B). Jika bilah alat mengaktifkan kuas (dan ikon yang menggambarkan kuas), arahkan kursor ke atasnya, tekan dan tahan LMB- menu drop-down kecil akan muncul di mana Anda harus memilih pensil. Setel ukuran pena ke 1 piksel (di panel atas di sebelah kiri, menu tarik-turun Sikat):

Seni piksel untuk pemula. | Perkenalan.

Seni piksel untuk pemula. | Perkenalan.

Beberapa kombinasi yang lebih bermanfaat. " ctrl+" dan " ctrl-» memperbesar dan memperkecil gambar. Hal ini juga berguna untuk mengetahui bahwa menekan ctrl dan " (kutipan-pohon Natal, atau kunci Rusia " e”) mengaktifkan dan menonaktifkan grid, yang sangat membantu saat menggambar pixel art. Langkah kisi juga harus disesuaikan sendiri, akan lebih nyaman bagi seseorang jika 1 piksel, saya terbiasa dengan lebar sel menjadi 2 piksel. Klik Ctrl+K(atau pergi ke Sunting->Preferensi), langsung ke intinya Panduan, Kisi & Irisan dan instal Garis kisi setiap 1 piksel(bagi saya, saya ulangi, lebih nyaman 2).

2. Menggambar.

Akhirnya, mari kita mulai menggambar. Mengapa membuat layer baru ( Ctrl+Shift+N), beralih ke warna pena hitam (menekan D mengatur warna default, hitam dan putih) dan menggambar kepala karakter, dalam kasus saya ini adalah elips yang simetris:

Seni piksel untuk pemula. | Perkenalan.


Seni piksel untuk pemula. | Perkenalan.

Basis bawah dan atas panjangnya 10 piksel, lalu ada segmen 4 piksel, tiga, tiga, satu, satu, dan garis vertikal setinggi 4 piksel. Lebih mudah menggambar garis lurus di Photoshop dengan penjepit Menggeser, meskipun skala gambar dalam pixel art minimal, namun teknik ini terkadang menghemat banyak waktu. Jika Anda membuat kesalahan dan menggambar terlalu banyak, naik ke suatu tempat - jangan berkecil hati, beralihlah ke alat penghapus ( Penghapus Juga aku atau kunci " e") dan hapus yang tidak Anda perlukan. Ya, pastikan untuk mengatur penghapus untuk juga mengatur ukuran pena menjadi 1 piksel sehingga menghapus piksel demi piksel, dan mode pensil ( Modus: Pensil), jika tidak maka tidak akan menghapus apa yang dibutuhkan. Beralih kembali ke pensil, saya ingatkan, melalui " B»

Secara umum, elips ini tidak digambar secara ketat sesuai dengan aturan seni piksel, tetapi ini diperlukan oleh konsep artistik. Karena ini adalah kepala masa depan, ia akan memiliki mata, hidung, mulut - detail yang cukup yang pada akhirnya akan menarik perhatian pemirsa ke dirinya sendiri dan mencegah keinginan untuk bertanya mengapa bentuk kepalanya tidak beraturan.

Kami terus menggambar, menambahkan hidung, antena, dan mulut:

Seni piksel untuk pemula. | Perkenalan.

Seni piksel untuk pemula. | Perkenalan.

Sekarang mata:

Seni piksel untuk pemula. | Perkenalan.

Seni piksel untuk pemula. | Perkenalan.

Harap perhatikan bahwa pada skala sekecil itu, mata tidak harus bulat - dalam kasus saya, ini adalah kotak dengan panjang sisi 5 piksel, yang titik sudutnya tidak digambar. Ketika dikembalikan ke skala aslinya, mereka akan terlihat cukup bulat, ditambah kesan bulat dapat ditingkatkan dengan bantuan bayangan (lebih lanjut tentang ini nanti, lihat bagian ke-3 pelajaran). Sementara itu, saya akan sedikit mengoreksi bentuk kepala dengan menghapus beberapa piksel di satu tempat dan mengecatnya di tempat lain:

Seni piksel untuk pemula. | Perkenalan.

Seni piksel untuk pemula. | Perkenalan.

Kami menggambar alis (tidak ada yang menggantung di udara - saya memiliki gaya seperti itu) dan meniru lipatan di sudut mulut, membuat senyuman lebih ekspresif:

Seni piksel untuk pemula. | Perkenalan.

Seni piksel untuk pemula. | Perkenalan.

Sudutnya belum terlihat bagus, salah satu aturan seni piksel adalah bahwa setiap piksel goresan dan elemen tidak boleh menyentuh lebih dari dua piksel yang berdekatan. Tetapi jika Anda mempelajari dengan cermat sprite dari game di akhir 80-an - awal 90-an, kesalahan ini cukup sering ditemukan di sana. Kesimpulan - jika Anda tidak bisa, tetapi sangat ingin, maka Anda bisa. Detail ini bisa dimainkan dengan bayangan nanti selama isian, jadi untuk saat ini kita menggambar lebih jauh. Batang tubuh:

Seni piksel untuk pemula. | Perkenalan.

Seni piksel untuk pemula. | Perkenalan.

Jangan memperhatikan pergelangan kaki untuk saat ini, kelihatannya canggung, kami akan memperbaikinya saat kami mengisi. Koreksi kecil: mari tambahkan ikat pinggang dan lipatan di area selangkangan, dan juga pilih sendi lutut (menggunakan fragmen kecil berukuran 2 px yang menonjol dari garis kaki):

Seni piksel untuk pemula. | Perkenalan.

Seni piksel untuk pemula. | Perkenalan.

3. Isi.

Untuk setiap elemen karakter, untuk saat ini, tiga warna sudah cukup bagi kita - warna utama isian, warna bayangan, dan guratan. Secara umum, menurut teori warna dalam seni piksel, Anda dapat menyarankan banyak hal, pada tahap awal, jangan ragu untuk memata-matai karya master dan menganalisis dengan tepat bagaimana mereka memilih warna. Sapuan setiap elemen tentu saja dapat dibiarkan hitam, tetapi dalam hal ini elemen pasti akan bergabung, saya lebih suka menggunakan warna independen yang dekat dengan warna utama elemen, tetapi dengan saturasi rendah. Akan lebih mudah untuk menggambar palet kecil di suatu tempat di dekat karakter Anda dan kemudian mengambil warna darinya menggunakan alat pipet ( Alat tetes mata, I):

Setelah memilih warna yang diinginkan, aktifkan alat ember ( Ember Cat, G). Pastikan juga untuk mematikan fungsi Anti-alias di pengaturan, kami membutuhkan isian untuk bekerja dengan jelas di dalam kontur yang digambar dan tidak melampauinya:

Seni piksel untuk pemula. | Perkenalan.


Seni piksel untuk pemula. | Perkenalan.

Kami mengisi karakter kami, yang tidak dapat diisi - kami menggambarnya secara manual dengan pensil.

Seni piksel untuk pemula. | Perkenalan.

Seni piksel untuk pemula. | Perkenalan.

Perhatikan pergelangan kaki - karena fakta bahwa area ini hanya setebal 2 piksel, saya harus mengabaikan goresan di kedua sisi, dan saya menggambarnya hanya dari sisi bayangan yang dimaksud, meninggalkan garis warna utama dengan ketebalan dari satu piksel. Perhatikan juga bahwa saya membiarkan alisnya hitam, meskipun itu tidak terlalu penting.

Photoshop memiliki pilihan praktis berdasarkan fitur warna ( Pilih->Rentang warna, dengan menyodok warna yang diinginkan dengan pipet, kami akan mendapatkan pilihan semua area dengan warna yang sama dan kemampuan untuk mengisinya secara instan, tetapi ini mengharuskan elemen karakter Anda berada di lapisan yang berbeda, jadi untuk saat ini kami akan mempertimbangkan fungsi ini berguna untuk pengguna Photoshop tingkat lanjut):

Seni piksel untuk pemula. | Perkenalan.


Seni piksel untuk pemula. | Perkenalan.

4. Naungan dan dithering.

Sekarang pilih warna bayangan dan, beralih ke pensil ( B) dengan hati-hati letakkan tempat teduh. Dalam kasus saya, sumber cahaya ada di suatu tempat di kiri dan atas, di depan karakter - oleh karena itu, kami menandai sisi kanan dengan bayangan dengan penekanan di bagian bawah. Wajah akan menjadi yang paling kaya dalam bayangan, karena ada banyak elemen kecil yang menonjol dengan bantuan bayangan di satu sisi, dan di sisi lain mereka sendiri membuat bayangan (mata, hidung, lipatan mimik):

Seni piksel untuk pemula. | Perkenalan.

Seni piksel untuk pemula. | Perkenalan.

Bayangan adalah alat visual yang sangat kuat, bayangan yang dirancang dengan baik akan memengaruhi penampilan karakter - dan kesan yang akan dibuatnya pada penonton. Dalam seni piksel, satu piksel, salah tempat, dapat merusak keseluruhan pekerjaan, sementara pada saat yang sama, tampaknya koreksi kecil seperti itu dapat membuat gambar menjadi jauh lebih cantik.

Adapun ragu-ragu'ah, dalam gambar dengan ukuran mini seperti itu, menurut saya, itu benar-benar mubazir. Metode itu sendiri terdiri dari "menguleni" dua warna tetangga, yang dicapai dengan mengejutkan piksel. Namun, untuk memberi Anda gambaran tentang tekniknya, saya masih akan memperkenalkan area kecil pencampuran, di celana, di baju, dan sedikit di wajah:

Seni piksel untuk pemula. | Perkenalan.

Seni piksel untuk pemula. | Perkenalan.

Secara umum, seperti yang Anda lihat, tidak ada yang rumit. seni piksel itu menarik karena, setelah mempelajari beberapa pola, siapa pun dapat menggambar dengan baik sendiri - hanya dengan mempelajari karya para master dengan cermat. Meski ya, beberapa pengetahuan tentang dasar-dasar teori menggambar dan warna tetap tidak ada salahnya. Berani!

Berjalan di Internet di pagi hari, saya ingin menulis postingan tentang Pixel Art, mencari materi saya menemukan dua artikel ini.

Saat ini, program seperti Photoshop, Illustrator, Corel memudahkan pekerjaan desainer dan ilustrator. Dengan bantuan mereka, Anda dapat bekerja sepenuhnya tanpa terganggu oleh susunan piksel, seperti yang terjadi di akhir abad lalu. Semua perhitungan yang diperlukan dibuat oleh perangkat lunak - editor grafis. Tetapi ada orang yang bekerja ke arah yang berbeda, tidak hanya berbeda, tetapi bahkan berlawanan. Yaitu, mereka terlibat dalam pengaturan piksel jadul yang sama, untuk mendapatkan hasil dan suasana yang unik dalam pekerjaan mereka.

Contoh seni piksel. Pecahan.

Pada artikel ini, kami ingin berbicara tentang orang-orang yang berkecimpung dalam seni piksel. Simak lebih dekat karya-karya terbaik mereka, yang karena kerumitan penerapannya saja, bisa disebut karya seni rupa kontemporer tanpa berlebihan. Karya yang membuat Anda terengah-engah saat melihatnya.

Seni Piksel. Karya dan ilustrator terbaik


Kota. Pengarang: Zoggles


Kastil dongeng. Pengarang: Tinuleaf


desa abad pertengahan. Pengarang: docdoom


Taman Gantung Babel. Penulis: Gerhana Bulan


Kuartal perumahan. Pengarang:


Atas