Logo Tasarım Dosyasını Web'e Hazırlama: Illustrator'dan WebP'ye
Bir tasarımcı logo dosyasını teslim ettiğinde, ekranınıza düşen genellikle bir .ai ya da .eps uzantılı dosyadır. Vektör tabanlı bu format, baskı ve kurumsal kimlik uygulamaları için tasarlanmıştır; tarayıcı bu dosyayı doğrudan yorumlayamaz. Web ortamı SVG, PNG veya WebP bekler ve Illustrator çıktısının bu üçünden birine dönüştürülmesi zorunludur.
Dönüşüm tek bir adımdan oluşmaz. SVG üretilebilir, ancak temizlenmeden yayına verilirse taşıdığı Adobe metadata'sı dosya boyutunu gereksiz yere şişirir; PNG gerekli olabilir, ama her bağlamda değil; WebP raster çıktıda boyutu küçültür, ama yalnız başına sunulursa eski tarayıcılarda görüntülenemez. Hangi formata hangi senaryoda öncelik verileceğini önceden belirlemek, sonradan çıkacak uyumsuzlukları baştan engeller.
Tasarımcı-geliştirici el değiştirme noktası, sürecin en kırılgan yeridir. Tasarımcı "vektör olarak veriyorum, direkt kullanabilirsiniz" diyebilir; geliştirici de dosyayı açmadan bir sıkıştırma aracına sokabilir. Sonuç çoğu durumda ekranda hatalı render, fazla ağırlıklı bir dosya ya da beklenmedik şeffaflık sorunlarıdır. İki taraf da kendi bağlamında haklıdır, ama orta noktayı anlamak gerekir.
AI ve EPS dosyasından SVG üretmek
Illustrator'da "SVG olarak kaydet" seçeneği kullanıldığında gerçekten bir SVG üretilir. Sorun şudur: bu SVG web için optimize edilmemiştir. Dosyanın içinde Adobe-özgü metadata katmanları, kullanılmayan tanımlar ve bazı durumlarda sabit width/height değerleri bulunur. viewBox ile birlikte kullanılmışsa esneklik korunur, ama yalnızca sabit boyut varsa logo farklı ekran genişliklerinde ne büyür ne de küçülür.
EPS burada daha kısıtlıdır. Bir EPS'yi doğrudan web'e hazır SVG'ye çeviren bir kısayol yoktur; önce Illustrator ya da benzeri bir araçla açılıp SVG olarak yeniden kaydedilmesi gerekir. Bu dönüşümde dosyanın içinde <text> elementleri yer alıyorsa, kullanılan fontun PostScript adıyla kayıtlı olduğunu görürsünüz. Tarayıcı o fontu bulamazsa farklı bir font seçer ve logonun tipografisi bozulur.
Metnin yollara dönüştürülmesi bu sorunu çözer. Illustrator'da tüm metin elementleri seçilip "Create Outlines" komutu çalıştırıldığında, yazı artık bir path elementi hâline gelir ve font bağımlılığı ortadan kalkar. Logo salt amblem ya da soyut şekil içeriyorsa bu adım gereksizdir; metin barındırıyorsa zorunludur.
Bir ayrıntı daha: Illustrator katmanları SVG içinde ayrı <g> elementleri olarak çıkar. Dosyada kullanılmayan katmanlar varsa ya da dışa aktarılmadan önce gizli katmanlar kaldırılmamışsa, bu elementler SVG içinde görünmez ama yer kaplar. Dışa aktarım öncesinde gereksiz katmanları silmek dosyayı başından temizler.
SVG çıktısındaki Adobe fazlalıklarını gidermek
Temizlenmemiş bir SVG çalışır. Sorun değil. Ancak içindeki fazlalıklar hem dosya boyutunu artırır hem de kaynak kodda gürültü oluşturur; tipik sorunlar Adobe-özgü XML namespace'leri, ondalıklı koordinatlardaki aşırı hassasiyet ve boş grup elementleridir.
Koordinat hassasiyeti pratikte en büyük kazanımı sağlayan noktadır. Illustrator, path elementlerinin d özniteliğine 4-6 ondalıklı sayılar yazar: ekran çözünürlüğünde 0,000001 piksellik sapma izlenemez. SVGO bu değerleri kısaltır; çoğu durumda yalnızca bu adımla dosya boyutu belirgin biçimde düşer. npx svgo logo.svg -o logo.min.svg komutu varsayılan yapılandırmayla başlangıç için yeterlidir, ama çıktıyı tarayıcıda mutlaka kontrol edin: varsayılan yapılandırma bazen viewBox'ı kaldırabilir ya da bazı path'leri beklenmedik biçimde birleştirebilir.
Otomatik eklenen <title> elementine de dikkat edin. Illustrator "Logo" ya da "Untitled" yazan bir başlık ekleyebilir. Bu element erişilebilirlik için kullanılıyorsa anlamlı bir metin yazın; değilse kaldırın. Jenerik bir "Logo" metni ekran okuyuculara bir şey söylemez ve görsel kalitesi üzerinde hiçbir etkisi olmayan bu element temizlenebilir. Sonuçta ne kalacağını ve görsel kalite üzerindeki etkisini sıkıştırma sonrası kontrol yöntemlerini anlatan yazımızda bulabilirsiniz.
PNG ne zaman gerekli, ne zaman fazladır
SVG her bağlamda çalışmaz. E-posta şablonları SVG'yi desteklemez; bazı üçüncü taraf platformlar yalnızca raster görsel kabul eder; Open Graph görseli PNG ya da JPEG olmak zorundadır. Bu durumlarda PNG kaçınılmazdır.
PNG üretmek için Illustrator'da "Export for Screens" ya da "Save for Web (Legacy)" yolu kullanılabilir. Önemli olan dışa aktarım çözünürlüğünü doğru belirlemektir. Retina ekranlar için en az 2x boyut üretin: logonun web'de 200x80 piksel görüneceği bir bağlamda 400x160 piksel PNG üretmek netliği korur. Aynı vektörden farklı boyutlarda çıktı almanın nasıl planlanacağını aynı görselin farklı boyutlarını planlama konusundaki yazımızda bulabilirsiniz.
Şeffaf arka plana ihtiyaç varsa PNG-24 kullanın; PNG-8, şeffaflığı 1-bit olarak işler ve kenarlarda pürüzlenme oluşturur. Düz renkli arka plan üzerinde kullanılacak ve alfa kanalı gerekmiyorsa PNG-8 daha küçük dosya üretir, ama logo farklı arka planlarda gösterilecekse PNG-24 zorunludur.
WebP: raster logo çıktısında ne kazandırır
WebP, aynı görsel kalitesini PNG'ye göre daha küçük dosyada sunar; kayıpsız (lossless) modda da, kayıplı (lossy) modda da çalışabilir. Logo için lossless WebP genellikle daha uygun seçimdir: net kenarlar ve düz renk geçişleri lossy sıkıştırmada bant oluşumuna yol açabilir.
Şeffaf arka plan WebP'de de desteklenir. Alpha kanalı lossless WebP'de PNG-24 ile karşılaştırılabilir kalitede korunur. Bir uyarı: bazı sosyal medya platformları ve e-posta istemcileri WebP'yi kabul etmez. Bu platformlara beslenen görseller hâlâ PNG olmalıdır.
Tarayıcı desteği artık geniş olmakla birlikte, eski sürümleri kapsama zorunluluğunuz varsa <picture> elementi ile fallback sağlayın:
<picture>
<source srcset="logo.webp" type="image/webp">
<img src="logo.png" alt="Şirket adı logosu" width="200" height="80">
</picture>Bu yapıda tarayıcı WebP'yi destekliyorsa onu yükler, desteklemiyorsa PNG'ye geçer. Yalnızca WebP sunmak tarayıcı desteğini kısıtlar; yalnızca PNG sunmak dosya boyutunu gereksiz yere artırır. İkisini birlikte vermek her iki sorunu da ortadan kaldırır.
Şeffaflık kanalı ve arka plan rengi tuzağı
Vektör dosyasının arka planı şeffaf mı, yoksa beyaz mı? Bu soruyu tasarımcıya dışa aktarım öncesinde sorun. Illustrator çalışma yüzeyi beyaz görünür, ama bu beyazlık şeffaflığı simgelemek için kullanılan bir zemin rengidir; dışa aktarımda arka plan şeffaf olabilir ya da olmayabilir.
Şeffaf arka planla üretilen SVG ya da PNG, koyu arka plan üzerine yerleştirildiğinde doğru görünür. Beyaz dolgu ile üretilmişse logo koyu arka planda beyaz bir kutu içinde görünür; bu hatayı sonradan düzeltmek için dosyanın yeniden üretilmesi gerekir. Çıktıyı teslim almadan önce hem açık hem koyu arka plan üzerinde test edin.
Gradient içeren logolarda ek bir sorun çıkabilir. SVG içinde tanımlanan gradient, aynı sayfada birden fazla SVG inline olarak eklenirse tanımlayıcı çakışmasına yol açabilir; tarayıcı aynı id değerine sahip iki gradient tanımıyla karşılaşırsa ilkini kullanır, ikincisini yok sayar. Birden fazla inline SVG kullanılan sayfalarda gradient id'lerini benzersizleştirin. SVG'nin simge sistemi içinde nasıl kullanıldığına ilişkin ek bağlam için SVG sprite ve icon font karşılaştırmasını inceleyebilirsiniz.
Toplu çıktı ve dosya sürümleme
Tek logo dosyasından SVG, PNG-1x, PNG-2x ve WebP olmak üzere dört çıktı üretilmesi gerekiyorsa bunu manuel yapmak verimli değildir. Bu iş akışını otomatize etmek için izlenebilecek yolları toplu görsel dönüştürme akışını anlatan yazımızda bulabilirsiniz.
Logo değişirse tüm çıktıların yeniden üretilmesi gerekir. Eski PNG'yi yeni WebP ile aynı klasörde bırakmak hangi dosyanın güncel olduğunu belirsizleştirir. Çıktıları sürüm numarası ya da tarih damgasıyla adlandırmak, eski dosyaları sistematik biçimde arşivlemek bu karışıklığı önler. Bu konuyu görsel sürümleme yönetimini ele aldığımız yazımızda ayrıntılı anlattık.
Dosya adlarını İngilizce, küçük harf ve tire ile oluşturun: logo-sirket-adi.svg, logo-sirket-adi-2x.png gibi. Türkçe karakter, büyük harf ve boşluk içeren dosya adları bazı sunucu yapılandırmalarında hatalı URL kodlamasına yol açabilir; özellikle CDN önünde bu sorun üretim ortamında ortaya çıkar.
PWA ikonu ve favicon için ek çıktılar
Web'e hazırlama yalnızca site içi görsel kullanımıyla sınırlı değildir. Eğer aynı logo bir PWA ikonu ya da favicon olarak da kullanılacaksa, ek boyutlar ve formatlar gerekir. Favicon için .ico ya da 32x32 PNG; iOS için 180x180 PNG; PWA manifest için birden fazla boyut üretmek standart hâle gelmiştir.
PWA ikonlarında asıl kırılma maskable ikon gereksinimidir. Standart bir logo kare ikon alanının tamamını doldurmaz; platformun uyguladığı yuvarlak köşe maskesi logonun bir bölümünü kesebilir. Bunu önlemek için logonun etrafında güvenli bir boşluk alanı bırakarak ayrı bir maskable sürüm üretmek gerekir. Maskable ikonun ne olduğunu ve nasıl hazırlandığını ayrı bir yazıda ele aldık.
Apple cihazlar için apple-touch-icon farklı bir davranış sergiler: şeffaf arka planı desteklemez, arka planı siyah olarak işler. Logo şeffaf arka planla verilmişse Apple touch ikonu için ayrı bir beyaz ya da marka renginde arka planlı sürüm hazırlamak gerekir. Bu ayrıntı çoğu zaman atlanır ve cihazda siyah kutu içinde logo görünümüyle karşılaşılır.
Logo dosyasını web'e hazırlamak, tek bir dışa aktarım işleminden fazlasını kapsar. Doğru SVG temizliği, bağlama göre PNG ya da WebP seçimi, şeffaflık kontrolü ve çoklu platform gereksinimleri bir araya geldiğinde her adımın bilinçli alınması gerekir. Tasarımcıdan teslim alınan ham dosyayı olduğu gibi kullanmak kısa vadede kolay görünür, ama ilerleyen süreçte beklenmedik görüntüleme sorunları doğurur. Küçük bir hazırlık rutini bu sorunların büyük bölümünü baştan engeller.
Hangi formatta çıktı verilirse verilsin, sonuç dosyayı farklı arka planlarda, farklı ekran genişliklerinde ve mümkünse farklı işletim sistemlerinde test etmek en güvenilir doğrulama yöntemidir. Araçların ürettiği çıktıyı gözle onaylamadan yayına almak, görünmez hataların kullanıcıya ulaşmasına kapı açar.