Adobe Photoshop: Menggambar dan menganimasikan karakter menggunakan teknik Pixel Art. Membuat karakter dalam gaya seni piksel isometrik di Adobe Photoshop

Dalam tutorial 10 langkah Cara Menggambar Pixel Art ini, saya akan mengajari Anda cara membuat "sprite" (satu karakter atau objek 2D). Istilahnya sendiri tentu saja berasal dari video game.

Saya belajar cara membuat seni piksel karena saya membutuhkannya untuk grafis dalam game saya. Setelah pelatihan bertahun-tahun, saya memahaminya dan mulai memahami bahwa seni piksel lebih merupakan seni daripada sekadar alat. Saat ini, seni piksel sangat populer di kalangan pengembang game dan ilustrator.

Tutorial ini dibuat bertahun-tahun yang lalu untuk mengajari orang-orang konsep sederhana dalam membuat seni piksel, namun telah diperbarui berkali-kali sehingga sangat berbeda dari versi aslinya. Ada banyak tutorial di Internet tentang topik yang sama, tetapi semuanya tampak terlalu rumit atau panjang bagi saya. seni piksel bukanlah sains. Anda tidak boleh menghitung vektor saat membuat seni piksel.

Peralatan

Salah satu keuntungan utama membuat seni piksel adalah Anda tidak memerlukan alat canggih apa pun - editor grafis, yang diinstal di komputer Anda secara default sudah cukup. Perlu disebutkan bahwa ada program yang dirancang khusus untuk membuat seni piksel, seperti Pro Motion atau Pixen (untuk pengguna Mac). Saya belum mengujinya sendiri, tapi saya sudah mendengar banyak umpan balik positif. Pada tutorial kali ini saya akan menggunakan Photoshop yang meskipun harganya mahal, namun isinya banyak alat yang berguna untuk menciptakan karya seni, beberapa di antaranya sangat berguna untuk membuat piksel.

Cara menggambar seni piksel di Photoshop

Saat menggunakan Photoshop, senjata utama Anda adalah alat Pensil (tombol B), yang merupakan alternatif dari alat Kuas. Pensil memungkinkan Anda mewarnai piksel individual tanpa tumpang tindih warna.

Kita memerlukan dua alat lagi: “Seleksi” (tombol M) dan “ Tongkat sihir» (tombol W) untuk memilih dan menyeret, atau menyalin dan menempel. Ingatlah bahwa dengan menahan tombol Alt atau Shift saat membuat pilihan, Anda dapat menambahkan objek yang dipilih atau mengecualikannya dari daftar pilihan saat ini. Ini berguna ketika Anda perlu memilih objek yang tidak rata.

Anda juga bisa menggunakan pipet untuk mentransfer warna. Ada ribuan alasan mengapa mempertahankan warna dalam seni piksel itu penting, jadi sebaiknya Anda mengambil beberapa warna dan menggunakannya berulang kali.

Terakhir, pastikan Anda mengingat semua tombol pintas, karena ini dapat menghemat banyak waktu. Perhatikan "X" yang beralih antara warna primer dan sekunder.

Garis

Piksel adalah kotak berwarna kecil yang sama. Pertama, Anda perlu memahami cara mengatur kotak-kotak ini secara efektif untuk membuat garis yang Anda inginkan. Kita akan melihat dua jenis garis yang paling umum: lurus dan melengkung.

Garis lurus

Saya tahu apa yang Anda pikirkan: semuanya di sini sangat sederhana sehingga tidak ada gunanya membahas apa pun. Namun jika menyangkut piksel, garis lurus pun bisa menjadi masalah. Kita perlu menghindari bagian yang bergerigi – potongan garis kecil yang membuatnya terlihat tidak rata. Mereka muncul jika salah satu bagian garis lebih besar atau lebih kecil dari bagian lain di sekitarnya.

Garis melengkung

Saat menggambar garis lengkung, Anda perlu memastikan bahwa penurunan atau kenaikannya seragam di sepanjang garis lengkung. DI DALAM dalam contoh ini, garis rapi mempunyai interval 6 > 3 > 2 > 1, tetapi garis dengan interval 3 > 1< 3 выглядит зазубренной.

Kemampuan menggambar garis - elemen kunci seni piksel. Sedikit lebih jauh saya akan bercerita tentang anti-aliasing.

Konseptualisasi

Untuk memulai, Anda perlu ide bagus! Cobalah untuk memvisualisasikan apa yang akan Anda lakukan dalam seni piksel - di atas kertas atau hanya dalam pikiran Anda. Setelah Anda memiliki gambaran tentang gambarnya, Anda dapat berkonsentrasi pada pikselasi itu sendiri.

Topik untuk Pemikiran

• Untuk apa sprite ini digunakan? Apakah itu untuk situs web atau game? Apakah nanti perlu dianimasikan? Jika ya, maka perlu dibuat lebih kecil dan tidak terlalu detail. Sebaliknya, jika Anda tidak bekerja dengan sprite di masa mendatang, Anda dapat melampirkan sebanyak mungkin bagian yang diperlukan. Oleh karena itu, putuskan terlebih dahulu untuk apa sebenarnya sprite ini diperlukan dan pilih parameter optimal.
• Batasan apa saja yang ada? Sebelumnya saya telah menyebutkan pentingnya melestarikan bunga. Alasan utama adalah palet warna yang terbatas karena persyaratan sistem (yang sangat tidak mungkin terjadi di zaman kita) atau untuk kompatibilitas. Atau untuk akurasi jika Anda meniru gaya tertentu dari C64, NES, dll. Sebaiknya pertimbangkan juga dimensi sprite Anda dan apakah sprite tersebut terlalu menonjol dari objek latar belakang yang Anda perlukan.

Ayo kita coba!

Tidak ada batasan dalam tutorial ini, tapi saya ingin memastikan bahwa pixel art saya cukup besar sehingga Anda dapat melihat secara detail apa yang terjadi di setiap langkah. Untuk tujuan ini, saya memutuskan untuk menggunakan Lucha Lawyer, karakter dari dunia gulat, sebagai model. Ini akan sangat cocok dengan game pertarungan atau game aksi cepat.

Sirkuit

Garis hitam akan menjadi dasar yang baik untuk sprite Anda, jadi dari situlah kita akan mulai. Kami memilih warna hitam karena terlihat bagus, namun juga agak gelap. Nanti di tutorial saya akan memberitahu Anda bagaimana mengubah warna outline untuk meningkatkan realisme.

Ada dua pendekatan untuk membuat kontur. Anda dapat menggambar garis luarnya dengan tangan lalu menyesuaikannya sedikit, atau Anda dapat menggambar semuanya satu piksel dalam satu waktu. Ya, Anda memahami semuanya dengan benar, kita berbicara tentang seribu klik.

Metode yang Anda pilih bergantung pada ukuran sprite dan keterampilan piksel Anda. Jika sprite sangat besar, akan lebih logis jika menggambarnya dengan tangan untuk membuat bentuk kasar, lalu memangkasnya. Percayalah, ini jauh lebih cepat daripada langsung mencoba menggambar sketsa yang sempurna.

Dalam tutorial saya, saya membuat sprite yang cukup besar, jadi metode pertama akan ditampilkan di sini. Akan lebih mudah jika saya menunjukkan semuanya dengan jelas dan menjelaskan apa yang terjadi.

Langkah pertama: garis besar kasar

