Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Kanvas Seni Pixel & Ekspor CSS

WarnaPengembangGambar

IKLAN · HAPUS?

MEMASUKKAN

Proses Otomatis

Pengaturan Canvas

Ukuran Grid

Mengubah ukuran grid akan membersihkan canvas.

Palet

Telah ditetapkan sebelumnya

Warna Saat Ini

Opsi Ekspor

Ukuran Pixel (px)

Ukuran setiap pixel dalam hasil ekspor PNG/SVG/CSS.

Format

KELUARAN

Sisi klien

IKLAN · HAPUS?

Memandu

Kanvas Seni Pixel & Ekspor CSS

Lukis sprite gaya 8-bit yang tajam secara langsung di browser Anda dan ekspor sebagai seni CSS box-shadow murni, SVG yang dapat diperbesar, PNG raster, atau JSON portabel. Canvas berukuran dari 8×8 hingga 64×64, dilengkapi dengan palet klasik (NES, Game Boy, PICO-8, CGA, Commodore 64, Sweetie 16), serta memberikan alat lukis, penghapus, isi, dan eyedropper dengan undo dan redo tanpa batas.

Cara Penggunaan

Pilih ukuran grid dari 8×8 hingga 64×64. Ukuran grid yang lebih besar memberikan detail lebih banyak tetapi kecepatan lukis menjadi lebih lambat.
Pilih palet preset atau masukkan warna hex ke dalam picker warna.
Klik tombol lukis, penghapus, isi, atau eyedropper di toolbar canvas — atau tekan P, E, F, I.
Klik dan tarik di canvas untuk melukis. Gunakan Ctrl+Z dan Ctrl+Y untuk mengunduh dan mengulang.
Pilih format ekspor (CSS box-shadow, SVG, PNG data URI, atau JSON), atur ukuran pixel, lalu salin kode atau unduh file tersebut.

Fitur

Enam ukuran grid – 8×8, 16×16, 24×24, 32×32, 48×48, dan 64×64 untuk hal-hal dari ikon kecil hingga sheet sprite penuh.
Tujuh palet preset – NES (54 warna), Game Boy, PICO-8, CGA, Commodore 64, Sweetie 16, dan skala abu-abu.
Empat alat lukis – lukis, penghapus, bucket isi (flood fill), dan eyedropper dengan singkatan tombol satu key.
Lukis dengan drag yang halus – Interpolasi garis Bresenham mempertahankan keberlanjutan garis bahkan pada layar kecil.
Undo dan redo tanpa batas – Sejarah 60 langkah dengan singkatan keyboard Ctrl+Z dan Ctrl+Y.
Empat format ekspor – CSS box-shadow, SVG, PNG data URI, dan data grid JSON, masing-masing dengan tampilan langsung 1:1.
Dukungan sentuh – Bekerja di tablet dan ponsel dengan sentuh dan peristiwa pointer bawaan.
Sel transparan – Pixel kosong tetap transparan dalam setiap format ekspor, bukan diisi warna putih.

 Tanya Jawab Umum

Apa itu pixel dalam imajinasi digital?

Sebuah pixel (singkatan dari picture element) adalah unit terkecil yang dapat diakses dalam gambar raster. Setiap pixel menyimpan informasi warna — biasanya nilai kanal merah, hijau, dan biru antara 0 hingga 255 — dan bersamaan dengan grid pixel membentuk gambar lengkap.
Bagaimana CSS box-shadow menghasilkan pixel art?

CSS box-shadow menerima beberapa deklarasi bayangan, masing-masing dengan pergeseran x, pergeseran y, jari blur, jari penyebaran, dan warna. Menetapkan blur dan penyebaran ke nol serta menempatkan setiap bayangan pada grid secara efektif melukis kotak warna terpisah dari elemen 1x1 tunggal — menghasilkan gambar pixel murni dalam CSS tanpa data raster.
Apa itu palet warna terbatas dan mengapa digunakan?

Palet warna terbatas membatasi karya seni hanya pada himpunan warna kecil yang tetap, sering kali sesuai dengan batasan perangkat retro seperti NES, Game Boy, atau Commodore 64. Bekerja dalam palet menghasilkan kohesi visual, menggambarkan era yang terkenal, dan memaksa pilihan warna yang sengaja bukan secara sembarang.
Apa itu algoritma flood fill?

Algoritma flood fill adalah algoritma grafik yang dimulai dari sel target dan menyebar ke sel-sel tetangga yang memiliki warna yang sama, mengganti setiap sel dengan warna baru. Sebagian besar alat bucket lukis menggunakan flood fill empat arah (atas, bawah, kiri, kanan) yang diimplementasikan dengan tumpukan atau antrian untuk menghindari rekursi dalam.
Mengapa pixel art raster dan vector berbeda?

Pixel art raster disimpan sebagai grid sel warna (PNG, data URI). Pixel art vector mewakili setiap sel sebagai bentuk matematis (SVG atau CSS box-shadow) yang dapat diperbesar tanpa kehilangan kejernihannya. Output vector sangat ideal untuk antarmuka web di mana pengaturan rendering: crispEdges mempertahankan tampilan kotak pada setiap tingkat zoom.