Ruang Bebas Logo: Hitung dan Pertahankan Marginnya

Hitung ruang bebas logo dari satuan yang ditentukan dalam gambar yang disetujui, lalu ukur ke luar dari batas terlihat logo lengkap. Jika satuan pilihan Anda adalah 10 dan logo berukuran 150 kali 40, zona eksklusi satu satuan di setiap sisi berukuran 170 kali 60. Logo itu sendiri tetap berukuran 150 kali 40.

Ruang bebas adalah area di sekitar logo yang harus dibiarkan kosong dari konten lain. Margin berkas dapat membantu membawa ruang tersebut ke tata letak, tetapi kanvas kosong hanyalah salah satu cara penyerahan. Pedoman mereklah yang menetapkan aturannya. Jika Anda menyiapkan aset merek yang sudah ada, gunakan aturan yang disetujui sebelum membuat aturan baru.

Panduan ini mengikuti satu komposisi logo asli melalui perhitungan, ekspor SVG, dan pengubahan ukuran. Jika satu-satunya sumber Anda adalah gambar raster, pulihkan dahulu bentuk yang terlihat; alat vektorisasi gambar tidak dapat menyimpulkan zona eksklusi yang disetujui.

Pilih satuan yang berasal dari logo ini

Gunakan bagian terukur yang tetap proporsional saat logo yang disetujui diubah skalanya: tinggi simbol, dimensi huruf tertentu, atau pecahan yang ditetapkan dari seluruh gambar. Jelaskan persis apa yang diukur. Hindari aturan seperti “sisakan sedikit ruang” atau kotak bertanda X tanpa penjelasan.

Pedoman merek resmi menunjukkan mengapa ini merupakan kebijakan desain, bukan rasio universal. Panduan ruang bebas University at Buffalo menggunakan tinggi UB yang saling bertaut di sekitar komposisi merek utama, dengan panduan terpisah untuk gambar garis. Panduan Vevo membedakan logo dengan tinggi di atas dan di bawah 30 px serta memberikan jarak khusus konteks web dan tablet. Ikuti aturan untuk logo dan penggunaan yang sebenarnya.

Dalam contoh asli kami, simbol bundar memiliki tinggi 40 satuan. Kami memilih X sebesar seperempat tinggi itu: X = 10. Margin yang diperlukan adalah satu X pada setiap sisi. Ini aturan buatan untuk contoh ini, bukan anjuran agar semua merek menggunakan 25% tinggi simbolnya.

Tuliskan aturan dengan bahasa sederhana: “Untuk komposisi horizontal ini, X sama dengan seperempat diameter lingkaran. Sisakan setidaknya satu X di luar setiap tepi komposisi lengkap.” Kalimat tersebut membawa kebijakannya meskipun aplikasi memangkas kanvas kosong.

Ukur komposisi lengkap, lalu tambahkan margin

Komposisi logo adalah susunan simbol dan logotipe yang disetujui untuk digunakan bersama. Ukur susunan lengkap tersebut. Jika hanya memakai batas lingkaran, huruf akan berada di luar perhitungan zona eksklusi Anda.

Lingkaran dan tiga huruf yang kami gambar membentang dari x = 0 hingga 150 dan y = 0 hingga 40. Contoh ini tidak memiliki goresan, bayangan, atau objek tersembunyi. Karena itu, persegi panjang eksklusi membentang dari x = -10 hingga 160 dan y = -10 hingga 50.

X = circle height / 4 = 40 / 4 = 10
zone width = artwork width + 2X = 150 + 20 = 170
zone height = artwork height + 2X = 40 + 20 = 60

Jika gambar Anda memiliki goresan atau efek terlihat, sertakan jangkauan tampilannya dalam peninjauan. Pengukuran geometri saja dapat berbeda dari hasil yang digambar. Panduan kotak pembatas SVG menjelaskan perbedaan pengukuran tersebut; di sini kami sengaja menggunakan geometri isian sederhana.

Bawa aturan dalam SVG bermargin

viewBox SVG memetakan persegi panjang koordinat internal ke viewport yang ditampilkan. Dalam contoh ini, viewBox="-10 -10 170 60" menyertakan margin hasil perhitungan tanpa memindahkan atau memperbesar gambar.

Simpan contoh lengkap ini sebagai logo-padded.svg. Huruf logotipe merupakan bentuk yang digambar, sehingga tidak bergantung pada font. Desain lingkaran dan huruf ini adalah gambar contoh asli, bukan aset yang disetujui milik merek lain.

<svg xmlns="http://www.w3.org/2000/svg"
     width="170" height="60" viewBox="-10 -10 170 60">
  <g fill="#17324d" fill-rule="evenodd">
    <circle cx="20" cy="20" r="20"/>
    <path d="M50 5H80V35H50Z M57 12V28H73V12Z"/>
    <path d="M87 35V5H94L108 24V5H115V35H108L94 16V35Z"/>
    <path d="M122 5H150V12H129V16H145V23H129V28H150V35H122Z"/>
  </g>
