Logoyu Optik Olarak Ortalayın, Ana Dosyayı Koruyun

Logoyu optik olarak ortalamak için önce görünür tasarımını hedef çerçevede geometrik olarak ortalayın. Ardından kılavuzlar gizliyken ve insanların göreceği boyutta küçük yerleşim düzeltmesini karşılaştırın. İki sürümde de aynı logo şeklini koruyun. Kabul edilen kaydırmayı yerleşim kararı olarak kaydedin; böylece vektör ana dosya değişmez.

Optik ortalama, eşit geometrik boşlukların istediğiniz dengeyi vermediği durumda yapılan görsel konum düzeltmesidir. Bu şeklin bu ortamda değerlendirilmesini içerir. Ağırlık merkezi hesabı veya sabit piksel kaydırması başlangıç önerebilir, ancak ikisi de evrensel görsel en iyi konumu belirlemez.

Bu örnek 200 × 140 çerçevede özgün asimetrik işaret kullanır. Geniş sol gövdesi ve dar sağ ucu, eşit sınırları ölçmeyi ve yerleşim alternatiflerini karşılaştırmayı kolaylaştırır. Aşağıdaki dosyaları ücretli tasarım uygulaması olmadan yeniden oluşturabilirsiniz.

Dengeyi değerlendirmeden önce geometrik temel kurun

Sınırlayıcı kutu, ölçtüğünüz geometrinin çevresindeki koordinat eksenlerine hizalı en küçük dikdörtgendir. Orta noktası ilk yerleşim için yararlıdır. İki yanda ne kadar dolgulu alan olduğunu veya hangi bölümün dikkatinizi çektiğini tanımlamaz.

Rafal Tomal'ın optik tasarım örnekleri, görsel yerleşimin sayısal hizalamadan farklı olduğu durumları gösterir. Gerçek sonucu karşılaştırmayı destekler; her logo için tek düzeltme sağlamaz.

Konumu değiştirmeden önce yanlışlıkla boşluk eklenmiş dosyayı değil, tasarımı hizaladığınızı kontrol edin. Geniş boş kenarlık, simetrik logoyu bile yanlış konumda gösterebilir. Çalışma alanını inceleyin, istenmeyen zemin parçalarını kaldırın ve tam işarete hangi nesnelerin ait olduğunu doğrulayın. Onaylı güvenli alanı kırpmak yerine koruyun.

SVG ölçümlerinde getBBox(), öğenin kullanıcı koordinat sisteminde sınırları verir ve kendisinin veya üstlerinin dönüşümlerini içermez. Tarayıcı görünüm alanı ölçümleri farklı soruyu yanıtlar. SVG sınırlayıcı kutu rehberimiz, bu ölçümleri ayrı tutmayı açıklar.

Değişmeyen tek işareti eşit çerçevelerde karşılaştırın

Aşağıdaki özgün yol x = 20 ile 140 ve y = 20 ile 80 arasındadır. Sınırları 120 × 60, orta noktası (80, 50)'dir. Çerçeve orta noktası (100, 70)'tir. Grubu (20, 20) ötelemek bu sınırları ortalar.

Aşağıdakini logo-geometric.svg olarak kaydedip tarayıcıda açın. Soluk dikdörtgen yerleşim çerçevesidir, logo tasarımının parçası değildir.

<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>

Görünür tasarım artık x = 40 ile 160 ve y = 40 ile 100 arasındadır; eşit 40 birim yatay ve 40 birim dikey boşluk verir. Bu başlangıç temelidir, son yerleşimin orada kalması zorunluluğu değildir.

Deneme optik yerleşimi için transform="translate(32 20)" içeren ikinci dosya kaydedin. Sağa 12 birim kaydırma yalnızca konumu değiştirir. Yolun d değerini, dolguyu, çerçeveyi ve gösterim boyutunu aynı tutun. SVG ötelemesi koordinat sistemini taşır; yolu yeniden yazmayı gerektirmez.

Bu çerçevede editoryal tercihimiz sağa kaydırılmış denemedir: geniş sol gövde çerçevenin ortasına yaklaşırken dar uç daha sağa uzanır. Başka yerleşimde geometrik sürümü tercih edebilirsiniz. Seçimi belgelemeden önce ikisini gerçek çevre içerikle karşılaştırın.

Kılavuzlar gizliyken ve kullanım boyutunda kontrol edin

Karşılaştırmayı gerçek çerçevede ve zeminde yapın. Değerlendirmeden önce merkez çizgilerini ve sınırlayıcı kutuları gizleyin; yoksa işaret yerine ölçülen boşluklara bakabilirsiniz.

1. Geometrik ve deneme sürümlerini aynı boyutta açın.
2. Hedef yerleşimde birer birer bakın, ardından birlikte karşılaştırın.
3. Logonun gerçekten görüneceği küçük yerleşimi kontrol edin. Aynı çerçeve oranlarını ve çevre içeriği koruyun.
4. Hareketin onaylı güvenli alanı koruduğunu ve kırpmadan kaçındığını doğrulayın.
5. Seçilen kaydırmayı ve ait olduğu yerleşimi kaydedin. Deneme yeni dengesizlik yaratıyorsa geometrik temele dönün.

