Senin, 09 Desember 2013

Membuat Ready-to-Animate Vektor Permainan Sprite

Kandi Runner: Buat Ready-to-Animate Vector Permainan Sprite

1. Siapkan Desain Anda

Permainan sprite kami akan berada di profil sehingga komponen animasi dari cross-over dapat berisi siklus berjalan. Karena itu, saya telah membuat sketsa keluar desain saya di Adobe Photoshop CC. Dimulai dengan garis-garis yang menunjukkan cepat gaya keseluruhan karakter dan proporsi dan berakhir dengan desain gelap bertinta, siap untuk pengobatan Adobe Illustrator. Perhatikan bahwa proporsi dalam sketsa ini berubah sedikit selama tutorial. Kemudahan skala memungkinkan perubahan cepat di kepala dan ukuran tubuh, dibandingkan dengan menggambar ulang sepenuhnya.
sprite-001

2. Menggambar Kepala dan Rambut

Langkah 1

Untuk kepala, saya sudah mulai dengan lingkaran digambar dengan Ellipse Tool (L).Bagian wajah bagian bawah dijiplak dari sketsa dengan Pen Tool (P). Bersatu kedua bentuk di Pathfinder ketika Anda puas dengan profil yang Anda buat.
sprite-002

Langkah 2

Rambut yang dilakukan dalam jumlah besar, bagian berwarna-warni. Aku ingin dia memiliki benar-benar besar dreadlock-seperti rambut (hampir seperti boneka kain). Gunakan Pen Tool untuk menggambar setiap bagian rambut. Sepuluh diambil secara total di sini, dan akhirnya akan dipisahkan dan diuraikan secara individual sehingga mereka dapat animasi. Dalam waktu yang berarti, Group (Control-G) potongan rambut Anda bersama-sama.
sprite-003

Langkah 3

Unhide wajah dalam panel Layers dan pastikan Anda puas dengan cara rambut menggantung di sekitar kepala, serta bahwa hal itu tidak mengaburkan wajah, yang akan diambil nanti.
sprite-004

3. Gambarkan Kaki dan Tubuh

Langkah 1

Pindah ke kaki dan batang tubuh. Mulailah dengan paha dan bawah karakter. Dia mengenakan baju besi semacam (saya bayangkan ini menjadi semacam aksi-puzzle game. Mungkin dia ras kendaraan terbang dan membutuhkan baju besi untuk melindungi dirinya), dan dengan demikian itu warna ungu-abu-abu, bukan abu-abu polos. Untuk saat ini, korset pakaian berwarna merah muda cerah. Kemudian saya akan membuat teal ini. Ketiga potongan membentuk batang tubuh dan paha, berhenti di lutut.
sprite-005

Langkah 2

Untuk kaki bagian bawah dan lutut, menggambar bagian lutut (seperti setengah lingkaran miring), dan mengikuti sketsa untuk garis besar betis dan telapak kaki. Saya sudah berhenti bagian kaki di atas kaki dengan ide kostum yang mengandung pertengkaran tua-waktu (berpikir 1920 desain fashion). Bagian kaki bawah adalah bentuk yang terpisah.
sprite-006

Langkah 3

Untuk bagian belakang boot / sepatu, menggambar elips dengan Ellipse Tool, pilih potongan kaki, dan menggunakan Shape Builder Tool, pilih bagian dari elips yang luar kaki. Hapus centang dan menghapus potongan ekstra ini.
sprite-007

4. Gambarkan Lengan dan Tangan

Langkah 1

Di sisi kiri, Anda akan melihat karakter sejauh ini. Dia memiliki kostum, tetapi membutuhkan leher, dada, dan lengan. Ikuti sketsa dan menarik leher dan bagian dada. Tempatkan ini di balik potongan-potongan tubuh di panel Layers.
sprite-008

Langkah 2

Untuk lengan, saya sudah mulai dengan elips (yang menunjukkan bahu), dan telah menambahkan lengan yang indentasi di siku. Jika Anda menghidupkan karakter ini, Anda mungkin ingin memisahkan bicep dari lengan bawah untuk lebih banyak gerakan. Lengan berhenti sedikit melewati pergelangan tangan di mana saya sudah ditarik bentuk yang menunjukkan telapak tangan.
sprite-009

Langkah 3

Untuk tangan, saya telah menyembunyikan bentuk lengan sehingga kami dapat fokus pada menambahkan jari ke telapak tangan. Menggunakan Pen Tool, saya sudah ditarik persegi panjang seperti bentuk bulat (satu ini memiliki satu sisi datar dan satu sisi melengkung, meskipun) untuk ibu jari. Gunakan Rounded Rectangle Tool untuk jari-jari lainnya. Aku menendang pinky keluar sehingga tangan tidak terlihat terlalu kaku.
sprite-010

5. Tubuh Suntingan dan Penambahan

Langkah 1

