PerfectVector
Oleh Irene Kim8 menit baca

Convert to Vector Scratch: Mengapa Masih Berpiksel

Tombol Convert to Vector Scratch mengubah mode edit tanpa melakukan tracing bitmap. Periksa titik kostum, pilih perbaikan, dan periksa SVG impor sebelum digunakan.

Di halaman ini

Tombol Convert to Vector Scratch tidak melakukan tracing garis bentuk kostum bitmap. Tombol itu membawa grafis raster ke mode pengeditan vektor, tempat grafis bisa tetap berupa satu objek gambar. Itulah mengapa kostum PNG masih bisa terlihat berpiksel setelah diklik. Kode sumber editor gambar Scratch saat ini mempertahankan objek raster selama operasi tersebut; kode itu tidak membangun ulang area berwarna sebagai path.

Untuk kostum yang ingin diubah bentuknya atau diwarnai ulang per bagian, Anda membutuhkan bentuk vektor yang baru digambar atau ditrace. Untuk pixel art yang disengaja, mempertahankan bitmap mungkin pilihan tepat. Mulailah dengan memeriksa kostum terpilih, lalu pilih seberapa banyak pembangunan ulang yang dibutuhkan proyek.

Hal yang diubah tombol

Buka tab Costumes sprite dan pilih kostum yang ingin diperiksa. Tombol konversi memberi nama mode yang bisa Anda tuju: Convert to Vector muncul dalam mode bitmap; Convert to Bitmap muncul dalam mode vektor.

Mengubah mode memberi seperangkat alat pengeditan berbeda. Itu tidak berarti setiap objek pada kanvas kini memiliki outline yang bisa diedit. Kostum vektor bisa berisi gambar raster bersama bentuk yang Anda gambar sendiri. Perbedaan dasarnya sama dengan yang dijelaskan dalam panduan kami tentang SVG yang berisi gambar raster.

Simpan salinan kostum asli sebelum bereksperimen. Khususnya, mengonversi grafis vektor yang digambar menjadi bitmap meratakan geometrinya menjadi piksel. Beralih kembali sesudahnya tidak membuat kembali titik lama. Gunakan Undo atau versi asli yang dipertahankan jika membutuhkan bentuk itu kembali.

Periksa kostum dengan tiga cara

Bounding box saja membuktikan sangat sedikit: gambar maupun grup bentuk vektor bisa memilikinya. Periksa bagian yang benar-benar ingin diedit. Diagnosis berikut menggunakan roket sebagai contoh, tetapi hewan, lencana, atau ikon kelas juga bisa dipakai.

  1. Periksa kontur. Pada kostum duplikat, pilih Reshape dan klik tepi sirip roket. Cari titik yang mengikuti tepi itu, bukan handle di sekeliling persegi panjang. Jika grafis dikelompokkan, pilih dan gunakan Ungroup jika tersedia sebelum memeriksa bagian. Jika ragu apakah menggunakan Reshape dengan benar, gambar lingkaran sementara di samping grafis dan bandingkan cara alat memilihnya.
  2. Periksa satu warna. Pilih hidung roket dan coba ubah Fill-nya. Bisakah Anda mewarnai ulang area itu tanpa mengubah tubuh atau bagian lain? Batalkan pengeditan uji. Pilihan seluruh gambar tidak memberi hidung yang bisa diedit terpisah, meskipun gambar menampilkan beberapa warna.
  3. Periksa di tempat tampilnya. Bandingkan kostum di editor dengan tampilannya pada Stage pada ukuran yang digunakan proyek. Kemampuan edit kontur dan ketajaman di layar merupakan pemeriksaan terpisah. Pratinjau Stage yang kasar saja bukan alasan cukup untuk melakukan tracing grafis yang sudah memiliki path berguna.
