Photoshop Magazin
 


PM Forum » Grafik Programları » Adobe illustrator

 
Cevapla Önce yenileri göster

İllustrator'de Web Grafikleri

mehtap_kadakal

Web Grafikleri

Web grafikleri oluşturmakta en doğru uygulama şekilleri

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

Piksel önizleme modu hakkında

Resmi bitmap formatında (sözgelimi JPEG, GIF veya PNG olarak) kaydettiğinizde, Illustrator uygulaması resmi 72 pikselde 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, görünmez bir ızgara tarafından belirlenir. Bir nesneyi taşıdığınızda, eklediğinizde veya dönüştürdüğünüzde, nesnenin piksel ızgarasına hizalandığını fark edersiniz. 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)Önemli: 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.

Dilimler ve görüntü eşlemleri

Dilimler hakkında

Web sayfaları birçok öğe içerebilir; HTML metin, bitmap görüntüler ve vektör grafikler bunlardan sadece birkaçıdır. Illustrator uygulamasında dilimleri kullanarak, resminizdeki farklı Web öğelerinin sınırlarını tanımlayabilirsiniz. Örneğin, resminiz JPEG formatında en iyileştirilmesi gereken bir bitmap görüntü içeriyor, ama görüntünün geri kalanı GIF dosyası olarak daha uygun şekilde en iyileştirilecekse, bir dilim kullanarak bitmap görüntüyü ayırabilirsiniz. Resmi, Web Ve Aygıtlar İçin Kaydet komutunu kullanarak resmi bir Web sayfası olarak kaydettiğinizde, her dilimi, kendi formatına, ayarlarına ve renk paneline sahip, bağımsız birer dosya olarak kaydetmeyi seçebilirsiniz.Bir Illustrator belgesindeki dilimler, ortaya çıkan Web sayfasındaki tablo hücrelerine karşılık gelir. Varsayılan değer olarak, dilim alanı, bir tablo hücresine yerleştirilmiş bir görüntü dosyası olarak dışa aktarılır. Tablo hücresinin görüntü dosyası yerine HTML metin ve arka plan rengi içermesini istiyorsanız, dilim türünü Görüntü Yok olarak değiştirebilirsiniz. Illustrator metnini HTML metne dönüştürmek isterseniz, dilim türünü HTML Metin olarak değiştirebilirsiniz.

Farklı dilim türleri kullanılan dilimli bir resimA. Görüntü Yok dilimi B. Görüntü dilimi C. HTML Metin dilimi

Dilimleri çalışma yüzeyinde ve Web Ve Aygıtlar İçin Kaydet iletişim kutusunda görüntüleyebilirsiniz. Illustrator uygulaması, dilimleri, resmin sol üst köşesinden başlayarak, soldan sağa ve yukarıdan aşağıya doğru numaralandırır. Dilimlerin düzenini veya toplam sayısını değiştirirseniz, dilim numaraları, yeni düzeni yansıtacak şekilde güncelleştirilir. Bir dilim oluşturduğunuzda Illustrator uygulaması, Web tabanlı bir tablo kullanarak sayfa düzenini oluşturmak için, o dilimi çevreleyen resimleri otomatik dilimlere böler. İki tür otomatik dilim vardır: otomatik dilimler ve alt dilimler.Otomatik dilimler, resmin, sizin dilim olarak tanımlamadığınız alanlarıdır. Siz her dilim eklediğinizde veya dilimleri düzenlediğinizde Illustrator otomatik dilimleri yeniden üretir. Alt dilimler, kullanıcının tanımladığı, birbiriyle çakışan dilimlerin nasıl bölüneceğini belirler. Alt dilimler numaralandırılmakla ve bir dilim sembolü görüntülemekle birlikte, altlarındaki asıl dilimden bağımsız olarak seçilemez. Illustrator uygulaması siz çalışırken alt dilimleri ve otomatik dilimleri gerektikçe yeniden üretir.Dilimler oluşturma

 Aşağıdakilerden birini yapın:

• Çalışma yüzeyinde bir veya birden çok nesne seçin ve Nesne > Dilim > Oluştur'u seçin.

• Dilim aracını seçin ve dilimi oluşturmak istediğiniz alanın üstünde sürükleyin. Dilimi kareyle sınırlamak için, Shift tuşunu basılı tutarak sürükleyin. Ortadan başlayarak çizmek için, Alt (Windows) veya Option (Mac OS) tuşunu basılı tutun.

• Çalışma yüzeyinde bir veya birden çok nesne seçin ve Nesne > Dilim > Seçimden Oluştur'u seçin.

• Kılavuzları, resmi dilimlemek istediğiniz yerlere yerleştirin ve Nesne > Dilim > Kılavuzlardan Oluştur'u seçin.

