Mengonversi Pixel Art ke Vektor Tanpa Kehilangan Tepi Tajam

Anda dapat mengonversi pixel art menjadi vektor, tetapi tentukan dahulu apakah piksel persegi harus tetap terlihat. Untuk mempertahankan tampilan asli, bangun ulang gambar sebagai kisi atau mosaik objek. Untuk mengubah sprite menjadi ilustrasi halus, gunakan pemvektoran kontur. Keduanya menghasilkan keluaran berbeda, dan penelusuran umum tidak dapat memilih yang tepat untuk Anda.

Jika mengedit sprite game di Scratch, tombol Convert to Vector mengubah mode pengeditan tanpa menelusuri bitmap. Gunakan pemeriksaan kemampuan pengeditan kostum Scratch untuk menentukan apakah piksel dipertahankan, sebagian digambar ulang, atau bentuk SVG hasil penelusuran diimpor, lalu bandingkan pusat kostum pengganti dengan aslinya.

Jika tujuan sebenarnya hanya menampilkan pixel art tajam di situs web atau game, Anda mungkin tidak membutuhkan SVG. PNG dengan ukuran tepat dan penskalaan seperti nearest-neighbor sering lebih kecil serta lebih setia pada sumber; di web, properti image-rendering menyediakan perilaku crisp-edges dan pixelated untuk mempertahankan tepi tegas.

Tiga keluaran untuk tiga pekerjaan berbeda

Pertanyaannya lebih tentang makna blok daripada format yang “lebih baik”. Dalam pixel art, tepi bertangga sering disengaja. Menghaluskannya dapat sama merusaknya dengan menambahkan blur pada gambar garis.

Mempertahankan kisi dan menghaluskan kontur adalah pekerjaan berbeda

Cara 1: pertahankan kisi piksel secara persis

Konversi vektor paling literal mengubah sel raster menjadi persegi panjang vektor. Piksel merah menjadi persegi merah. Deretan piksel merah berdekatan dapat tetap menjadi persegi terpisah atau digabung menjadi persegi panjang lebih besar jika tidak mengubah siluet.

Sebelum mulai, temukan dimensi kisi asli. Sprite yang ditampilkan pada 800 kali 800 piksel mungkin berasal dari kisi 32 kali 32 yang diperbesar dengan nearest-neighbor. Struktur 32 kali 32 itulah yang perlu direproduksi, bukan dimensi tampilan yang diperbesar.

Alur Object Mosaic Illustrator

Adobe mendokumentasikan cara bawaan untuk mengonversi bitmap tertanam menjadi mosaik:

1. Tempatkan pixel art asli di Illustrator dan sematkan.
2. Pilih gambar lalu Object > Create Object Mosaic.
3. Atur jumlah ubin sesuai kisi piksel asli jika diketahui.
4. Gunakan ubin persegi dan keluaran warna.
5. Pertahankan raster sumber sampai mosaik diperiksa, lalu hapus atau sembunyikan.
6. Bandingkan siluet luar, celah dalam, dan palet dengan asli pada pembesaran tinggi.

Dokumentasi Create Object Mosaic Adobe menjelaskan perintah, opsi ubin persegi, pengaturan warna, dan penanganan raster sumber. Alur pixel art merupakan penerapan praktis perilaku mosaik yang didokumentasikan itu.

Mosaik objek dapat setia secara struktural tetapi tetap tidak efisien. Sprite 64 kali 64 memiliki 4,096 sel sebelum penggabungan. Hapus sel yang sepenuhnya transparan, gabungkan persegi panjang berwarna sama yang berdekatan jika memungkinkan, dan hindari menyimpan objek tak terlihat dalam SVG akhir.

Cara 2: buat SVG kisi tanpa Illustrator

Anda dapat membuat jenis file yang sama dengan skrip yang memahami piksel atau konverter khusus. Prinsipnya lebih penting daripada aplikasi:

1. Baca sumber pada ukuran kisi aslinya.
2. Petakan setiap piksel tidak transparan menjadi persegi panjang vektor yang persis.
3. Pertahankan nilai palet tanpa antialiasing.
4. Gabungkan sel bersebelahan hanya ketika bentuk gabungan menghasilkan kisi terlihat yang sama.
5. Ekspor dengan viewBox SVG yang sesuai dimensi kisi asli.
6. Uji SVG pada ukuran tampilan bilangan bulat dan bukan bilangan bulat.

Proyek sumber terbuka vectorize-pixelart merupakan salah satu utilitas konversi khusus piksel. Proyek ini juga menunjukkan batasan umum: kisi besar atau kompleks dapat menghasilkan SVG berat. Perlakukan utilitas lama sebagai bahan penelitian dahulu. Periksa kode dan status pemeliharaannya sebelum memasukkannya ke alur produksi.

Jika nyaman dengan markup SVG, sprite kecil juga dapat dibangun ulang manual melalui elemen <rect>. Ini masuk akal untuk ikon 12 kali 12. Namun, bukan cara yang masuk akal menghabiskan sore untuk adegan terperinci.

Cara 3: sengaja menghaluskan bentuk

Terkadang piksel merupakan draf, bukan identitas. Anda mungkin ingin karakter, bunga, atau ikon menjadi stiker bersih, grafis cetak, atau logo dengan kontur membulat.