Dengan menggunakan mouse atau tablet Anda, gambarkan garis kasar untuk sprite Anda. Pastikan TIDAK TERLALU mentah, artinya kira-kira seperti yang Anda lihat pada produk akhir Anda.

Sketsa saya hampir sepenuhnya sesuai dengan apa yang saya rencanakan.

Langkah Kedua: Poles Garis Besarnya

Mulailah dengan memperbesar gambar sebanyak 6 atau 8 kali. Anda harus melihat setiap piksel dengan jelas. Dan kemudian, bersihkan garis luarnya. Secara khusus, ada baiknya memperhatikan "piksel liar" (ketebalan keseluruhan garis tidak boleh lebih dari satu piksel), hilangkan tepi yang bergerigi, dan tambahkan detail kecil yang kita lewatkan pada langkah pertama.

Bahkan sprite besar pun sangat jarang melebihi 200 x 200 piksel. Ungkapan “lakukan lebih banyak dengan lebih sedikit” adalah cara yang bagus untuk menggambarkan proses pikselasi. Anda akan segera melihat bahwa satu piksel pun penting.

Sederhanakan kerangka Anda sebanyak mungkin. Kita akan membahas detailnya nanti, sekarang Anda perlu berupaya menemukan piksel besar, seperti misalnya segmentasi otot. Segalanya tidak terlihat bagus saat ini, tapi bersabarlah.

Warna

Jika outline sudah siap, kita mendapatkan semacam lembar mewarnai yang perlu diisi dengan warna. Cat, tuang, dan alat lainnya akan membantu kita dalam hal ini. Memilih warna bisa jadi rumit, namun teori warna jelas bukan topik artikel ini. Meskipun demikian, ada beberapa konsep dasar yang perlu Anda ketahui.

Model warna HSB

Ini adalah singkatan bahasa Inggris yang terdiri dari kata Hue, Saturation, Brightness. Ini hanyalah salah satu dari banyak model warna komputer (atau representasi warna numerik). Anda mungkin pernah mendengar contoh lain seperti RGB dan CMYK. Kebanyakan editor gambar menggunakan HSB untuk pemilihan warna, jadi kami akan fokus pada hal itu.

Warna– Hue adalah apa yang biasa kita sebut warna.

Kejenuhan– Saturasi – menentukan intensitas warna. Jika nilainya 100%, maka ini adalah kecerahan maksimum. Jika Anda menurunkannya, warnanya akan kusam dan menjadi "abu-abu".

Kecerahan– cahaya yang memancarkan warna. Misalnya, untuk orang kulit hitam, indikatornya adalah 0%.

Memilih warna

Memutuskan warna mana yang akan dipilih terserah Anda, namun ada beberapa hal yang perlu diingat:

• Warna kusam dan desaturasi terlihat lebih realistis daripada warna kartun.
• Pikirkan tentang roda warna: semakin jauh jarak dua warna pada roda, semakin buruk perpaduannya. Pada saat yang sama, warna merah dan oranye, yang berdekatan, tampak serasi.

• Semakin banyak warna yang Anda gunakan, gambar Anda akan terlihat semakin buram. Oleh karena itu, pilihlah beberapa warna primer dan gunakanlah. Ingatlah bahwa Super Mario, pada suatu waktu, dibuat secara eksklusif dari kombinasi warna coklat dan merah.

Menerapkan warna

Menerapkan warna sangat sederhana. Jika Anda menggunakan Photoshop, cukup pilih fragmen yang diinginkan, pilih dengan tongkat ajaib (tombol W), lalu isi dengan warna utama (Alt-F) atau warna tambahan Ctrl-F).

bayangan

Peneduh adalah salah satu bagian terpenting dalam upaya menjadi manusia setengah dewa pikselasi. Pada tahap inilah sprite mulai terlihat lebih baik atau berubah menjadi zat aneh. Ikuti instruksi saya dan Anda pasti akan berhasil.

Langkah pertama: pilih sumber cahaya

Pertama kita memilih sumber cahaya. Jika sprite Anda merupakan bagian dari fragmen yang lebih besar yang memiliki sumber penerangannya sendiri, seperti lampu, obor, dan sebagainya. Dan semuanya dapat memberikan efek berbeda pada tampilan sprite. Terlepas dari itu, memilih sumber cahaya jauh seperti matahari adalah ide bagus untuk sebagian besar seni piksel. Untuk game, misalnya, Anda perlu membuat sprite paling terang, yang kemudian dapat disesuaikan dengan lingkungan.

Saya biasanya memilih cahaya jauh di suatu tempat di depan sprite, sehingga hanya bagian depan dan atas sprite yang menyala dan sisanya diarsir.

Langkah kedua: bayangan langsung

Setelah kita memilih sumber cahaya, kita bisa mulai menggelapkan area yang paling jauh darinya. Model pencahayaan kami menentukan bahwa bagian bawah kepala, lengan, kaki, dll. harus tertutup bayangan.

Ingatlah bahwa benda datar tidak dapat menimbulkan bayangan. Ambil selembar kertas, remas dan gulung ke seberang meja. Bagaimana Anda menyadari bahwa itu tidak datar lagi? Anda baru saja melihat bayangan di sekelilingnya. Gunakan shading untuk mempertegas lipatan pada pakaian, otot, bulu, warna kulit, dan sebagainya.

Langkah Tiga: Bayangan Lembut

Warna kedua, yang lebih terang dari warna pertama, sebaiknya digunakan untuk menciptakan bayangan lembut. Hal ini diperlukan untuk area yang tidak mendapat penerangan langsung. Mereka juga dapat digunakan untuk transisi dari area terang ke gelap, dan pada permukaan yang tidak rata.

Langkah keempat: area yang diterangi

Tempat-tempat yang mendapat sinar cahaya langsung juga perlu diberi highlight. Perlu dicatat bahwa sorotan harus lebih sedikit daripada bayangan, jika tidak maka akan menimbulkan perhatian yang tidak perlu, yaitu akan menonjol.

Selamatkan diri Anda dari sakit kepala dengan mengingat satu aturan sederhana: pertama bayangan, lalu sorotan. Alasannya sederhana: jika tidak ada bayangan, fragmen yang terlalu besar akan terkikis, dan saat Anda menerapkan bayangan, bayangan tersebut harus dikurangi.

Beberapa aturan yang berguna

Bayangan selalu menjadi tantangan bagi pemula, jadi berikut beberapa aturan yang perlu Anda ikuti saat membuat bayangan.

1. Jangan gunakan gradien. Kesalahan paling umum yang dilakukan oleh pemula. Gradien terlihat buruk dan bahkan tidak mendekati bagaimana cahaya bermain di permukaan.
2. Jangan gunakan bayangan lembut. Saya berbicara tentang situasi di mana bayangan terlalu jauh dari kontur, karena akan terlihat sangat buram dan menghalangi sumber cahaya untuk diidentifikasi.
3. Jangan gunakan terlalu banyak bayangan. Sangat mudah untuk berpikir bahwa “semakin banyak warna, semakin realistis gambarnya.” Bagaimanapun, di kehidupan nyata Kita terbiasa melihat sesuatu dalam spektrum gelap atau terang, dan otak kita akan menyaring segala sesuatu di antaranya. Gunakan hanya dua warna gelap (gelap dan sangat gelap) dan dua warna terang (terang dan sangat terang) dan letakkan di atas warna dasar, bukan di atas satu sama lain.
4. Jangan gunakan warna yang terlalu mirip. Tidak perlu menggunakan warna yang hampir sama kecuali Anda ingin membuat sprite yang sangat buram.