</svg>

Untuk membuat aset pendamping berbatas rapat, gunakan width="150", height="40", dan viewBox="0 0 150 40" sambil mempertahankan lingkaran dan jalur yang sama. Beri nama berkas agar penerima dapat mengenali mana yang menyertakan margin. Simpan panduan pengukuran dalam dokumen merek atau lapisan tinjauan terpisah, bukan dalam gambar yang akan ditempatkan.

Ubah ukuran aset tanpa mengecilkan logo yang dimaksud

Tentukan apakah lebar merujuk pada gambar terlihat atau seluruh berkas bermargin. Pada lebar berkas 170 px, gambar contoh memiliki lebar 150 px dan margin 10 px. Pada lebar berkas 340 px, gambar memiliki lebar 300 px dan margin 20 px. Aturan proporsional bertahan dalam pengubahan ukuran seragam.

Jika arahan meminta logo terlihat selebar 300 px, atur berkas bermargin ini menjadi 340 px. Mengatur berkas bermargin menjadi 300 px hanya menghasilkan gambar terlihat sekitar 264,7 px, karena 300 × 150 / 170 kira-kira 264,7.

Catatan metode: kami merender SVG lengkap berbatas rapat dan bermargin di Chromium. Batas geometris gambar berukuran 150 kali 40 satuan. Pada lebar bermargin 170 px dan 340 px, lebar horizontal gambar yang diukur adalah 150 px dan 300 px, dengan margin 10 px dan 20 px. Ini memverifikasi contoh yang dibuat di browser; bukan membuktikan perilaku impor setiap editor.

Jika logo terlihat terlalu kecil, periksa kanvas berkas sebelum memperbesar objek secara acak. Jika ruang hilang setelah impor, periksa batas yang diimpor pada aplikasi tujuan dan pulihkan margin dari aturan X tertulis. Untuk logo lebar dalam bingkai berbeda, gunakan penyesuaian rasio aspek SVG untuk memahami ruang kosong tambahan akibat penempatan.

Peran PerfectVector dalam penyerahan logo

PerfectVector dapat memulihkan bentuk vektor saat merek hanya memiliki salinan raster logo. Setelah bentuk tersedia, bandingkan logo lengkap dengan referensi yang disetujui, bersihkan bagian latar yang tidak disengaja, dan terapkan aturan ruang bebas merek yang terdokumentasi secara terpisah. Alur vektorisasi logo membahas tahap pemulihan bentuk.

Mintalah master vektor asli dan pedoman merek terlebih dahulu. Berkas tersebut lebih baik dalam mempertahankan gambar dan keputusan jarak yang dimaksud daripada penelusuran baru. Tepi kosong JPG mungkin hanya margin ekspor yang tidak disengaja; itu bukan bukti kebijakan merek. Panduan format berkas logo membantu memilih berkas yang diserahkan, sedangkan panduan vektorisasi logo membahas persiapan dan pemeriksaan sumber.

Akhiri dengan memeriksa gambar lengkap, definisi X tertulis, dimensi berkas bermargin, dan tata letak sekitarnya yang sebenarnya. Simpan master berbatas rapat serta aset penempatan yang dimaksud. Pemeriksaan penyerahan lebih lanjut tersedia di pustaka alur kerja blog.

Tanya jawab

Apakah ruang bebas logo selalu seperempat tinggi logo?

Tidak. Seperempat tinggi lingkaran adalah aturan yang dipilih untuk contoh asli ini. Merek yang sudah ada dapat menetapkan satuan, rasio, dan pengecualian lain untuk penggunaan tertentu.

Haruskah saya menambahkan persegi panjang putih untuk menjaga ruang bebas?

Anda dapat menyediakan ruang kosong dengan viewBox SVG tanpa menambahkan persegi panjang yang diwarnai. Persegi panjang putih mengubah tampilan gambar pada latar berwarna. Uji berkas transparan bermargin pada penempatan yang dimaksud.

Apakah SVG bermargin otomatis menegakkan pedoman merek?

Tidak. SVG membawa ruang kosong dalam viewport-nya, tetapi pengimpor dapat memangkas batas dan objek tata letak dapat menumpuknya. Aturan tertulis dan pemeriksaan penempatan akhir tetap diperlukan.

Sumber

1. University at Buffalo — Ruang bebas — Memberikan contoh resmi satuan berbasis logo dan pengecualian khusus penggunaan.
2. Vevo — Ruang bebas logo — Menunjukkan bagaimana panduan ruang bebas berubah menurut ukuran logo dan konteks digital.
3. MDN — SVG viewBox — Menjelaskan persegi panjang koordinat yang digunakan untuk membawa margin kosong pada contoh.

Jika vektor asli hilang, pulihkan logo raster Anda dengan PerfectVector. Periksa komposisi lengkap terhadap referensi, lalu terapkan aturan ruang bebas yang disetujui dan periksa ukuran logo terlihat pada penempatan akhir.