Tutorial Membuat karakter Menggunakan Tools (Affinity Designer)

Mata Kuliah   : Desain Pemodelan Grafik
Nama          : Alim Abdul Jabbar
NPM           : 50415552
Kelas         : 3IA22
Dosen         : Syefani Rahma Deski

Jika anda pernah ingin mencoba pengembangan game dan desain karakter, tutorial ini pas untuk anda! Hari ini kita akan membuat lembaran peri untuk makhluk mirip burung untuk permainan video dan mobile, dengan menggunakan berbagai alat dan fungsi Affinity Designer. Kita akan melalui proses penuh, dari menguraikan sketsa untuk mewarnai dan menciptakan satu set pose yang bisa digunakan untuk animasi. Mari kita mulai!

Hasil Akhir

1. Menggambar Bagian Dasar Karakter

Langkah 1

       Saya biasanya mulai membuat karakter dengan membuat sketsa dan mencoba mencari gambar yang tepat, bentuk yang menarik, dan penampilan yang tidak biasa.  Cobalah menggabungkan beberapa detail fiktif hewan atau benda yang anda temui dalam kehidupan nyata, mencari solusi asli dan luar biasa.  Anda bisa mendapatkan inspirasi dengan browsing melalui bagian game characters atau game sprites dari Pasar Envato atau game character sprite di Pinterest. Cobalah untuk membuat ide orisinil anda sendiri, ciptakan kombinasi yang tak terduga.
       Bila anda telah membuat beberapa variasi, pilih yang paling anda sukai dan teruslah bekerja dengan itu.  Cobalah berbagai pose dan ekspresi wajah.
       Saya membuat banyak sketsa kasar, yang membantu saya untuk memahami bagaimana karakter saya bergerak, entah terlihat menarik dan orisinal, entah sesuai dengan lingkungan sekitar atau konsep permainan masa depan kita dan sebagainya.

       Akhirnya, saya cukup puas dengan tampilan misterius fantasi dari si kecil ini, dan inilah sketsa yang akan kita kerjakan dalam tutorial ini.  Anda bisa mendownloadnya langsung dari sini, right mouse click saja pada gambar dan simpan ke PC anda.

Langkah 2

       Kita akan bekerja dengan Drawing Persona dari Affinity Designer, menggunakan fitur vektornya untuk membuat peri karakter kita untuk permainan video, yang dapat dengan mudah dianimasikan dalam berbagai pose.
       Mari buat sebuah New Document berukuran 600 x 800 px.  Gunakan Place Image Tool untuk mengimpor sketsa kita dan memposisikannya di pusat kanvas.
       Dan mari kita mulai mensketsakan karakter.  Pakai Ellipse Tool (M) dan buat bentuk, pas ukuran wajah.  Persiapkan dirimu dengan Pencil Tool (N) dan gambar sebuah paruh, menelusuri sketsa.  Anda bisa mengedit stroke dengan menggunakan Node Tool (A) agar lebih halus dan mengalir.

Langkah 3

Pilih kedua bentuk yang telah kita buat dan gunakan Add Operation di toolbar konteks atas.  Dengan cara ini kita telah menggabungkan kedua elemen menjadi satu bentuk.
Sekarang gunakan Ellipse Tool (M) untuk membuat sebuah mata dan menambahkan beberapa elips lagi untuk membuatnya lebih rinci.  Ikuti garis sketsa, buat bentuk sesuai sketsa.

Langkah 4

Gunakan Pencil Tool (N) untuk menggambar garis panjang melengkung di wajah dan edit, jika perlu, gunakan Node Tool (A). Kita bisa mengubah Style, Width dan parameter lain dari garis kita di panel Stroke(anda akan menemukannya di salah satu tab di sebelahnya panel Color).
Dari sini, mari kita atur Width menjadi 11 pt dan pindah ke jendela drop-down Pressure.  Di sini kita bisa memvariasikan lebar segmen garis yang terpisah, dengan menggunakan grafik.  Pilih titik yang tepat dari kurva pada grafik dan tarik ke bawah untuk membuat bagian kanan dari stroke (yang berada di hidung karakter) lebih tipis.

Langkah 5