ragu-ragu

Melestarikan warna adalah hal yang sangat perlu diperhatikan oleh para pembuat pixel art. Cara lain untuk mendapatkan lebih banyak bayangan tanpa menggunakan lebih banyak warna disebut dithering. Sama seperti di lukisan tradisional"Penetasan" dan "penetasan silang" digunakan, yaitu, Anda, di secara harfiah, Anda mendapatkan sesuatu di antara dua warna tersebut.

Contoh sederhana

Berikut adalah contoh sederhana bagaimana, melalui dithering, Anda dapat membuat empat pilihan bayangan dari dua warna.

Contoh lanjutan

Bandingkan gambar di atas (dibuat menggunakan gradien di Photoshop) dengan gambar yang dibuat hanya dengan tiga warna menggunakan dithering. Harap dicatat bahwa pola yang berbeda dapat digunakan untuk membuat "warna yang berdekatan". Prinsipnya akan lebih mudah Anda pahami jika Anda membuat sendiri beberapa pola.

Aplikasi

Dithering dapat memberikan sprite Anda tampilan retro yang indah, karena banyak video game awal yang banyak menggunakan teknik ini karena sedikitnya jumlah palet warna yang tersedia (jika Anda ingin melihat banyak contoh dithering, lihat game yang dikembangkan untuk Sega Asal). Saya sendiri tidak terlalu sering menggunakan cara ini, namun untuk tujuan pendidikan, saya akan menunjukkan bagaimana cara menerapkannya pada sprite kita.

Anda dapat menggunakan gentar sepuasnya, tetapi perlu dicatat bahwa hanya sedikit orang yang menggunakannya dengan baik.

Kontur selektif

Kontur selektif, juga disebut kerangka terpilih, adalah subtipe dari bayangan kontur. Daripada menggunakan garis hitam, kami memilih warna yang akan terlihat lebih serasi pada sprite Anda. Selain itu, kita mengubah kecerahan garis luar ini lebih dekat ke tepi sprite, sehingga sumber warna dapat menentukan warna mana yang harus kita gunakan.

Hingga saat ini, kami telah menggunakan garis hitam. Tidak ada yang salah dengan ini: warna hitam tampak bagus, dan juga membuat sprite menonjol dari objek di sekitarnya. Namun dengan menggunakan metode ini, kami mengorbankan realisme, yang mungkin berguna bagi kami dalam beberapa kasus, karena sprite kami tetap terlihat kartun. Kontur selektif menghilangkan hal ini.

Anda akan melihat bahwa saya menggunakan selaute untuk memperhalus definisi ototnya. Akhirnya, sprite kita mulai terlihat seperti satu kesatuan, bukan jumlah yang sangat besar fragmen terpisah.

Bandingkan ini dengan yang asli:

1. Menghaluskan

Cara kerja penghalusan sederhana: menambahkan warna perantara pada bagian tepinya agar terlihat lebih halus. Misalnya, jika Anda memiliki garis hitam dengan latar belakang putih, maka piksel abu-abu kecil akan ditambahkan ke garis putus-putus di sepanjang tepinya.

Teknik 1: Menghaluskan kekusutan

Secara umum, Anda perlu menambahkan warna perantara jika terdapat kekusutan, jika tidak, garis akan terlihat bergerigi. Jika masih terlihat tidak rata, tambahkan lapisan piksel yang lebih terang. Arah penerapan lapisan perantara harus sesuai dengan arah kurva.

Saya rasa saya tidak bisa menjelaskannya dengan lebih baik tanpa membuatnya menjadi lebih rumit. Lihat saja gambarnya dan Anda akan mengerti maksud saya.

Teknik 2: Membulatkan gundukan

Teknik 3: menghapus akhir baris

Aplikasi

Sekarang, mari terapkan anti-aliasing pada cetakan kita. Perhatikan bahwa jika Anda ingin sprite Anda terlihat bagus dengan warna latar belakang apa pun, Anda tidak boleh menghaluskan bagian luar garis. Jika tidak, sprite Anda akan memiliki lingkaran cahaya yang sangat tidak sesuai di sekelilingnya saat ia bertemu dengan latar belakang, dan karena itu akan terlalu menonjol dibandingkan latar belakang apa pun.

Efeknya sangat halus, namun sangat penting.

Mengapa Anda perlu melakukan ini secara manual?

Anda mungkin bertanya, "Mengapa tidak menerapkan filter editor grafis saja pada sprite kita jika kita ingin sprite terlihat mulus?" Jawabannya juga sederhana - tidak ada filter yang akan membuat sprite Anda sejernih dan sebersih buatan tangan. Anda akan memiliki kendali penuh tidak hanya atas warna yang Anda gunakan, namun juga di mana menggunakannya. Selain itu, Anda lebih tahu daripada filter mana pun di mana anti-aliasing sesuai, dan di mana ada area di mana piksel akan kehilangan kualitasnya.

Penyelesaian

Wow, kita sudah hampir mencapai titik di mana Anda bisa mematikan komputer dan mengambil sebotol bir dingin dari lemari es. Tapi itu belum tiba! Bagian terakhir didedikasikan untuk apa yang membedakan amatir yang rajin dari profesional berpengalaman.

Ambil langkah mundur dan perhatikan baik-baik sprite Anda. Ada kemungkinan masih terlihat “lembab”. Luangkan sedikit waktu untuk menyempurnakan dan memastikan semuanya sempurna. Tidak peduli seberapa lelahnya Anda, bagian yang menyenangkan ada di depan Anda. Tambahkan detail untuk membuat sprite Anda terlihat lebih menarik. Di sinilah keterampilan dan pengalaman piksel Anda berperan.

Anda mungkin terkejut dengan kenyataan bahwa selama ini Pengacara Lucha kita tidak memiliki mata, atau bungkusan yang dipegangnya kosong. Sebenarnya, alasannya terletak pada kenyataan bahwa saya ingin menunda hal-hal kecil. Perhatikan juga trim yang saya tambahkan pada ikat kepalanya, lalat di celananya... dan siapakah jadinya seseorang tanpa putingnya? Saya juga menggelapkan bagian bawah tubuhnya sedikit agar lengannya lebih menonjol dibandingkan tubuhnya.

Akhirnya Anda selesai! Lucha Lawyer ringan karena hanya memiliki 45 warna (atau bisa juga sangat berat - semuanya tergantung keterbatasan palet Anda) dan resolusinya kira-kira 150 x 115 piksel. Sekarang Anda bisa membuka bir Anda!

Kemajuan penuh:

Itu selalu lucu. Berikut GIF yang menunjukkan evolusi sprite kita.

1. Pelajari dasar-dasar seni dan praktikkan teknik tradisional. Semua pengetahuan dan keterampilan yang diperlukan untuk menggambar dan menggambar dapat diterapkan pada pixelating.
2. Mulailah dengan sprite kecil. Bagian tersulitnya adalah mempelajari cara menempatkan banyak detail dengan jumlah piksel minimum agar tidak membuat sprite sebesar milik saya.
3. Pelajarilah karya seniman yang Anda kagumi dan jangan takut untuk menjadi tidak orisinal. Cara terbaik untuk belajar adalah dengan mengulang bagian-bagian karya orang lain. Untuk produksi gaya sendiri dibutuhkan banyak waktu.
4. Jika Anda tidak memiliki tablet, belilah. Permanen gangguan saraf dan stres yang disebabkan oleh mengklik tombol kiri mouse secara terus-menerus bukanlah hal yang menyenangkan, dan kemungkinan besar tidak akan membuat lawan jenis Anda terkesan. Saya menggunakan Wacom Graphire2 kecil - Saya suka betapa ringkas dan portabelnya. Anda mungkin lebih memilih tablet yang lebih besar. Sebelum membeli, lakukan test drive singkat.
5. Bagikan pekerjaan Anda dengan orang lain untuk mendapatkan pendapat mereka. Ini mungkin juga cara yang baik untuk mendapatkan teman geek baru.

