Web sitesi, e-posta ve belgeler için logo nasıl dışa aktarılır?

Tasarım uygulamasında doğru görünen bir logo, yüklendikten sonra küçücük, bulanık veya görünmez olabilir. Nedeni boş kenarlar, yetersiz piksel, eksik yazı tipi veya uygun olmayan bir arka plan olabilir. Önce logonun nerede görüneceğini belirleyin, ardından dışa aktarma ayarlarını seçin.

Elinizdeki en iyi özgün dosyayla başlayın

Tasarımcının düzenlenebilir dosyasını veya gerçek bir vektör sürümünü kullanın. Bu ana dosyayı yayımladığınız kopyalardan ayrı tutun. SVG vektör yollarını koruyabilir, ancak düşük çözünürlüklü bir piksel görüntüsü de içerebilir. Dosyanın .svg ile bitmesi, her parçanın büyütüldüğünde keskin kalacağını kanıtlamaz.

Yalnızca küçük bir JPG varsa daha büyük bir dışa aktarma yapmadan önce özgün dosyayı isteyin. PNG veya SVG’ye dönüştürmek harfleri ya da kenarları yeniden oluşturmaz. Elinizdeki dosyayı tanımlamak için SVG ve PNG rehberinden yararlanabilirsiniz.

Biçimi kullanım yerine göre seçin

SVG vektör şekillerini korur; PNG sabit bir piksel ızgarası saklar. PNG’nin kayıpsız sıkıştırması harfler, düz renk alanları ve keskin kenarlar için uygundur: kaydetme işlemi JPG sıkıştırmasının oluşturabileceği bozulmaları eklemez. JPG kenarları yumuşatabilir veya harflerin çevresinde renkli saçaklar oluşturabilir ve şeffaflığı korumaz.

WebP kayıplı veya kayıpsız sıkıştırma kullanabilir. Pixilo’nun SVG’den WebP’ye aracında kalite ayarı vardır, ancak ayrı bir kayıpsız mod yoktur. Bu nedenle 100 değeri aynı pikselleri garanti etmez. Kullanılacağı yer WebP kabul ediyorsa ve gerçek çıktı iyi görünüyorsa bu biçimi seçin. Basit bir logoda SVG’yi veya uygun boyutlu PNG’yi korumak daha iyi olabilir.

Dışa aktarma boyutunu görüntüleneceği alana göre ayarlayın

Dosyanın piksel boyutlarını görüntüleneceği boyuttan ayırın. Dışa aktarılan çizimin genişliğinin yüksekliğinin dört katı olduğunu ve logonun 160 × 40 CSS pikselinde görüneceğini düşünün. 320 × 80 piksellik PNG, her yönde bir CSS pikseli için iki görüntü pikseli sağlar; bu, yüksek yoğunluklu ekranlar için yararlı bir başlangıçtır. Zorunlu logo ölçüsü veya her görüntüyü iki kat boyutta dışa aktarma kuralı değildir.

En boy oranını kilitleyin ve genellikle yalnızca bir ölçü girin. Logo yüksekliğinin iki katı genişlikteyse 160 piksel genişlikte gösterildiğinde yüksekliği 40 değil 80 piksel olur. Esnetmeden kullanılabilir genişlik ve yüksekliğe sığdırın; tam logo sığmıyorsa onaylanmış başka bir yerleşim kullanın.

Boyutlara şeffaf kenar boşlukları da dahildir. Görünen logo, 320 piksel genişliğindeki tuvalin yalnızca yarısını kaplıyorsa bütün görüntü 160 pikselde gösterildiğinde yaklaşık 80 piksel genişlikte görünür. Özgün dosyadaki gereksiz boşluğu düzeltin, ancak markanın güvenli alanını koruyun. Site veya imza düzenleyicisinde görüntüleme genişliğini de ayarlayın ve hizmetin yeniden boyutlandırılmış bir kopya oluşturup oluşturmadığını kontrol edin.

Yalnızca DPI değerini değiştirmek ayrıntı eklemez. DPI, PPI ve piksel rehberini inceleyin. Profesyonel baskı için dosya, renk ve çözünürlük gereksinimlerini ayrıca isteyin.

Dışa aktarmadan önce çizim alanını ve yazıları kontrol edin

Dışa aktarma alanını logoya göre ayarlarken gerekli güvenli boşluğu, çizgileri ve gölgeleri koruyun. Büyük ve boş bir çalışma alanı, dosyada çok piksel olsa bile görünen logoyu küçük gösterir. Daha dar bir görüntü elde etmek için markanın kasıtlı boşluklarını kesmeyin. Inkscape’in dışa aktarma rehberi sayfa, çizim ve seçim arasındaki farkı gösterir.

Dışa aktarmadan önce yazı tiplerini ve bağlantılı çizimleri kontrol edin. Metni yollara dönüştürmek harfleri vektör şekilleri haline getirir; böylece görünümleri alıcının aynı yazı tipine sahip olmasına bağlı kalmaz. Ancak harfler artık normal metin olarak düzenlenemez. Bu işlemi dışa aktarma kopyasında yapın ve özgün dosyayı saklayın. Metni yollara çevirmek, gömülü düşük çözünürlüklü görüntüyü vektöre dönüştürmez.