Sekarang pakai Rectangle Tool (M) dan mari kita beralih ke tubuh. Buat persegi panjang, selaraskan ke badan, dan Convert to Curves di toolbar konteks atas. Beralih ke Node Tool (A) dan mulai memindahkan simpul bawah menjauh satu sama lain, membuat bagian bawah lebih lebar.
Pilih kedua node atas dan tarik mereka untuk menutupi kepala karakter kita.  Kemudian pilih node kanan atas dan gunakan fungsi Convert to Smooth dari toolbar konteks atas, buat bagian kanan dari segi empat halus dan bulat.

Langkah 6
Sekarang gunakan Node Tool (A) untuk memodifikasi sisi kiri bodi, tambahkan lebih banyak simpul, membuat sudut halus dan membuat garis sesuai sketsa.

Langkah 7

Mari tambahkan bulu ke bagian bawah tubuh, bentuk semacam rok.  Pakai Ellipse Tool (M) dan buat bentuk terjepit di sisi kiri bawah body.  Tekan Option-Shift dan tarik bentuk ke kanan, buat salinannya.  Ulangi tindakan yang sama, buat lebih banyak salinan dan isi semua bagian bawah.
Akhirnya, pilih bentuk tubuh dan bulu, pergilah ke toolbar konteks atas dan aplikasikan Add Operation.  Mantap!  Sekarang kita telah menggabungkan elemen menjadi satu bentuk.

Langkah 8

 Sekarang kita lanjutkan ke kaki.  Mari kita membuatnya sederhana: gambar garis vertikal lurus dengan kaki kecil di bagian bawah.  Pergi ke panel Stroke dan mari kita tambahkan lebih banyak dimensi ke kaki dengan membuatnya lebih tebal.  Atur nilai Width menjadi 60 pt dan gunakan grafik Pressure untuk membuat bagian dasarnya lebih tipis, seperti terlihat pada gambar di bawah ini.

Langkah 9

Sekarang kita perlu mengubah stroke menjadi sebuah bentuk sehingga kita bisa mengeditnya, tambahkan detail, garis dan sebagainya.  Biarkan kaki  tetap terpilih, pergi ke Layer> Expand Stroke.  Bentuknya terlihat cukup bagus, meski mungkin terdapat sekumpulan simpul.

Sementara bentuknya masih terlihat mulus, mungkin menjadi sangat rumit dan menyita waktu untuk menghapus semua  simpul yang tidak dibutuhkan secara manual.  Kita memiliki dua pilihan di sini: baik untuk meninggalkan bentuk seperti itu saja dengan kumpulan simpul, atau, jika anda teliti terhadap kualitas, buat bentuk baru.
Kita bisa menggunakan salah satu alat gambar di sini, entah itu Pencil Tool (n) atau Pen Tool (P). Saya lebih memilih Pen Tool (P).  Cukup telusuri kaki yang telah dibuat di atas, buat bentuk yang halus dan membulat, dan gunakan Node Tool (A) untuk memindahkan simpul sekitar.
Salin kaki untuk menambahkan satunya lagi.

Langkah 10
Kita memiliki dua layer "rok" bulu pada sketsa kita, jadi mari tambahkan layertubuh berbulu kedua. Salin bentuk tubuh dan rentangkan ke bawah, buat bentuknya tinggi, sehingga sesuai dengan sketsanya.  Hapus bagian atas dari bentuk yang direntangkan, sisakan roknya. Anda bisa melakukan ini dengan bantuan Node Tool (A) dengan memilih semua simpul atas yang tidak dibutuhkan dan menghapusnya.
Sebagai sebuah pilihan, anda juga bisa menghapus bagian atas dari bentuk dengan Vector Crop Tool.  Namun, saya lebih memilih metode pertama, karena Vector Crop Tool meninggalkan bagian terhapus tersembunyi di dalam topeng kliping. Ini bisa sangat membantu dalam banyak kasus, bila anda perlu mengembalikan bentuknya, tapi kita tidak perlu melakukannya.

Langkah 11

Sekarang mari kita membentuk lengan bergaya atau sayap untuk karakter burung kita.  Buat sebuah elips, paskan sayap pada sketsa, dan Convert to  Curves.  Tarik kedua sisi titik jangkar ke bawah sedikit, membuat bentuk yang lebih luas di bagian bawah.  Tambahkan sebuah elips lagi, buat lengan ditekuk di siku.

