Illustrator; web sayfalarına mizanpaj oluşturmak veya web grafikleri oluşturmak ve en iyileştirmek için çeşitli araçlar sunar. Örneğin, web güvenli renkler kullanın, görüntü kalitesini dosya boyutuyla dengeleyin ve grafiğiniz için en iyi dosya formatını seçin. Web grafikleri dilimlerin ve görüntü eşlemlerin avantajlarını kullanabilir, web'de dosyalarınızın iyi görünmesini sağlamak için farklı en iyileştirme seçeneklerini kullanabilir Device Central ile çalışabilirsiniz.

Web grafikleri hakkında

Web için grafik tasarlarken, yazdırmak için grafik tasarlarken olduğundan farklı noktaları göz önüne almanız gerekir. 

Web grafikleri hakkında bilinçli kararlar verebilmenize yardımcı olması için aşağıdaki üç prensibi unutmayın:

Web uyumlu renkleri kullanın.

Renkler, çoğunlukla resmin önemli bir özelliğidir. Ancak, resminizde gördüğünüz renkler Web tarayıcısında veya başka birinin sisteminde aynı şekilde görünmeyebilir. Web grafikleri oluştururken, iki önlem alarak, renk taklidinin (mevcut olmayan renkleri taklit etme yöntemi) veya başka renk sorunlarının önüne geçebilirsiniz. Öncelikle, işinizi daima RGB renk modunda kaydedin. İkinci olarak, Web uyumlu bir renk kullanın.

Görüntü kalitesiyle dosya boyutunu dengeleyin.

Görüntüleri Web'de dağıtmak için küçük grafik dosya boyutları kullanmak çok önemlidir. Daha küçük dosya boyutlarıyla, Web sunucuları, görüntüleri daha etkili şekilde depolayabilir ve aktarabilir, izleyicilerse görüntüleri daha hızlı indirebilir. Bir web grafiğinin boyutunu ve tahmini indirme süresini, Web ve Aygıtlar için Kaydet iletişim kutusunda görüntüleyebilirsiniz.

Grafiğiniz için en iyi dosya formatını seçin.

Farklı türden grafiklerin, en iyi şekilde görüntülenmek ve Web için uygun boyutta dosya boyutu oluşturmak için farklı dosya formatlarında kaydedilmesi gerekir. Tek tek formatlar hakkında daha fazla bilgi edinmek için bkz. Web grafiği en iyileştirme seçenekleri.

Not:

Web sayfaları ve bant reklamlar dahil olmak üzere, özellikle Web için hazırlanmış birçok Illustrator şablonu vardır. Şablon seçmek için, Dosya > Şablondan Yeni'yi seçin.

Piksel önizleme modu hakkında

Web tasarımcıların piksel açısından tutarlı tasarımlar oluşturmalarına olanak sağlamak için Illustrator'a piksel hizalama özelliği eklendi. Bir nesne için piksel hizalama özelliği etkinleştirildiğinde, nesnedeki tüm yatay ve dikey segmentler konturlara düzgün bir görünüm sağlayan piksel ızgarasına hizalanır. Tüm dönüştürmelerde, nesne için bu özellik ayarlandığı sürece, nesne yeni koordinatlarına göre piksel ızgarasına hizalanır. Dönüştür panelinden Piksel Izgarasına Hizala seçeneğini belirleyerek bu özelliği etkin hale getirebilirsiniz. Illustrator ayrıca belge düzeyinde, web belgeleri için varsayılan olarak etkin olan Yeni Nesneleri Piksel Izgarasına Hizala seçeneği sağlar. Bu özellik etkinken, çizdiğiniz her yeni nesne varsayılan olarak piksel hizalama özelliğine sahip olur.

Daha fazla bilgi için bkz. Web iş akışları için piksel hizalanmış yollar çizme .

Resmi JPEG, GIF veya PNG gibi bir bitmap formatında kaydettiğinizde Illustrator, resmi 72 piksel/inç değerinde rasterleştirir. Rasterleştirildiğinde nesnelerin nasıl görüneceğinin önizlemesini, Görünüm > Piksel Önizleme'yi seçerek görebilirsiniz. Bu, rasterleştirilmiş bir grafikte nesnelerin kesin yerleşimini, boyutunu ve kenar yumuşatmasını kontrol etmek istediğinizde özellikle yararlıdır.