Jika sengaja menginginkan interpretasi halus itu, PerfectVector sesuai untuk cara kontur. Unggah versi nearest-neighbor terbesar yang Anda miliki, lalu nilai hasil sebagai ilustrasi baru:

1. Hapus antialiasing dahulu. Piksel lembut di tepi menghasilkan warna tambahan dan bentuk tepi kecil.
2. Jaga palet terkendali. Jika sumber menggunakan delapan warna, penelusuran tidak seharusnya membuat puluhan akibat kompresi atau blur.
3. Periksa diagonal bertangga. Tentukan mana yang menjadi segmen lurus dan mana yang menjadi kurva.
4. Periksa lubang dan celah satu piksel. Bukaan kecil mungkin tertutup ketika area berdekatan disederhanakan.
5. Tinjau jumlah node. Tujuan penghalusan bukan mengganti setiap sudut persegi dengan beberapa kurva kecil.
6. Uji pada ukuran tujuan. Kurva halus yang menarik pada ukuran poster mungkin menghapus wajah atau tangan pada ukuran ikon.

Cara ini mengubah karya. Simpan PNG sumber bersama SVG agar tidak ada yang menganggap interpretasi vektor sebagai versi arsip yang persis.

Masalah penyiapan yang memperburuk semua cara

Sumber diubah ukurannya dengan penghalusan. Kembali ke sprite asli atau skalakan ulang dengan interpolasi nearest-neighbor. Setelah warna tepi campuran baru tersimpan dalam gambar, kisi asli lebih sulit dipulihkan.

File berupa JPG. Kompresi menghasilkan blok warna dan ringing di sekitar setiap tepi piksel tegas. Gunakan PNG asli jika memungkinkan.

Latar transparan menjadi putih padat. Latar putih dapat menjadi ribuan sel tidak diperlukan atau satu bentuk besar hasil penelusuran. Pulihkan transparansi sebelum konversi, lalu periksa hasil pada kanvas kontras. Panduan latar SVG transparan kami membahas pemeriksaan itu.

Gambar memiliki efek semi-transparan. Cahaya, bayangan, dan opasitas sebagian bukan sel piksel tradisional. Tentukan apakah dipertahankan sebagai efek raster, dibatasi menjadi warna padat, atau dirancang ulang untuk versi vektor.

Apakah situs web membutuhkan vektor?

Belum tentu. Jika gambar berupa sprite game atau ikon antarmuka, PNG dapat tetap menjadi master yang tepat. Gunakan aset berukuran asli, skalakan dengan kelipatan bilangan bulat jika memungkinkan, dan atur browser atau mesin render menggunakan interpolasi pixelated atau nearest-neighbor.

SVG kisi membantu ketika palet harus diedit sebagai objek, karya perlu dicetak besar, atau sistem penyerahan secara khusus membutuhkan vektor. SVG tidak otomatis membuat aset layar kecil lebih ringan. Objek vektor untuk setiap sel dapat lebih berat daripada PNG ringkas.

Ini salah satu situasi ketika “SVG dapat diskalakan tanpa batas” benar tetapi belum lengkap. Karya mungkin diskalakan tanpa batas sambil menjadi mahal untuk disimpan, diedit, atau dirender. Panduan PNG versus SVG kami menjelaskan keputusan format secara lebih luas, dan arti pemvektoran gambar membahas mengapa penelusuran biasa mengutamakan bentuk daripada kisi piksel.

Pemeriksaan akhir

Sebelum menyerahkan, bandingkan file dengan asli pada ukuran asli dan ukuran keluaran yang diinginkan.

• Dimensi kisi sesuai sumber.
• Tidak ada warna tepi antialiasing yang ditambahkan.
• Sel transparan tetap transparan.
• Siluet bertangga tetap utuh pada cara pelestarian.
• Tepi halus disengaja pada cara kontur.
• Celah satu piksel, mata, sorotan, dan lubang dalam tetap terbaca benar.
• Sel berulang berwarna sama disederhanakan hanya ketika gambar tetap identik.
• SVG tidak menyematkan raster asli secara tidak sengaja. Jika menyematkan, hasil mungkin tetap terlihat berpiksel meskipun berekstensi SVG.

Alur paling bersih adalah yang menjelaskan komprominya. Pertahankan kisi ketika piksel merupakan karya. Haluskan kontur ketika menginginkan interpretasi vektor baru. Pertahankan PNG ketika vektor tidak memberi kontrol yang berguna.

Sources

1. Adobe Illustrator — Membuat sketsa dan mosaik — Perintah Object Mosaic, ubin persegi, keluaran warna, dan persyaratan raster tertanam.
2. MDN — CSS image-rendering — Render bergaya nearest-neighbor untuk pixel art di web.
3. W3C — Spesifikasi PNG, Edisi Ketiga — Model raster PNG tanpa kehilangan kualitas dan perilaku kanal alfa.
4. W3C — Bentuk Dasar SVG — Geometri persegi panjang untuk SVG sel kisi literal.
5. W3C — Sistem Koordinat SVG dan viewBox — Memetakan sistem koordinat kisi asli ke viewport SVG.

Jika menginginkan kontur halus alih-alih kisi yang dipertahankan, jalankan gambar melalui PerfectVector, lalu bandingkan siluet, celah satu piksel, dan detail kecil dengan master piksel sebelum menggunakannya.