Pusatkan Logo secara Optis Tanpa Mengubah Master

Untuk memusatkan logo secara optis, pusatkan dahulu gambar terlihatnya secara geometris dalam bingkai yang dituju. Lalu bandingkan penyesuaian kecil posisi dengan panduan disembunyikan dan pada ukuran yang akan dilihat orang. Pertahankan bentuk logo yang sama pada kedua versi. Catat pergeseran yang diterima sebagai keputusan penempatan agar master vektor tetap tidak berubah.

Pemusatan optis adalah penyesuaian posisi secara visual ketika margin geometris yang sama tidak menghasilkan keseimbangan yang Anda inginkan. Penilaian ini berlaku untuk bentuk tersebut dalam konteks tersebut. Perhitungan sentroid atau pergeseran piksel tetap dapat memberi titik awal, tetapi keduanya tidak menetapkan hasil visual terbaik yang universal.

Contoh ini menggunakan satu logo asimetris asli dalam bingkai 200 kali 140. Badan lebar di kiri dan ujung sempit di kanan memudahkan pengukuran batas yang sama serta perbandingan alternatif posisi. Anda dapat membuat ulang berkas di bawah tanpa aplikasi desain berbayar.

Tetapkan acuan geometris sebelum menilai keseimbangan

Kotak pembatas adalah persegi panjang terkecil yang sejajar dengan sumbu koordinat dan mengelilingi geometri yang diukur. Titik tengahnya berguna untuk penempatan awal. Kotak itu tidak menjelaskan seberapa banyak area berisi pada setiap sisi atau bagian mana yang menarik perhatian.

Contoh desain optis Rafal Tomal menunjukkan kasus ketika posisi visual berbeda dari perataan numerik. Contoh tersebut mendukung perbandingan hasil sebenarnya; bukan memberikan satu koreksi untuk setiap logo.

Sebelum mengubah posisi, pastikan Anda meratakan gambar, bukan berkas dengan margin yang tidak disengaja. Tepi kosong yang lebar dapat membuat logo simetris tampak salah posisi. Periksa kanvas, buang bagian latar yang tidak diinginkan, dan pastikan objek mana yang termasuk logo lengkap. Pertahankan ruang bebas yang disetujui, bukan memangkasnya.

Untuk pengukuran SVG, getBBox() melaporkan batas dalam sistem koordinat pengguna elemen dan tidak menyertakan transformasi elemen itu sendiri atau induknya. Pengukuran viewport browser menjawab pertanyaan berbeda. Panduan kotak pembatas SVG menjelaskan cara memisahkan pengukuran tersebut.

Bandingkan satu logo yang tidak diubah dalam bingkai sama

Jalur asli di bawah membentang dari x = 20 hingga 140 dan y = 20 hingga 80. Karena itu, batasnya berukuran 120 kali 60 dengan titik tengah (80, 50). Titik tengah bingkai adalah (100, 70). Menggeser grup sebesar (20, 20) memusatkan batas tersebut.

Simpan yang berikut sebagai logo-geometric.svg dan buka di browser. Persegi panjang samar merupakan bingkai penempatan, bukan bagian dari gambar logo.

<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="140" viewBox="0 0 200 140">
  <rect x="0.5" y="0.5" width="199" height="139"
        rx="8" fill="#f7f9fc" stroke="#cad4e2"/>
  <g transform="translate(20 20)">
    <path fill="#193b59"
          d="M20 20H70V35H140L70 55V80H20Z"/>
  </g>
</svg>

Gambar terlihat kini membentang dari x = 40 hingga 160 dan y = 40 hingga 100, sehingga margin horizontal sama-sama 40 satuan dan margin vertikal sama-sama 40 satuan. Itu adalah acuan awal, bukan kewajiban agar posisi akhirnya tetap di sana.

Untuk penempatan optis percobaan, simpan berkas kedua dengan transform="translate(32 20)". Pergeseran 12 satuan ke kanan hanya mengubah posisi. Pertahankan nilai d jalur, isian, bingkai, dan ukuran tampilan yang sama. Translasi SVG memindahkan sistem koordinat; Anda tidak perlu menulis ulang jalur.

Pilihan editorial kami dalam bingkai ini adalah percobaan ke kanan: badan lebar di kiri lebih dekat ke tengah bingkai sementara ujung sempit menjulur lebih jauh ke kanan. Anda mungkin lebih menyukai versi geometris dalam tata letak lain. Bandingkan keduanya dengan konten sekitar yang sebenarnya sebelum mendokumentasikan pilihan.

Periksa posisi tanpa panduan dan pada ukuran pemakaian

Lakukan perbandingan dalam bingkai dan latar sebenarnya. Sembunyikan garis tengah dan lapisan kotak pembatas sebelum menilai hasilnya; jika tidak, Anda mungkin terus melihat margin terukur alih-alih logo.

1. Buka versi geometris dan percobaan pada ukuran yang sama.
2. Lihat satu versi pada satu waktu dalam tata letak tujuan, lalu bandingkan keduanya bersama.
3. Periksa penempatan yang lebih kecil tempat logo benar-benar akan muncul. Pertahankan proporsi bingkai dan konten sekitar yang sama.
4. Pastikan pergeseran menjaga ruang bebas yang disetujui dan menghindari pemotongan.
5. Catat pergeseran terpilih dan penempatan yang terkait dengannya. Kembali ke acuan geometris jika percobaan menciptakan ketidakseimbangan baru.

