Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Design & Illustration
  2. Animation

Kandi Runner Membuat Sebuah Ready-to-Animate Vector Game Sprite

by
Read Time:11 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Nasruddin (you can also view the original English article)

Ada beberapa proyek yang lebih menyenangkan daripada menggambar konsep permainan video karakter. Warna, pakaian, dan desain keseluruhan memiliki sedikit keterbatasan bagi konsep artis. Kami akan menggambar karakter vektor yang siap untuk dinyalakan di Adobe Illustrator dan lebih banyak lagi dalam tutorial tiga bagian ini dengan tim After Effects and Game Development di Tuts +.


Buat Game Kandi Runner

Seri Kandi Runner kami tersebar di tiga tutorial. Pada bagian ini, Anda akan belajar bagaimana membuat sprite game vektor, tapi Anda harus memeriksa dua tutorial lainnya juga.


Hit Space untuk melompat.

Aset Tutorial

Jika Anda ingin mengikuti tutorial ini, Anda bisa mendownload sketsanya. sprite-sketch.zip


1. Siapkan Desain Anda

Sprite permainan kita akan di profil sehingga komponen animasi cross-over bisa berisi siklus jalan kaki. Dengan demikian, saya telah membuat sketsa desain saya di Adobe Photoshop CC. Dimulai dengan garis cepat yang menunjukkan keseluruhan gaya karakter dan proporsi dan diakhiri dengan desain tinta yang lebih gelap dan siap untuk perawatan Adobe Illustrator. Perhatikan bahwa proporsi dalam sketsa ini sedikit berubah selama tutorial.Kemudahan penskalaan memungkinkan perubahan cepat pada ukuran kepala dan tubuh, dibandingkan dengan menggambar ulang seluruhnya.

sprite-001sprite-001sprite-001

2. Gambar Kepala dan Rambut

Langkah 1

Untuk kepala, saya sudah mulai dengan lingkaran yang digambar dengan Ellipse Tool (L). Bagian wajah dibuat dari sketsa dengan Pen Tool (P). Gabung kedua bentuk di Pathfinder saat Anda puas dengan profil yang telah Anda buat.

sprite-002sprite-002sprite-002

Langkah 2

Rambut dibuat pada bagian besar berwarna-warni. Saya ingin ini memiliki rambut seperti rambut gimbal yang sangat besar (hampir seperti boneka kain).Gunakan Pen Tool untuk menggambar setiap bagian rambut. Sepuluh bagian ditarik total di sini, dan akhirnya akan dipisahkan dan digariskan secara terpisah sehingga bisa diabadikan. Sementara itu, Group (Control-G) Anda potong bagian rambut itu secara bersama-sama.

sprite-003sprite-003sprite-003

Langkah 3

Unhide wajah di panel Lapisan dan pastikan Anda puas dengan bentuk rambut tergantung di sekitar kepala, dan juga bahwa hal itu tidak mengaburkan wajah, yang akan ditarik kemudian.

sprite-004sprite-004sprite-004

3. Gambar Kaki dan Tubuh

Langkah 1

Bergerak ke kaki dan badan. Mulailah dengan paha dan bagian bawah karakter. Dia memakai baju besi dari beberapa jenis (saya membayangkan ini adalah semacam permainan teka-teki tindakan. Mungkin dia membalap kendaraan terbang dan membutuhkan baju besi untuk melindunginya), dan karena itu warnanya abu-abu ungu, bukan abu-abu polos. Untuk saat ini, korset pakaiannya berwarna pink cerah. Nanti saya akan membuat teal ini. Ketiga potongan ini membentuk badan dan paha, berhenti di lutut.

sprite-005sprite-005sprite-005

Langkah 2

Untuk kaki bagian bawah dan lutut, tarik sepotong lutut (seperti lingkaran setengah siku), dan ikuti sketsa untuk garis besar betis dan bagian bawah kaki. Saya telah membuat bagian kaki di bagian atas kaki dengan ide kostum yang berisi model lama (pikirkan desain fashion tahun 1920an). Bagian bawah kaki adalah bentuk yang terpisah.

sprite-006sprite-006sprite-006

Langkah 3

