Pembuat grid transparan untuk PNG dan SVG
Pembuat grid ini menggambar garis dengan jarak sama di atas latar transparan, tepat sesuai ukuran piksel yang Anda pilih. Anda mengatur kolom, baris, ketebalan garis, dan warna, lalu mengunduh grid sebagai PNG atau SVG, atau menyalinnya sebagai latar CSS. Hasilnya bisa dipakai sebagai lapisan panduan di atas desain, tata letak, atau tangkapan layar. Semuanya berjalan di browser dan tidak ada file yang diunggah.
Langkah membuat grid di browser
Grid langsung digambar di halaman, dalam empat langkah:
- Masukkan Lebar kanvas (px) dan Tinggi kanvas (px). Masing-masing berkisar 10 sampai 5000 dan dimulai dari 1920 kali 1080.
- Atur Kolom (1 sampai 200, awal 12) dan Baris (1 sampai 200, awal 6).
- Atur Ketebalan garis (px) dari 1 sampai 50 dan pilih Warna garis. Bawaannya merah, #FF0000.
- Periksa pratinjau, lalu tekan Unduh PNG, Unduh SVG, atau Salin CSS.
Tidak ada tombol terapkan. Pratinjau digambar ulang saat Anda mengetik, dan latar kotak-kotak di belakangnya menunjukkan bagian file yang transparan. Latar kotak-kotak itu bukan bagian dari hasil unduhan.
Ukuran sel dari kanvas, kolom, dan baris
Kanvas dibagi rata: lebar sel adalah lebar kanvas dibagi jumlah kolom, dan tinggi sel adalah tinggi dibagi jumlah baris. Tulisan “Setiap sel berukuran … × … px” di bawah pratinjau menampilkan hasilnya saat Anda mengubah nilai. Untuk sel persegi, pilih angka yang memberi ukuran sama ke dua arah. Kanvas 1920 × 1080 dengan 16 kolom dan 9 baris menghasilkan sel 120 × 120 px.
Garis digambar tepat di tengah setiap pembagian dalam. Jika kanvas tidak terbagi rata, sebuah garis bisa jatuh di antara dua piksel dan tampak agak buram di PNG. Agar garis tajam, pilih lebar yang merupakan kelipatan jumlah kolom dan tinggi yang merupakan kelipatan jumlah baris.
Grid 3x3 PNG dan ukuran lain yang umum
Ukuran yang paling sering dicari (lebar × tinggi, kolom × baris, ukuran sel):
- Sel persegi di Full HD: 1920 × 1080, 16 × 9, 120 × 120 px
- Sel persegi di 4K: 3840 × 2160, 32 × 18, 120 × 120 px
- Grid 3x3 persegi: 1080 × 1080, 3 × 3, 360 × 360 px
- Grid 3x3 vertikal 9:16: 1080 × 1920, 3 × 3, 360 × 640 px
Untuk grid Figma, ukuran yang sama bisa langsung dipakai pada sebuah frame.
Grid overlay PNG: ketebalan, warna, dan opsi lanjutan
Ketebalan garis adalah lebar goresan dalam piksel kanvas. Pada kanvas besar, garis tipis butuh nilai lebih tinggi agar tetap terlihat saat gambar diperkecil. Kolom warna garis membuka pemilih warna browser Anda dan menampilkan nilai hex di sebelahnya. Pilih warna yang kontras dengan latarnya: putih di atas karya gelap, warna gelap di atas karya terang.
Di Opsi lanjutan ada tiga kotak centang. Grid biasa hanya punya garis di pembagian dalam, jadi tepi file kosong.
- Bingkai luar menambahkan bingkai. Bingkai digambar di dalam tepi kanvas, sehingga ketebalannya tetap penuh.
- Garis silang tengah menambahkan satu garis vertikal dan satu garis horizontal melalui tengah. Jika jumlah kolom atau baris genap, tengahnya sudah ada garis, jadi perubahan hanya terlihat pada jumlah ganjil.
- Garis diagonal menambahkan dua garis dari sudut ke sudut yang bersilangan di tengah.
Grid SVG dan grid CSS background
Unduh PNG menyimpan gambar transparan dengan ukuran kanvas yang tepat, dengan nama seperti grid-1920x1080.png. Unduh SVG menyimpan grid yang sama sebagai garis vektor tanpa latar, dengan nama seperti grid-1920x1080.svg. Salin CSS menaruh satu baris background-image: url("data:image/svg+xml,...") dan satu baris background-size di clipboard, sehingga pengembang bisa menaruh grid di atas halaman tanpa file gambar terpisah.
Latar berulang secara bawaan. Jika Anda mengubinnya, ingat bahwa grid biasa tidak punya garis di tepi luar. Dengan Bingkai luar aktif, dua bingkai bertemu di setiap sambungan dan terlihat sekitar dua kali lebih tebal dari nilai yang Anda atur.
Grid untuk Figma, atau grid pada foto?
Untuk menggambar grid di atas gambar yang sudah Anda miliki, dengan metode grid untuk menggambar, gunakan Pembuat Gambar Kisi. Jika Anda ingin menyusun tata letak halaman dan mendapat kode grid-template-areas, gunakan Generator CSS Grid. Alat ini untuk file grid kosong yang transparan.
Pertanyaan umum
Bagaimana membuat grid PNG transparan?
Masukkan “Lebar kanvas (px)” dan “Tinggi kanvas (px)”, atur “Kolom” dan “Baris”, pilih “Warna garis”, lalu tekan “Unduh PNG”. Latar file ini transparan. Latar kotak-kotak di pratinjau hanya untuk menunjukkannya. File disimpan dengan nama seperti grid-1920x1080.png, dengan ukuran Anda sendiri di dalam nama.
Bagaimana membuat grid 3x3 PNG?
Atur “Kolom” menjadi 3 dan “Baris” menjadi 3. Itu menggambar dua garis vertikal dan dua garis horizontal dan membagi kanvas menjadi sembilan sel yang sama. Aktifkan “Bingkai luar” di “Opsi lanjutan” jika Anda juga ingin bingkai di tepi, lalu tekan “Unduh PNG”.
Berapa ukuran grid PNG untuk rasio 9:16?
Atur “Lebar kanvas (px)” ke 1080 dan “Tinggi kanvas (px)” ke 1920 untuk gambar vertikal layar penuh. 2160 kali 3840 adalah bentuk 9:16 yang sama dengan detail dua kali lipat. Keduanya masih di bawah batas 5000 px. Tulisan di bawah pratinjau menunjukkan ukuran satu sel.
Bagaimana membuat grid overlay PNG berwarna putih?
Pilih putih, #FFFFFF, pada “Warna garis”. Garis putih bisa sulit terlihat di latar kotak-kotak pratinjau, tetapi PNG yang diunduh tetap menyimpannya di atas latar transparan, jadi garisnya terlihat begitu file diletakkan di atas foto atau desain gelap.
Bisakah saya membuat grid SVG?
Bisa. Tekan “Unduh SVG” untuk menyimpan grid yang sama sebagai file vektor, misalnya grid-1920x1080.svg. Garisnya berupa goresan dengan warna pilihan Anda dan tidak ada isian latar, sehingga tetap tajam di zoom berapa pun dan bisa dibuka di browser atau editor vektor apa pun.
Bagaimana memakai grid sebagai CSS background?
Tekan “Salin CSS” dan tempel hasilnya ke dalam sebuah aturan. Anda mendapat background-image berisi grid sebagai SVG inline, ditambah background-size yang sama dengan ukuran kanvas Anda. Ubah background-size untuk mengubah skala, atau pakai kanvas kecil dan biarkan latar berulang. Tanpa “Bingkai luar”, tepi setiap ubin tidak punya garis.
Bagaimana menambahkan grid di Illustrator atau Figma?
Keduanya punya grid dan pemandu bawaan sendiri. Gunakan pembuat grid ini saat Anda ingin grid sebagai file dengan ukuran tepat. Buka SVG di Illustrator agar garisnya tetap vektor, atau letakkan PNG di atas karya Anda sebagai lapisan transparan. Di Figma, Anda bisa menambahkan salah satu file ke sebuah frame.
Mengapa PNG saya lebih kecil di iPhone atau iPad?
Safari di iPhone dan iPad menghasilkan gambar kosong di atas sekitar 16 juta piksel, jadi PNG di sana diperkecil agar muat dan sebuah catatan menunjukkan ukuran saat disimpan. SVG selalu mempertahankan ukuran penuh yang Anda minta, jadi pakailah saat Anda butuh dimensi yang tepat.