P.S.

Artikel asli berada. Jika Anda memiliki tautan ke tutorial keren yang perlu diterjemahkan, kirimkan ke pihak kami. Atau tulis langsung ke pesan grup

Mungkin Anda ingin membuat game retro Anda sendiri atau membantu seseorang dengan grafis. Maka Anda memerlukan sprite: dianimasikan posisi yang berbeda karakter dalam gaya seni piksel.

Lihatlah tutorial ini di mana saya akan mengajari Anda cara membuat kelinci lucu dengan animasi loop berjalan.

Jika sulit bagi Anda menggambar dengan gaya seni piksel, gunakan sprite yang sudah jadi.

1. Desain karakter

Sebelum membuat animasi, kita akan membuat gambar statis, jadi kita perlu mencari tahu seperti apa karakter kita nantinya.

Langkah 1

Ini bukan langkah terpenting dalam tutorial ini, tapi membuat sketsa adalah bagian dari alur kerja saya.

Saya menggambar beberapa sketsa kepala dan memilih salah satu yang paling sesuai dengan gayanya.

Langkah 2

Untuk mengubah kelinci menjadi seni piksel, buka Photoshop dan gambar matanya. Kita hanya membutuhkan sketsa untuk menentukan gaya gambarnya.

Jika Anda belum pernah melakukan seni piksel, membuat file baru bukanlah hal yang baik ukuran besar, misalnya, 400 x 400 piksel. Kami akan melakukan banyak zoom (hingga 700%) dan menggunakan alat ini PensilAlat(P) (Pensil) untuk menggambar piksel individual. Saya menyarankan Anda untuk membuka jendela tambahan dengan dokumen kerja, yang skalanya akan 100-200%, sehingga Anda dapat langsung melihat pekerjaan Anda dalam ukuran sebenarnya tanpa harus bolak-balik dari skala besar ke skala kecil. pada satu dokumen. Dengan demikian, Anda akan memiliki dua dokumen yang terbuka: di satu dokumen skalanya mencapai 700% (berfungsi), dan di dokumen lain - 100-200%.

Saya tidak membatasi diri pada ukuran sprite tertentu, tetapi saya akan mencoba membuat karakternya sekecil mungkin dengan tetap mempertahankan detail terpenting. Jadi mata adalah titik awal yang baik.

Matanya ada dua garis sederhana yang ada di dekatnya. Setiap mata berukuran tinggi 3 piksel dan lebar 1 piksel, berwarna hitam.

Langkah 3

Setelah menyelesaikan bagian matanya, kita dapat melanjutkan menggambar hidung dan detail lainnya. Tidak apa-apa jika garisnya terlihat terlalu sederhana pada tahap ini.

Langkah 4

Sekarang kita akan memuluskan beberapa garis. Saya juga menambahkan gigi depan yang besar.

Langkah 5

Tambahkan beberapa piksel untuk menciptakan senyuman.

Langkah 6

Telinga digambar sesempit mungkin dengan lebar bagian dalam 1 piksel dan garis tepi yang sama.

Langkah 7

Kami menggambar satu telinga yang menggantung ke bawah.

Langkah 8

Gambarlah telinga kedua.

Langkah 9

Gambarlah pipi tembem yang besar dan selesaikan kepalanya.

Langkah 10

Sekarang kita bisa menggambar tubuhnya. Kelinci akan memiliki sosok humanoid. Gambarlah tubuh dalam bentuk setetes.

Langkah 11

Kaki kelinci akan pendek dengan kaki yang besar. Untuk saat ini kita hanya menggambar satu kaki.

Langkah 12

Gambarlah kaki kedua, tetapi gerakkan sedikit ke kanan agar tidak tumpang tindih dengan kaki pertama.

Langkah 13

Kakinya terlihat sedikit tidak sejajar, jadi saya memindahkannya satu piksel ke kiri. Saya juga menggabungkan kaki dengan perut dengan menghilangkan piksel di antara keduanya.

Langkah 14

Saat berdiri, hanya satu lengan yang terlihat. Lengannya berbentuk tetesan air mata dan sedikit tumpang tindih dengan batang tubuh.

Langkah 15

Kami menghapus garis tambahan di tangan.

Garis besar dasar karakter kita sudah siap.

2. Warna

Pada titik ini kita akan mengubah karakter menjadi sprite statis lengkap.

Langkah 1

Pilih warna.

Warna apa yang ingin Anda cat pada kelinci? Saya memilih warna cokelat dan mengisi semuanya kecuali hidung dengan itu. Untuk isian kami menggunakan CatKeranjangAlat(G) (Isi).

Langkah 2

Sekarang mari kita menggambar perut putihnya. Kami juga mengecat gigi dengan warna putih. Tambahkan satu piksel ke hidung warna merah jambu, biarkan sisanya berwarna putih.

Langkah 3

Sekarang mari kita terapkan bayangannya: dengan menggunakan warna yang lebih gelap dari warna lapisan dasar, tambahkan bayangan di tempat yang cahayanya paling sedikit. Warna ini juga bisa menambah tekstur pada pipi.

Kaki yang berada di latar belakang harusnya lebih gelap. Jadi, kita mengecat seluruh kaki belakang dengan warna bayangan, dan melakukan hal yang sama dengan telinga belakang, hanya menyisakan satu piksel warna dasar di ujungnya.

Langkah 4

Langkah 5

Beberapa detail karakter akan terlihat lebih baik dengan kontras yang lebih sedikit, jadi saya mengecat beberapa area garis hitam dengan coklat tua (seperti leher dan wajah).

Karakter dalam posisi berdiri sudah siap.

3. Menggambar cuplikan lari

Sekarang kita bisa menambahkan beberapa gerakan pada kelinci.

Anda dapat membuat animasi seperti ini menggunakan jumlah frame berapa pun, tetapi karena karakternya kecil, enam frame saja sudah cukup.

Langkah 1

Mari kita lepaskan anggota badannya untuk saat ini.

Kepala dan badan tidak akan banyak berubah saat berlari, sehingga elemen-elemen tersebut akan berada pada posisi yang sama di semua frame.

Di bawah ini kita menggambar garis yang akan menentukan tinggi kaki dan menunjukkan permukaan tempat kelinci berlari.

Langkah 2

Mari kita ambil Persegi panjangTendaAlat(M) (Pilihan persegi panjang), pilih kepala dan bagian atas batang tubuh dan gerakkan area yang dipilih sebanyak satu piksel (untuk melakukan ini, aktifkan alat BergerakAlat(V) (Bergerak) dan gunakan tombol panah).

Lalu kita pindahkan kepalanya dua piksel ke kanan.

Langkah 3

Pada langkah sebelumnya, batang tubuh sedikit meregang. Untuk memperbaikinya, kecilkan secara vertikal sebesar 1 piksel dan edit garis luar dan isi.

Kami juga menurunkan batang tubuh 1 piksel ke bawah karena kaki akan berada dalam posisi ditekuk untuk sebagian besar animasi sehingga tingginya tidak akan sama.