Untuk bagian belakang boot / shoe, gambarkan elips dengan Ellipse Tool , pilih bagian kaki, dan gunakan Shape Builder Tool , pilih bagian elips yang ada di luar kaki. Hapus bagian tambahan ini.

sprite-007sprite-007sprite-007

4. Gambar Lengan dan Tangan

Langkah 1

Di sisi kiri, Anda akan melihat karakternya sejauh ini. Dia memiliki kostum, tapi butuh leher, dada, dan lengan. Ikuti sketsa dan tarik leher dan bagian dada.Tempatkan ini di belakang potongan-potongan tubuh di panel Lapisan.

sprite-008sprite-008sprite-008

Langkah 2

Untuk lengan, saya sudah mulai dengan elips (yang menunjukkan bahu), dan telah menambahkan lengan yang melekat pada siku. Jika Anda menghidupkan karakter ini, Anda mungkin ingin memisahkan bisep dari lengan bawah agar lebih banyak gerakan. Lengan itu berhenti sedikit melewati pergelangan tangan tempat saya menggambar bentuk yang menunjukkan telapak tangan.

sprite-009sprite-009sprite-009

Langkah 3

Untuk tangan, saya telah menyembunyikan bentuk lengan sehingga kita bisa fokus menambahkan jari ke telapak tangan. Dengan menggunakan Pen Tool, saya telah menggambar bentuk persegi panjang bulat (yang satu ini memiliki satu sisi datar dan satu sisi melengkung, meskipun) untuk ibu jari. Gunakan Rounded Rectangle Tool untuk jari-jari lainnya. Saya merenggangkan kelingkingnya agar tangan tidak terlihat terlalu kaku.

sprite-010sprite-010sprite-010

5. Edukasi dan Penambahan Tubuh

Langkah 1

Sebelum kita bisa menguraikan dan melindungi karakter, mari kita fokus pada beberapa suntingan dan penambahan terlebih dahulu. Pilih potongan torso dan kaki, Kelompokkan bersama untuk saat ini, dan perbesar sedikit. Lihat di bawah untuk perbandingan antara tubuh yang diperbesar dan yang lebih kecil. Dengan cara ini, dia memiliki badan yang besar dan kaki yang lebih panjang untuk mengimbangi kepalanya yang besar (dan mungkin berat).

sprite-011sprite-011sprite-011

Langkah 2

Bagian belakang karakter agak kecil dan dangkal, jadi saya telah mengeluarkan titik jangkar paling kanan dari bentuk aslinya. Sebagai tambahan, saya menambahkan kemeja berkerah tinggi untuk dikenakannya dengan menggambar di atas bentuk dada dengan bentuk abu-abu ungu gelap, memilih dada dan bentuk kemeja, dan, dengan Shape Builder Tool memilih bagian yang tidak berpotongan dari bentuk kemeja. Hapus pilihan kedua dan hapus kelebihan potongan kemeja. Letakkan kemeja di atas bagian cek di panel Lapisan.

sprite-012sprite-012sprite-012

Langkah 3

Alih-alih sarung tangan penuh, saya memilih yang memiliki garis pergelangan tangan lebih rendah. Untuk melakukannya, ubah warna sarung tangan saat ini ke warna kulit karakter Anda. Kemudian, Copy (Control-C) dan Paste (Control-V) tangan, selaras dengan yang asli, dan menggambar lingkaran dengan Ellipse Tool. Pilih tangan baru dan elips dan Front Minus di Pathfinder.

sprite-013sprite-013sprite-013

Langkah 4

Mari membangun hati. Gambarlah lingkaran dengan Ellipse Tool dan gunakan Direct Selection Tool (A), tarik jangkar bawah ke bawah sehingga Anda memiliki satu setengah hati. Salin dan Paste setengah hati, dan balikkan di atas sumbu vertikal. Setelah selaras dengan pusatnya, Unite in Pathfinder.

sprite-014sprite-014sprite-014

Langkah 5

Copy dan Paste tiga hati di sepanjang paha karakter. Ini harus berwarna kulit. Tambahkan yang lebih kecil, putar hati ke sarung tangan juga.

sprite-015sprite-015sprite-015

6. Buat Bagian Wajah

Langkah 1