Illustrator uygulamasının nesneleri piksellere nasıl böldüğünü anlamak için, vektör nesneleri içeren bir dosya açın, Görünüm > Piksel Önizleme'yi seçin ve resmi, tek tek pikselleri görebileceğiniz kadar yakınlaştırın. Piksellerin yerleşimi, çalışma yüzeyini 1 puntoluk (1/72 inç) aralıklarla bölen piksel ızgarası tarafından belirlenir. Görünümü %600 yakınlaştırırsanızpiksel ızgarasınıgörüntüleyebilirsiniz. Nesneyi taşıdığınızda, eklediğinizde veya dönüştürdüğünüzde, nesneler piksel ızgarasına hizalanır. Dolayısıyla, nesnenin ızgaraya "yapışan" kenarlarındaki (çoğunlukla sol ve üst kenarlardaki) kenar yumuşatma efekti yok olur. Şimdi, Görünüm > Piksele Yasla komutundaki seçimi kaldırın ve nesneyi taşıyın. Bu kez, nesneyi ızgara çizgilerinin arasına yerleştirmeniz mümkün olacaktır. Bunun, nesnedeki kenar yumuşatma efektini ne şekilde etkilediğine dikkat edin. Göreceğiniz gibi,¬çok küçük ayarlamalar,¬nesnenin ne şekilde rasterleştirileceğini etkileyebilir.

Piksel Önizleme kapalı (üstte) ve açık (altta)
Piksel Önizleme kapalı (üstte) ve açık (altta)

Not:

Piksel ızgarası, cetvel başlangıcına (0,0) duyarlıdır. Cetvelin başlangıcı kaydırıldığında, Illustrator uygulamasının resmi nasıl rasterleştireceği de değişir.

Adobe Device Central uygulamasını Illustrator uygulamasıyla birlikte kullanma

Device Central, Illustrator dosyalarının çeşitli mobil aygıtlarda nasıl görüneceğinin Illustrator kullanıcıları tarafından önizlenmesini sağlar.

Örneğin bir grafik sanatçısı Illustrator uygulamasını cep telefonları için duvar kağıdı tasarlamak amacıyla kullanabilir. Dosyayı oluşturduktan sonra çeşitli telefonlarda kolayca test edebilir. Sanatçı daha sonra çeşitli telefonlarda iyi görünmesi için dosyada değişiklik yapmak ya da yaygın kullanılan cep telefonu ekran boyutlarına uygun iki ayrı dosya oluşturmak gibi ayarlamalar yapabilir.

Adobe Device Central'dan Illustrator'a erişim

  1. Device Central'ı başlatın.
  2. Dosya > Yeni Belge > Illustrator'ı seçin.

    Device Central'da, New Document (Yeni Belge) paneli, seçili uygulamada yeni bir mobil aygıt belgesi oluşturmak için doğru seçeneklerle görünür.

  3. Player Sürümü, Görünüm Boyutu, Flash Sürümü veya İçerik türü seçme gibi gerekli değişiklikleri yapın.
  4. Aşağıdakilerden birini yapın:
    • All Selected Devices (Tüm Seçili Aygıtlar) seçeneği için Custom (Özel) seçeneğini belirleyin ve bir genişlik ve yükseklik (piksel cinsinden) ekleyin.

    • Aygıt Kümeleri ya da Kullanılabilir Aygıtlar listesinden bir veya birden çok aygıt seçin.

  5. Birden çok aygıt seçerseniz Device Central sizin için bir boyut seçer. Farklı bir boyut seçmek istiyorsanız farklı bir aygıtı ya da aygıt kümesini tıklatın.
  6. Oluştur'u tıklatın.

    Seçili uygulama, düzenlemeye hazır yeni bir mobil belgesiyle açılır.

Adobe Device Central ve Illustrator'la mobil içerik oluşturma

  1. Illustrator'da Dosya > Yeni'yi seçin.
  2. Yeni Belge Profili'nde Mobil ve Aygıtlar'ı seçin.
  3. Illustrator iletişim kutusunu kapatmak ve Device Central uygulamasını açmak için Device Central düğmesini tıklatın.
  4. İçerik türü seçin.

    Soldaki Available Devices (Kullanılabilir Aygıtlar) listesi güncelleştirilir ve seçilen içerik türünü destekleyen aygıtları gösterir.

  5. Device Central'da bir ya da birkaç aygıt ya da bir aygıt kümesi seçin.

    Seçilen aygıtlara ve içerik türüne bağlı olarak Device Central oluşturulacak bir ya da daha fazla çalışma yüzeyi boyutu önerir. Her defasında bir belge oluşturmak için önerilen bir belge boyutunu seçin (ya da Tüm Seçili Aygıtlar için Özel Boyut seçeneğini belirleyin ve Genişlik ve Yükseklik için özel değerler girin).

  6. Oluştur'u tıklatın.

    Belirlenen boyutta boş bir AI dosyası Illustrator'da açılır. Yeni dosya varsayılan olarak ayarlanan aşağıdaki parametreleri içerir:

    • Renk Modu: RGB

    • Raster Çözünürlüğü: 72 ppi

  7. Boş AI dosyasına Illustrator'da içerik ekleyin.
  8. Bitirdiğinizde Dosya > Web ve Aygıtlar için Kaydet'i seçin.
  9. Web ve Aygıtlar İçin Kaydet iletişim kutusunda istediğiniz formatı seçin ve diğer dışa aktarma seçeneklerini istediğiniz şekilde değiştirin.
  10. Device Central düğmesini tıklatın.

    Device Central Emulator (Device Central Benzetimcisi) sekmesinde, dışa aktarma seçenekleri belirlenmiş geçici bir dosya görüntülenir. Teste devam etmek için Aygıt Kümeleri ya da Kullanılabilir Aygıtlar listesinde farklı bir aygıtını adını çift tıklatın.

  11. Dosyayı Device Central'da önizledikten sonra dosyada değişiklik yapmanız gerekiyorsa Illustrator'a dönün.
  12. Illustrator Web ve Aygıtlar İçin Kaydet iletişim kutusunda, örneğin farklı bir dışa aktarma formatı ya da kalitesi seçmek gibi ayarları yapın.
  13. Dosyayı yeni dışa aktarma ayarlarıyla yeniden test etmek için Device Central'ı tıklatın.
  14. Sonuçlar istediğiniz gibi olduğunda Illustrator Web ve Aygıtlar İçin Kaydet iletişim kutusunda Kaydet'i tıklatın.

    Not:

    Device Central'ı Illustrator'dan açmak için (dosya oluşturmak ve test etmek yerine) Dosya > Device Central seçeneğini kullanın.