Pada lebar bingkai 200 px, pergeseran percobaan 12 satuan berarti 12 px. Pada lebar bingkai 100 px, pergeseran SVG yang sama menjadi 6 px. Nilainya mengikuti skala viewBox. Menambahkan pergeseran CSS tetap 12 px secara terpisah pada setiap ukuran menghasilkan aturan penempatan berbeda.

Catatan metode: kami merender kedua SVG lengkap di Chromium, membandingkan batas viewport pada lebar 200 px dan 100 px, serta memastikan data jalurnya identik. Versi geometris memiliki margin kiri dan kanan 40 px pada ukuran penuh. Versi percobaan memiliki margin kiri 52 px dan kanan 28 px, dengan pergeseran relatif 6 px pada setengah ukuran. Ini pemeriksaan geometri dan perbandingan editorial, bukan penelitian persepsi manusia.

Jika bentuk logo berubah antarversi, pulihkan master dan ubah hanya transformasi penempatannya. Jika percobaan memotong ujung, periksa viewport dan pergeseran sebelum mengubah logo. Jika komposisi logo atau latar berbeda mengubah keseimbangan, tinjau penggunaan itu secara terpisah. Untuk memasukkan logo dalam bingkai lebih lebar atau tinggi, lihat panduan komposisi logo SVG responsif.

Pisahkan master asli dari keputusan penempatan

Simpan logo sumber secara terpisah dari pembungkus penempatannya dalam tata letak. Dokumentasikan dimensi bingkai, ukuran referensi, transformasi, dan latar terpilih. Untuk contoh ini, catatan yang berguna adalah: “Logo asli 120 kali 60; bingkai penempatan 200 kali 140; transformasi percobaan (32, 20); tinjau lagi untuk komposisi lain.”

Aset merek yang disetujui mungkin sudah memiliki koreksi optis dalam bentuk atau batas ekspornya. Gunakan aset yang diberikan beserta panduan penempatannya. Jangan mendesain ulang logo yang mapan hanya karena ukuran marginnya tidak sama.

Penempatan seluruh logo juga berbeda dari memusatkan teks yang masih dapat diedit berdasarkan garis dasarnya. Jika masalahnya menyangkut label dalam kontrol, gunakan panduan perataan vertikal teks SVG. Untuk alur sumber dan penyerahan lainnya, jelajahi panduan blog.

Peran PerfectVector sebelum penempatan

PerfectVector dapat membantu memulihkan bentuk vektor dari logo yang hanya tersedia sebagai raster sebelum Anda membandingkan posisi. Periksa dahulu siluet yang dipulihkan, bukaan, dan potongan latar yang tersisa terhadap referensi asli. Alur vektorisasi logo menyediakan tahap pemulihan sumber tersebut; keputusan posisi optis tetap milik Anda.

Jika Anda memiliki master vektor yang disetujui, tempatkan berkas itu secara langsung. Jika penelusuran mengubah ciri asimetris yang disengaja, perbaiki geometri sumber sebelum menilai pemusatannya. Panduan vektorisasi logo membahas pemeriksaan itu. Berkas yang dapat diskalakan memudahkan revisi posisi, tetapi tidak menentukan apa yang akan dianggap seimbang oleh orang.

Tanya jawab

Haruskah logo asimetris memiliki margin yang sama?

Margin sama memberikan acuan geometris yang dapat diukur. Logo asimetris tertentu mungkin terlihat lebih baik dengan pergeseran posisi yang terdokumentasi. Bandingkan pada ukuran yang dituju dan pertahankan gambar yang disetujui tanpa perubahan.

Apakah sentroid logo merupakan pusat optisnya?

Sentroid geometris menjelaskan distribusi geometri atau luas tertentu. Nilai itu dapat membantu percobaan posisi, tetapi tidak menetapkan keseimbangan yang dirasakan untuk setiap logo dalam setiap bingkai dan latar.

Haruskah saya mengubah jalur untuk memindahkan logo?

Untuk perbandingan posisi, pertahankan jalur asli dan gunakan transformasi atau posisi tata letak terpisah. Dengan begitu, master tetap utuh dan penyesuaian mudah dibandingkan atau dibatalkan.

Sumber

1. Rafal Tomal — Membuat desain sempurna secara optis — Menyediakan contoh langsung dari desainer tentang koreksi visual yang berbeda dari perataan numerik.
2. MDN — SVGGraphicsElement getBBox() — Menjelaskan batas koordinat lokal yang digunakan sebagai acuan geometris.
3. MDN — SVG transform — Mendokumentasikan translasi jalur yang tidak diubah melalui grup penempatannya.

Jika logo hanya tersisa sebagai raster, pulihkan bentuk vektornya dengan PerfectVector. Periksa siluet terhadap referensi, lalu bandingkan posisi geometris dan optis pada ukuran pemakaian serta simpan pergeseran terpilih secara terpisah dari master.