Untuk mata, fokus pada empat bagian: bulu mata dan bulu mata bagian bawah, bentuk tetesan air mata putih untuk sisi mata, dan elips tipis untuk iris.Semua digambar dengan Pen Tool, kecuali iris yang dilakukan dengan Ellipse Tool.

Fitur wajah lainnya yang dibutuhkan adalah alis, bibir atas (keduanya biru tua), lubang hidung dan hidung tersumbat (satu bentuk), dan bibir bawah (warna sama seperti lubang hidung). Anda bisa melihat detail lebih banyak di wajah jika Anda mau, tapi ini memberi cukup fitur untuk menciptakan karakter tanpa membuat keseluruhan desain menjadi berlebihan.

sprite-016sprite-016sprite-016

Langkah 2

Untuk kepala dan rambut garis besar, jika Anda menghidupkan desain ini, Anda pasti ingin menguraikan kepala dan setiap potongan rambut secara terpisah. Demi bagian tutorial ini, saya telah menunjukkan prosesnya di bawah ini seolah-olah Anda menjaga kepala dan rambut tetap utuh sebagai satu kesatuan.

Kelompokkan bersama kelompok kepala dan rambut, Copy and PasteUnite in Pathfinder, dan Sejajarkan dengan kepala utama / kelompok rambut dan letakkan di belakang kepala / kelompok rambut di panel Lapisan. Ulangi proses untuk kelompok rambut (sans head). Setiap bentuk garis besar harus memiliki Bobot Stroke dari 1 sampai 2 poin.

sprite-017sprite-017sprite-017

Langkah 3

Untuk bayangan yang diputar oleh gaya rambutnya yang besar, gambarlah bentuk yang mengikuti kontur wajahnya dan membentang di antara jembatan hidung dan sisi wajah. Pilih kepala dan bentuk bayangannya, dan gunakan Shape Builder Tool, pilih bagian dari bentuk bayangan yang tidak berpotongan dengan kepala. Hapus pilihan keduanya dan hapus bentuk yang tidak berpotongan. Tempatkan bayangan di atas kepala tapi di bawah fitur wajah di Lapisan.

sprite-018sprite-018sprite-018

7. Detail Kepala dan Rambut

Langkah 1

Untuk telinga, itu semacam bentuk modal bulat "D". Bagian dalam telinga bisa berbentuk "C", "S", atau coretan aneh seperti yang saya gambar. Kelompokkan mereka dan letakkan di bawah rambut, di atas kepala dan wajah potongan-potongan bayangan.

sprite-019sprite-019sprite-019

Langkah 2

Sebelum kita masuk ke shading rambut, garis besar setiap bagian rambut. Anda bisa menambahkan goresan tertimbang tipis ke setiap bagian, atau ikuti proses dari bagian enam, langkah kedua untuk setiap bagian rambut.

sprite-020sprite-020sprite-020

Langkah 3

Untuk bayang-bayang di rambut, recolor setiap bagian rambut sebagai versi gelap dari rona itu. Kemudian, dengan menggunakan Pen Tool, gambarlah bentuk highlight pada tepi luar dari setiap kunci rambut. Hapus dengan Shape Builder Tool, seperti yang dilakukan sebelumnya.

sprite-021sprite-021sprite-021

8. Tambahkan Body Shadows

Langkah 1

Karena sebagian besar dada tidak menunjukkan lagi, dan ada banyak rambut di leher, recolor bagian dada ke bayangan lembayung dulu. Gambarlah bentuk di sisi kanan bahu. Kita akan menggunakan bayangan ini sebagai panduan untuk bayangan tubuh lainnya dalam hal lokasi. Pilih bahu dan bentuk bayangannya, gunakan Shape Builder Tool untuk memilih bagian yang tidak berpotongan dari bentuk bayangan, hapus pilihan, dan hapus bayangan bersih di bahu. Tempatkan bentuk bayangan di balik pakaian di panel Lapisan.

sprite-022sprite-022sprite-022

Langkah 2

Bayangan di lengan mengikuti garis yang sama seperti yang ada di bahu dan indentasi di siku. Jika lengan Anda berada dalam dua kelompok, Anda dapat memisahkan dua bagian dengan memilihnya dengan Shape Builder Tool dan potongan lengan utama yang dipilih. Ikuti langkah yang sama untuk bayang-bayang di sarung tangan.