Langkah 4

Kami akan menyederhanakan tugas kami sedikit dan bekerja hanya dengan kaki di latar depan, karena keduanya akan identik untuk latar belakang.

Gerakan kaki mirip dengan pendulum: sering kali kaki ditekuk, kecuali frame pertama saat karakter mengambil langkah maju.

Dengan demikian, animasi gerakan kaki akan memiliki 6 frame (saya menyarankan Anda untuk mempelajari storyboard animasi lari yang sudah jadi). Perhatikan posisi kaki Anda. Untuk lebih jelasnya, saya menggambar kakinya dengan warna biru.

Langkah 5

Pada layer baru gambar bagian kaki yang kosong. Perlu diketahui bahwa kaki tidak terikat pada satu titik di tubuh. Ketika anggota tubuh bergerak mundur, alasnya bergerak ke kiri, dan ketika kaki diarahkan ke depan, ke kanan.

Langkah 6

Selanjutnya, kami melakukan urutan tindakan untuk menggambar versi kaki yang sudah jadi. Untuk memulainya biru cat dengan warna bulu (Anda bisa menggunakan alat untuk ini CatKeranjangAlat(G) (Isi) dengan opsi dimatikan Berdekatan(Piksel yang berdekatan)) dan, alih-alih menggambar garis tepi di sekitar kaki, pilih area kosong di luar kaki dengan SihirTongkat sihirAlat(W) (Tongkat Ajaib) dan kompres pilihannya Memilih- Ubah- Kontrak(Pilih - Ubah - Kompres) sebesar 1 piksel. Kemudian balikkan pilihannya Memilih-Terbalik(Pilih - Balikkan) lalu dengan alat tersebut CatKeranjangAlat(G) (Isi) ( Berdekatan(Piksel yang berdekatan) matikan) isi area yang dipilih dengan warna garis luar.

Langkah 7

Kakinya belum selesai, tapi mari tambahkan posisi melompat di beberapa pukulan.

Kami menambahkan lompatan karena saat berlari, tubuh karakter tidak selalu berada pada level yang sama. Oleh karena itu, kita menaikkan batang tubuh dan kepala 1 piksel lebih tinggi pada frame ketiga, di mana kaki direntangkan ke belakang dan didorong dari tanah, dan frame keenam, di mana kaki mengangkat kelinci ke atas.

Tembakan lompat ditandai di bawah dengan garis ungu. Untuk jalur lainnya kami kurangi kegelapan(Opacity) hingga 20%, ini akan menjadi bayangan. Dalam game platform, bayangan seperti itu tidak selalu dibutuhkan, namun dalam kasus kami ini akan membuat animasi lebih menarik.

Langkah 8

Untuk menyelesaikan bagian kaki, kita membuat kaki lebih montok, menyambungkan kaki ke badan dan sedikit menaunginya.

Isi dua garis ungu yang tersisa dengan hitam dan kurangi opacity menjadi 20%.

Langkah 9

Setelah selesai dengan kakinya, salin dan pindahkan salinannya beberapa piksel ke kanan.

Sekarang gambarnya terlihat aneh karena kedua kakinya mengarah ke arah yang sama, hal yang wajar bagi kelinci, karena mereka bergerak dengan cara melompat. Tapi kelinci kita adalah karakter humanoid dan akan bergerak sesuai dengan itu.

Langkah 10

Untuk membuat animasi lari, kedua kaki harus bergerak berlawanan arah, dengan satu kaki direntangkan ke depan dan yang lainnya ke belakang.

Karena kita mempunyai 6 frame, pergerakan satu kaki per sisi yang berlawanan akan terdiri dari tiga ketentuan. Kami mengatur ulang salinan kakinya sehingga yang asli dan salinannya diarahkan ke arah yang berlawanan.

Lapisan dengan salinan harus berada di bawah lapisan tubuh kelinci.

Langkah 11

Untuk menyelesaikan kaki di latar belakang, catlah dengan warna yang lebih gelap dari warna dasar, seperti yang kita lakukan pada gambar statis di atas.

Seperti inilah animasi kaki yang sudah jadi. Jangan memikirkan proses animasinya dulu. Pertama, kita akan menyelesaikan pelatihan personel, dan kemudian kita akan mulai membawa mereka ke dalam putaran yang berulang.

Dalam pelajaran aslinya, animasi

Langkah 12

Sekarang saatnya menambahkan lengan.

Di bawah ini Anda dapat melihat gambaran kasar gerakan tangan. Mereka tetap dalam posisi melengkung sepanjang animasi, hanya sedikit lurus pada frame pertama. Namun Anda bisa mencoba menggambar sendiri animasi gerakan tangan tersebut.

Langkah 13

Tempatkan lengan pada layer baru di atas tubuh dan isi dengan warna dasar kelinci, seperti yang kita lakukan dengan kakinya.

Langkah 14

Tambahkan volume.

Langkah 15

Dan terakhir kami membuat bayangan untuk menambah dimensi.

Langkah 16

Langkah 17

Kami mengarsir salinan tangan dan menukarnya sehingga kedua tangan diarahkan ke arah yang berlawanan.

Ingatlah bahwa lengan bergerak berlawanan arah dengan kaki. Misalnya saja ketika kaki kiri digerakkan ke depan, tangan kiri bergerak mundur.

Seperti inilah animasi tangannya.

Dalam pelajaran aslinya, animasi

Langkah 18

Sekarang mari tambahkan gerakan pada kepala, karena saat ini terlihat terlalu statis.

Sekarang kita akan membuat telinga bergerak seiring dengan tubuh. Dalam bidikan di mana kelinci sedikit memantul, telinganya mengarah ke bawah, bergerak secara inersia, meskipun kelinci sebenarnya memantul ke atas.

Langkah 19

Pada frame berikutnya setelah lompatan, telinga tidak terlalu melengkung dan mengarah ke depan.

Langkah 20

Kami juga menganimasikan pipinya. Gerakannya mirip dengan gerakan telinga: saat melompat, mereka turun sedikit, lalu naik setelah melompat.

Ini penampakan versi akhirnya.

Dalam pelajaran aslinya, animasi

Langkah 21

Kita hanya perlu menyelesaikan tubuhnya. Pertama kita menganimasikan perut putihnya. Saat Anda berlari, dada Anda berputar sedikit dan titik putih harus merespons gerakan ini.

Jika tangan depan diarahkan ke belakang, sebagian besar bintik akan terlihat; jika tangan diarahkan ke depan, kita hanya melihat sebagian kecil bagian perut.

Langkah 22

Dalam posisi statis, tidak perlu menggambar ekornya, karena dapat disembunyikan di balik badan. Namun dalam menjalankan animasi sebaiknya elemen ini tidak diabaikan.

Pertama, gambar kotak merah pada layer baru untuk menunjukkan lokasi ekornya. Untuk saat ini, lapisan ini mungkin berada di atas semua lapisan sebelumnya.

Langkah 23

Isi ekor dengan warna, terapkan bayangan dan guratan.

Langkah 24

Pada frame pertama, saat lengan depan ditarik ke belakang, ujung ekornya tumpang tindih.

Langkah 25

Untuk menyelesaikan bagian ekor, pindahkan layer ke latar belakang dan sesuaikan bayangan/detail jika perlu.

Kami telah selesai bekerja dengan personel. Seperti inilah animasi yang sudah jadi. Detail tambahan membuat animasinya jauh lebih menarik, bukan?

