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

Cara Membuat Game Robot Lucu Sprite menggunakan SSR di Adobe Illustrator

by
Read Time:18 minsLanguages:

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

Dalam tutorial ini Anda akan belajar bagaimana menggunakan kombinasi metode SSR (Scale, Shear, Rotate) dan panduan Adobe Illustrator untuk membuat robot isometrik. Gambar isometrik sempurna untuk diagram dan sprite permainan. Jadi mari kita lihat cara membuat robot isometrik yang lucu ini...


Langkah 1

Buka dokumen Ilustrator Baru. Ukuran dan resolusi dokumen tidak terlalu penting, jadi pilihlah sesuatu yang nyaman bagi Anda.


Langkah 2

Sebelum memulai, penting untuk mendefinisikan apa yang dimaksud ketika mengatakan bahwa kita akan menggambar objek isometrik.

Perspektif isometrik adalah cara menggambar objek 3D dalam 2D. Ini digunakan dalam gambar teknis, kota kartun, dan game 2D yang ingin terlihat 3D. Perspektif isometrik lebih baik daripada perspektif normal karena semua objek akan memiliki ukuran yang sama, tidak peduli seberapa jauh dari penampil mereka.

Kita akan mulai dengan menyiapkan grid isometrik untuk bertindak sebagai pemandu. Teknik yang akan saya tunjukkan dalam artikel ini berdasarkan Metode SSR, yang berarti skala, geser, memutar. Selain metode ini, panduan Illustrator akan berguna nantinya ketika berbaris bentuk dalam perspektif isometrik.

Buat panduan menggunakan Tip Cepat ini: Cara Membuat Grid Isometrik dalam Kurang dari 2 Menit. Selanjutnya, aktifkan Panduan Cerdas di bawah View > Smart Guides.


Langkah 3

Sebagai penyegaran cepat metode SSR, kita akan membuat depan, samping, dan atas kubus. Mulailah dengan menggambar persegi menggunakan Rectangle Tool (M) dan tahan Shift sambil menyeret mouse. Buatlah tiga salinan persegi, yang akan menjadi bagian atas dan dua sisi kubus isometrik.

Kiita akan mulai dengan membuat bagian atas. Klik kanan pada kubus dan pilih Transform > Scale dan masukkan nilai 86.062% ke dalam field input Non-Uniform > Vertical. Selanjutnya, klik kanan lagi dan pilih Transform > Shear, dan masukkan sudut geser 30 derajat. Untuk langkah terakhir, klik kanan dan pilih Transform > Rotate, dan masukkan sudut -30 derajat.

Sebagai alternatif, Anda dapat menggunakan jendela Transform dengan prosedur yang sama - cukup ubah tinggi (dilambangkan dengan H) menjadi 86,062%, kemudian geser ke 30 derajat, dan akhirnya rotasi ke -30 derajat. Kedua metode ini akan menghasilkan hasil yang sama.

Untuk membuat sisi kiri dan kanan kubus kita dapat mengikuti prosedur yang sama, dengan sudut geser dan putar yang berbeda. Nilai-nilai ini diringkas dalam gambar di bawah ini.


Langkah 4

Dengan teknik ini di bawah ikat pinggang, kita dapat melanjutkan untuk membuat karakter robot kita. Robot yang akan saya buat dalam tutorial ini adalah karakter utama dalam permainan isometrik yang saya kerjakan, Robotok.io.