Sebelum kita sampai ke garis dan bayangan karakter, mari kita fokus pada beberapa suntingan dan penambahan pertama. Pilih batang tubuh dan potongan kaki, Grup bersama untuk sementara waktu, dan memperbesar sedikit. Lihat di bawah untuk perbandingan antara tubuh membesar dan satu kecil. Dengan cara ini, dia memiliki tubuh besar dan kaki yang lebih panjang untuk mengimbangi besar (dan kemungkinan berat) kepalanya.
sprite-011

Langkah 2

Bagian belakang karakter agak kecil dan dangkal, jadi aku mengeluarkan jangkar titik paling kanan dari bentuk aslinya. Selain itu, saya menambahkan kemeja berkerah tinggi untuk dia pakai dengan menggambar atas bentuk dada dengan bentuk ungu-abu-abu gelap, memilih kedua dada dan bentuk kemeja, dan, dengan Shape Builder Alat memilih bagian non-berpotongan bentuk kemeja. Hapus centang keduanya dan menghapus potongan kemeja berlebih. Tempatkan kemeja di atas potongan cek di panel Layers.
sprite-012

Langkah 3

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

Langkah 4

sprite-014 
Mari kita membangun beberapa hati. Gambarlah sebuah lingkaran dengan Ellipse Tool dan menggunakan Direct Selection Tool (A), tarik titik anchor bawah bawah sehingga Anda memiliki satu setengah hati Copy. Paste dan setengah hati, dan balikkan sumbu vertikal. Setelah disesuaikan dengan pusat, Unite di Pathfinder.

Langkah 5

Copy dan Paste tiga hati di sepanjang paha karakter. Ini harus kulit berwarna.Tambahkan lebih kecil, membalik hati untuk sarung tangan juga.
sprite-015

6. Buat Detail Wajah

Langkah 1

Untuk mata, fokus pada empat potong: bulu mata atas dan bawah bulu mata, bentuk air mata-drop putih untuk sisi mata, dan elips tipis untuk iris. Semua digambar dengan Pen Tool, kecuali untuk iris yang dilakukan dengan Ellipse Tool.
Fitur wajah lain yang diperlukan adalah alis, bibir atas (baik biru tua), lubang hidung dan lipatan hidung (satu bentuk), dan bibir bawah (warna yang sama dengan lubang hidung).Anda dapat pergi ke lebih rinci pada wajah jika Anda ingin, tapi ini memberikan fitur yang cukup baginya untuk membuat beberapa karakter tanpa berlebihan desain keseluruhan.
sprite-016

Langkah 2

Untuk garis kepala dan rambut, jika Anda menghidupkan desain ini, Anda akan ingin untuk menguraikan kepala dan setiap bagian rambut secara terpisah. Demi bagian tutorial ini, saya telah menunjukkan proses bawah seolah-olah Anda sedang menjaga kepala dan rambut bersama sebagai satu bagian.
Grup bersama kelompok kepala dan rambut, Copy dan Paste, Unite di Pathfinder, dan Sejajarkan dengan kelompok kepala / rambut utama dan menempatkannya di belakang kelompok kepala / rambut di panel Layers. Ulangi proses untuk kelompok rambut (sans kepala). Setiap bentuk outline harus memiliki Berat Stroke 1 sampai 2 poin.
sprite-017

Langkah 3

Untuk bayangan dilemparkan oleh gaya rambut besar nya, menggambar bentuk yang mengikuti kontur wajah dan meluas antara jembatan hidung dan sisi wajah. Pilih kepala dan bentuk bayangan, dan menggunakan Shape Builder Tool, pilih bagian dari bentuk bayangan yang tidak bersinggungan dengan kepala. Hapus centang keduanya dan menghapus bentuk non-berpotongan. Tempatkan bayangan di atas kepala tetapi di bawah fitur wajah dalam Layers.
sprite-018

7. Kepala dan Rambut Rincian

Langkah 1

Untuk telinga, itu semacam modal bulat "D" bentuk. Bagian dalam telinga bisa menjadi "C" bentuk, "S", atau coretan aneh seperti yang saya telah ditarik. Kelompok mereka bersama-sama dan menempatkannya di bawah rambut, di atas kepala dan potongan bayangan wajah.
sprite-019

Langkah 2

Sebelum kita masuk ke shading rambut, garis setiap bagian rambut.Anda dapat menambahkan stroke tertimbang tipis untuk setiap bagian, atau mengikuti proses dari bagian enam, langkah kedua untuk setiap bagian rambut.
sprite-020

Langkah 3

Untuk bayangan pada rambut, recolor setiap bagian rambut sebagai versi lebih gelap dari warna itu.  Kemudian, dengan menggunakan Pen Tool, menggambar bentuk sorot di tepi luar dari masing-masing seikat rambut. Hapus dengan Tool Shape Builder, seperti yang dilakukan sebelumnya.
sprite-021

8. Tambahkan Tubuh Bayangan

Langkah 1

