🐈 Cara Membuat Pixel Art

Nahjika berminat untuk mencobanya, kamu dapat melihat tutorial versi "BLTV" di channel youtube mereka untuk membuat karakter pixel art dari sebuah foto, hanya dengan memanfaatkan palet warna sederhana dan Pencil Tool Photoshop. Photoshop: How to Create a Retro, 8-Bit Pixel Portrait from a Photo Sebagai pemula, membuat karya seni digital yang ditujukan untuk penggunaan web kadang-kadang bisa sedikit membuat frustrasi, terutama saat anda menghabiskan banyak waktu dalam bagian baik itu ilustrasi, atau mungkin sebuah ikon, dan kemudian anda tiba-tiba menyadari bahwa untuk beberapa alasan Hasil akhirnya tidak keluar begitu saja. Ini adalah sesuatu yang kita semua hadapi saat pertama kali memulai menggunakan Adobe Illustrator, jadi inilah mengapa saya memutuskan untuk membuat artikel singkat ini untuk membantu anda jika anda mencari solusi untuk masalah ini. 1. Vector vs Bitmap Sebelum memulai, saya ingin menmberikan pemahaman pada standar yang berbeda yang anda, saya dan semua orang yang bekerja sebagai perancang perlu menyadari kapan kita menganggap pekerjaan ini. Ada dua jenis gambar utama yang akan ditemui saat bekerja sebagai tinkerer kreatif. Salah satunya adalah Vector dan yang satunya lagi adalah Bitmap. Gambar Vektor terdiri dari satu atau beberapa objek yang terdiri dari berbagai jangkar dan jalur yang hampir terukur sampai tingkat tertentu yang diinginkan atau dibutuhkan pengguna, sebuah proses yang terjadi tanpa kehilangan kualitas. Gambar Bitmap, di sisi lain, terdiri dari serangkaian piksel individu yang tetap yang disesuaikan dengan grid, yang berarti bahwa begitu gambar diambil atau dibuat pada resolusi tertentu, gambar akan kehilangan kualitas jika ukurannya dimodifikasi dengan cara apapun. baik upscaled atau downscaled. Hal ini terjadi karena jumlah informasi piksel jumlah piksel sebenarnya dikurangi atau diperbesar dengan paksa, karena beberapa proyek memerlukan ukuran yang berbeda untuk kegunaan yang berbeda. Meskipun mengecilkan sebuah gambar tidak akan memiliki efek yang begitu kuat pada kualitasnya, mamperbesarnya kebanyakan akan menghasilkan file yang blur dan pixelated. Ada beberapa program seperti Perfect Resize yang menggunakan algoritma khusus untuk mengoptimalkan kejelasan dan tingkat detail gambar yang perlu diperbesar, namun bagi saya hal ini lebih jauh menekankan kekurangan dari sebuah properti penting yang dimiliki Bitmap dibandingkan dengan Vector skalabilitas kualitas agnostik. . Baik Vector dan Bitmap tergantung pada media penggunaannya. Seperti yang anda mungkin tahu, file dapat ditampilkan baik secara digital atau dicetak, perbedaan utamanya adalah cara gambar direproduksi. Sementara printer adalah piksel agnostik, layar digital monitor PC, layar ponsel dan tablet, dll. Bergantung pada resolusi untuk menyusun dan menampilkan gambar apa pun, entah itu file Bitmap atau Vector. Hal ini menimbulkan masalah yang rumit dalam cara gambar Vektor berhubungan dengan grid pixel dimana mereka diletakkan, sehingga membagi antara karya seni pixel yang sempurna dan yang seperti berombak. Beruntung ada solusi yang menurut saya harus menjadi peraturan standar yang harus dilalui begitu anda mulai mengerjakan proyek apa pun, apakah itu dimaksudkan untuk diletakkan di web atau dicetak. 2. Memahami Bagaimana Adobe Illustrator Bekerja Sebelum anda mulai memperbaiki sesuatu, anda harus terlebih dahulu memahami bagaimana "sesuatu" itu bekerja. Illustrator adalah perangkat lunak berbasis vektor yang menggunakan algoritma matematis untuk membuat dan menampilkan jalur apakah tertutup atau terbuka yang kita lihat, dengan menggunakan titik jangkar. Titik-titik jangkar ini adalah titik sederhana yang dapat anda manipulasi untuk memodifikasi ukuran dan bentuk objek. Jangkar itu sendiri tidak terlalu penting, tapi bagaimana anda memposisikan mereka dan objek yang mereka buat di Artboard anda bentak atau tidak terkunci adalah, dan itulah sebabnya dalam langkah-langkah berikut saya akan membicarakan semua hal kecil yang membantu kita menciptakan karya seni tampak jernih. 3. Tweaking Pengaturan Illustrator Secara default, Illustrator hadir dengan sekumpulan pilihan dan pengaturan, yang sebagian besar sudah ditentukan sebelumnya, sehingga anda dapat mulai bekerja segera setelah anda menginstalnya pada mesin anda. Bagi kebanyakan orang di luar sana pekerjaan ini baik-baik saja, tapi begitu alur kerja anda menjadi lebih detail, anda akan menemukan bahwa anda perlu men-tweak beberapa dari mereka untuk mendapatkan desain anda sesuai keinginan anda. Pada langkah-langkah berikut, saya akan membawa anda melewati beberapa hal dasar yang ingin saya sesuaikan setiap kali saya mempunyai Illustrator yang baru diinstal. Sebelum kita mulai, saya ingin menunjukkan bahwa ini adalah preferensi pribadi yang dikembangkan melalui proses trial and error, dan saya tidak sama sekali mengatakan mereka sebagai "sempurna" atau "benar" lebih seperti "cocok" dengan pixel sempurna yang dimaksudkan untuk proyek yang tepat. Tidak ada satu situasi pun yang sesuai dengan pola yang sama, namun sering kali hal ini akan memberi anda solusi yang andal untuk menyesuaikan dan mengadaptasi alur kerja anda. Langkah 1 Sebelum kita mulai menyesuaikan unit kita, saya ingin mengambil yang kedua dan membandingkan nilai default yang diberikan Illustrator dengan poin ke nilai tweak yang akan kita pilih pixel untuk melihat apa yang membedakannya. Titik Dari sebuah perspektif tipografi sebuah Point pt adalah unit terkecil yang digunakan untuk mengukur ukuran font, leading, indent, dan spasi sebelum paragraf. Pixel Menurut Wikipedia, dari perspektif digital imaging, sebuah pixel px adalah "elemen terkecil addressable" dari gambar yang diwakili pada layar digital. Karena monitor dan layar perangkat lainnya dimaksudkan untuk menampilkan gambar, kita juga dapat menentukan pixel sebagai unit pengukuran dasar yang dengannya kita menentukan resolusi perangkat, dan ukuran elemen yang ditampilkan padanya. Jadi, kita punya dua unit tapi bagaimana mereka berbeda? Banyak artikel menggambarkan dua sebagai sama 1 pt = 1 px tapi hanya di 72 ppi display sebagai 1 pt = 1/72 inch yang berarti bahwa sekali anda memiliki perangkat ppi yang lebih tinggi, rasio antara keduanya mulai bergeser. Jika anda melihat kedua perspektif CSS, W3 Org menyatakan bahwa 0,75 pt = 1 px. Apple menulis keseluruhan entri tentang hal ini di iOS Developer Library page , mencoba untuk menjelaskan mengapa menggunakan poin sebagai lawan pixel membantu ketika menampilkan gambar yang akan diberikan pada perangkat resolusi yang lebih rendah dan lebih tinggi. "Misalnya, pada perangkat dengan layar beresolusi tinggi, garis yang satu titik lebar sebenarnya bisa menghasilkan garis yang lebarnya dua fisik pixel. Hasilnya adalah jika anda menggambar konten yang sama pada dua perangkat serupa, hanya satu yang memiliki layar beresolusi tinggi, kontennya berukuran hampir sama pada kedua perangkat." Apa yang mereka lupa sebutkan adalah bahwa hari ini, kita memiliki sejumlah produsen yang memiliki layar dengan kerapatan yang berbeda, yang membuat keseluruhan contoh sedikit tidak jelas. Sekarang anda mungkin bertanya-tanya, mana yang harus anda pilih? Saya cenderung percaya pada pixel. Mengapa? Anggap saja ini adalah pilihan pribadi, dan karena saya telah menciptakan karya ilustratif, saya tidak pernah mendengar orang mengeluh bahwa sebuah ilustrasi akhirnya memiliki garis yang lebih tebal pada iPhone mereka daripada di PC mereka. Selain itu, pixel tidak bergantung pada ppi, dan anda dapat menyajikan file yang sesuai ke perangkat resolusi yang lebih tinggi dengan menyesuaikan tingkat ppi saat membuat dokumen baru. Ditambah karena banyaknya resolusi di perangkat yang berbeda, saya cenderung percaya bahwa sejak 1 pt mungkin sama dengan 2 px pada salah satu perangkat Apple, mungkin ada nilai berbeda pada perangkat dari produsen yang berbeda yang menggunakan display dengan kepadatan tinggi. Keputusan ditangan anda. Jika anda menemukan bahwa pixel bekerja untuk anda, lalu pergi ke bagian Unit dari menu Preferences Edit > Preferences > Unit dan atur keduanya General dan nilai Stroke untuk Pixel. Karena tipe berbasis titik, saya sarankan untuk membiarkannya pada nilai defaultnya, karena menyetelnya ke pixel tidak akan memperbaiki kejernihan atau ketajaman teks. Latihan 2 Setelah anda menyesuaikan unit anda, saatnya untuk men-tweak pengaturan Grid. Saya tidak akan terlalu banyak membicarakan tentang grid karena saya memiliki artikel yang berbeda yang menjelaskan semua hal yang perlu anda ketahui tentang mereka. Apa yang akan saya katakan adalah bahwa jika anda ingin membuat karya seni yang runcing, maka anda harus fokus untuk menyiapkan grid yang sangat tepat dan mengerjakannya dengan bekerja sama dengan mode Pixel Preview yang akan saya bahas lebih dalam beberapa menit. Untuk mengubah pengaturan standar, pergi ke Edit > Preferences > Guide & Grid di mana anda akan menemukan dua pengaturan yang perlu anda pertimbangkan pilihan Gridline every dan Subdivision. Saya sudah menggunakan 1 untuk kedua nilai untuk beberapa waktu sekarang dan saya menemukan bahwa hal itu adalah yang paling sesuai untuk proses saya tidak peduli proyek mana yang sedang saya kerjakan. Ya, anda harus lebih perhatian, jika anda seperti saya, anda akan mencoba dan menjadi berorientasi sedetail mungkin. Latihan 3 Bagi kita semua, tombol panah utama di luar sana, Illustrator memiliki fitur rapi yang memungkinkan kita untuk memindahkan benda-benda di sekitar dengan ketepatan yang lebih tinggi dengan menggunakan tombol panah arah keyboard. Karena kita ingin segala sesuatunya setepat mungkin, kita perlu menyesuaikan nilainya sehingga pada masing-masing tombol ditekan, objek akan melompat tepat satu pixel ke arah yang kita tujukan. Pengaturannya bisa ditemukan di Edit > Preferences > General > Keyboard Increment. Ini sangat membantu bila kita ingin memindahkan benda-benda di sekitar dengan cepat dan tepat pada jarak dekat. 4. Proses Sampai sekarang, saya telah berbicara beberapa tweak yang dapat anda gunakan untuk membuat Illustrator lebih tepat, tapi seperti contoh biasanya mengajarkan lebih dari deskripsi fungsi yang sederhana, saya akan menunjukkan kepada anda proses yang biasanya saya alami setelah mulai menciptakan sesuatu yang dimaksudkan untuk digunakan untuk web. Langkah 1 Semuanya dimulai dengan Dokumen kita. Jika kita memperhatikan beberapa pengaturan dasarnya, kita dapat memastikan bahwa karya seni kita memiliki fondasi pixel yang kuat dimana kita dapat mulai membangun. tekan Control-N atau pergi ke File > Baru dan mari kita lihat beberapa pengaturan, dimulai dengan Profile. Karena kita biasanya fokus pada pembuatan pixel sempurna untuk web, Profile harus diatur menjadi Web. Dengan demikian, Illustrator akan secara otomatis menyesuaikan Units menjadi Piksel dan Color Mode menjadi RGB Red Green Blue. Jika anda melihat dari dekat Size dari dokumen kita anda akan melihat bahwa Width dan Height keduanya memiliki nilai bulat 960 x 560 px dan bukan yang desimal 960,5 x 560,38. Tapi kenapa? Nah jika anda membuat Artboard yang memiliki Width 960,5 px akan ada bagian di sebelah kanan yang tidak menempati keseluruhan pixel dari grid, dan malah menutupi separuh permukaannya. Harusnya tidak seperti ini karena kita ingin Illustrator untuk Align New Objects to Pixel Grid. Fungsi ini sangat penting karena menginstruksikan setiap objek yang baru dibuat untuk memposisikan dirinya dengan benar ke Pixel Grid nya, membuat semuanya terlihat runcing. Jadi jika, misalnya, kita punya sebuah 960 x 560 px persegi panjang dan kita ingin mensejajarkannya ke pusat ukuran desimal artboard kita, itu tidak akan bisa dilakukan karena sisi kanan dan bawah tidak akan menutupi seluruh permukaan pixel di bawahnya. Beberapa dari anda mungkin berpikir bahwa pilihan ini hanya boleh digunakan dengan konten yang dimaksudkan oleh web, namun menurut saya menggunakannya untuk mencetak dapat menambahkan nilai karena anda akan bekerja dan memposisikan jangkar anda dengan suatu sistem yang tepat, daripada menempatkan jangkar di semua tempat. Kiat cepat Jika anda secara tidak sengaja memulai proyek yang didasarkan pada nilai atau lebar desimal, anda dapat memperbaiki situasi dengan menggunakan Artboard Tool Shift-O untuk mengubah nilai menjadi bulat tapi anda harus mencoba dan mendapatkan hak untuk merubah ukuran sejak awal, sehingga tidak akan membuat anda pusing di kemudian hari. Langkah 2 Setelah saya memastikan bahwa dokumen saya disiapkan dengan benar, saya biasanya mulai mengerjakan elemen saya, memastikan tiap-tiap dan masing-masing mereka menggunakan nilai bulat untuk lebar dan tingginya. Seperti yang telah saya tunjukkan pada langkah sebelumnya, aturan cover-the-entire-surface-of-the-pixel yang sama juga berlaku di sini. Jika saya ingin membuat bentuk yang tampak runcing, misalnya sebuah persegi, saya memerlukannya untuk memiliki nilai tetap Misalnya 200 x 200 px, sehingga masing-masing sisi berakhir meliputi persis jumlah pixel yang sama dari Artboard tersebut. Dengan demikian saya bisa membuat bentuk yang bisa diperbesar pada persentase apapun dan tetap terlihat jernih. Jika persegi saya sudah 200,4 x 199,9 px, Illustrator akan mulai menerapkan efek antialiasing ke sisi kanan dan bawah karena ini tidak akan meliputi keseluruhan pixel, dengan demikian, elemen saya akan berakhir terlihat kabur. Beruntung bagi kita, orang-orang baik di Adobe menawarkan cara untuk memperbaiki masalah semacam ini, dengan menerapkan fungsi Align to Pixel Grid yang ditemukan di sisi bawah panel Transform. Jika anda memilih objek berukuran buruk dan mengaktifkan pilihan Align to, maka secara otomatis akan mengubah Width dan Height persegi tersebut menjadi 200 px karena ini adalah nilai bulat terdekat yang diidentifikasi oleh perangkat lunak. Kiat cepat Jika pilihannya tidak terlihat, itu karena anda perlu mengaktifkannya dengan mengklik panah kanan bawah menghadap panel Transform dan pilih Show Options. Langkah 3 Ini adalah fitur yang paling penting yang ditawarkan oleh Illustrator saat membuat desain pixel sempurna. Meskipun keduanya memiliki fungsi serupa, ada beberapa perbedaan penting yang membedakan keduanya. Snap to Grid Sesuai namanya, opsi ini berhubungan langsung dengan Grid yang telah anda siapkan. Fungsi ini bisa diaktifkan dengan pergi ke View > Snap to Grid Shift-Control- " dan pada dasarnya menginstruksikan setiap objek dari Artboard anda utuk menjepit tepinya ke persimpangan gridline terdekat. Snap to Pixel Pilihan Snap to Pixel berperilaku sedikit berbeda, seperti halnya menggerakkan objek ke Pixel Grid yang tidak bisa dimodifikasi. Fungsinya disembunyikan sampai anda beralih ke Pixel Preview Alt-Kontrol-Y ketika berubah dari Snap to Grid menjadi Snap to Pixel. Meski berbeda, anda bisa membuat Snap to Grid bertindak identik dengan Snap to Pixel jika anda Gridline every 1 px, pada Subdivision dari 1, yang pada dasarnya berarti membuat grid terkecil yang mungkin, yang sebenarnya ukurannya sama dengan Pixel Grid. Langkah 4 Digunakan berkolabirasi dengan pilihan Snap to Pixel, mode pratinjau ini akan menjadi penolong terbesar anda dalam proses pembuatan karya seni pixel-crisp. Ia memungkinkan anda memperbesar level pixel, dan melihat bagian mana dari desain anda yang perlu untuk ditingkatkan. Saya menggunakannya setiap saat, dan ia telah banyak membantu saya. Seperti yang sudah saya sebutkan, alat ini bisa diaktifkan dengan pergi ke View > Pixel Preview atau dengan menggunakan jalan pintas Alt-Control-Y. Langkah 5 Setelah anda selesai dengan proses kreatif, luangkan sedikit waktu dan pastikan semua jangkar benar-benar terkunci pada Pixel Grid. Bila anda menemukan jangkar yang telah melompat, cukup pakai Direct Selection Tool A, pilih titik anchor yang sesuai, dan kemudian posisikan itu kembali ke persimpangan gridline terdekatnya. Anda mungkin berpikir bahwa menggunakan pilihan Align to Pixel Grid menangani masalah semacam ini, tapi dari pengalaman saya, terkadang cenderung gagal, dan bila itu terjadi saya selalu mengandalkan kepercayaan saya Direct Selection Tool A untuk memperbaikinya secara manual. Langkah 6 Gagang Bezier adalah bagian penting dari perangkat lunak vektor di luar sana karena mereka memungkinkan pengguna untuk memodifikasi bentuk dan orientasi dari setiap jalur baik itu tertutup atau terbuka. Masalah yang dihadapi sebagian besar pemula saat berurusan dengan gagang adalah bahwa mereka biasanya cenderung menyeret mereka ke mana-mana, dan dengan demikian hampir selalu menciptakan bentuk yang terlihat berombak. Rahasianya adalah memastikan gagangnya diseret sambil menahan Shift baik secara vertikal, horizontal atau pada suatu 45 ° diagonal sempurna, sedemikian rupa sehingga ujungnya sejajar dengan salah satu persimpangan gridline. Juga, jika jalur yang anda telusuri memiliki sisi yang datar, cobalah menyeret pegangannya sehingga jatuh tepat ke bagian atas sisi itu tanpa berhati-hati. 5. Berurusan Dengan Mengubah Ukuran Saat berhadapan dengan karya seni pixel sempurna, mengubah ukuran bisa menjadi rasa sakit yang nyata. Jika anda mencoba memilih objek dan menyeret salah satu sisi dari kotak yang berbatasan, itu akan memperbesar atau mengecilkannya, tapi dalam proses melakukannya juga akan memisahkan segalanya. Solusinya dengan menggunakan pilihan Scale Right click > Transform > Scale > Uniform, dan naikkan 50%, sehingga nilai-nilai seperti 150%, 200%, 250% untuk memperbesar dan -50% untuk downscaling setengah dari ukuran aslinya. Inilah sebabnya mengapa anda harus selalu merencanakan ke depan, sehingga anda tahu ukuran yang tepat yang perlu anda desain. Kiat cepat Bahkan dengan metode ini anda akan melihat masalah, terutama bila anda memiliki sekelompok elemen besar dengan sudut bulat dan jalur melengkung. Bila itu terjadi, anda harus mengelompokkan dan kemudian menyesuaikan elemen yang berbeda sekaligus. 6. Berurusan dengan Rotasi Bila anda memiliki persegi panjang, memutar mereka cukup sederhana, karena anda dapat menjepret titik jangkar mereka kembali ke gridline pixel terdekat. Tapi bagaimana dengan bentuk sudut bulat, atau jalur melengkung? Ini mungkin bagian yang paling menyebalkan saat mengarahkan objek sempurna pixel, karena dalam banyak kasus hampir tidak mungkin menjepret jangkar kembali ke Pixel Grid nya karena pasti akan mempengaruhi keseluruhan bentuk objek. Biasanya ketika saya memiliki persegi panjang bulat yang perlu diputar, saya menerapkan rotasi dan kemudian membiarkan objek tersebut seperti apa adanya. Itu dia! Jika anda mengikuti kiat singkat ini, anda seharusnya tidak memiliki masalah dalam menciptakan karya seni garing yang indah yang siap untuk perangkat apa pun. Kamutidak perlu pengalaman yang banyak untuk mengetahui cara membuat pixel art dengan sukses dalam kursus ini. Tutorial ini berisi tentang penjelasan cara menggunakan Unity untuk pemula. From Zero to Hero. Dalam tutorial animasi Unity, kamu akan mengetahui pengertian Unity dan belajar cara menggunakan Unity. Kamu akan membuat superhero Anda mungkin ingin membuat video game bertema retro sekaligus bantuan untuk membuat grafisnya juga. Maka anda akan membutuhkan sprite sebuah karakter yang berdimensi piksel, dianimasikan dan sikap yang berbeda-beda. Maka cobalah pelajaran berikut, sebagaimana kita akan membuat kelinci kecil yang lucu yang mana akan diberikan animasi berlari. Jika anda merasa melakukan pekerjaan piksel itu terlalu sulit atau terlalu melelahkan, silahkan untuk berbelanja sprite siap pakai dan juga aset game lainnya di Envato Market. Mendesain Karakter Sebelum menuju ke animasinya, kita akan melakukan peninjauan karakter, dan sebelum itu kita perlu untuk mengetahui seperti apa bentuk karakternya nanti. Langkah 1 Bagian ini menurut saya tidak terlalu penting untuk anda ikuti, namun bagi saya ini merupakan bagian dari prosesnya mensketsa karakter. Saya hanya mensketsa kepalanya. Saya telah mencoba beberapa opsi dan akhirnya memilih gaya ini. Langkah 2 Untuk menjadikan kelincinya ke dalam piksel-piksel, saya akan menggambar matanya langsung di Adobe Photoshop. Sketsa ini sebenarnya hanya berguna untuk menentukan style-nya. Jika anda sebelumnyaÂ belum pernah melakukan pixel art, anda harus membuat sebuah File Baru di Photoshop dan jangan membuatnya terlalu besarâ€”cukup sebesar 400px dengan 400px. Anda akan bekerja dengan zoom yang banyak seperti 700% dan menggunakan Pencil Tool untuk menggambar satu piksel dalam satu waktu. Saya menyarankan untuk tetap membuka windows kedua disaat file sama terbuka di 100% atau 200% zoom jadi anda dapat bergantian antara dua windows dan anda dapat mengecek kemajuannya tanpa zoom. Saya tidak akan mengikuti ukuran sprite yang telah ditetapkan, tetapi saya akan membuat karakter sekecil mungkin namun tetap menjaga fitur utamanya. Itulah kenapa matanya merupakan titik mulai yang baik. Matanya akan sesimpel dua garis bersebelahan. Setiap mata mempunyai tinggi 3px dengan 1px lebarnya, dan warnanya adalah warna yang mendekati hitam. Langkah 3 Ketika mata tersebu telah selesai, anda dapat melanjutkan dengan hidung kelincinya dan juga beberapa detil lainnya. Tidak apa-apa jika garisnya sangat simpel untuk sekarang. Langkah 4 Sekarang kita akan melembutkan beberapa garis tersebut. Saya juga telah menambahkan beberapa gigi di depat mulutnya, yah karena kelinci punya gigi depan yang besar. Langkah 5 Lalu buatlah mulutnya menjadi seperti tersenyum. Langkah 6 Dan tambahkan telinga. Untuk sekarang buatlah telinganya tegak ke atas, hal ini memang pantas untuk karakter ini, namun kita akan membengkokannya sedikit. Buatlah telinganya dengan tipis, hanya dengan 1px untuk telinga dalam dan juga untuk garis di sampingnya. Langkah 7 Lipatkan satu telinga, terlipat ke bawah. Langkah 8 Dan lipatkan juga telinga belakang ke arah yang sama. Langkah 9 Sekarang untuk menyelesaikan kepalanya, berikan kelincinya pipi yang relatif tembem. Langkah 10 Dan sekarang kita dapat menggabar badan dibawah kepalanya. Kita akan membuat kelinci kita antropomorphic, atau berbentuk seperti manusia. Bagian atasnya pada dasarnya akan berbentuk seperti tetes air mata. Langkah 11 Kita akan memberikan kelincinya kaki yang pendek dan telapak kaki yang besar. Kita dapat memulainya dengan hanya satu kaki. Langkah 12 Kaki belakang ukurannya sama seperti kaki depan, namun bergerak dipindah sedikit ke samping kalau tidak maka akan tidak terlihat oleh kaki depannya. Langkah 13 Akhirnya saya memindahkan kakinya 1px ke kiri karena saya pikir mereka terlihat sedikit kurang tengah, dan saya mengkoneksikan kaki depan dengan bagian perut dengan memisahkan garis piksel yang memisahkan mereka Langkah 14 Kita akan punya satu tangan yang terlihat pada saat posisi berdiri sempurna. Tangannya akan memiliki bentuk seperti tetes air. Tangan ini akan menghalangi beberapa persen bagian dari tubuh atasnya. Langkah 15 Mari bersihkan pekerjaan dengan menghilangkan garis badan atas dibelakang tangan. Dan sekarang dasar garis tepi dari karakter kelincinya telah selesai. Mewarnai Kelinci Sekarang kita akan merubah garis tepi karakter tersebut sampai ke tahap sprite yang diam. Langkah 1 Ambil sebuah warna. Warna apa yang anda suka untuk kelincimu? Saya memilih color berjenis coklat lalu menerapkannya untuk sekarang, ke seluruh area kecuali hidung. Anda bisa mengisi area-areanya dengan Bucket Tool. Langkah 2 Mari berikan kelincinya perut putih yang lucu. Juga satu piksel putih untuk gigi depannya. Beri warna hidungnya dengan sedikit sentuhan warna pink, tetapi sebagian besar akan berwarna putih, sebagai highlightnya. Langkah 3 Kita akan memberikan kelincinya beberapa shading warna yang lebih gelap dari warna utama yang diaplikasikan ke area yang mana sedikit terkena cahaya. Efek bayangan ini akan membantu untuk memberikan teksture ke pipinya jika kita terapkan hal ini dengan sedikit pola. Kita akan terus membuat anggota badan belakang dan kupingya terlihat lebih gelap dari padaÂ bagian depannya. Jadi kaki belakang seluruhnya akan tertutupi oleh warna yang lebih gelap dan kuping belakang akan tertutupi hampir sepenuhnya kecuali bagian ujung atasnya. Langkah 4 Perpanjang shading-nya sampai ke bagian perut yang berwarna putih. Saya menambahkan warna abu-abu terang dengan sedikit warna hue biru. Langkah 5 Beberapa bagian akan terlihat lebih bagus apabila tidak terlalu kontras, jadi saya mengganti beberapa warna mendekati hitam dengan warna coklat gelap di beberapa piksel, seperti di mulut dan di leher. Saya juga menambahkan detil dengan warna coklat gelap ini untuk lebih menonjolkan pipi yang lebih tembem. Dan sekarang karakternya yang dalam posisi berdiri, sudah selesai. Menggambar Frame Posisi Berlari Sekarang berikan kelincinya beberapa gerakan; kita akan membuat gerakan berlari secara terus-menerus. Animasi ini dapat diselesaikan dengan berapapun frame yang ada, tetapi karena ini hanyalah karakter kecil, enam frame sudah cukup. Langkah 1 Hilangkan sementara tangan dan kakinya untuk saat ini. Badan atas kelinci dan kepalanya tidak akan berubah banyak disaat berlari, jadi kita akan mempersiapkannya dan menjaganya untuk tetap konstan sementara kita bekerja pada semua frame. Saya memberikan garis bawah sebagai referensi untuk tinggi kaki atau posisi tanah. Langkah 2 Codongkan tubuh bagian atas ke depan, dengan cara menseleksi kepala dan sebuah area di bawah leher dengan Rectangular Marquee Tool lalu geser 1px ke kanan yang mana dapat dilakukan dengan tombol panah kanan, namun Move Tool harus aktif terlebih dahulu Lalu setelah itu geser kepalanya 2px ke depan. Langkah 3 Kelihatannya kita memutar badanya dengan tidak benar, dan terlihat seperti meregangkannya, membuatnya sedikit lebih panjang. Jadi untuk mengaturnya kembali, mari kita kecilkan badan atasnya secara vertikal 1px dan merapikan garis-garisnya. Lalu geser juga bada bagian atasnya 1px lebih dekat ke garis bawah, karena kakinya akan akan tertekuk saat sedang berlari dan karena itu mereka seharusnya tidak memiliki tinggi yang sama. Langkah 4 Untuk mengerjagakan animasi kakunya, kita hanya membutukan gerakan dari satu kaki, karena yang satunya juga akan bergerak seperti itu. Jadi pergerakan kakinya akan seperti pendulum kakinya menekuk hampir di semua frame gerakan kecuali ketika kakinya memanjang ke depan yang mana akan menjadi frame pertama di sini. Jadi nantinya akan menghasilkan enam frame untuk gerakan kaki jangan ragu untuk mencari referensi lainnya untuk frame-frame berlari ini. Perhatikan posisi kaki saat melakukan hal ini. Gunakan warna yang kontras untuk memudahkan penempatan. Langkah 5 Kita akan bekerja pada semua frame secara berdampingan. Ini dia frame kaki yang telah terpasang di kelincinya. Lakukan pekerjaan ini pada layer baru New Layer. Perhatikan bahwa kakinya tidak tetap pada satu titik di pinggang; ketika kakinya ke belakang, kakinya keluar dari belakang kelincinya, dan ketika kakinya ke depan, maka kakinya akan keluar ke depan kelincinya. Langkah 6 Berikut ini ada cara cepat untuk mengubah garis panduan menjadi bentuk kaki terakhir. Pertama, ganti warna dengan warna bulunya anda dapat melakukan hal ini dengan Bucket Tool dengan settingan contigous-nya tidak dicentang, dan daripada menggambar garis tepi kakinya, seleksi area kosong di sekitar kaki dengan Magic Wand dan contract seleksinya Select > Modify > Contract... by 1px. Lalu invert seleksinya Select > Inverse dan dengan Bucket Tool pengaturan contiguous tidak dicentang isi dengan warna garis tepi. Langkah 7 Untuk kakinya memang masih belum selesai, namun mari kita menambahkan lompatan kecil untuk kelincinya sekarang karena hal itu akan mepengaruhi hasil akhir kakinya. Kita akan menambahkan gerakan lompatan karena disaat berlari tidak mungkin karakternya akan tetap di ketinggian yang sama. Jadi kita akan menaikkan kelincinya 1px di frame yang ketiga, waktu kakinya paling panjang disaat ke arah belakang yang mana membuat kelincinya melompat, dan juga kita perlu menambahkan lompatan di frame ke enam, ketika kaki satunya mendorong kelincinya ke atas. Frame-framenya dengan penambahan lompatan akan ditandai dengan garis bawah berwarna ungu. Garis bawah lainnya telah diubah menjandi 20% garis hitam yang mana bisa digunakan sebagai bayangan. Di dalam platform game, bayangan ini mungkin tidak dibutuhkan, tetapi untuk sekarang bayangan akan membuat animasinya terlihat lebih bagus. Langkah 8 Untuk menyelesaikan kakinya, kita harus membuat telapak kakinya lebih tembem, hubungkan kakinya ke badannya dan juga berikan sedikit warna-warna yang lebih gelap untuk shading. Dan juga, semua garis bawah sekarang diubah ke bayangan. Langkah 9 Sekarang kakinya telah selesai, kita hanya perlu untuk menyalinnya. Setelah ditempel, kita harus memindahkan kaki barunya beberapa piksel ke kanan, seperti kaki pada saat posisi berdiri. Sekarang hal ini akan terlihat sedikit lucu karena kedua kakinya akan bergerak dengan gerakan yang sama, yang mana sebenarnya akan cocok untuk karakter ini karena seperti yang kita ketahui kelinci bergerak dengan melompat. Akan tetapi kita akan menggantinya dan membuatnya seperti kelinci yang sedang berlari. Langkah 10 Untuk mendapatkan kaki yang dapat berlari, kakinya seharusnya bergerak bergantian, jadi ketika satu kaki memanjang ke depan, kaki satunya seharusnya memanjang ke belakang. Karena kita hanya punya enam frame, berarti satu kaki akan bergerak di framenya menjadi tiga posisi yang menuju satu sisi dan lalu kita ambil tiga frame kaki tanpa badan dan memindahkannya ke frame yang berisikan kelinci dengan satu kaki. Layer kaki yang baru seharusnya berada di belakang layer tubuh kelinci. Langkah 11 Untuk menyelesaikan kaki belakangnya, anda dapat melakukannya secara mudah dengan caraÂ mewarnai dengan warna yang lebih gelap. Framenya sejauh ini akan terlihat seperti berikut. Lalu untuk sekarang mari kita animasikan. Pada akhirnya kita akan menyelesaikan grafis dan animasi berlarinya. Langkah 12 Sekarang saatnya untuk menambahkan tangannya. Kemungkinan tangannya akan bergerak seperti ini. Tangannya akan menekuk disaat berlari, hanya sedikit lurus pada memanjang pertama di frame pertama. Namun, anda dapat mencoba varian gerakan anda sendiri untuk mendapatkan gaya berlari yang berbeda. Langkah 13 Letakkan tanganya di atas frame tubuhnya di sebuah layer baru New Layer, dan berikan mereka warna dan garis tepi yang cocok, seperti yang kita lakukan dengan kakinya. Langkah 14 Dan lalu buat tangannya lebih berisi. Langkah 15 Dan akhirnya beri sedikit warna gelap untuk memberi kesan lebih berisi. Langkah 16 Lalu salin tangannya dan tempelkan di layer baru New Layer, lalu ditaruh dibelakang tubuhnya. Langkah 17 Dan akhirnya berikan warna yang lebih gelap pada tangan yang baru dan geser tanganya jadi mereka terlihat seperti lawan dari tangan yang asli. Ingat bahwa tangan bergerak berlawanan dengan kaki, jadi disaat kaki kiri berada di depan maka tangan kiri ada di belakang. Sekarang seperti inilah tangannya. Langkah 18 Mari tambahkan sedikit gerakan di kepala, yang mana terlihat terlalu kaku. Kita akan membuat telinganya mengikuti gerakan kelincinya. Di sini, di frame dimana kelincinya sedikit melompat ke atas, saya membuat ujungnya bergerak kebawah sehingga seperti inersia yang membuat telinganya seakan tetap turun diwaktu kelincinya melompat-lompat. Langkah 19 Pada frame setelah kelincinya melompat, saya membuat telingganya sedikit menekuk dan lebih terbuka, ke arah depan. Langkah 20 Dan akhirnya saya membuat bulu pipinya juga bergerak. Seperti pada telinga, sedikit kita turunkan pipinya disaat kelincinya melompat ke atas dan setelah kelincinya selesai melompat tinggikan sedikit pipinya. Dan sekarang akan terlihat seperti ini. Langkah 21 Sedikit lagi yang harus dilakukan di frame yang mana akan kita lakukan di bagian badan atas, yang pertama kita akan menganimasikan titik putih pada perutnya. Dadanya akan terlihat memutar sedikit pada waktu berlari, jadi bagian putihnya harus merespon gerakan itu. Jadi ketika tangan yang depan di posisi belakang, area putihnya seharusnya terlihat bertambah banyak, dan area putihnya juga terlihat bertambah sedikit ketika tangan depanya di posisi depan kelincinya. Langkah 22 KIta tidak perlu menggambar ekornya ketika kelincinya berdiri, namun kelincinya sekarang berlari, jadi kelihatannya ekornya perlu dimunculkan. Jadi kita berikan kotak merah yang digunakan untuk menandai dimana ekornya akan bergerak. Hal ini dilakukan di Layer Baru New Layer, dan sekarang jadikan layer baru ini layer paling atas. Langkah 23 Sekarang berikan ekornya beberapa warna, shade, dan garis tepi. Langkah 24 Sentuhan akhir untuk ekornya ekornya akan sedikit tidak terlihat disaat dada kelincinya lebih terlihat. Langkah 25 Untuk menyelesaikan ekornya, pindahkan layernya ke belakang dan selesaikan semua shading/ bersihkan sesuai keinginan anda. Dan akhirnya pekerjaan kita di framenya telah selesai. Inilah hasil akhir jika bergerakâ€”detil-detil tambahan terbayar sudah, ya kan? Selanjutnya mari kita rubah frame-frame tersebut ke sebuah gerakan berulang. Membuat Animasi Kita telah memiliki enam frame yang mana akan menjadi sebuah perulangan berlari yang mulus. Kita hanya perlu menggerakkan frame-framenya. Langkah 1 Salin frame-framenya ke File Baru New File. Anda harus mensalin satu frame di satu waktu, dalam urutan yang benar kiri ke kanan. Untuk menyalin semua layer disaat yang bersamaan, anda harus copy merged Edit > Copy Merged, dan ingat untuk menghilangkan background warna disaat menyalin. Anda harus membuat file dengan dimensi yang sedikit lebih besar daripada kelincinya. Ketika anda tempel paste frame-framenya seharusnya berbaris dengan benar; garis bawahnya tetap disemua layer, dan hidungnya juga, kecuali disaat dua frame yang mana kelincinya melompat sebanyak 1px. Hal ini diakhiri dengan sebuah file dengan total enam layer; satu per frame. Tanpa background. Langkah 2 Untuk membuat animasi di Photoshop, anda perlu membuka jendela timeline Windows > Timeline. Jendela tersebut mempunyai tombol Create Frame Animation yang mana telah ter-set bahwa defaultnya adalah Create Video Timeline, namun dalam hal ini anda dapat menggantinya ke frame animation menggunakan tombol drop-down. Langkah 3 Tekan tombol Create Frame Animation, dan tekan tombol timeline window options, di pojok kanan atas... ... dan pilih Make Frames From Layers. Langkah 4 Lalu akhirnya pilih semua frame dan atur waktu tunda delay mereka, saya memilih waktu tunda delay sebanya detik dan set opsi perulangannya looping options ke Forever. Dan sekarang anda telah mendapatkan animasi kelinci yang berlari! Anda sekarang dapat menggunakan sprite ini untuk game atau mengekspornya ke dalam bentuk GIF. Pekerjaan yang Luar Biasa, Anda Telah Menyelesaikannya! Selamat, kelincinya dapat berlari sekarang! Dia siap untuk menyelamatkan sang putri kelinci atau dia juga dapat menyebabkan kekacauan atau menjadi apapun yang anda inginkan. Pelajaran ini seharusnya memberimu ide atas apa yang harus anda persiapkan untuk mendesain dan menganimasikan sprite. Anda dapat membuat sendiri milikmu untuk bersenang-senang ataupun untuk pekerjaan dan mengaplikasikan grafis ini ke sebuah game! Dan jika hal ini terlalu melelahkan untuk anda, ingat bahwa anda dapat menemukan aset game yang telah selesai di Envato Market! ^{caramembuat pixel art di coreldraw koleksi untuk NFT, belajar membuat pixel art cukup mudah menggunakan coreldraw baik untuk pemula}

