Softonic

Latar Belakang Pola Grid SVG

Langkah 1 / 3
Berikutnya

Latar pola grid memberi halaman landing, hero, atau kartu struktur yang tenang tanpa file gambar. Atur ukuran dan warna di bawah, lalu salin SVG kecil yang mengulang satu ubin di seluruh kanvas.

Cara membuat latar pola grid

  1. 1

    Sesuaikan area

    Masukkan lebar dan tinggi area yang ingin Anda tutupi, misalnya 1200 x 800.

  2. 2

    Pilih ukuran sel yang tenang

    Atur Ukuran grid ke 32 atau 40 agar garisnya membingkai konten, bukan bersaing dengannya.

  3. 3

    Lembutkan garisnya

    Pilih warna garis yang hanya sedikit lebih gelap dari latar, dengan lebar garis 1.

  4. 4

    Salin SVG

    Gunakan tombol salin pada langkah terakhir dan tempelkan kodenya di tempat Anda membutuhkan latar.

Dari apa latar pola dibuat

File yang dihasilkan berisi satu ubin kecil yang didefinisikan sekali sebagai pola, dan sebuah persegi panjang yang mengisi kanvas dengan pola tersebut. Karena peramban mengulang ubin, file tetap berukuran beberapa ratus byte, baik grid memiliki 20 maupun 2.000 sel. Persegi panjang pertama mewarnai latar, yang kedua menggambar garis di atasnya.

Setiap ubin hanya menggambar tepi atas dan tepi kiri. Ubin tetangga memberikan sisanya, sehingga tidak ada garis yang digambar dua kali. Ada konsekuensi yang perlu diketahui: garis pada kolom dan baris pertama berada tepat di tepi kanvas, sehingga setengah lebarnya jatuh di luar. Garis 1 px karenanya tampak sebagai tepi tipis setengah piksel di atas dan kiri. Jika lebar kanvas adalah kelipatan tepat dari ukuran sel, tepi kanan dan bawah berakhir tanpa garis penutup.

Pilih nilai yang berfungsi sebagai latar

Latar harus mendukung teks di atasnya. Titik awal berikut aman digunakan:

Tampilan Ukuran sel Lebar garis Warna garis di atas latar
Hampir tak terlihat 40 1 #eeeeee di atas #ffffff
Struktur lembut 32 1 #e2e8f0 di atas #f8fafc
Bingkai terlihat 64 1,5 #cbd5e1 di atas #ffffff

Jaga kontras antara garis dan latar tetap rendah. Jika ada teks isi di atasnya, garis yang hampir sama gelapnya dengan teks membuat mata lelah membaca.

Contoh yang dikerjakan

Untuk bagian hero selebar 1200 px dan setinggi 800 px, sel 40 px menghasilkan 30 kolom dan 20 baris, yaitu 600 sel. Karena 1200 dan 800 habis dibagi 40, grid berakhir rapi di kedua tepi. Dengan sel 50 px Anda mendapat 24 x 16 sel, juga rapi. Sel 45 px akan menyisakan sel parsial di kanan dan bawah, karena 1200 dibagi 45 adalah 26,67.

Menggunakan hasilnya

Tempel SVG langsung di markup, simpan sebagai file dan rujuk sebagai gambar, atau letakkan di belakang konten sebagai lapisan dekoratif. Ingat bahwa warna latar merupakan bagian dari SVG. Jika Anda ingin grid di atas warna lain, edit persegi panjang pertama dalam kode yang disalin.

Mencocokkan latar dengan tata letak

Jika kolom konten Anda 960 px lebarnya, sel 32 px atau 40 px menjaga grid dan tepi kolom tetap selaras, karena 960 habis dibagi keduanya. Menyejajarkan grid dengan tata letak membuat garisnya terasa dirancang, bukan acak.

Pertanyaan yang Sering Diajukan

Lebar dan tinggi menerima nilai dari 50 sampai 3.000 px, dan ukuran sel dari 5 sampai 500 px. Nilai di luar rentang itu akan dibatasi ke batas terdekat.

Setiap ubin menggambar tepi atas dan kirinya, sehingga baris dan kolom pertama berada tepat di batas kanvas dan setengah dari ketebalannya jatuh di luar. Garis di bagian dalam menampilkan lebar penuhnya.

Tidak dengan sendirinya. SVG memiliki lebar dan tinggi tetap. Untuk menutupi area yang lebih besar, buat SVG pada ukuran yang lebih besar, atau gunakan SVG sebagai gambar latar berulang di stylesheet Anda.

Generator ini menggambar satu warna garis dengan satu lebar. Untuk grid utama dan grid bantu, buat dua SVG dan tumpuk sebagai latar terpisah.

Alat Terkait

Pembuat Kertas Paranada

Buat kertas paranada siap cetak: paranada kosong, kunci G atau F, paranada ganda untuk piano, atau tablatur gitar. Atur jumlah, jarak garis, A4 atau Letter, dan margin, lalu unduh PDF atau SVG.

Pembuat Mosaik LEGO

Ubah foto menjadi rancangan mosaik persegi berukuran 16, 32, 48, atau 64 sel per sisi. Lihat perkiraan warna, hitung pelat 1×1, dan unduh panduan bernomor.

Pemilih Warna Material Design

Jelajahi palet warna Material Design. Salin nuansa mana pun (dari 50 hingga A700) dalam format HEX, RGB, atau HSL dengan sekali sentuh.

Pembuat Undangan

Buat undangan pernikahan, ulang tahun, akikah, atau acara kantor. Sesuaikan tulisan dan warna, lihat pratinjau langsung, lalu unduh PNG siap cetak ukuran 5R.

Pembaca kode batang

Pilih gambar kode batang untuk melihat nilai dan jenis simbolnya. Mendukung EAN-13, UPC-A, dan Code 128, serta memeriksa digit pemeriksa EAN dan UPC.

Konverter HEIC ke PNG

Pilih satu foto HEIC atau HEIF hingga 50 MB, konversi gambar pertama yang didukung dekoder ke PNG, periksa pratinjau, lalu unduh.

Alat ini tersedia dalam bahasa lain

Panduan dan contoh penggunaan