Mobil aygıtlar için Illustrator görüntüleri oluşturma ipuçları

Mobil aygıtlar için grafik durumunu en iyileştirmek amacıyla, Illustrator uygulamasında oluşturulan resimleri, özellikle mobil aygıtlar için tasarlamış SVG-t dahil olmak üzere herhangi bir SVG formatında kaydedin.

Illustrator uygulamasında oluşturulan görüntülerin mobil aygıtlarda da iyi görüntülenmesini sağlamak için aşağıdaki ipuçlarını kullanın:

  • İçerik oluşturmak için SVG standardını kullanın. Vektör grafikleri mobil aygıtlarda yayınlamak için SVG kullanmak küçük dosya boyutu, görüntüleme bağımsızlığı, üstün renk kontrolü, yakınlaştırma yeteneği ve düzenlenebilir metinle (kaynak kodda) sonuçlanır. Ayrıca SVG XML tabanlı olduğu için görüntülere vurgulama, araç ipuçları, özel efektler, ses ve animasyon gibi etkileşimler katabilirsiniz.

  • Başlangıçtan itibaren hedef mobil aygıtlarınızın kesin boyutları içinde çalışın. SVG ölçeklenebilir olsa da, doğru boyutta çalışmak son halini alan grafiklerin hedef aygıtlar için boyut ve kalite bakımından en iyi durumda olmasını sağlar.

  • Illustrator renk modunu RGB'ye ayarlayın. SVG, monitör gibi bir RGB bit eşlem görüntüleme aygıtlarında görüntülenir.

  • Dosya boyutunu küçültmek için nesne sayısını azaltmayı (gruplar dahil) ya da daha az karmaşık hale getirmeyi (daha az nokta) deneyin. Daha az nokta kullanmak SVG dosyasındaki resimleri açıklamak için gerekli metin bilgilerinin miktarını belirgin şekilde azaltır. Nesneleri azaltmak için Object > Path > Simplify (Nesne > Yol > Basitleştir) seçeneğini belirleyin ve kalite ve nokta sayısı arasında bir denge bulmak için farklı bileşimler deneyin.

  • Mümkün olduğunda sembol kullanın. Semboller nesneyi birçok değil bir defa açıklayan vektörler tanımlar. Resimde yeniden kullanılan düğme arka planları gibi nesneler varsa bu kullanışlıdır.

  • Grafiklere animasyon uygularken, dosya boyutunu küçültmek için kullanılan nesne sayısını sınırlayın ve nesneleri mümkün olduğunda yeniden kullanmaya çalışın. Kod tekrarını önlemek için animasyonları ayrı ayrı nesneler yerine nesne gruplarına uygulayın.

  • SVG'nin sıkıştırılmış gzip'li sürümü olan SVGZ'yi kullanmayı göz önünde bulundurun. Sıkıştırma, içeriğe bağlı olarak dosya boyutunu belirgin şekilde küçültebilir. Metin genellikle yüksek oranda sıkıştırılabilir ancak gömülü rasterler (JPEG, PNG ya da GIF dosyaları) gibi ikili kodlanmış içerik yüksek fazla sıkıştırılamaz. SVGZ dosyalarının sıkıştırması, gzip'le sıkıştırılmış dosyaların sıkıştırmasını açan herhangi bir uygulama tarafından açılabilir. SGVZ'yi başarıyla kullanmak için hedef mobil aygıtınızın gzip dosyalarının sıkıştırmasını açıp açamadığını kontrol edin.

Bu çalışma Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License kapsamında lisanslanmıştır  Creative Commons şartları, Twitter™ ve Facebook sitelerinde paylaşılanları kapsamaz.

Yasal Uyarılar   |   Çevrimiçi Gizlilik İlkesi