Dalam pelajaran aslinya, animasi

4. Buat animasi

Kami memiliki 6 frame animasi berjalan yang berjalan dalam satu lingkaran. Sekarang kita hanya perlu merekatkannya.

Langkah 1

Salin semua bingkai ke file baru.

Anda perlu menyalin satu frame pada satu waktu dalam urutan yang benar (dari kiri ke kanan). Untuk menyalin semua lapisan sekaligus, Anda harus masuk ke menu Sunting- SalinDigabung(Mengedit - Menyalin data gabungan). Sebelum menyalin, pastikan latar belakang transparan dan tidak penuh warna.

Ukuran file baru harus sedikit lebih besar dari kelinci.

Setelah memasukkan bingkai, kami menempatkannya posisi yang benar. Intinya tetap tidak berubah di semua frame, begitu pula hidungnya, kecuali dua frame di mana kelinci melompat 1 piksel.

Hasilnya, Anda akan mendapatkan total 6 lapisan, satu lapisan untuk setiap bingkai, latar belakangnya transparan.

Langkah 2

Untuk mulai membuat animasi di Photoshop, kita perlu membuka Timeline Jendela- Garis Waktu(Jendela - Garis Waktu). Ada tombol di timbangan MembuatBingkaiAnimasi(Buat animasi bingkai demi bingkai). Mungkin ada tombol sebagai gantinya MembuatVideoGaris Waktu(Buat Timeline Video) Untuk beralih ke animasi, klik tombol panah dan pilih mode yang diinginkan dari menu drop-down yang muncul.

Langkah 3

Tekan tombolnya MembuatBingkaiAnimasi(Buat animasi frame-by-frame), lalu klik tombol untuk memanggil parameter di sudut kanan atas skala...

...dan pilih MembuatBingkaiDariLapisan(Buat bingkai dari lapisan).

Langkah 4

Dan terakhir, pilih semua frame dan, jika perlu, ubah penundaan (saya memilih 0,1 detik), atur mode pengulangan ke Selamanya(Selalu).

Dan kami mendapatkan kelinci lucu ini dengan animasi berjalan!

Anda sekarang dapat menggunakan sprite ini di dalam game atau mengekspornya ke GIF.

Selamat, sekarang kelinci sudah bisa lari! Dia siap menyelamatkan putri kelinci dan pencapaian heroik lainnya.

Tutorial ini akan memberi Anda pemahaman tentang prinsip di balik desain dan animasi sprite. Sekarang Anda dapat menggambar karakter Anda sendiri atau menggunakan kelinci yang sudah jadi untuk dimainkan!

Dalam tutorial ini Anda akan belajar cara mengubah foto seseorang menjadi seni piksel karakter fiksi game arcade sejak awal tahun 90an.
James May - alias Smudgethis - mengembangkan gaya ini pada tahun 2011 untuk video musik untuk aksi dubstep rock. Hit pertama Nero, Me & You - di mana dia membuat animasi untuk ditampilkan permainan lama menampilkan dua anggota Nero. Game ini adalah platformer ritme 2D dengan grafis 16-bit yang mirip dengan Double Dragon, tetapi jauh lebih unggul dari klasik retro 8-bit seperti Super Mario Bros.
Untuk menciptakan gaya ini, karakternya tetap harus berbentuk kotak-kotak, tetapi lebih kompleks daripada game lama. Dan meskipun Anda perlu menggunakannya secara terbatas palet warna untuk mencapai penampilan, ingatlah bahwa game ini masih memiliki 65.536 warna.
Di sini James menunjukkan cara membuat karakter dari foto menggunakan palet warna sederhana dan alat Pensil.
Sama seperti panduan animasi, Anda juga memerlukan foto orang tersebut. James menggunakan foto seorang punk yang disertakan dalam file proyek untuk tutorial ini.
Setelah selesai, lihat tutorial animasi After Effects 16-bit ini di mana James menunjukkan kepada Anda cara mengambil karakter ini dalam AE, menganimasikannya, dan menerapkan efek game retro.

Langkah 1

Buka Panduan Animasi (16 bit).psd dan 18888111.jpg (atau foto pilihan Anda) untuk digunakan sebagai dasar karakter. Foto profil lengkap akan berfungsi paling baik dan akan membantu mendapatkan palet warna dan gaya untuk gambar 16-bit Anda.
Tutorial animasi memiliki beberapa pose pada masing-masing lapisan. Pilih yang itu dengan cara terbaik cocok dengan pose di foto Anda - karena kita tidak memiliki kaki di dalam bingkai, saya menggunakan pose standar di level 1.

Langkah 2

Menggunakan Rectangular Marquee Tool (M), pilih kepala dari foto Anda dan salin (Cmd /Ctrl + C) dan tempel (Cmd /Ctrl + V) ke dalam Panduan Animasi (16 bit).psd.
Skalakan gambar agar pas, secara proporsional. Anda akan melihat bahwa karena dimensi PSD sangat kecil, gambar akan langsung mulai menggambar piksel.

Langkah 3

Buat layer baru dan gambar garis luarnya dengan pensil hitam satu piksel (B), menggunakan panduan animasi yang disediakan di dalamnya dan foto sebagai dasarnya. \N
Panduan yang disediakan membantu mengembangkan berbagai karakter mulai dari figur bos yang lebih besar hingga karakter wanita yang lebih ramping. Ini adalah panduan kasar untuk menyusun dan menganimasikan karakter seni piksel saya.

Langkah 4

Dengan menggunakan Eyedropper Tool (I), cicipi area paling gelap dari warna kulit di foto dan buat persegi kecil warna. Lakukan ini tiga kali lagi untuk membuat palet warna kulit empat warna.
Buat layer lain di bawah layer outline dan gunakan kuas satu piksel dan palet warna empat warna untuk membuat bayangan pada gambar (sekali lagi, gunakan foto sebagai panduan Anda). \N
Yang terbaik adalah menyimpan semua elemen karya seni Anda atau lapisan yang berbeda karena ini memudahkan untuk menggunakannya kembali pada bentuk lain. Ini sangat berguna bagi penjahat, karena sebagian besar game 16-bit menggunakan angka yang sangat mirip. Misalnya, seorang teman mungkin memiliki baju merah dan pisau, sedangkan teman lainnya mungkin sama kecuali baju biru dan pistol.

Langkah 5

Ulangi proses ini untuk bagian lain dari gambar, arsir kain agar sesuai dengan elemen lain di foto aslinya. Pastikan untuk melanjutkan pengambilan sampel dengan alat Eyedropper untuk membuat palet warna terlebih dahulu, karena alat ini memberikan rangkaian warna konsisten yang tampak bagus dan sesuai dengan palet warna yang relatif terbatas pada game 16-bit.

Langkah 6

Tambahkan data untuk menyempurnakan karakter Anda dengan corak, tato, anting-anting, dll. Makanlah di sini dan pikirkan bagaimana Anda ingin karakter Anda ditampilkan lingkungan permainan. Mungkinkah mereka bisa menggunakan kapak atau memiliki lengan robot?

Langkah 7

Untuk menganimasikan karakter Anda, ulangi tahapan sebelumnya menggunakan lima lapisan lainnya dari panduan animasi. Proses ini memerlukan waktu untuk dikuasai dan menciptakan hasil yang mulus, namun jalan pintas dapat dilakukan dengan menggunakan kembali elemen dari frame sebelumnya. Misalnya, dalam urutan enam bingkai ini, kepala tetap tidak berubah.

