Vektör logolarımın web'de süper net görünmesini nasıl sağlayabilirim?

Illustrator ile çok çalışıyorum, ancak işimin web sitemizde nasıl göründüğünden hiç memnun kalmadım. Çeşitli teknikleri denedim - Illustrator'dan kaydetme, Photoshop'ta açma ve kaydetme - ama hala bir şey eksik.

Ed. Logo sadece AI olarak sağlandı. Illustrator'dan web ve cihazlar için kaydediyor olsam da, vektörü Photoshop'a da alsam da aynı bulanık sonucu alıyorum. Illustrator'da gerekli boyuta ölçekleme ve sonra web için kaydetme eğilimindeyim (inc türü optimize edildi - logoda metin var).

Vektör grafikleri rasterleştirilirken, çizgiler piksel sınırlarına düştüğünde keskin görünür. Bu rasterleştirici (yuvarlama) tarafından yapılabilir, ancak bildiğim vektör grafik programlarının çoğu bunu desteklemez. Buna karşı koyulması gereken bir strateji , hücreleri kapsayan ve tamsayı piksel sayısı olan bir ızgara kullanmak olacaktır (bir hücre 1x1 veya 2x2 veya 3x3, ... piksel).

Simgeler için 16x16 ızgara, 16x16, 32x32, 48x84 vb. Keskin simgelerin aynı vektör grafiğinden üretilmesine izin verdiği için iyi bir başlangıçtır.

Bir logo için, logonun en küçük gösteriminde 1 hücre = 1 piksel olan bir piksel ızgarası iyi bir başlangıçtır.

İşte bu tekniği açıklayan bir öğretici: Inkscape'deki Vektör Ampul Simgesi

Yapabileceğiniz birçok şey var.

1. PNG gibi kayıpsız sıkıştırma ile görüntü formatını kullanma
2. Vektör yolunuzun mümkün olduğunca piksel ızgarasına hizalandığından emin olun
3. Görüntü ve arka plan arasındaki kontrastı artırın (renge, parlaklığa veya her ikisine birden)
4. Görüntü düzenleme yazılımınıza keskinleştirme filtresi uygulayın
5. Efektlerin bir kombinasyonunu kullanın, koyu kenarlık + daha açık ışıma (açık bir arka plan üzerinde) VEYA ligher kenarlığı + koyu ışıma (koyu bir arka plan üzerinde) şöyle:

6. Başka bir teknik, vektör logonuzu% 200 olarak yeniden boyutlandırın, arka planınızla birleştirin, bitmap'e düzleştirin ve sonra bitmap'i% 100'e yeniden boyutlandırın. Bazen fark yaratır.

Bir web grafik yazılımı olarak, diğer nedenlerin yanı sıra piksel mükemmel tasarımı için daha uygun olduğu için Adobe Fireworks uygulamasını kesinlikle öneririm.

İşleminizin ne olduğu hakkında fazla bilgi vermediniz ve bundan bahsedilmiyordu, ancak bu seçeneği size atayacağımı düşündüm. Illustrator'da sık sık tasarlıyorsanız ve grafiklerinizi görüntülemenin bir yolunu arıyorsanız, Illustrator'da SVG olarak bilinen bir alternatif var.

SVG, site arka planları ile sıklaşıyor ve detaylı bir şekilde kayıpsız yeniden boyutlandırma yetenekleri ile daha çok simgelerle kullandığımı gördüm. SVG'yi burada kullanma konusunda belki de okuyabileceğiniz bazı kaynaklar ekledim:

• Esnek, Ölçeklenebilir ve Eğlenceli Arka Planlar İçin SVG'yi Kullanma, Bölüm I
• Web Sayfanıza Ölçeklenebilir Vektör Grafikleri Ekleme
• SVG'yi kullanma

Illustrator uygulamasında vektör dosyanızı yeniden boyutlandırabilirsiniz. Önceden ayarlanmış: sıkıştırma - renkli bitmap görüntüler - bisubik altörnekle: istediğiniz boyutta - sıkıştırma: 'JPEG' - görüntü kalitesi: 'maksimum' ile PDF olarak kaydedin. Kaydedin ve PDF dosyasını Photoshop'ta önceden boyutlandırılmış 300 PPI dosyasına yerleştirin (örnek 125 x 125 piksel). PNG olarak kaydet. Bu bir siteye yerleştirebilirsiniz. Oldukça keskin.