• Varolan bir dilimi seçin ve Nesne > Dilim > Dilimi Çoğalt'ı seçin.Dilim boyutlarının, resminizdeki bir öğenin sınırlarıyla eşleşmesini istediğinizde, Nesne > Dilimle > Oluştur komutunu kullanın. Nesneyi taşır veya değiştirirseniz, dilim alanı yeni resme uyum gösterecek şekilde otomatik olarak ayarlanır. Bir metin nesnesindeki metni ve temel formatlama özelliklerini yakalayan bir dilim oluşturmak için de bu komutu kullanın.

Dilim boyutlarının alttaki resimden bağımsız olmasını istediğinizde, Dilim aracını, Seçimden Oluştur komutunuveya Izgaralardan Oluştur komutunu kullanın. Bu yollardan biriyle oluşturduğunuz dilimler Katmanlar panelindeöğeler olarak görüntülenir ve bunları diğer vektör nesnelerinde olduğu gibi taşıyabilir, yeniden boyutlandırabilir vesilebilirsiniz.

Dilimleri seçmeİllüstrasyon penceresinde veya Web Ve Aygıtlar İçin Kaydet iletişim kutusunda bir dilim seçmek için Dilim Seçimi aracını kullanın.

• Bir dilimi seçmek için, o dilimi tıklatın.

• Birden çok dilim seçmek için, Shift tuşunu basılı tutup tıklatın. (Web Ve Aygıtlar İçin Kaydet iletişim kutusunda, Shift tuşunu basılı tutarak da sürükleyebilirsiniz.)

• Çakışan dilimlerle çalışırken, altta kalan bir dilimi seçmek için, dilimin görünür durumdaki kısmını tıklatın.Ayrıca, illüstrasyon penceresinde dilimleri aşağıdakilerden birini yaparak da seçebilirsiniz:

• Nesne > Dilim > Oluştur komutu kullanılarak oluşturulmuş olan bir dilimi seçmek için, çalışma yüzeyinde ilgili resmi seçin. Dilim, bir gruba veya katmana bağlıysa, Katmanlar panelinde o grubun veya katmanın yanındaki hedef simgesini seçin.)

• Dilim aracı, Seçimden Oluştur komutu veya Izgaralardan Oluştur komutu kullanılarak oluşturulmuş olan bir dilimi seçmek için, Katmanlar panelinde dilimi hedefleyin.

• Seçim aracıyla dilimin yolunu tıklatın.

• Bir dilim yol parçasını veya dilim bağlantı noktasını seçmek için, Doğrudan Seçim aracıyla bunlardan birini tıklatın.

Not: Otomatik dilimleri seçemezsiniz. Bu dilimler soluk gösterilir.

Dilim seçeneklerini ayarlama

Bir dilimin seçenekleri, o dilimin içeriğinin ortaya çıkacak Web sayfasında nasıl görüneceğini ve işleyeceğini belirler.

1 Dilim Seçim aracıyla aşağıdakilerden birini yapın:

• İllüstrasyon penceresinde bir dilim seçin ve Nesne > Dilim > Dilim Seçenekleri'ni seçin.

• Dilim Seçim aracıyla Web Ve Aygıtlar İçin Kaydet iletişim kutusunda bir dilimi çift tıklatın.

2 Bir dilim türü seçin ve ilgili seçenekleri ayarlayın:

Dilimleri kilitleme

Dilimleri kilitlemek, yeniden boyutlandırma veya taşıma gibi değişiklikleri kazayla yapmanızı önler.• Bütün dilimleri kilitlemek için, Görünüm > Dilimleri Kilitle'yi seçin.• Tek tek belirli dilimleri kilitlemek için, Katmanlar panelinde o dilimlerin düzenleme sütununu tıklatın.Dilim sınırlarını ayarlama