Langkah 8

Untuk memeriksa apakah urutan animasi sudah berurutan, buka panel Animasi di Photoshop dan pastikan hanya frame pertama dari animasi yang sedang berlangsung. Anda dapat menambahkan frame baru dan mengaktifkan dan menonaktifkan layer untuk membuat animasi Anda, namun cara tercepat adalah dengan menggunakan perintah Make Frames From Layers di menu flyout panel (kanan atas).
Bingkai pertama adalah latar belakang kosong, jadi pilih bingkai tersebut dan klik ikon tempat sampah di panel (bawah) untuk menghapusnya.

6 pilihan terbaik untuk membuat seni piksel Anda sendiri, mulai dari alat gratis yang hebat hingga perangkat lunak profesional yang canggih.

Seiring berkembangnya seni piksel menjadi bentuk seni populer dan bukannya menjadi indikasi keterbatasan teknis, berbagai instrumen, yang digunakan pengembang untuk membuatnya. Beberapa menggunakan favorit lama, yang lain menggunakan barang gratis perangkat lunak, dan beberapa memilih perangkat lunak kelas atas. Jika Anda menyukai seni piksel atau mencari perangkat lunak pembuatan game baru, pilihannya mungkin sulit.

Kebanyakan seniman akan memberi tahu Anda bahwa alat hanyalah sebuah alat, dan Anda dapat membuat grafik yang indah dengan alat apa pun jika Anda mempelajarinya dengan baik. Namun jika Anda memerlukan bantuan untuk menemukan alat yang paling cocok untuk Anda, berikut beberapa yang direkomendasikan. Dan untuk inspirasi, lihat arsip besar grafik di PixelJoint dan ini koleksi besar buku teks tentang grafik piksel.

Aseprit

Link

Harga: $15 USD atau gratis jika Anda mengkompilasinya sendiri
Tersedia untuk: Windows/OS X/Linux

Aseprite dibuat khusus untuk grafis piksel. Ini tidak gratis, tetapi $15 bukanlah harga yang buruk jika Anda mencari solusi jangka panjang. Namun, Anda dapat menggunakan Aseprite secara gratis jika Anda ingin mengkompilasi kode sumbernya sendiri.

Ini adalah salah satu program seni piksel yang paling sering direkomendasikan, dan untuk alasan yang bagus. Aseprite memiliki semua fitur standar yang Anda perlukan untuk membuat seni piksel, dibungkus dalam antarmuka yang ramah pengguna. Menguliti bawang - kemampuan untuk melihat bingkai yang sedang Anda kerjakan, serta bingkai animasi yang mengikuti dan mendahuluinya - apa yang Anda perlukan untuk animasi. Aseprite juga dapat mengekspor seluruh sprite sheet dan file GIF serta menjalankan fungsi spesifik piksel lainnya.

Aseprite mempunyai banyak penggemar, namun tidak semua orang menyukainya. Program itu sendiri beresolusi rendah. Bagi sebagian orang, antarmuka piksel untuk mengedit piksel dianggap logis dan membantu memperolehnya berpikir kreatif. Bagi yang lain, ini adalah gangguan yang tidak perlu.

Jay Tholen, pencipta dan artis game petualangan tunjuk-dan-klik Dropsy, beralih ke Aseprite setelah Microsoft Paint dan tidak mengubah preferensinya sejak saat itu. “ Saya dulu lebih memilih palet warna yang “aman”. Jika saya membuat sebuah karya dan kemudian memutuskan bahwa warnanya tidak berfungsi, saya harus mengisinya dengan warna lain atau membiarkannya seperti itu dan kemudian menderita selama berabad-abad. Untuk Hypnospace Outlaw, saya menggunakan fitur peredupan warna Aseprite untuk memberikan grafis 3D tampilan kuno dengan warna "aman"”.

Link

Harga: Gratis
Tersedia untuk:jendela

GraphicsGale adalah program serius lainnya yang dibuat khusus untuk grafik piksel. Ini memiliki fitur utama yang sama dengan yang Anda harapkan untuk menggambar dan animasi: pengulitan bawang, manajemen lapisan dan palet warna. Kelemahan terbesar GraphicsGale adalah hanya tersedia untuk Windows.

Selain harganya yang mahal, GraphicsGale memiliki dua fitur hebat untuk meningkatkan alur kerja Anda. Anda dapat mengimpor gambar dari pemindai dan kamera digital jika Anda lebih suka menggambar dengan tangan sebelum membuat piksel. Program ini menggunakan perangkat yang mendukung TWAIN, yang untungnya hampir semuanya merupakan pemindai dan kamera. Mungkin fitur yang paling menonjol adalah kemampuan untuk melihat pratinjau animasi saat mengedit. Tidak perlu mengganggu pekerjaan Anda untuk mengekspor gif atau bahkan menjeda jendela pratinjau. Umpan balik langsung saat Anda bekerja akan membantu Anda merasa lebih percaya diri dalam bereksperimen dengan animasi.

Salah satu game profesional terkenal yang dibuat dengan GraphicsGale: Duelyst yang luar biasa.

Pro Gerak NG

Link

Harga: $40 atau versi gratis waktu terbatas
Tersedia untuk:jendela

Meskipun GIMP dan Photoshop adalah alat yang digunakan ulang, Pro Motion adalah program berkualitas tinggi yang dibuat khusus untuk seni piksel yang telah menghasilkan hasil yang mengesankan. permainan profesional, seperti Ksatria Sekop. Pro Motion memiliki kemampuan luas untuk animasi sprite dan pengeditan ubin. Seperti Pyxel Edit, Pro Motion memungkinkan Anda mengedit semua ubin yang sama. Itu juga dapat terisi secara otomatis sebagian besar menggambar.

Pro Motion awalnya hanya tersedia untuk Windows, tetapi program ini dapat dijalankan di Linux dan OS X melalui Wine. Versi gratis Pro Motion menawarkan banyak fitur untuk seni piksel: dukungan untuk menggambar templat ubin, editor peta ubin, pengeditan palet warna, dan efek lapisan. Jika Anda mencobanya dan memutuskan untuk membeli program tersebut, versi berbayar menambahkan banyak fitur untuk pengguna tingkat lanjut, seperti kemampuan untuk mengubah pintasan keyboard, pencadangan otomatis, dan membuka beberapa proyek sekaligus. Pro Motion mungkin merupakan program terbaik yang ada, menawarkan nilai uang yang luar biasa dan dibuat khusus untuk pekerjaan piksel.

Link

Harga: $20-30 per bulan
Tersedia untuk:Windows/OS X

Adobe Photoshop tidak memerlukan pengenalan apa pun, tetapi saya akan tetap memberi tahu Anda lebih detail. Sebagai perangkat lunak pengedit gambar resolusi tinggi terkemuka, Photoshop akan dikenakan biaya $20 per bulan tergantung pada paket berlangganan yang Anda pilih (tahunan lebih murah daripada bulanan). Siswa dapat membelinya lebih murah – seharga $10 per bulan. Jika Anda sudah cukup beruntung untuk mendapatkan salinannya, berkat lisensi pendidikannya, atau sebelum Anda mendaftar untuk berlangganan, menggunakan program ini untuk membuat grafik dengan segera menjadi lebih mungkin. Keuntungan menggunakan produk Adobe adalah tersedianya sumber daya yang sangat besar. Jika ada fitur yang perlu Anda pelajari, yakinlah bahwa ada dokumentasi resmi serta panduan teks dan video yang tiada habisnya di Google.