Mulailah dengan menyalakan Normal, 2D Grid dengan mengklik View > Show Grid (Ctrl + "). Karena robot cukup persegi panjang, kita dapat menggunakan Rectangle Tool (M) untuk menyempurnakan fitur-fitur utama. Pen Tool (P) dan Direct Selection Tool (A) juga sangat berguna, dan memungkinkan kita untuk memberikan sedikit karakter pada robot.


Langkah 5

Menggunakan bagian depan robot sebagai referensi, kita bisa menggambar sisi robot. Di sini saya telah menggunakan Alat Segmen Garis (\) untuk meletakkan beberapa garis biru di belakang gambar untuk membantu menyejajarkan bagian tubuh robot. Anda dapat memindahkan garis ke atas dan ke bawah ke bagian gambar apa pun yang sedang Anda kerjakan. Memiliki bagian-bagian yang berbaris dengan benar akan membuat langkah-langkah selanjutnya menjadi lebih mudah, ketika kita menggunakan pandangan ini untuk membuat robot isometrik.


Langkah 6

Buat salinan tampilan samping dan ubah warna guratan ke abu-abu. Sekarang kita bisa menggambar lengan di atas tampilan samping, sehingga lebih mudah untuk melihat garis barunya. Kita juga dapat menyesuaikan penempatan garis horizontal biru untuk membantu kita menyejajarkan sisi-sisi lengan dengan bagian depan.

Robot juga membutuhkan tas punggung untuk menyimpan semua barangnya, jadi mari gambar di samping menggunakan metode yang sama.


Langkah 7

Terakhir, gambar bagian belakang robot menggunakan bagian depan dan samping sebagai referensi. Di sini saya menggunakan garis yang lebih ringan di bagian belakang kepala untuk membantu garis-garis ini menonjol dari yang lain, karena mereka menunjukkan volume kepala.


Langkah 8

Sekarang setelah blueprints di tempat, kita dapat mulai membangun robot 3D menggunakan metode SSR isometrik dan panduan yang kita buat sebelumnya. Mari kita mulai dengan bekerja hanya dengan kepala dan tubuh (biarkan lengan dan ransel lepas untuk saat ini) dari robot untuk membangun tampilan depan isometrik.

z

Sekarang kita akan melakukan hal yang sama dengan sisi robot (tanpa lengan), tetapi kita akan mengubahnya menjadi sisi kanan (Skala: 86,062%, Shear: 30, Rotate: 30). Buat salinan yang bisa kita gunakan untuk sisi lain robot.

Untuk memposisikan kedua sisi robot, pilih seluruh sisi robot menggunakan Selection Tool (V) dan kemudian beralih ke Direct Selection Tool (A).

Seret titik jangkar kiri atas ke tumpang tindih dengan sudut yang sesuai di tampilan depan. Ketika smart guide mengatakan jangkar (dalam teks cyan), lepaskan tombol mouse.

Lakukan hal yang sama dengan sisi robot yang jauh. Setelah sisi yang jauh dari robot telah ditempatkan, tetap dipilih dan tekan Ctrl + Shift + [untuk memindahkan bentuk-bentuk di belakang yang lain.


Langkah 9

Meluruskan bagian belakang kepala robot agak sedikit rumit. Pada titik ini kita harus mematikan grid (Ctrl + ") dan menyalakan panduan isometrik (Ctrl +;). Pilih seluruh robot (V) dan beralih ke Direct Selection Tool (A). Pilih salah satu titik di bagian atas depan kepala robot, dan tarik ke atas untuk membidik dengan panduan. Kita dapat menggunakan garis panduan ini untuk berbaris di belakang robot dengan bagian depan.

Pilih bagian belakang (V) dan beralih ke Direct Selection Tool (A). Seret robot dari titik di bagian atas kepalanya ke garis yang sama dengan garis depan. Sekarang tarik di sepanjang garis ini sampai garis belakang hanya berbaris dengan sisi kepala robot.

Sekarang kita dapat memilih titik back-of-the-head pada tampilan samping (lihat gambar) dengan Direct Selection Tool (A), menggunakan Shift-klik untuk mendapatkan kedua titik sekaligus. Tarik titik-titik ini untuk menyesuaikan dengan bagian belakang kepala (lagi, tunggu sampai kata anchor muncul dalam teks sian sebelum melepaskan). Setelah titik-titik ini berada di tempat, kita tidak lagi membutuhkan bagian belakang robot dan dapat menghapusnya dengan memilih semua bentuk dengan Selection Tool (V) dan tekan Delete.

Untuk menyelesaikan bentuk kepala kita dapat menggunakan Pen Tool (P) untuk menggambar di bagian atas. Klik masing-masing dari 4 titik yang membentuk bagian atas kepala robot, setiap kali menunggu kata anchor muncul. Akhirnya, hubungkan ujung terakhir. Tekan Ctrl + [beberapa kali untuk memindahkan bentuk baru ini hingga Anda dapat melihat semua bentuk antena. Jika Anda melangkah terlalu jauh, gunakan Ctrl +] untuk memajukannya lagi.


Langkah 10

Antena robot terdiri dari dua bagian: kerucut dan bola.

Untuk membuat kerucut isometrik, kita mulai dengan dua lingkaran yang dilapiskan (langkah a), dengan yang satu lebih besar dari yang lain, dan kita SSR mereka menjadi datar seperti bagian atas kubus (langkah b). Tahan shift, gerakkan lingkaran yang lebih kecil ke atas secara vertikal hingga bentuknya sesuai dengan tinggi yang Anda inginkan (langkah c). Dengan menggunakan Add Anchor Point Tool (+), tambahkan titik ke sisi lingkaran bawah seperti yang ditunjukkan (langkah d). Kemudian gunakan Direct Selection Tool (A) untuk memilih titik-titik dalam dari kedua lingkaran dan menghapusnya menggunakan tombol Hapus (langkah e). Beralih kembali ke Pen Tool (P) dan hubungkan titik yang tersisa (langkah f) untuk membuat kerucut Anda (langkah g).

Selanjutnya kita dapat membuat bola isometrik untuk bagian atas antena. Buat lingkaran, dan itu dia! Bola isometrik hanyalah lingkaran biasa (langkah h). Posisikan antena di atas kepala robot.


Langkah 11

Selanjutnya kita dapat memposisikan tubuh robot menggunakan teknik yang sama yang kita gunakan untuk membuat kepala. Hapus bentuk leher (karena kita tidak bisa melihat leher dari pandangan ini) dan sisi jauh tubuh yang tidak lagi terlihat. Ini akan membantu membersihkan pandangan kita tentang robot.

Gunakan Selection Tool (V) untuk memilih sisi yang dekat dari robot (kaki dan tubuh). Beralih ke Direct Selection Tool (A) dan seret sisi tubuh dengan sudut untuk berbaris dengan sudut yang sesuai di bagian depan.

Sekarang buat Copy of the side (Ctrl + C, Ctrl + V) dan tarik salinan itu ke sisi yang jauh dari robot menggunakan metode yang sama untuk menyelaraskan poin (lihat sisi kiri gambar).

Untuk menggambar di bagian atas tubuh, beralih ke Outline View menggunakan Ctrl + Y dan gunakan Pen Tool (P) untuk menghubungkan empat titik di bagian atas tubuh (cara yang sama saat membuat bagian atas kepala). Alihkan tampilan kembali dengan menekan Ctrl + Y lagi.


Langkah 12

Kita sekarang akan fokus pada kaki. Tampilan sisi kaki sudah di tempat, jadi kita bisa menggunakannya sebagai panduan untuk sisi depan. Gunakan Direct Selection Tool (A) untuk memilih titik-titik berpasangan, kita dapat memindahkan bentuk untuk berbaris dengan sisi. Gunakan Shift-klik untuk memilih dua titik sekaligus, dan seret mereka untuk berbaris dengan sisi kaki. Panduan cerdas akan membantu Anda menentukan poin dengan tepat.

Ketika Anda selesai satu kaki, gunakan Selection Tool (V) untuk memilih semua bentuk dan membuat salinan (Ctrl + C, Ctrl + V). Posisikan salinan baru sebagai kaki lainnya pada robot. zSekarang tekan Ctrl + Shift + [untuk memindahkan kaki ini ke lapisan terendah, sehingga berada di belakang tubuh robot. Hapus bentuk yang tidak digunakan untuk membersihkan gambar.


Langkah 13

Pada titik ini tubuh robot harus lengkap, dan kita bisa bergerak ke lengan.

Pertama, buat salinan robot dan kelompokkan kepala dan badan secara terpisah. Ubah warna guratan ke abu-abu. Isolasi berbagai bentuk lengan dan SSR mereka ke tampilan depan dan samping.

Lengan terdiri dari empat bagian: bahu, lengan atas, lengan bawah, dan cakar.

Kita akan mulai dengan bekerja di lengan bawah, karena ini adalah yang paling sederhana untuk dimanipulasi. Gariskan bentuk depan dan samping lengan dengan tubuh abu-abu dan satu sama lain. Sesuaikan titik-titik pada sisi lengan bawah agar sejajar dengan depan, pastikan untuk memilih titik-titik berpasangan untuk mempertahankan perspektif.

Gunakan Pen Tool (P) untuk mengisi sisa lengan bawah. Untuk langkah ini, ada gunanya membuat salinan bentuk untuk digunakan sebagai panduan (seperti yang kita lakukan pada kepala dan tubuh).


Langkah 14

Bagian yang sulit dari lengan adalah silinder yang menghubungkan bahu ke lengan robot. Untuk membuat bentuk ini kita akan mulai dengan menggambar lingkaran dan membuat salinannya (Ctrl + C, Ctrl + V). Sekarang SSR satu lingkaran agar muat ke sisi robot, dan SSR yang lain untuk muat di atas lengan bawah. Posisikan lingkaran ini di bahu dan bagian atas lengan bawah seperti yang ditunjukkan.

Gunakan Pen Tool (P) untuk membuat bentuk baru yang terlihat seperti itu akan menghubungkan dua lingkaran (seperti yang ditunjukkan). Pilih dua lingkaran dan bentuk yang menghubungkannya dengan Selection Tool (V) dan klik Pathfinder > Add to Shape Area, lalu Perluas untuk menggabungkan mereka menjadi satu bentuk.

Gunakan Ctrl + [dan Ctrl +] untuk benar posisi bentuk ini di belakang punggung pada lengan bawah.


Langkah 15

Membuat silinder berongga untuk bahu mengharuskan kita membaginya menjadi dua bagian: bagian di depan lengan dan bagian belakangnya.

Mulailah dengan membuat salinan lingkaran bahu di sisi tubuh robot (Ctrl + C, Ctrl + F). Menggunakan panduan (tekan Ctrl +; untuk menyalakannya), seret lingkaran kedua keluar sedikit untuk memberikan kedalaman beberapa silinder bahu (lihat diagram di bawah).

Gunakan Add Anchor Point Tool (+) untuk menambahkan titik pada tepi dua lingkaran (lihat diagram, tambahkan titik pada lingkaran merah). Sekarang buat salinan bentuknya. Satu salinan akan digunakan untuk membuat bagian depan bahu, dan yang lainnya untuk membuat punggung.

Gunakan Direct Selection Tool (A) untuk menghapus titik-titik yang tidak perlu pada kedua salinan untuk berakhir dengan dua baris dalam setiap kasus. Gunakan Pen Tool (P) untuk menghubungkan kembali poin. Reposisi potongan-potongan itu, dan begitulah: bagian depan dan belakang untuk bahu Anda.


Langkah 16

Sekarang kita bisa membuat cakar robot menggunakan teknik yang mirip dengan bagaimana kita membuat bahu.

Ambil bentuk cakar SSR dan garis mereka pada panduan. Saat melapisi bentuk, cukup pilih salah satu titik pada satu bentuk, gariskan dengan garis panduan, dan kemudian pastikan untuk menempatkan titik yang sesuai pada objek kedua di tempat yang sama. Di sini saya telah memilih sudut kiri atas kotak pada setiap cakar sebagai titik referensi, dan seperti yang Anda lihat, keduanya diposisikan pada garis panduan yang sama.

Buat salinan depan cakar, dan gunakan sisi sebagai referensi lebar (seperti ditunjukkan di bawah) untuk memposisikan salinan ini sebagai bagian belakang objek.

Setelah menggunakan side view cakar untuk menentukan lebar, bentuknya tidak lagi diperlukan dan kita boleh menghapusnya.

Kita akan mulai mengisi cakar dengan membuat bentuk hijau di objek di bawah ini. Buat salinan dari dua bagian cakar, dan hapus semua titik yang tidak akan membentuk sisi cakar menggunakan Direct Selection Tool (A) dan tombol Delete. Selanjutnya, gunakan Pen Tool (P) untuk menghubungkan dua bagian. Sekarang kita dapat memposisikan sisi cakar kembali ke objek kita.

Dengan menggunakan teknik yang sama kita dapat mengisi bagian dalam cakar (ungu), dan untuk kelengkapan kita dapat membuat tepi bawah juga (biru).


Langkah 17

Dengan lengan depan selesai, kita bisa menggunakan metode yang sama untuk membangun lengan robot yang lain.

Mayoritas lengan ini dapat disalin langsung dari lengan pertama, dan tweak menggunakan Direct Selection Tool. Tangan robot, misalnya, benar-benar identik sehingga kita tidak perlu menggambar ulang. Ingat bahwa objek isometrik adalah ukuran yang sama tidak peduli seberapa jauh mereka dari penampil, tidak seperti perspektif yang benar, sehingga cakar jauh lengan akan menjadi ukuran yang sama dengan yang dekat.


Langkah 18

Hal terakhir yang akan kita tambahkan ke robot adalah tas punggungnya. Saya ingin membuat salinan semuanya sejauh ini, Kelompokkan setiap lengan secara mandiri (Ctrl + G), dan sesuaikan warna goresan menjadi lebih terang. Dengan begitu kita dapat menjaga setiap bagian tubuh terpisah untuk pengeditan berikutnya (seperti membuat tampilan belakang, atau jika kita ingin menganimasikan robot) dan itu membantu Anda melihat apa yang sedang Anda kerjakan sekarang.

Gunakan metode SSR pada tampilan samping ransel yang kita gambar sebelumnya, dan kemudian posisikan di sisi robot. Karena ransel melengkung, tidak perlu banyak usaha untuk membuatnya sesuai dengan perspektif isometrik. Jika tidak terlihat benar, gunakan Direct Selection Tool (A) untuk menyesuaikan masing-masing poin.

Gunakan Pen Tool (P) untuk menggambar bagian depan tali di atas bahu robot.

Di sini saya telah memindahkan kepala dan lengan depan keluar dari jalan sehingga kita dapat dengan mudah melihat ke mana tas ransel. Setelah ransel ditarik, kita dapat menambahkan kembali bentuk-bentuk ini.


Langkah 19

Dan di sana dia! Untuk menyatukannya sedikit, pilih seluruh robot dan ubah lebar goresan menjadi satu nilai. Dalam hal ini saya memilih 1 pt, tetapi ini tergantung pada seberapa besar Anda menggambar sprite Anda.

Robot ini sekarang siap untuk diberi warna!


Langkah 20

Langkah pertama adalah mengubah warna guratan ke sesuatu yang agak kurang dari hitam. Di sini saya memilih warna abu-abu gelap, tetapi tergantung pada sprite Anda, Anda mungkin ingin mencampurkan beberapa warna.

Selanjutnya kita dapat mengisi beberapa warna dasar. Gunakan Selection Tool (V) untuk memilih seluruh robot (kecuali mata), dan ubah warna isian ke abu-abu.

Pilih mata, mulut, tombol, dan layar dan ubah ini untuk memiliki warna putih. Warnai ransel oranye, dan buat tombol merah.


Langkah 21

Langkah selanjutnya adalah memilih arah untuk sumber cahaya. Saya telah memutuskan untuk membuatnya datang dari kiri, begitu berhadapan dengan robot.

Bayangan dari sini dan seterusnya bisa sedetail atau sesederhana yang Anda suka. Saya memilih untuk mempertahankan shading yang relatif sederhana, dan mengabaikan fakta bahwa beberapa objek dapat memberi bayangan pada orang lain. Ini akan mempermudah penggunaan sprite dalam animasi nanti.

Mulai dengan memilih semua bentuk yang akan berada dalam bayangan dan mengubah warna isiannya menjadi abu-abu yang lebih gelap. Selanjutnya, pilih semua bentuk yang akan langsung di cahaya dan mengisinya dengan abu-abu yang lebih terang. Untuk bentuk datar, ini mudah, tetapi bayangan pada permukaan melengkung akan membutuhkan lebih banyak pekerjaan.


Langkah 22

Untuk mengilustrasikan bagaimana kita dapat melindungi permukaan yang melengkung, pertimbangkan tubuh ransel.

Salin bentuk ini, dan tempel-di-depan menggunakan Ctrl + C, Ctrl + F. Sekarang singkirkan stroke, dan atur warna isian ke oranye gelap.

Sekarang kita dapat menggunakan Delete Anchor Point Tool (-) untuk memangkas bentuk ini, dan kemudian Direct Selection Tool (A) untuk menyesuaikannya dengan bentuk bayangan. Untuk memperbaiki stroke, kita membuat salinan lain dari tubuh ransel dan menempelkannya di depan. Hapus isi pada bentuk baru ini, dan gerakkan ke depan (Ctrl +]) untuk meletakkannya di depan bentuk bayangan.

Gunakan metode ini untuk membuat bayangan untuk sisa ransel, serta untuk permukaan melengkung lainnya seperti silinder di lengan, dan antena.


Langkah 23

Untuk memberikan sedikit lebih banyak karakter pada robot, kita dapat menambahkan beberapa highlight pada sendi dan kakinya.

Di sini saya telah membuat pergelangan tangan dan kaki menjadi lebih gelap, dan siku serta kaki lebih ringan. Saya juga membuat mata sedikit lebih gelap untuk membuatnya menonjol. Perlu diingat sumber cahaya saat menambahkan lebih banyak warna, karena Anda harus menjaga shading tetap konsisten.


Langkah 24

Untuk membuat robot lebih menonjol, kita bisa memberinya garis yang sedikit lebih tebal.

Pilih seluruh robot, Salin, dan Tempel di Depan (Ctrl + C, Ctrl + F). Klik Pathfinder> Add to Shape Area, lalu Expand untuk mendapatkan bentuk gabungan tunggal. Ubah warna isian menjadi putih sehingga kita bisa dengan jelas bentuk baru.

Bentuk ini kemungkinan akan sedikit berantakan (disebabkan oleh fakta bahwa beberapa bentuk tidak selaras sempurna) sehingga kita dapat menggunakan Remove Anchor Point Tool (-) untuk membersihkannya sedikit dengan menghapus titik jelek. Berfokuslah untuk memastikan bahwa tepi luar paling halus, karena itulah yang bisa kita lihat ketika selesai.

Sekarang gunakan jendela Stroke untuk mengubah jenis sudut menjadi opsi tengah, "Putaran Bergabung". Ini akan membuat sudut-sudutnya halus. Tingkatkan lebar sapuan bentuk ini menjadi 3pt.

Pilih bentuk outline dan tekan Ctrl + Shift + [untuk mengirim bentuk ini ke bagian paling belakang.

Berikut adalah gambar kedua robot itu bersisi satu: satu dengan garis luar dan tanpa satu. Garis besar menyatukan bentuk robot, dan akan membantunya menonjol dengan latar belakang yang lebih rumit.


Langkah 25

Mari kita beri robot sesuatu untuk berdiri. Karena dia akan digunakan di papan permainan isometrik, ubin permainan sepertinya pilihan yang bagus. Buatlah persegi dan kemudian SSR menjadi datar seperti bagian atas kubus. Posisikan ubin di bawah robot menggunakan Ctrl + Shift + [untuk memindahkannya ke bagian paling belakang.


Langkah 26

Pada langkah terakhir, kita akan memberikan robot bayangan sederhana. Buat lingkaran, dan SSR menjadi datar seperti ubin. Ubah warna isian ke abu-abu gelap, lalu atur Opacity menjadi sekitar 15%. Posisikan bayangan di bawah semuanya kecuali ubin (Ctrl + Shift + [, lalu Ctrl +] untuk memindahkannya satu tingkat).


Kesimpulan

Dan di sana kita memilikinya: robot isometrik yang menggemaskan. Gunakan teknik ini untuk membuat sprite isometrik untuk permainan, untuk diagram teknis, atau untuk menambahkan pukulan 3D ke desain Anda.

One subscription.
Unlimited Downloads.
Get unlimited downloads