Cara Mengekstrak Palet Seni Piksel yang Berguna dari Gambar
Anda ingin karakter baru terasa serasi saat ditempatkan di samping karakter yang sudah ada. Menyalin satu warna dengan pipet warna tidak cukup: sprite asli memiliki bayangan, warna dasar, sorotan, dan sering kali warna-warna sisa di tepinya. Mulailah dengan menemukan warna yang benar-benar ada, lalu tentukan warna mana yang membentuk palet yang dapat digunakan.
Mulai dengan berkas yang masih memiliki piksel bersih
Gunakan PNG asli jika Anda memilikinya. Tangkapan layar JPEG dapat menambah nilai RGB yang sedikit berbeda di setiap tepi, sehingga karakter yang digambar dengan enam warna sengaja dipilih bisa tampak memiliki ratusan warna. WebP lossy juga dapat demikian. Ekstraktor palet menghitung warna terdekode secara tepat; alat tidak berpura-pura bahwa warna baru yang hampir sama adalah cat yang sama.
Sebelum mengunggah, pangkas UI yang tidak terkait, bingkai, atau latar datar besar jika Anda menginginkan palet karakter. Jika tidak, latar dapat menempati peringkat pertama hanya karena mengisi paling banyak piksel. Untuk sprite transparan, sesuaikan ambang alfa minimum agar piksel tepi yang hampir tak terlihat diabaikan.
Palet karakter enam warna yang praktis
Bayangkan hero 32 × 32 berjaket biru. Daftar hasil ekstraksi mencakup dua biru, sorotan pucat, garis tepi gelap, kulit, dan aksen hangat. Jangan menyalin enam entri berfrekuensi tertinggi tanpa pertimbangan. Urutkan menurut tugas: garis tepi, bayangan jaket, dasar jaket, sorotan jaket, kulit, dan aksen. Urutan bayangan-dasar-sorotan adalah gradasi warna. Hubungan tersebut lebih penting daripada urutan warna dalam daftar frekuensi.
- Unggah sprite bersih dan periksa daftar frekuensi. Salin kode hex untuk warna yang terlihat merupakan bagian karakter.
- Letakkan setiap kode di samping perannya dalam catatan kecil: misalnya bayangan jaket, dasar jaket, sorotan jaket. Jika dua kode tampak tak berbeda, perbesar asli sebelum memutuskan apakah keduanya disengaja.
- Gambar karakter baru menggunakan garis tepi dan logika rangkaian warna yang sama. Gunakan ulang warna persis ketika konsistensi membantu, tetapi ubah warna aksen atau material ketika karakter baru memerlukan identitas berbeda.
- Ekspor CSS atau JSON untuk mempertahankan nilai pilihan. Perlakukan ekspor sebagai daftar kerja, bukan bukti bahwa setiap warna terhitung harus masuk palet akhir.

Mengapa foto menghasilkan keluaran yang tidak membantu
Foto mengandung banyak gradasi dan variasi kompresi. Penghitungan tepat menunjukkan kombinasi tiga nilai RGB yang paling sering muncul, tetapi tidak mengelompokkan warna mirip atau memilih rangkaian warna yang enak dilihat. Jika tujuan Anda adalah kurangi foto menjadi dua belas warna bergaya, Anda memerlukan kuantisasi atau desain palet manual, bukan sekadar ekstraksi. Alat ImageMint sengaja melaporkan warna yang ada dalam piksel; alat tidak mewarnai ulang gambar.
Untuk proyek lebih besar, simpan lembar referensi dengan contoh warna bernama. Analisis karya baru untuk menemukan warna tak sengaja. Pembesaran nearest-neighbor dapat memudahkan pemeriksaan piksel yang ada, tetapi tidak dapat menghilangkan kekaburan yang sudah tertanam pada sumber. Dapatkan kembali file asli lossless jika memungkinkan.
Baca alfa dan persentase dengan benar
Kanvas 32 × 32 berisi 1024 piksel. Misalkan hanya 600 yang lolos ambang alfa yang dipilih, dan 150 di antaranya memakai warna dasar jaket. Frekuensi yang dilaporkan adalah 150 ÷ 600 = 25%, bukan 150 ÷ 1024. Ruang tambahan transparan tidak dihitung sebagai warna, dan menurunkan ambang dapat memasukkan kembali warna tepi yang samar ke daftar.
Ambang bawaan 128 mencakup piksel sekitar setengah tidak transparan atau lebih. Nilai 255 hanya piksel sepenuhnya tidak transparan. Mulai 255 untuk karya bertepi tegas, lalu bandingkan 128 jika sprite memiliki tepi lembut berguna. Mengubah Alfa minimum menghapus hasil sebelumnya; analisis ulang sebelum membandingkan jumlah.
Ekspor daftar pilihan tanpa kehilangan aksen langka
8, 16, 32, dan 64 teratas adalah batas tampilan dan ekspor. Angka tersebut tidak mengurangi warna gambar. Jika delapan warna teratas mencakup 85% piksel yang memenuhi syarat, 15% sisanya berasal dari warna yang tersembunyi. Naikkan batas untuk memeriksa sorotan mata atau aksen kecil sebelum menganggap daftar pilihan sudah lengkap.
Unduhan CSS menggunakan variabel bernomor seperti --pixel-color-01. Peringkat dapat berubah saat pose karakter berubah, jadi jangan anggap nama tersebut sebagai peran semantis tetap seperti “jacket-shadow.” Ganti nama variabel yang dipilih dalam proyek Anda sendiri setelah menetapkan perannya. JSON mempertahankan warna dan jumlah yang ditampilkan; bukan gambar dengan palet terindeks atau instruksi untuk pewarnaan ulang.
Validasi palet pada gambar sebenarnya
- Gambar pose baru kecil dengan garis tepi pilihan dan rangkaian material tiga warna.
- Letakkan di samping sumber pada skala asli. Periksa keterbacaan siluet dan aksen penting.
- Analisis PNG baru dan cari warna tak sengaja dari kuas lembut atau proses penghalusan.
- Simpan referensi contoh warna bernama dan berkas asli bersih. Laporan jumlah warna melengkapi penilaian visual, bukan menggantikannya.
Coba alur kerjanya
Unggah PNG, lihat jumlah warna yang tepat, salin nilai hex, dan ekspor CSS atau JSON.
Periksa warna seni piksel →