Gerekli görüntüleri ve stilleri içinde barındıran bağımsız bir SVG hazırlayın. Tek başına açıldığında doğru görünen dosya, dış kaynakların kısıtlandığı web görüntüsü bağlamında farklı davranabilir. MDN belgeleri bunu açıklar. Dışa aktarılan dosyayı tasarımla karşılaştırın, ardından yerleştirilmiş sürümü inceleyin. Yalnızca dosyanın açılmasına değil; harflere, aralıklara, kesilen bölümlere ve efektlere bakın.

Ekran renklerini baskı dosyalarından ayrı hazırlayın

Ekran sürümlerinde markanın onaylı RGB renklerini kullanın. Web için PNG ve JPG çıktılarında sRGB pratik bir başlangıçtır. Adobe’nin çevrimiçi renk rehberi dönüşümü açıklar. Kaynak başka bir renk profili kullanıyorsa yalnızca farklı profil atamak yerine tasarım uygulamasında renk dönüşümü yapın ve sonucu inceleyin.

CMYK veya özel renk kullanan baskı aslını ayrı saklayın. Ekran ve baskı sürümlerinin onaylı renk değerleri farklı olabilir; bir dosya dönüştürücü bunları sizin yerinize seçemez. Onaylı ekran sürümüyle karşılaştırın; farklı ekranlar yine de farklı görünebilir. Belirgin bir fark için görüntü renklerindeki farkları giderme rehberini izleyin.

Açık ve koyu arka planlar için sürümler hazırlayın

Şeffaflık logonun renklerini değiştirmez. Gerektiğinde açık yüzeyler için onaylı koyu logo, koyu yüzeyler için beyaz veya açık logo hazırlayın. Web sitesinde doğru sürümü şablonun veya geliştiricinin seçmesi gerekir; iki dosya oluşturmak otomatik geçiş sağlamaz.

E-postayı ayrıca kontrol edin. Uygulamalar koyu modda ileti arka planlarını değiştirebilir ve görüntü değiştirme desteği farklıdır. Alınan iletileri açık ve koyu modda test edin. Koyu logo kayboluyorsa tasarımcıdan, örneğin kontrastlı bir dış çizgi veya uygun bir arka plan alanı sayesinde görünür kalan onaylı bir sürüm isteyin. Hiçbiri her uygulamada aynı görünümü garanti etmez. Mailchimp’in koyu mod rehberi testin neden önemli olduğunu açıklar.

PNG mevcut şeffaflığı koruyabilir; JPG opak bir arka plan ister. JPG çıktısından önce bu arka planı seçin. Şeffaflık kutucuğu çizime eklenmiş beyaz dikdörtgeni kaldırmaz. Şeffaf arka plan rehberi, gerçek arka planı önizleme yüzeyinden ayırt etmeye yardımcı olur.

PNG, JPG veya WebP sürümlerini Pixilo’da oluşturun

1. Hazırlanan SVG’yi SVG’den PNG’ye aracında açın. Kullanılacağı yer JPG istiyorsa SVG’den JPG’ye, o kullanım için WebP seçtiyseniz SVG’den WebP’ye aracını kullanın.
2. En boy oranı kilitliyken çıktı genişliğini veya yüksekliğini girin. Destekleniyorsa şeffaflığı koruyun ya da son arka plan rengini seçin.
3. Dönüştürün ve indirin. Yalnızca kaynak önizlemesini değil, indirilen dosyayı kontrol edin. PNG’de kayıplı kalite sürgüsü yoktur; JPG ve WebP’de kaliteyi ayarladıktan sonra harfleri ve ince çizgileri inceleyin.
4. Kopyayı yerleştirin, görüntüleme boyutunu ayarlayın ve yayımlanan sayfayı, alınan iletiyi veya dışa aktarılan belgeyi kontrol edin. Önbellekteki eski sürüm yerine yeni dosyayı gördüğünüzden emin olun.

Pixilo statik görüntü kopyaları oluşturur; düzenlenebilir logo veya optimize edilmiş SVG üretmez. SVG okuyucusu dış kaynakları ve desteklenmeyen içeriği reddeder. Dosya reddedilirse tasarım uygulamasına dönüp gerektiğinde metni yollara dönüştürerek bağımsız bir kopya hazırlayın. Güncel dosya ve boyut sınırları araç sayfasındadır. Özgün dosyayı gelecekteki dışa aktarmalar için saklayın.

Dosyaları amaçları anlaşılacak şekilde adlandırın

Çizimin rengini arka plandan ayrı belirtin. Örneğin dark-artwork, koyu şekiller anlamına gelir; koyu arka planda kullanılacak dosya anlamına gelmez:

• Düzenlenebilir özgün dosya: tasarımcının kendi biçimindeki dosyayı gerçek uzantısıyla, yayımlanacak kopyalardan ayrı tutun.
• brand-logo-dark-artwork.svg ve brand-logo-white-artwork.svg: açık arka planlar için koyu, koyu arka planlar için beyaz çizim.
• brand-logo-dark-artwork-320x80.png: örnekteki 160 × 40 piksel görüntüleme boyutu için şeffaf PNG. Dosya adı, dosyanın kendi piksel boyutlarını belirtir.
• brand-logo-white-background.jpg: gerekli olduğu yerde kullanılacak, opak beyaz arka planlı isteğe bağlı JPG.

Görüntüleme boyutu ve arka planla ilgili kısa bir not ekleyin. Yalnızca kullanılacak sürümleri oluşturun. Tam yazılı logo tarayıcı sekmesinde okunamayabileceği için favicon çoğunlukla ayrı ve sadeleştirilmiş bir çizim gerektirir. Favicon rehberini inceleyin.

Logoyu kullanılacağı yerde kontrol edin

Önce gerçek kullanımdaki en küçük boyutu inceleyin. Harfler okunuyor mu, ince çizgiler görünüyor mu, güvenli boşluk korunuyor mu? Ardından açık ve koyu yüzeyleri test edin. E-posta için gerçek bir test iletisi gönderip alınan kopyayı kontrol edin. Belgede dışa aktarılan PDF’yi açın; basılı sonuç önemliyse bir çıktıyı da inceleyin.

Web sitesinde logoya uygun bir metin alternatifi verin. Ana sayfa bağlantısının tek içeriği logoysa “Marka ana sayfası” gibi hedefi belirtin. Aynı bağlantıdaki görünür metin adı ve amacı zaten anlatıyorsa tekrardan kaçının. W3C’nin işlevsel görüntü rehberi iki örüntüyü de gösterir.

Sık sorulan sorular

İndirilen dosya keskin olduğu halde yüklediğim logo neden bulanık?

Yüklenen dosyanın gerçek piksel boyutlarını görüntüleme boyutuyla karşılaştırın. Platform daha küçük bir kopya oluşturmuş veya sayfa düzeni onu büyütüyor olabilir. Yayımlanan sayfanın hangi dosyayı kullandığını ve aşırı şeffaf kenarların çizimi küçük gösterip göstermediğini kontrol edin. Hep yanlış sürümü seçen bir sayfa için çıktıyı daha da büyütmek çözüm değildir.

PNG’nin çevresinde neden beyaz bir kutu var?

İndirilen dosyayı dama deseninde ve renkli arka planda görüntüleyin. Kutu piksellerin parçasıysa kaynakta arka plan nesnesi veya şeffaflığı düzleştiren bir çıktı arayın. Dosya şeffafsa ve kutu yalnızca yerleştirdikten sonra görünüyorsa hedefteki görüntü arka planını ya da dönüşümü kontrol edin. Çizilmiş arka planı yalnızca logo tasarımı izin veriyorsa kaldırın.

Aynı dosyayı tüm e-posta imzalarında kullanabilir miyim?

PNG ile başlayıp imza düzenleyicisini, alınan iletileri ve açık-koyu modları test edin. Sunucuda barındırılan görüntü yayımlandığı adreste erişilebilir kalmalı, gömülü görüntü posta sisteminin işlemlerinde korunmalıdır. Görüntüler engellendiğinde de erişilebilmesi için iletişim bilgilerini gerçek metin olarak tutun. Gönderenin düzenleyicisindeki tek bir başarılı önizleme yeterli değildir.

PNG’yi SVG’ye çevirmek logoyu ölçeklenebilir yapar mı?

PNG’yi SVG’ye gömmek özgün pikselleri korur. İzlemek veya yeniden çizmek vektör yolları oluşturabilir, ancak eğrileri, boşlukları veya harfleri de değiştirebilir. Önce vektör aslını isteyin; yeniden oluşturulan sürümü onaylı logoyla karşılaştırtın.

Logo yükleme sınırını aşarsa ne yapmalıyım?

Önce sınırın KB cinsinden dosya boyutu mu, piksel boyutları mı olduğunu belirleyin. Gerekli ölçülerde çıktı alın, istenmeyen boşluğu kaldırın ve gereksiz büyütmeden kaçının. PNG’de kenar kalitesini düşürmeden önce kayıpsız sıkıştırmayı deneyin. Kayıplı biçim gerekiyorsa kaliteyi azaltırken gerçek indirilen sonucu karşılaştırın. Dosya boyutunu küçültme rehberi seçenekleri açıklar. Her logo ve kullanım yeri için tek bir KB hedefi yoktur.

Dönüşümden sonra harfler veya renkler neden değişiyor?

İlk farklı aşamayı bulmak için düzenlenebilir tasarımı, dışa aktarılan SVG’yi, indirilen görüntüyü ve yerleştirilmiş sonucu karşılaştırın. Eksik veya değişen fontlar metin çıktısına, kayıp efekt ya da görüntüler desteklenmeyen SVG içeriğine işaret edebilir. Renk kaymasında kaynak profili ve ekran çıktısı kontrol edilmelidir. Zaten hatalı bir kopyayı tekrar tekrar dönüştürmek yerine o aşamayı düzeltip yeniden dışa aktarın.