Karena sebagian besar dari dada tidak menunjukkan lagi, dan ada banyak rambut di sekitar leher, recolor bagian dada ke mauve bayangan digunakan sebelumnya. Menggambar bentuk di sisi kanan bahu. Kami akan menggunakan bayangan ini sebagai panduan untuk bayangan tubuh lainnya dari segi lokasi. Pilih bahu dan bentuk bayangan, gunakan Shape Builder Tool untuk memilih bagian non-berpotongan bentuk bayangan, hapus, dan menghapus untuk bayangan bersih di bahu. Tempatkan bentuk bayangan di bawah pakaian dalam panel Layers.
sprite-022

Langkah 2

Bayangan di lengan mengikuti garis yang sama dengan yang ada di bahu dan indentasi di siku. Jika lengan Anda dalam dua kelompok, Anda dapat memisahkan dua potong dengan memilih mereka dengan Builder Shape Tool dan potongan lengan utama yang dipilih. Ikuti langkah-langkah yang sama untuk bayangan pada sarung tangan.
sprite-023

Langkah 3

Saya menambahkan beberapa garis-garis di bagian atas lengan dengan Pen Tool ditetapkan sebagai 0.25pt Stroke Berat. Memperluas setiap stripe di Obyek, dan menghapus bagian-bagian dari garis-garis yang tumpang tindih bagian atas lengan dan garis yang ditarik di seluruh lengan dengan Bentuk Builder Tool.
sprite-024

Langkah 4

Bayangan pada batang tubuh adalah abu-abu ungu gelap dengan Opacity pada 40%.Bentuk Sorot ditambahkan ke sisi kiri batang tubuh juga. Karena karakter ini adalah berbayang cel, tidak ada gradien yang digunakan, meskipun jika Anda ingin desain yang lebih kompleks, go for it!
sprite-025

9. Shadows on the Tubuh Bawah

Langkah 1

Lanjutkan menggambar bentuk bayangan di bagian bawah tubuh. Mulailah dengan paha (bagian tubuh lainnya telah tersembunyi di panel Layers) dan mengikuti lekuk kaki. Menggambar bentuk bayangan transparan untuk setiap hati. Hapus bagian non-berpotongan bayangan dengan Shape Builder Tool. Tambahkan garis besar untuk setiap hati juga.
sprite-026

Langkah 2

Untuk kaki bagian bawah, saya ingin menambahkan pertengkaran pink cerah. Bentuknya menendang keluar di belakang dan memiliki busur dramatis besar sampai ke depan kaki. Hapus bagian non-memotong dari bagian depan kaki / kaki (meninggalkan satu di belakang, karena itu adalah bagian dari desain). Tambahkan beberapa bentuk panah merah muda gelap untuk melihat lipit pada pertengkaran. Menggambar bayangan dan highlight pada kaki bagian bawah, mirip dengan yang dari paha dan dada.
sprite-027

Langkah 3

Karena ini akan animasi, aku harus menambahkan kaki tambahan dan lengan. Copy dan Paste kelompok lengan dan kelompok kaki. Hapus rincian lengan, bayangan, dan highlights, dan recolor segalanya untuk bayangan warna.
sprite-028

10. Buat Tangan Tambahan

Langkah 1

Untuk tangan tambahan, yang satu ini sedang mengepalkan ke dalam kepalan tangan, Copy dan Paste tangan pertama dan Ungroup komponen.Pindahkan bagian sarung tangan ke samping dan membentuk ibu jari menjadi benjolan kecil di sisi kiri. Pindahkan jari ke telapak tangan.
sprite-030

Langkah 2

Menyatukan tangan baru di Pathfinder, dan menciptakan sebuah sarung tangan baru dengan cara yang sama yang pertama ditarik. Tambahkan hati dengan bayangan (saya menggunakan sama satu, hanya ukurannya untuk ruang kurang), garis yang menunjukkan akhir dari sarung tangan, dan bayangan akan menghubungkan ke bayangan di tangan. Tambahkan garis untuk mencocokkan satu dari lengan.
sprite-031

Langkah 3

Untuk tangan di sisi lain, Copy dan Paste tinju, menghapus rincian sarung tangan dan recolor ke teal gelap. Menggunakan Rounded Rectangle Tool menarik jari-jari kecil dan ibu jari dengan Berat 0.75pt Stroke dalam warna gelap yang sama digunakan untuk garis lainnya.
sprite-032

Sekarang Anda Siap untuk Aksi!

Pada lama berlangsung sprite siap untuk pergi. Setiap kelompok yang akan bergerak (atau dapat dipindahkan) selama animasi dikelompokkan dan diberi label untuk organisasi dalam panel Layers. Saya telah menambahkan latar belakang dan garis tambahan pada setiap komponen untuk gambar akhir, tetapi tidak akan hadir untuk dua tutorial berikutnya. Saya harap Anda menikmati gambar cel ini berbayang permainan sprite dengan saya dan melanjutkan ke dua bagian berikutnya dari proyek ini.
sprite-033

Tidak ada komentar:

Posting Komentar