Langkah 12

Lanjutkan dengan Convert to Curves elips kedua, dan gunakan Node Tool (A)   untuk memindahkan garis di sekitar, membuat mereka sesuai dengan sketsa.  Gunakan Add Operation untuk menggabungkan bentuk dan membuat semua simpul menjadi halus.

Langkah 13

Terakhir, gunakan Pencil Tool (N) untuk menggambar rumbaian kecil bulu di siku dan menggabungkannya dengan lengan juga.
Mantap!  Garisnya sudah siap.  Sekarang mari kita tambahkan warnanya!

2. Menerapkan Warna & Memvariasikan Pose

Langkah 1

Kita akan bekerja dengan palet ungu gelap.  Saya biasanya memilih warna dengan bantuan panel Colourdan Eyedropper Tool, yang dapat ditemukan tepat di atas roda warna di panel Colour.

Cobalah membuat bagian atas karakter lebih ringan daripada bagian bawah agar memisahkan elemennya satu sama lain, membuat mereka muncul.  Buatlah wajahnya berwarna krem, buat kontras yang mencolok agar membuatnya menjadi elemen utama karakter, yang menarik perhatian pemirsa.

Langkah 2

Sekarang mari kita kerjakan wajahnya.  Terapkan warna untuk ketiga elips mata, membuat bagian dalamnya lebih gelap, menciptakan lubang.  Dan mari kita edit garis merah di wajah. Buat lebih tebal, tingkatkan Stroke Weight di panel Stroke. Cut (Command-X) garis, pilih bentuk wajah krem dan pergi ke Edit> Paste Inside.  Mantap!  Sekarang garis itu ada di dalam bentuk wajah, seperti berada di dalam masker kliping, dan kita masih bisa mengeditnya, jika perlu.

Langkah 3

Mari kita tambahkan beberapa bayangan pada karakter kita, membuatnya lebih rinci.  Pakai Pencil Tool (N)dan mulai menggambar bentuk, sebagian menutupi sisi kiri tubuh.  Itu tidak harus sempurna, karena kita akan meng-Cut (Command-X)nya dan kemudian Edit> Paste Inside bentuk tubuhnya.  Buat bayangan sedikit lebih gelap dari pada tubuh.

Langkah 4