Berkat remake dan remaster video game retro, pixel art telah kembali menjadi sorotan. Meskipun grafis video game baru telah mencapai tingkat hyper-realistis, itu masih tidak dapat mengalahkan pesona seni pixel. Itulah sebabnya pengembang dan artis gim beralih ke alat pixel art untuk membuat video game dan karya seni Anda ingin mencoba membuat karya seni pixel sempurna? Maka alat pixel art ini akan membantu Anda tidak bisa mendapatkan yang lebih sederhana dari GrafX2. Setelah pengembang meninggalkan kode pada tahun 2001, tidak banyak yang berubah, yang agak ironisnya membuatnya menjadi alat yang lebih baik untuk membuat pixel bitmap 256-warna ini hadir dengan opsi untuk menggambar dalam 60 resolusi berbeda. Jika Anda terbiasa dengan AmigaOS, Anda akan menemukan bahwa itu sangat mirip dengan Deluxe Paint dan GrafX2 reboot pada 2007, beberapa fitur baru telah ditambahkan. Alat peneduh dasar, alat bentuk, pengaturan kisi, dan opsi animasi pasti akan berguna bagi pengembang EditPyxel Edit belum sepenuhnya selesai, tetapi masih mengemas banyak fitur bermanfaat untuk artis piksel yang lebih suka bekerja dengan ubin. Tampilannya yang bersih dan terinspirasi dari Photoshop membuatnya mudah dipelajari dan Anda menggambar di dalam satu ubin, semua ubin lainnya berubah secara instan. Anda bahkan dapat membalik atau memutar ubin tanpa mengubah Pyxel Edit Gratis, $ 9 untuk versi betaKritaKrita dilengkapi dengan sebagian besar alat menggambar yang khas. Namun, pilihan kecil alat-alat seni pixel mendarat Krita di daftar pengaturan kuas Anda ke Pixel Art memperkenalkan tiga kuas yang dibuat khusus untuk menggambar dengan piksel. Beberapa fitur menarik lainnya termasuk stabilisasi sikat, manajemen lapisan, mirroring, dan banyak Krita GratisAsepriteAseprite menggabungkan yang lama dengan yang baru dalam antarmuka yang unik. Mungkin tidak terlihat, tetapi alat ini adalah alat seni pixel kuat yang datang sangat hadir dengan kotak peralatan penting seni pixel yang mencakup pengupas bawang, mode naungan, mode ubin, dan mode campuran. Dan itu bahkan memberi Anda kemampuan untuk membuat sprite Aseprite $ 14,99, Uji coba gratis tersediaGIMPGIMP telah menjadi salah satu nama paling populer dalam kreasi seni pixel dan pengeditan foto untuk alasan yang baik. Meskipun mungkin sulit bagi pengguna pertama kali, itu masih layak menyelam ke GIMP, pastikan untuk memasangnya dengan benar. Tidak seperti beberapa program lain yang tercantum di sini, GIMP tidak hanya berfokus pada alat pixel art. Penyesuaian sederhana, seperti menambahkan kisi, dapat membuatnya ideal untuk seni piksel. Anda kemudian dapat memanfaatkan fitur luar biasa seperti mode pengindeksan warna, mode jendela mengambang, dan alat GIMP GratisPiskelPiskel adalah alat yang hebat untuk membuat sprite piksel 2D online secara gratis. Ukuran pena yang kecil membuatnya ideal untuk pembuatan dan animasi sprite, daripada mendesain seluruh merampingkan proses animasi sprite. Cukup gambarkan sprite Anda, dan terus tambahkan bingkai baru sampai Anda menyelesaikan web Piskel GratisGraphicsGaleGraphicsGale menawarkan beberapa alat yang berguna untuk seni pixel, seperti manajemen layer, penyesuaian palet warna, dan bahkan pengupas bawang. Apakah Anda pernah merasa frustrasi pada kenyataan bahwa Anda tidak dapat dengan mudah melihat animasi Anda? GraphicsGale memungkinkan Anda menonton animasi Anda beraksi selama proses Pixilart dari kenyamanan browser web atau perangkat seluler Anda sendiri. Beberapa fitur dasarnya termasuk alat garis, alat dithering, alat pena, alat sikat dan banyak lagi. Menu di sebelah kanan layar menampilkan warna dan manajemen tidak memiliki semua lonceng dan peluit dari beberapa program lain ini, tetapi masih merupakan opsi yang valid. Plus, Anda bisa membagikan desain Anda dengan komunitas Pixilart untuk Android iOS GratisPhotoshopAnda tahu bahwa Photoshop memiliki beberapa kemampuan mengedit foto terbaik, tetapi tahukah Anda bahwa Anda juga dapat menggunakannya untuk pixel art? Seperti GIMP, membuat seni pixel di Photoshop hanya membutuhkan waktu untuk ada yang dapat menghalangi seni Anda ketika Anda dapat mengelola beberapa lapisan, palet, dan membuat kuas khusus. Unduh Photoshop $ 9,99 / bulan, uji coba 7 hari gratisPro Motion NGBaik Anda sedang mencari cara untuk membuat animasi atau desain mendalam, Pro Motion NG dapat mengarahkan Anda ke arah yang benar. Muncul dengan semua yang Anda bisa minta dalam program pixel art ubin peta, bawang menguliti, pembersihan pixel, lapisan, dan banyak susunan fiturnya tidak cukup untuk memikat Anda, Anda harus memperhatikan bahwa studio profesional seperti UBISoft dan Gameloft menggunakan Pro Motion NG untuk gim mereka. Pengembang game yang mendesain game retro mobile untuk pecandu nostalgia benar-benar bisa mendapatkan yang terbaik dari program Pro Motion NG Gratis, $ 39 untuk versi lengkapSlateJika Anda baru mengenal seni piksel, mulailah dengan Slate. Itu tidak menjual Anda pendek dalam hal fitur, dan memiliki antarmuka yang ramah pengguna yang dapat ditelusuri siapa pun. Setelah terbiasa, Anda dapat mulai membuat tileset dan program sederhana ini membuat membuat sprite dan animasi menjadi lebih mudah. Anda selalu dapat mengharapkan perbaikan bug dan fitur baru dari Slate juga; para pengembang terus bekerja untuk meningkatkan perangkat Slate GratisTingkatkan Pixel Art AndaMasuknya game baru yang terinspirasi retro tidak akan berakhir dalam waktu dekat, sehingga itu berarti saatnya untuk menaiki gelombang dan membuat beberapa pixel art. Dengan alat yang tepat yang Anda inginkan, Anda akan dapat membuat karya seni pixel sempurna tanpa terlalu banyak kesulitan.

JtRPZH5.