Ilustrasi roket berpiksel yang dipilih sebagai satu objek persegi panjang di samping roket halus dengan titik outline yang bisa diedit dan sirip terpisah.
Perbandingan kostum konseptual: kotak seleksi bisa mengelilingi satu objek raster. Bentuk vektor yang bisa diedit memiliki titik pada konturnya dan bisa berisi bagian terpisah.
Temuan AndaHal berikutnya yang diperiksaLangkah berikutnya yang berguna
Kostum berasal dari PNG, dan tepi berwarnanya tidak memiliki titikPastikan Anda memeriksa gambar, bukan bentuk baru yang digambar di atasnyaPertahankan bitmap, gambar ulang, atau trace gambar sumber
Grafis terpilih sebagai grupGunakan Ungroup jika tersedia dan periksa komponenEdit bentuk yang ada sebelum mempertimbangkan konversi lain
Beberapa bagian memiliki titik dan lainnya tetap berupa gambarKenali area tertentu yang perlu dieditBangun ulang hanya area raster itu jika sisanya sudah berfungsi
Bentuk memiliki titik tetapi tampak kasar hanya pada StagePeriksa ukuran tampilan tujuan dan bandingkan dengan SVG sumberSelidiki tampilan sebelum mengganti grafis

Untuk kasus terakhir, diagnosis SVG berpiksel yang lebih luas membantu membedakan isi file dari cara aplikasi menampilkannya.

Pilih perbaikan yang sesuai dengan grafis

Pertahankan bitmap jika piksel merupakan bagian desain

Karakter piksel kecil tidak menjadi kostum lebih baik hanya karena filenya vektor. Jika tepi bertangga, mata kecil, dan palet terbatas disengaja, nilai pada ukuran tujuan. Pertahankan gambar asli dan hindari pengubahan ukuran berulang saat bereksperimen.

Hal yang sama berlaku untuk foto atau latar lukisan yang teksturnya lebih penting daripada pengeditan outline individual. Melakukan tracing detail itu menjadi bentuk mengubah grafis. Jika Anda ingin piksel persegi dipertahankan dalam SVG, itu tugas berbeda dari menghaluskan siluet; panduan konversi pixel art kami menjelaskan pilihan tersebut.

Gambar ulang kostum sederhana dengan alat vektor Scratch

Untuk roket yang terdiri atas tubuh, hidung, jendela, dan sirip, menggambar bagian itu secara terpisah memberi kontrol langsung atas strukturnya. Mulailah kostum gambar baru dalam mode vektor. Gunakan alat lingkaran, persegi panjang, garis, dan kuas untuk membangun bagian utama, lalu sesuaikan kontur dengan Reshape.

Kerjakan dari siluet terbesar ke dalam. Tambahkan jendela kecil setelah tubuh terbaca jelas pada ukuran tujuan. Pertahankan sirip sebagai objek terpisah jika perlu dipindahkan secara mandiri. Ini keputusan desain: trace otomatis tidak bisa menentukan potongan yang dibutuhkan pengeditan berikutnya.

Anda juga bisa menggunakan editor vektor eksternal untuk membangun bentuk. Tutorial seni vektor untuk Scratch orisinal Pinnguaq mendemonstrasikan impor grafis SVG, pemilihan komponen, perubahan fill, dan penataan elemen. Itulah jenis struktur yang bisa diedit yang perlu dituju.

Trace clipart yang sesuai jika sumber hanya raster

Tracing berguna ketika Anda sudah memiliki ilustrasi datar yang ingin dipertahankan, tetapi menggambar setiap kontur lagi akan menambah pekerjaan yang tidak perlu. Gunakan PNG atau JPG sumber paling jelas yang tersedia. Untuk jalur ini, PerfectVector bisa merekonstruksi clipart yang sesuai menjadi path SVG yang bisa diperiksa sebelum impor ke Scratch. Tujuannya memulihkan bentuk yang bisa diedit dari gambar sumber; kostum tetap membutuhkan pemeriksaan pengeditan sesudahnya.

Trace mengikuti area yang terlihat. Trace mungkin membagi sirip menjadi beberapa potongan atau menggabungkan area bersentuhan yang ingin Anda gerakkan secara terpisah. Mata kecil, celah sempit, dan huruf perlu perhatian khusus. Jika tujuan Anda memahami cara rekonstruksi itu bekerja, mulailah dari penjelasan vektorisasi gambar.