Bir dilimi Nesne > Dilim > Oluştur komutunu kullanarak oluşturduysanız, dilimin konumu ve boyutu, içerdiği resme bağlanır. O yüzden, resmi taşır veya yeniden boyutlandırırsanız, dilim sınırları otomatik olarak ayarlanır. Bir dilimi Dilim aracını, Seçimden Oluştur komutunu veya Izgaralardan Oluştur komutunu kullanarak oluşturduysanız, dilimleri aşağıdaki yollardan elle ayarlayabilirsiniz:• Bir dilimi taşımak için, dilimi Dilim Seçim aracıyla yeni bir konuma taşıyın. Hareketi düşey, yatay veya 45° diyagonal çizgiyle sınırlamak için, Shift tuşunu basılı tutun.• Bir dilimi yeniden boyutlandırmak için, dilimi Dilim Seçim aracıyla seçin ve dilimin herhangi bir köşesini veya kenarını sürükleyin. Dilimleri yeniden boyutlandırmak için Seçim aracını ve Dönüştür panelini de kullanabilirsiniz.• Dilimleri hizalamak veya dağıtmak için, Hizala panelini kullanın. Dilimleri hizalamak, gereksiz otomatik dilimleri ortadan kaldırarak, daha küçük ve daha verimli bir HTML dosyası oluşturabilir.• Dilimlerin yığın sıralamasını değiştirmek için, Katmanlar panelinde dilimi yeni bir konuma sürükleyin veya bir Nesne > Düzenle komutu seçin.• Bir dilimi bölmek için, dilimi seçin ve Nesne > Dilim > Dilimleri Böl'ü seçin.Herhangi bir yöntemle oluşturulmuş dilimleri birleştirebilirsiniz. Dilimleri seçin ve Nesne > Dilim > Dilimleri Birleştir'i seçin. Ortaya çıkan dilim, boyutlarını ve konumunu, birleştirilen dilimlerin dış kenarlarının birleştirilmesinden oluşan dikdörtgenden alır. Birleştirilen dilimler bitişik değilse veya farklı orantıları veya hizalamalara sahipse, yeni dilim başka dilimlerle çakışabilir.Bütün dilimleri çalışma yüzeyi sınırlarına göre yeniden boyutlandırmak için, Nesne > Dilim > Resim Masasına İliştir'i seçin. Çalışma yüzeyinin sınırları dışına taşan dilimler çalışma yüzeyine sığacak şekilde kırpılır ve çalışma yüzeyi içinde kalan otomatik dilimler çalışma yüzeyi sınırlarına genişletilir; bütün resimler aynı kalır.

Dilimleri kaldırma

Dilimleri silerek veya ilgili resimden serbest bırakarak kaldırabilirsiniz.

• Bir dilimi silmek için, dilimi seçin ve Delete tuşuna basın. Dilim, Nesne > Dilim > Oluştur komutu kullanılarak oluşturulmuşsa, aynı anda ilgili resim de silinir. İlgili resmi korumak istiyorsanız, dilimi silmek yerine serbest bırakın.

• Bütün dilimleri silmek için, Nesne > Dilim > Tümünü Sil'i seçin. Nesne > Dilim > Oluştur komutuyla oluşturulmuş olan dilimler silinmez, serbest bırakılır.• Bir dilimi serbest bırakmak için, dilimi seçin ve Nesne > Dilim > Serbest Bırak'ı seçin.

Dilimleri gösterme veya gizleme

• İllüstrasyon penceresinde dilimleri gizlemek için, Görünüm > Dilimleri Gizle'yi seçin.• Web Ve Aygıtlar İçin Kaydet iletişim kutusunda dilimleri gizlemek için, Dilim Görünürlüğünü Aç/Kapat düğmesini tıklatın.• Dilim numaralarını gizlemek ve dilim çizgilerinin rengini değiştirmek için, Düzenle > Tercihler > Akıllı Kılavuzlar Ve Dilimler'i veya Illustrator > Tercihler > Akıllı Kılavuzlar Ve Dilimler'i (Mac OS) seçin.

Görüntü eşlemleri oluşturma

Görüntü eşlemler, bir görüntünün (etkin noktalar adı verilen) bir veya birden çok alanını bir URL'ye bağlamanıza olanak verir. Kullanıcı etkin noktayı tıklattığında, Web tarayıcısı, bağlantılı dosyayı yükler.Bağlantılar oluşturmak için görüntü eşlemlerini kullanmakla dilimleri kullanmak arasındaki temel fark, resmin Web sayfası olarak dışa aktarılma şeklidir. Görüntü eşlemleri kullanıldığında resim tek bir görüntü dosyası olarak, olduğu gibi korunur; dilimler kullanıldığındaysa resim, ayrı ayrı dosyalara bölünür. Görüntü eşlemleriyle dilimler arasındaki diğer bir fark da görüntü eşlemlerinin resminizde çokgen veya dikdörtgen şeklindeki alanlarda bağlantı oluşturabilmesi, dilimlerdeyse sadece dikdörtgen şeklindeki alanlarda bağlantı oluşturulabilmesidir. Sadece dikdörtgen alanlarda bağlantı oluşturmanız gerekiyorsa, dilimleri kullanmak görüntü eşlemi kullanmaya yeğlenebilir.Not: Beklenmedik sonuçlardan kaçınmak için, URL bağlantıları içeren dilimlerde görüntü eşlem etkin noktaları oluşturmayın; bazı tarayıcılar görüntü eşlem bağlantılarını veya dilim bağlantılarını yoksayabilir.1 Bir URL'ye bağlamak istediğiniz nesneyi seçin.2 Nitelikler panelinde, Görüntü Eşlem menüsünde görüntü eşlem için bir şekil seçin.3 URL metin kutusuna göreli veya tam URL'yi girin veya mevcut URL'ler listesinden seçin. Tarayıcı düğmesini tıklatarak, URL konumunu sınayabilirsiniz.URL menüsündeki görünür girişlerin sayısını artırmak için, Nitelikler paneli menüsünde Panel Seçenekleri'ni seçin.URL listesinde kaç URL girişi görüntülenmesini istediğinizi belirtmek için 1 ile 30 arasında bir değer girin.