sprite-023sprite-023sprite-023

Langkah 3

Saya menambahkan beberapa garis di bagian atas lengan dengan Pen Tool set sebagai 0,25pt Stroke Weight. Perluas setiap garis di Objek, dan hapus bagian-bagian garis yang tumpang tindih bagian atas lengan dan garis yang ditarik di lengan dengan Shape Builder Tool.

sprite-024sprite-024sprite-024

Langkah 4

Bayang-bayang di batang tubuh berwarna abu-abu ungu gelap dengan Opacityse besar 40%. Bentuk highlight ditambahkan ke sisi kiri bodi juga. Karena karakter ini berbayang, tidak ada gradien yang digunakan, meski jika Anda menginginkan desain yang lebih kompleks, cobalah untuk itu!

sprite-025sprite-025sprite-025

9. Bayangan di Bawah Tubuh

Langkah 1

Lanjutkan menggambar bentuk bayangan di bagian bawah tubuh. Mulailah dengan paha (bagian tubuh lainnya telah disembunyikan di panel Lapisan) dan ikuti lekuk kaki. Gambarlah bentuk bayangan transparan untuk setiap hati.Hapus bagian bayangan yang tidak berpotongan dengan Shape Builder Tool. Tambahkan garis besar untuk setiap hati juga.

sprite-026sprite-026sprite-026

Langkah 2

Untuk kaki bagian bawah, saya ingin menambahkan spat pink cerah. Bentuk kicks out di belakang dan memiliki busur dramatis besar sampai ke depan kaki. Hapus bagian yang tidak berpotongan dari bagian depan kaki / kaki (tinggalkan yang ada di belakang, karena ini adalah bagian dari desain). Tambahkan beberapa bentuk panah merah jambu gelap untuk tampilan lipatan pada lipatan. Gambarlah bayangan dan sorot di kaki bagian bawah, sama seperti yang ada di paha dan batang tubuh.

sprite-027sprite-027sprite-027

Langkah 3

Karena ini akan menjadi animasi, saya harus menambahkan kaki dan lengan tambahan. Copy dan Paste kelompok lengan dan kelompok kaki. Hapus detail lengan, bayangan, dan sorot, dan recolor semuanya untuk warna bayangan.

sprite-028sprite-028sprite-028

10. Buat Tangan Tambahan

Langkah 1

Untuk tangan tambahan, yang satu ini dikepalkan menjadi kepalan tangan, Copy and Paste tangan pertama dan Ungroup komponennya. Pindahkan bagian sarung tangan ke samping dan membentuk kembali jempol menjadi benjolan kecil di sisi kiri. Gerakkan jari ke telapak tangan.

sprite-030sprite-030sprite-030

Langkah 2

Satukan tangan baru di Pathfinder, dan buat sarung tangan baru dengan cara yang sama seperti yang pertama digambar. Tambahkan hati dengan bayangan (saya menggunakan yang sama, hanya ukurannya dikurangi sedikit), garis yang menunjukkan ujung sarung tangan, dan bayangan terhubung ke bayangan di tangan. Tambahkan garis besar agar sesuai dengan yang ada di lengan.

sprite-031sprite-031sprite-031

Langkah 3

Untuk tangan di sisi lain, Copy dan Paste tinju, hapus detail sarung tangan dan recolor ke teal gelap. Dengan menggunakan Rounded Rectangle Tool, ambil jari kecil dan jempol dengan 0.75pt Stroke Weight dalam warna gelap yang sama yang digunakan untuk garis besar lainnya.

sprite-032sprite-032sprite-032

Sekarang Anda Siap untuk Melakukannya!

Akhirnya sprite siap untuk digunakan. Setiap kelompok yang akan bergerak (atau dapat dipindahkan) selama animasi dikelompokkan dan diberi label untuk organisasi di panel Lapisan. Saya telah menambahkan latar belakang dan garis besar tambahan pada setiap komponen untuk gambar akhir, namun tidak akan hadir untuk dua tutorial berikutnya. Saya harap Anda menikmati menggambar sprite permainan berbayang ini bersama saya dan melanjutkan ke dua bagian berikutnya dari proyek ini.

sprite-033sprite-033sprite-033
One subscription.
Unlimited Downloads.
Get unlimited downloads