Impor SVG dan periksa pusat kostum

Pengunggah kostum Scratch menerima SVG sebagai grafis vektor. Impor SVG yang diunduh itu sendiri, bukan tangkapan layar atau pratinjau PNG-nya.

  1. Pilih sprite yang ada dan buka Costumes. Gunakan Upload Costume dari pemilih kostum untuk menambahkan SVG di samping versi asli. Gunakan Upload Sprite jika ingin sprite terpisah.
  2. Bandingkan grafis impor dengan sumber. Periksa outline, celah antarbagian, mata, dan latar belakang. Jika sumber sudah memiliki bentuk vektor, perbaiki atau ekspor ulang SVG itu alih-alih melakukan tracing pratinjau rasternya.
  3. Ulangi pemeriksaan kontur dan satu warna. Pastikan bagian yang dibutuhkan bisa diedit, lalu batalkan pengeditan uji. Hapus bentuk pembanding sementara dari salinan kerja.
  4. Periksa penempatan terhadap penanda silang pusat editor kostum. Pertahankan titik referensi visual yang sama antar kostum terkait: untuk roket, Anda bisa memakai tengah tubuh. Sesuaikan grafis seperlunya dan bandingkan dengan kostum asli pada Stage.
  5. Beralih antara versi asli dan pengganti tanpa memindahkan sprite. Cari lompatan yang tidak diinginkan, perubahan ukuran yang terlihat, atau persegi panjang latar belakang. Pertahankan versi asli sampai puas dengan pengganti.

Scratch menyimpan pusat rotasi untuk setiap kostum; kode pemuatan kostumnya memperoleh pusat dari renderer jika tidak diberikan. Itulah mengapa kecocokan gambar yang terlihat hanya sebagian pemeriksaan impor. Penempatannya relatif terhadap pusat kostum juga harus sesuai proyek.

FAQ

Apakah Convert to Vector membuat kostum Scratch lebih sedikit berpiksel? Tombol itu tidak melakukan tracing atau menghaluskan kontur bitmap. Kostum berganti mode pengeditan sementara grafis rasternya bisa tetap sebagai objek gambar. Untuk membuat outline yang bisa diedit, gambar ulang grafis atau impor SVG yang berisi path hasil tracing.

Mengapa saya bisa memindahkan kostum tetapi tidak mengubah bentuk tepinya? Memindahkan objek gambar tidak membutuhkan titik pada outline yang terlihat. Periksa apakah Anda memilih grup, lalu periksa komponen dengan Reshape. Bitmap yang dipertahankan dalam mode vektor tidak memperoleh titik kontur dari pergantian mode.

Apakah tracing sprite membuat lengan, kaki, atau bagian bergerak lain yang terpisah? Jangan menganggap demikian. Tracing merekonstruksi area yang terlihat, yang mungkin berbeda dari bagian yang ingin digerakkan. Periksa bentuk impor dan pisahkan atau gambar ulang komponen sesuai kebutuhan.

Sources

  1. Scratch Foundation: implementasi konversi bitmap — Menunjukkan konversi ke mode pengeditan vektor yang mempertahankan raster.
  2. Scratch Foundation: pengunggah file kostum — Memastikan unggahan kostum SVG menggunakan format aset vektor.
  3. Scratch Foundation: pemuatan kostum vektor — Menunjukkan cara kostum impor menerima pusat rotasi.
  4. Pinnguaq: Working With Vector Graphics Art in Scratch — Mendemonstrasikan impor SVG dan pengeditan bentuk individual, fill, dan penataan.

Jika kostum Anda bermula sebagai clipart raster datar dan membutuhkan kontur yang bisa diedit, konversikan gambar sumber menjadi SVG dengan PerfectVector. Impor hasil sebagai kostum baru, lalu periksa satu outline, satu warna, dan pusat kostum sebelum mengganti versi asli.

Lebih banyak dari blog

Mulai dengan SVG yang lebih rapi
dan lebih mudah diedit