Dalam hal fitur, Photoshop memiliki semua yang Anda butuhkan dan banyak lagi. Seperti GIMP alternatif gratisnya, ini tidak dibuat khusus untuk seni piksel, tetapi ada banyak tutorial tentang cara mengatur Photoshop agar bekerja dengan seni piksel dan memaksimalkan kekuatan Photoshop. Kadang-kadang tidak begitu baik dalam bekerja dengan resolusi rendah, namun bisa sangat efektif bagi mereka yang terbiasa. Kemampuan untuk mengontrol lapisan, gaya lapisan, kuas khusus, palet, dan riwayat pengeditan dapat menambah banyak hal pada alur kerja Anda.

Len Stewart, artis utama di Pixel Noir, menggunakan Photoshop bukan hanya karena keserbagunaannya, namun juga karena dia sudah terbiasa. “Secara pribadi, saya telah menggunakan Photoshop sejak itu sekolah menengah atas, jadi ini hanya sebuah program yang saya rasa nyaman untuk digunakan.”

GIMP

Gambar dari tutorial mewarnai ulang sprite sheet di Gimp.

Link

Harga: bebas
Tersedia untuk: Windows/OS X/Linux

GIMP adalah editor gambar resolusi tinggi yang terkenal, tetapi hal itu tidak membuatnya kurang populer untuk pekerjaan resolusi rendah. Meskipun kualitas GIMP yang paling terkenal adalah "Photoshop gratis", ia memiliki banyak kualitas lainnya. kekuatan, yang mengurangi waktu pengoperasian. Salah satu fiturnya adalah dapat disesuaikan melalui berbagai bahasa pemrograman. Ada beberapa plugin yang dibuat oleh komunitas, yang berarti dengan sedikit usaha Anda dapat menyesuaikan sendiri fungsi GIMP.

Jika karena alasan apa pun Anda beralih dari bekerja dengan piksel ke bekerja dengan grafik resolusi tinggi, GIMP – cara yang baik Jangan tersebar di banyak program lain.

Dalam tutorial ini kita akan mempelajari teknik mengubah foto seseorang menjadi karakter game arcade berpiksel dari awal tahun 90an.

James May - alias Smudgethis - mengembangkan gaya ini pada tahun 2011 untuk hit pertama grup rock dubstep Nero - Aku & Kamu. Dia membuat animasi yang menampilkan dua anggota band sebagai karakter dari game arcade lama. Permainan ini tampak seperti beat-em-up side-scroller 16-bit, mirip dengan DobelNaga, tapi banyak kualitas terbaik daripada klasik retro delapan bit Supermariosaudara.

Untuk menciptakan efek ini, karakternya harus sedikit tebal, tetapi lebih detail dibandingkan game tertua. Selain itu, karena kita perlu membatasi palet warna, ingatlah bahwa game ini hanya memiliki 65.536 warna.

Dalam tutorial ini, James menunjukkan cara membuat karakter berdasarkan foto menggunakan palet warna dan alat sederhana Pensil(Pensil).

Selain frame animasi, kita juga membutuhkan foto. James menggunakan foto seorang punk yang dia sertakan dalam materi pelajaran.

Setelah selesai, lihat tutorial animasi 16-bit di After Effects, di mana James menunjukkan cara membawa karakter ke AE, membuatnya bergerak, dan menerapkan efek game retro.

Langkah 1

Buka file AnimasiPanduan (16sedikit).psd Dan 18888111. jpg(atau foto pilihan Anda) untuk digunakan sebagai dasar karakter. Foto profil di tinggi penuh akan berfungsi dengan baik dan juga akan membantu Anda mendapatkan palet warna dan gaya seni 16-bit.

Bingkai animasi memiliki beberapa posisi lapisan yang berbeda. Pilih salah satu yang paling sesuai dengan posisi di foto - karena tidak ada kaki yang terlihat di foto kita, saya memilih pose standar pada lapisan pertama.

Langkah 2

Menggunakan alat Seleksi persegi panjang(Alat Tenda Persegi Panjang) pilih kepala orang tersebut, salin ( Ctrl +C) dan tempel ( Ctrl +V) dia masuk AnimasiPanduan (16sedikit).psd.

Regangkan foto agar pas secara proporsional. Anda akan melihat bahwa karena ukuran dokumen yang kecil, foto akan memiliki tampilan piksel.

Langkah 3

Buat layer baru dan cat strokenya dengan warna hitam Pensil(Pensil) setebal satu piksel, menggunakan gambar rangka sebagai alasnya.

Bingkai ini membantu saat menggambar berbagai karakter, mulai dari “bos” besar hingga pahlawan wanita bertubuh ramping. Ini adalah dasar kasar untuk menyusun dan menganimasikan seni piksel saya.

Langkah 4

Menggunakan alat Pipet(Alat pipet), pilih area kulit yang paling gelap dan cat area kecil dengan warna yang dihasilkan. Lakukan ini tiga kali lagi, sehingga menghasilkan palet empat warna untuk warna kulit.

Buat layer di bawah goresan, lalu gunakan kuas dengan radius satu piksel dan palet yang dihasilkan untuk memberi bayangan pada karakter (sekali lagi, gunakan foto sebagai panduan).

Terbaik untuk disimpan elemen yang berbeda bekerja pada lapisan yang berbeda, karena ini memudahkan untuk menerapkannya ke karakter lain. Ini sangat berguna ketika menggambar "orang jahat", seperti yang banyak digunakan oleh game 16-bit wajah yang mirip. Misalnya, seorang bandit mungkin mengenakan kaus merah dan memegang pisau, sementara bandit lain mungkin terlihat serupa, hanya mengenakan kaus biru dan memegang pistol.

Langkah 5

Ulangi proses ini untuk seluruh tubuh, arsir kulit dan pakaian, serta fokus pada foto aslinya. Jangan lupa untuk menggunakan Pipet(Alat pipet) dengan membuat palet warna terlebih dahulu, karena ini akan membuat kumpulan warna tetap yang tampak bagus dan sesuai dengan gaya 16-bit.

Langkah 6

Tambahkan detail dengan mempercantik karakter dengan tambahan bayangan, tato, anting, atau sejenisnya. Bereksperimenlah pada tahap ini dan pikirkan bagaimana karakter tersebut akan cocok dengan lingkungan permainan. Mungkin dia akan membawa kapak atau mendapatkan lengan mekanik?

Langkah 7

Untuk menganimasikan karakter, ulangi langkah sebelumnya pada lima lapisan bingkai animasi yang tersisa. Proses ini membutuhkan waktu untuk dikuasai dan membuahkan hasil organik. Namun, Anda dapat menghemat waktu dengan menggunakan kembali elemen dari langkah sebelumnya. Misalnya, dalam urutan enam frame, kepala hampir tidak terpengaruh.

Langkah 8

Untuk memeriksa apakah semuanya sudah digambar dengan benar, buka panel Animasi(Animasi) di Photoshop dan pastikan frame pertama aktif. Anda dapat menambahkan bingkai baru, menghidupkan atau mematikan setiap lapisan, mendapatkan animasi Anda, tetapi cara tercepat adalah dengan menggunakan perintah Buat bingkai dari lapisan(Membuat Bingkai Dari Lapisan) di menu pop-up panel (pojok kanan atas).

Lapisan pertama adalah latar belakang kosong, jadi pilihlah dan klik ikon tempat sampah (di bawah) untuk menghapusnya.