Gunakan Ellipse Tool (M) untuk menambahkan sekelompok lingkaran kecil di sepanjang tepi bayangan, saling tumpang tindih dan membuat bayangan bertekstur. Tekan Shift untuk membuat lingkaran merata sempurna.
Tambahkan elips ungu gelap untuk bayangan di bawah wajah (tekan Command-[beberapa kali untuk menggerakkan elips di bawah bentuk wajah).  Buat rincian lebih lanjut, buat bayangan gelap di bagian bawah "rok", dan tambahkan nada tambahan biru dengan lingkaran berbintik-bintik di sisi kanan tubuh karakter.  Terakhir, buat lengan lebih ringan daripada tubuh, pisahkan dari elemen lainnya.
Jangan lupa menambahkan dua bayangan kecil yang membulat ke kaki, membuat mereka lebih tiga dimensi.

Langkah 5

Turunkan Opacity dari sorotan biru terang di panel Layer agar lebih halus.
Jika anda ingin bermain-main dengan warna, membuatnya lebih jelas, gunakan Eyedropper Tool untuk memilih warna dari satu elemen dan menerapkannya ke yang lain. Jika anda belum mencoba alat di Desainer Affinity, mungkin sedikit rumit tapi tetap sangat nyaman.
Temukan ikon Eyedropper di panel Colour dan seret ke gambar anda.  Anda akan melihat kaca pembesar yang membantu untuk memilih warna yang diinginkan, yang muncul di sebelah tombol ikon Eyedropper di panel Colour.  Sekarang anda bisa menerapkannya pada bentuk apapun yang anda pilih, cukup dengan mengklik lingkaran berwarna mungil di panel Colour.

Langkah 6

Mari tambahkan detail lebih lanjut kepada pria keren kita.  Tambahkan bayangan ke semua bagian tubuh, termasuk kepala dan lengan (jika belum ditambahkan) dan buat beberapa bintik di wajah agar lebih bertekstur.
Letakkan beberapa elips lagi di dalam mata, secara bertahap cerahkan warna agar terlihat bercahaya.  Anda bisa melihat panel Layer saya pada gambar di bawah, menunjukkan semua bagian kelompok mata.

Langkah 7

Karakter kita sudah terlihat bagus pada tahap ini, tapi jika kita membayangkan meletakkannya di atas latar belakang video-game yang mendetail, mungkin akan berbaur dengan latar belakang jika palet warna dari elemen serupa. Kita perlu membuat karakter kita lebih berbeda dari latar belakang manapun. Harus menarik dan terlihat jelas pada pandangan pertama. Dan inilah cara sederhana untuk memisahkan karakter secara visual: kita harus menggunakan garis-garis!  Semakin tebal garis seputar karakter, semakin jelas jadinya!
Pilih lengan, pergi ke panel Colour dan aplikasikan  Stroke  hitam dengan nilai 3 pt Width.  Tambahkan garis ke wajah dan kaki juga.  Anda mungkin perlu memilih elemen didalam kelompok yang menggunakan panel Layer, untuk menerapkan Stroke.

Langkah 8

Sedangkan untuk tubuhnya, saya ingin menerapkan satu garis ke keseluruhan bentuk. Namun, tubuh terdiri dari dua elemen, jadi kita akan melakukan sedikit trik.  Pilih kedua bagian tubuh dan menduplikatnya (Command-C> Command-V). Anda akan melihat salinannya di panel Layer.  Pilih salinannya dan gabungkan keduanya menjadi satu bentuk dengan menggunakan Add Operation
Sekarang kita bisa mengatur warna Fill dari bentuk gabungan ke none di panel Colour dan mengaplikasikan 4 pt Stroke yang tebal, menjaga bentuk garis di atas tubuh.

Langkah 9

Mari kita lihat apa yang kita miliki sejauh ini.  Kita telah menciptakan sebuah karakter fantasi yang mewah, yang terdiri dari tubuh (bersama dengan wajah), sepasang lengan bersayap dan sepasang kaki lucu.  Dan itu sebenarnya semua yang kita butuhkan untuk membuat peri permainan yang bergerak!  Pastikan anda sudah Grouped (Command-G) semua bagian dengan benar di panel Layers, menjaga pekerjaan anda rapi dan konsisten.

Sekarang kita bisa membuat beberapa pose tertentu yang bisa dilakukan oleh karakter kita selama permainan.  Anda bisa browsing bagian game character sprite sheet di GraphicRiver untuk melihat pose apa yang biasanya digunakan dalam game, atau buat sesuai selera anda.
Di sini saya telah mempresentasikan pose dasar dengan hanya memindahkan bagian peri kita, membuatnya berdiri, berlari, melompat atau pingsan.  Perhatikan bahwa saya telah menghilangkan mata bercahaya pada pose samar agar terlihat lebih tidak sadar.

Hore! Karakter Peri Game Fantasy Kita Sudah Siap!

Kerja bagus!  Kita baru saja selesai membuat mahluk burung mewah kita dan membuat lembaran peri dari beberapa pose sederhana yang bisa digunakan untuk animasi. Saya harap anda telah menemukan beberapa tip dan trik berguna yang akan membantu anda mengenal Affinity Designer dengan lebih baik atau akan menginspirasianda untuk membuat beberapa karakter unik dan lembaran peri baru untuk game PC, browser, atau mobile.
Jika anda ingin mendapatkan file EPS vector siap pakai dengan burung mewah kita, termasuk bingkai detail untuk setiap pose, cek saja bird creature sprite sheet.  Ini bisa digunakan untuk animasi sederhana.
Bersenang-senanglah merancang karakter baru, dan jangan lupa bagikan hasil anda!

Referensi :

Envatotut+. (2016, 14 Januari). Cara Membuat Lembaran Peri Karakter Game di Affinity Designer. Diperoleh 07 Januari 2018, dari https://design.tutsplus.com/id/tutorials/how-to-create-a-game-character-sprite-sheet-in-affinity-designer--cms-25611