200 px çerçeve genişliğinde 12 birimlik deneme kaydırması 12 px'dir. 100 px genişlikte aynı SVG kaydırması 6 px olur. viewBox ile ölçeklenir. Her boyutta ayrı sabit 12 px CSS kaydırması eklemek farklı yerleşim kuralı üretirdi.

Yöntem notu: İki tam SVG'yi Chromium'da görüntüledik, 200 px ve 100 px genişliklerde görünüm sınırlarını karşılaştırdık ve yol verilerinin aynı olduğunu doğruladık. Geometrik sürüm tam boyutta 40 px sol ve sağ boşluğa sahipti. Denemede sol 52 px, sağ 28 px idi; yarım boyutta göreli kaydırma 6 px'di. Bunlar geometri kontrolleri ve editoryal karşılaştırmadır; insan algısı araştırması değildir.

Sürümler arasında logo şekli değişiyorsa ana dosyayı geri yükleyip yalnızca yerleşim dönüşümünü değiştirin. Deneme ucu kırpıyorsa logoyu değiştirmeden önce görünüm alanını ve kaydırmayı kontrol edin. Farklı logo düzeni veya zemin dengeyi değiştiriyorsa o kullanımı ayrı inceleyin. Daha geniş veya yüksek çerçeveye yerleştirmek için duyarlı SVG logo düzeni rehberine bakın.

Özgün ana dosyayı ve yerleşim kararını koruyun

Kaynak logoyu yerleşimin konum sarmalayıcısından bağımsız saklayın. Çerçeve ölçülerini, referans boyutunu, dönüşümü ve seçilen zemini belgeleyin. Bu örnek için yararlı not: “Özgün işaret 120 × 60; yerleşim çerçevesi 200 × 140; deneme dönüşümü (32, 20); diğer logo düzenlerinde yeniden inceleyin.”

Onaylı marka dosyası, şeklinde veya dışa aktarılan sınırlarında optik düzeltmeler içerebilir. Sunulan dosyayı ve yerleşim rehberini kullanın. Yalnızca ölçülen boşlukları eşit değil diye yerleşmiş logoyu yeniden tasarlamayın.

Tüm işareti yerleştirmek, canlı metni taban çizgisine göre ortalamaktan da farklıdır. Sorun denetim içindeki etiketle ilgiliyse SVG metin dikey hizalama rehberini kullanın. Kaynak ve teslim iş akışının kalanı için blog rehberlerine göz atın.

Yerleşimden önce PerfectVector'ın rolü

PerfectVector, yerleşimleri karşılaştırmadan önce yalnızca raster olan logodan vektör şekilleri geri kazanmaya yardımcı olabilir. Önce silueti, açıklıkları ve başıboş arka plan parçalarını özgün referansla karşılaştırın. Logo vektörleştirme iş akışı kaynak geri kazanma adımını sağlar; optik yerleşim kararı sizindir.

Onaylı vektör ana dosyanız varsa doğrudan yerleştirin. İzleme bilinçli asimetrik özelliği değiştiriyorsa ortalamayı değerlendirmeden önce kaynak geometriyi düzeltin. Logo vektörleştirme rehberi bu incelemeyi ele alır. Ölçeklenebilir dosya yerleşim düzenlemelerini pratik yapar, ancak insanların neyi dengeli algılayacağına karar vermez.

Sık sorulan sorular

Asimetrik logoda boşluklar eşit mi olmalı?

Eşit boşluklar ölçülebilir geometrik temel sunar. Belirli asimetrik logo belgelenmiş konum kaydırmasıyla daha iyi görünebilir. Hedef boyutunda karşılaştırın ve onaylı tasarımı değiştirmeyin.

Logonun ağırlık merkezi optik merkezi midir?

Geometrik ağırlık merkezi, belirli geometri veya alan dağılımını tanımlar. Deneme yerleşimini destekleyebilir, ancak her logonun her çerçeve ve zemindeki algılanan dengesini belirlemez.

Logoyu taşımak için yolu değiştirmeli miyim?

Yerleşim karşılaştırmasında özgün yolu koruyup ayrı dönüşüm veya yerleşim konumu kullanın. Bu ana dosyayı sağlam tutar ve düzeltmeyi kolay karşılaştırılır veya geri alınır yapar.

Kaynaklar

1. Rafal Tomal — Tasarımınızı optik olarak kusursuz yapmak — Sayısal hizalamadan farklı görsel düzeltmeler için tasarımcının kendi örnekleri.
2. MDN — SVGGraphicsElement getBBox() — Geometrik temel için kullanılan yerel koordinat sınırlarını açıklar.
3. MDN — SVG transform — Değişmeyen yolun yerleşim grubu üzerinden ötelenmesini belgeler.

Logonuz yalnızca raster görsel olarak kaldıysa vektör şekillerini PerfectVector ile geri kazanın. Silueti referansla kontrol edin, geometrik ve optik yerleşimleri kullanım boyutunda karşılaştırın ve seçilen kaydırmayı ana dosyadan ayrı kaydedin.