SVGSVG hakkında

Web için bitmap görüntü formatları (GIF, JPEG, WBMP ve PNG), görüntüleri bir piksel ızgarası kullanarak tanımlar. Ortaya çıkan dosyalar çoğu zaman büyük, (çoğunlukla düşük) tek bir çözünürlükle sınırlı olur ve Web'de büyük miktarda bant genişliği tüketir. Öte yandan SVG, görüntüleri şekiller, yollar, metin ve filtre efektleriyle tanımlayan bir vektör formatıdır. Ortaya çıkan dosyalar kompakttır ve Web'de, yazdırma sırasında, hatta sınırlı kaynaklara sahip avuç içi cihazlarda bile yüksek kalitede grafikler sunar. Kullanıcılar, ekrandaki SVG görüntüsünün görünümünü keskinlikten, ayrıntılardan ve netlikten ödün vermeksizin yakınlaştırabilirler. Ayrıca, SVG, üstün metin ve renk desteği sunarak,kullanıcıların görüntüleri, Illustrator resminizde göründüğü şekilde görmesini garantiler.SVG formatı tamamen XML tabanlıdır ve hem geliştiricilere hem de kullanıcılara benzer avantajlar sağlar. SVG ile, vurgulama, araç ipuçları, ses ve animasyon gibi sofistike efektlere sahip olan ve kullanıcı eylemlerine yanıt veren Web grafikleri oluşturmak için XML ve JavaScript kullanabilirsiniz.Kaydet, Farklı Kaydet, Kopyasını Kaydet veya Web Ve Aygıtlar İçin Kaydet komutunu kullanarak resmi SVG formatında kaydedebilirsiniz. SVG dışa aktarma seçeneklerinin tamamına erişmek için, Kaydet, Farklı Kaydet veya Kopyasını Kaydet komutunu kullanın. Web Ve Aygıtlar İçin Kaydet komutu, SVG dışa aktarma seçeneklerinin Web'e yönelik çalışmalara uygulanabilecek bir alt kümesini sunar.

Efektleri SVG dosyasından içe aktarma

1 Efekt > SVG Filtresi > SVG Filtresini İçe Aktar'ı seçin.2 İçinden efektleri içe aktarmak istediğiniz SVG dosyasını seçin ve Aç düğmesini tıklatın.

SVG Etkileşimi paneline genel bakış

Resminizi Web tarayıcıda görüntülenmek üzere dışa aktarırken etkileşim eklemek için, SVG Etkileşimi panelini (Pencere > SVG Etkileşimi) panelini kullanırsınız. Örneğin, bir JavaScript komutunu tetikleyen bir olay oluşturarak, kullanıcı fareyi bir nesnenin üstüne getirmek gibi bir eylem yaptığında Web sayfasında kolayca bir hareket oluşturabilirsiniz. SVG Etkileşimi paneli ayrıca, mevcut dosyayla ilişkilendirilmiş olan bütün olayları ve JavaScript dosyalarını görmenize de olanak verir.SVG Etkileşimi panelinden olay silme

• Bir olayı silmek için, olayı seçin ve Sil düğmesini tıklatın veya panel menüsünde Olayı Sil'i seçin.• Bütün olayları silmek için, panel menüsünde Olayı Temizle'yi seçin.

Bir dosyayla bağlantılı olayları listeleme, ekleme veya kaldırma

1 JavaScript Dosyalarına Bağlantı Kur düğmesini tıklatın.2 JavaScript Dosyaları iletişim kutusunda bir JavaScript girişi seçin ve aşağıdakilerden birini yapın:• Başka JavaScript dosyaları bulmak için Ekle düğmesini tıklatın.• Seçilen JavaScript girişini kaldırmak için Kaldır düğmesini tıklatın.

Resme SVG etkileşimi ekleme

1 SVG Etkileşimi panelinde bir olay seçin. 2 İlgili JavaScript dosyasını girin ve Enter tuşuna basın.

 

 
 
 
Şuan Bu Başlığı Gezenler: