Flash dosya formatı (SWF) vektör tabanlıdır ve web için ölçeklenebilir, kompakt grafikler için tasarlanmıştır. Bu dosya formatı vektör grafiklerine dayandığından, nesne herhangi bir çözünürlükte görüntü kalitesini korur ve animasyon kareleri oluşturmak için idealdir. Illustrator'da, katmanlarda ayrı animasyon kareleri oluşturabilir ve ardından görüntü katmanlarını web sitenizde kullanmak üzere ayrı kareler olarak dışa aktarabilirsiniz. Ayrıca tanımlayabilirsiniz semboller Animasyonun boyutunu küçültmek için Illustrator dosyasında Dışa aktarıldığında, her sembol SWF dosyasında yalnızca bir kez tanımlanır.

Dışa Aktarma Komutu (SWF)

Animasyon ve bit sıkıştırma üzerinde en fazla kontrolü sağlar.

Parçalı bir düzende SWF ve bitmap biçimlerinin karışımı üzerinde daha fazla kontrol sağlar. Bu komut, Dışa Aktar (SWF) komutundan daha az görüntü seçeneği sunar, ancak en son kullanılan Dışa Aktarma komut seçeneklerini kullanır (bkz.).

Bir nesneyi SWF formatında kaydetmeye hazırlarken aşağıdaki yönergeleri aklınızda bulundurun.

Device Central'ı kullanarak Illustrator resminin uygulamada nasıl görüneceğini görebilirsiniz. Flash playerçeşitli el cihazlarında.

Illustrator Resmini Ekleme

Illustrator'da oluşturulan resimler hızlı, kolay ve kolay bir şekilde kopyalanıp Flash'a yapıştırılabilir.

Illustrator resmini Flash'a yapıştırdığınızda aşağıdaki nitelikler korunur.

Konturlar ve şekiller

• Hat kalınlığı

  Gradyanların tanımı

  Metin (OpenType yazı tipleri dahil)

  İlgili Resimler

• Karıştırma modları

Ayrıca, Illustrator ve Flash, resim eklerken aşağıdakileri destekler.

Illustrator resminde tüm üst düzey katmanları seçip bunları Flash'a yapıştırmak, katmanları ve özelliklerini (görünürlük ve kilitleme) korur.

Illustrator'ın RGB olmayan renk biçimleri (CMYK, gri tonlamalı ve özel biçimler) Flash tarafından RGB'ye dönüştürülür. RGB renkleri her zamanki gibi yapıştırılır.

Illustrator resmini içe aktarırken veya yapıştırırken, belirli efektleri (metne göre gölge dökümü gibi) Flash filtreleri olarak korumak için çeşitli seçenekleri kullanabilirsiniz.

Flash, Illustrator maskelerini kaydeder.

SWF dosyalarını Illustrator'dan dışa aktarma

Illustrator'dan dışa aktarılan SWF dosyaları, Flash'tan dışa aktarılan SWF dosyalarının kalitesi ve sıkıştırma oranıyla eşleşir.

Dışa aktarırken, optimum çıktı için önceden tanımlanmış çeşitli stiller arasından seçim yapabilir ve birden çok çalışma yüzeyinin nasıl kullanıldığını, sembollerin, katmanların, metnin ve maskelerin nasıl dönüştürüleceğini belirleyebilirsiniz. Örneğin, Illustrator sembollerini film veya grafik olarak dışa aktarabilir ve Illustrator katmanlarından SWF sembolleri oluşturabilirsiniz.

Illustrator dosyalarını Flash'a içe aktarma

Illustrator'da eksiksiz bir mizanpaj oluşturmak ve ardından bunu tek adımda Flash'a içe aktarmak için, resmi Illustrator Yerel Biçiminde (AI) kaydedebilir ve Dosya> Masaüstüne İçe Aktar komutlarını kullanarak yüksek doğrulukla Flash'a içe aktarabilirsiniz. > Kitaplığa Aktar'ı seçin.

Illustrator dosyanız birden çok çalışma yüzeyi içeriyorsa, Flash İçe Aktarma iletişim kutusunda içe aktarılacak çalışma yüzeyini seçin ve o çalışma yüzeyindeki her katman için ayarları belirtin. Seçili çalışma yüzeyindeki tüm nesneler şuraya aktarılır: flaş programı tek bir katman olarak. Aynı AI dosyasından farklı bir çalışma yüzeyi içe aktardığınızda, bu çalışma yüzeyindeki nesneler yeni bir katman olarak Flash'a içe aktarılır.

Illustrator resmini AI, EPS veya PDF dosyaları olarak içe aktardığınızda, Flash, Illustrator resmini yapıştırırken olduğu gibi aynı öznitelikleri korur. Ayrıca, içe aktardığınız Illustrator dosyası katmanlar içeriyorsa, bunları aşağıdaki yollardan biriyle içe aktarabilirsiniz.

Illustrator katmanlarını Flash katmanlarına dönüştürün.

Illustrator katmanlarını Flash çerçevelerine dönüştürün.

Tüm Illustrator katmanlarını tek bir Flash katmanına dönüştürün.

Adobe Illustrator'da şeffaf bir GIF aşağıdaki gibi yapılır. Dosya> Web ve Aygıtlar için Kaydet'e gidin (Alt + Ctrl + Shift + S). Açılan pencerede, Optimize edilmiş dosya formatı alanında öncelikle sekmeye gitmelisiniz. Görüntü boyutu(Görüntü boyutu). Gerçek şu ki, varsayılan olarak tüm sayfa optimizasyon penceresine girer ve bu genellikle gerekli değildir. Bu nedenle, Görüntü Boyutu sekmesinde onay kutusunun işaretini kaldırın. Çalışma Yüzeyine Klip(Sayfa boyutuna kırpın) ve Uygula düğmesine tıklayın.

Ardından, biçim seçim listesinden GIF'i seçin ve Şeffaflık onay kutusunu işaretleyin.

Bundan sonra hangi renklerin şeffaf olacağını belirleyeceğiz. Resimde bulunan tüm renkler sekmede bulunur Renk Tablosu(Renk Tablosu) ve renkli kareler olarak görüntülenir. Pencerenin sol tarafındaki araç çubuğunda aracı seçin damlalık(pipet).

Renkleri tanımlamanın iki yolu vardır. En kolay yol, doğrudan görüntü üzerinde damlalıklı bir renk belirtmektir - bundan sonra renk, renk tablosunda koyu bir vuruşla vurgulanacaktır. Peki, tam olarak hangi rengin şeffaf olması gerektiğini biliyorsanız, ilgili renkli kareye tıklayarak doğrudan renk tablosunda seçebilirsiniz. Ve birinci ve ikinci durumlarda, birkaç renk seçmeniz gerekiyorsa, Shift (veya Ctrl) tuşuna basılarak çalışmanız gerekir. Bir renk seçtikten sonra, programa onu şeffaf hale getirmesi talimatını vermeniz gerekir. Bunu yapmak için simgeye tıklamanız gerekir. Seçilen renkleri Şeffaf ile eşler(Seçili renkleri saydamlığa ekleyin). Resimde bu buton daire içine alınmış ve şeffaf olarak kırmızı seçilmiştir. Resim gösterilecek şeffaf alan, ve renk tablosundaki kare görünümünü değiştirecek - bir kısmı beyaz bir üçgen olacak. Seçilen rengi iptal etmek için, onu Renk Tablosunda seçmeniz ve ardından seçilen renkleri Saydam olarak eşler simgesine tekrar tıklamanız gerekir.

Şeffaflığı ayarlamanın yolu hakkında birkaç söz. Açılır menü bundan sorumludur. Şeffaflık Titreme Algoritmasını Belirtin, Rusça - Şeffaflığı simüle etmek için algoritma (aşağıdaki Şekil). Dört seçenek yapılabilir: Saydamlık Titreme Yok, Difüzyon Titreme, Dağınık, Model Saydamlık Titreşimi, Model Tabanlı Algoritma ve Gürültü Saydamlık Titreme, Gürültü Tabanlı Algoritma. Diffüz algoritma modunda kaydırıcı aktif hale gelir. Miktar(Miktar) difüzyon değerini değiştirmenizi sağlar. Neyi uygulamaya koymalı? Amaca ve görüntüye bağlı olarak. Bu seçeneği kullanmıyorum ve her zaman varsayılan olarak bırakıyorum - Şeffaflık Taklit Yok.

Kaydet'e tıklayın - şeffaf GIF hazır. Çalışma Adobe Illustrator CS4 (v. 14) sürümünde yapılmıştır, ancak tüm eylemler ve klavye kısayolları, CS3'ün önceki sürümü (v. 13) için geçerlidir.

Son zamanlarda, çeşitli SVG (Ölçeklenebilir Vektör Grafikleri) grafikleri web sitelerinde ve uygulamalarda çok popüler hale geldi. Bunun nedeni, tüm en yeni tarayıcılar zaten bu formatı destekliyor. İşte SVG tarayıcı desteği hakkında bir bilgi.

Bu makale tartışıyor en basit örnek animasyonlar SVG vektörü NS akciğer yardımı Jquery eklentisi Tembel Çizgi Ressamı.

Kaynak

Bu görevi tamamlamak ve tam olarak anlamak için temel HTML, CSS, Jquery bilgisi istenir, ancak yalnızca SVG'yi canlandırmak istiyorsanız gerekli değildir) Haydi başlayalım!

Ve böylece izlememiz gereken adımlar:

1. Doğru dosya yapısı oluşturun
2. Eklentiyi indirin ve bağlayın
3. Adobe Illustrator'da Harika Anahat Sanatı Çizin
4. Resmimizi Lazy Line Converter'a dönüştürün
5. Ortaya çıkan kodu main.js'ye yapıştırın
6. Tatmak için biraz CSS ekleyin

1. Doğru dosya yapısını oluşturun
Aşağıdaki resimdeki gibi parametreleri seçmeniz gereken yerde Initializr servisi bize bu konuda yardımcı olacaktır.

• Klasik H5BP (HTML5 Kazan Plakası)
• Şablon Yok
• Sadece HTML5 Shiv
• küçültülmüş
• IE Sınıfları
• krom çerçeve
• Ardından İndir'i tıklayın!

2. Eklentiyi indirin ve bağlayın

initializr en son jquery kütüphanesi ile geldiği için Lazy Line Painter projesinin deposundan indirmemiz gereken arşivden sadece 2 dosyayı projemize aktarmamız yeterli. Birincisi 'jquery.lazylinepainter-1.1.min.js' (eklentinin sürümü farklı olabilir) ve ortaya çıkan klasörün kökünde bulunur. İkincisi, örnek / js / satıcı / raphael-min.js'dir.

Bu 2 dosyayı js klasörüne yerleştiriyoruz. Ve bunları main.js'den önce index.html'mize şu şekilde bağlarız:

3. Adobe Illustrator'da harika bir anahat resmi çizin

1. Anahat resmimizi Illustrator'da çizin (bunu yapmanın en kolay yolu Kalem Aracıdır)
2. Etkimiz için bir başlangıç ​​ve bir son gerekli olduğundan, çizimimizin dış hatlarının kapanmaması gerekir.
3. Dolgu olmamalı
4. Maksimum dosya boyutu - 1000 × 1000 piksel, 40kb
5. Nesneye Kırp> Çalışma Yüzeyleri> Çalışma Yüzeylerinin Sınırlarına Sığdır
6. SVG formatında kaydedin (standart kaydetme ayarları yapacaktır)

Örneğin, ekteki simgeleri kullanabilirsiniz.

4. Resmimizi Lazy Line Converter'a dönüştürün
Simgenizi aşağıdaki kutuya sürüklemeniz yeterlidir.
Anahatın kalınlığı, rengi ve animasyonun hızı, dönüştürmeden sonra görünecek olan kodun kendisinde değiştirilebilir!

5. Ortaya çıkan kodu main.js'ye yapıştırın
Şimdi ortaya çıkan kodu boş bir main.js dosyasına yapıştırıyoruz.
Seçenekler:
StrokWidth - anahat kalınlığı
StrokColor - anahattın rengi
Süre parametresinin değerlerini değiştirerek (varsayılan olarak 600) her vektörün çizim hızını da değiştirebilirsiniz.

6. Zevkinize göre biraz CSS ekleyin
index.html'den paragrafı kaldır

Selam Dünya! Bu, HTML5 Genel Tablosu.

Ve onun yerine animasyonumuzun yer alacağı bir blok ekliyoruz.

daha sonra daha güzel bir görünüm için main.css dosyasına biraz CSS ekleyin:

Gövde (arka plan: # F3B71C;) #simgeler (konum: sabit; üst: %50; sol: %50; kenar boşluğu: -300px 0 0 -400px;)

tüm dosyaları kaydedin.
Şimdi index.html'yi modern bir tarayıcıda açın ve efektin keyfini çıkarın.

not yerel bir makinede çalışırken, animasyonun başlaması birkaç saniye gecikebilir.

Web Grafiklerini Optimize Etme

Grafik bilgisi metin bilgisinden çok daha yavaş iletilir ve resimlerin yüklenme süresi boyutlarıyla orantılıdır. grafik dosyaları... Bu nedenle, Web sayfalarının hızlı yüklenmesi, optimizasyonlarıyla elde edilen küçük boyutlu gömülü grafikler anlamına gelir. Görüntü optimizasyonu, öncelikle grafik görüntülerdeki renk sayısını azaltarak, sıkıştırılmış ve özel dosya formatlarını kullanarak ve sıkıştırma parametrelerini optimize ederek elde edilen bu durumda gerekli görüntü kalitesini korurken minimum dosya boyutunu sağlayan dönüşümü olarak anlaşılır. bireysel görüntü parçaları.

Illustrator, çeşitli önizleme yöntemleri aracılığıyla hızlı ve verimli bir optimizasyon süreci sağlayan yerleşik görüntü optimizasyon araçlarına sahiptir. Ön izleme optimize edilmiş görüntünün gerçek zamanlı olarak nasıl görüneceğine dair oldukça doğru bir fikir verir, bu da optimizasyon sonucunu değerlendirmeye ve gerekli ayarları başarıyla seçmeye yardımcı olur. Ayrıca, hem doğrudan Illustrator'da oluşturulan görüntüleri hem de diğerlerini, örneğin bir Web sitesinde yayınlanması gereken fotoğrafları optimize edebilirsiniz.

Optimizasyon parametreleri pencerede ayarlanır Web için Kaydet(Web için Kaydet) menüden aynı isimli komutla çağrılır Dosya(Dosya). Program, dört önizleme modundan birini kullanmayı önerir, ancak ikisi, optimizasyon kalitesini değerlendirmek için en uygun olanıdır:

• 2 Yukarı(iki seçenek) - orijinal ve optimize edilmiş görüntünün belirtilen ayarlara göre aynı anda görüntülenmesi (Şekil 1);
• 4-yukarı(dört seçenek) - bu modda, görüntüleme alanı orijinal görüntüyü ve optimize edilmiş olanın üç versiyonunu görüntülemek için dört pencereye bölünmüştür (Şekil 2): ​​ilk versiyon ayarlanan optimizasyon değerlerine göre oluşturulur ve diğeri ikisi, mevcut optimizasyon ayarlarının varyantlarıdır.

Her iki mod da aramada önemli ölçüde zaman kazandırabilir daha iyi seçenek optimizasyon, çünkü farklı optimizasyon ayarlarıyla görüntüleri kaydetme ihtiyacını ve sonraki görsel karşılaştırmalarını ortadan kaldırırlar. Ayrıca sadece optimize edilmiş görüntünün kalitesini değil, aynı zamanda boyutunu ve farklı bağlantı seçenekleri için yükleme süresini de değerlendirmek mümkündür. Karşılaştırma için, en uygun mod, paletin sıkıştırılmasının veya küçültülmesinin görüntünün kalitesi ve boyutu üzerindeki etkisini görsel olarak değerlendirmenize ve nihayetinde belirlemenize olanak tanıyan 4-Up (dört seçenek) modudur. en iyi parametreler optimizasyon.

Illustrator, web grafiklerini yalnızca GIF, JPG, PNG-8 ve PNG-24 biçimlerinde değil, aynı zamanda SWF ve SVG'de de optimize etmenize olanak tanır. Az sayıda renge sahip dizinlenmiş görüntüler GIF biçiminde kaydedilir. JPG formatı, tam renkli ve gri tonlamalı görüntüleri (fotoğraflar ve gradyan dolgular gibi zengin renkli grafikler) kaydetmek için kullanılır. Saydam alanlara sahip tam renkli görüntüler için PNG formatı bu, hem dizine alınmış hem de tam renkli görüntüleri kaydetmenize olanak tanırken PNG-8 biçiminde optimize edilmiş bir görüntünün mümkün olan maksimum renk sayısı 256'dır ve PNG-24 biçiminde bir görüntü milyonlarca renge sahip olabilir ve bu nedenle JPEG formatına benzer. PNG-24, PNG-24 görüntülerini optimize etmek için kullanılan sıkıştırma yönteminin kalite kaybına yol açmaması, ancak dosya boyutunu büyütmesi bakımından JPEG'den farklıdır. SVG ve SWF biçimleri grafikleri, metni ve etkileşimli bileşenleri birleştirir ve ayrıca optimize edilebilir.

Belirli bir görüntü optimizasyonu örneğine bakalım. Diyelim ki Illustrator'da bir web sitesi logosu geliştirildi (Şekil 3), başlangıçta AI formatında kaydedildi. Web için hemen optimize etme girişimi iyi bir şeye yol açmayacaktır, çünkü bu durumda görüntü otomatik olarak kırpılacaktır, bu da deformasyon sonucunda elde edilen harflerin gerçek konumunu hesaba katmayacaktır (Şekil 4 ve 5).

Bu nedenle logoyu şu komutla PSD formatına aktarmaya çalışacağız. Dosya => Dışa Aktar(Dosya => Dışa Aktar) - oluşturulan görüntünün boyutu 143 KB olacaktır. Ortaya çıkan PSD dosyasını açın ve komutu kullanın Dosya => Web için Kaydet(Dosya => Web için Kaydet). Görüntüde yer alan sınırlı sayıda renk göz önüne alındığında, bu durumda, karar vermeniz gereken belirli ayarlarla GIF formatı en uygunudur. Ayarları deneyerek, emin olabilirsiniz. en iyi kalite programın varsayılan sıkıştırma algoritmasını verir Seçici(Seçici). Kenar yumuşatma gelince, bir gradyan dolgusunun varlığı göz önüne alındığında, gürültü üreten bir algoritma seçmek daha iyidir - Gürültü(şek. 6). Ortaya çıkan optimizasyon dosyasının boyutu 6.729 KB olacak (Şekil 7), arka planın şeffaflığı korunacak, bu da görüntüyü HTML dosyasıyla birlikte GIF formatında kaydederek doğrulanması kolay olacak (Şekil 8). Sonuç olarak, bu örnek Amblem.html ve amblem.gif dosyaları Primer1 klasöründen alındı.

Düğmeler

Herhangi bir Web sayfasının tasarımının vazgeçilmez bir özel unsuru grafiksel kontrollerdir - düğmelerdir. Onlarsız bir sayfa hayal etmek imkansızdır. Çizim düğmeleri bugün özel bir tür haline geldi ve Illustrator, en karmaşık seçenekleri oluşturmanıza olanak tanır. Örneğin, ızgara nesneleri olarak tasarlanan ve/veya bindirme maskeleri olan butonlar, normal olanlardan çok daha etkileyici görünüyor.

Illustrator'da yuvarlak bir dışbükey düğme oluşturma seçeneğini ele alalım. Herhangi bir renkle doldurulmuş daire şeklinde bir vektör nesnesi çizin (Şekil 9) ve komutu kullanarak onu bir ağa dönüştürün Nesne => Gradient Mesh Oluştur(Nesne => Gradient Mesh Oluştur) dört satır ve dört sütun belirterek ve listede Dış görünüş(Görüntüle) bir seçenek belirleyerek Merkez Vurgulamak(Arka ışık) 60'a eşittir (Şekil 10). Bir araç seçin Doğrudan Seçim ve orada bulunan bağlantı noktalarını vurgulayarak nesnenin sol üst köşesine tıklayın (Şek. 11). Paletten seçerek ilgili hücrenin rengini beyaza değiştirin renk örnekleri(şek. 12).

bir alet al Elips(Elips), fare işaretçisini bundan önce oluşturulan dairenin ortasına yerleştirin ve tuşları basılı tutarken alt ve Vardiya, yeni daireyi eski dairenin üzerine uzatın, böylece her tarafta eskisinden 1-2 piksel daha büyük olur. Onu siyah bir sınır yap ( Felç) 1-2 piksel genişliğinde ve kırmızıdan beyaza radyal bir gradyanla doldurun (Şekil 13). Oluşturulan vektör nesnesini 1-2 piksel sağa ve aşağı sürükleyin, ardından seçimi kaldırmadan üzerine tıklayın. sağ tık fare ve bağlam menüsünden komutu seçin Düzenle => Arkaya Gönder(Düzenle => Geri Gönder). Sonuç olarak, Şekil 2'de gösterilen düğme için bir boşluk elde edersiniz. on dört.

Kural olarak, herhangi bir Web sayfasında, örneğin yalnızca üzerlerine çizilen okların yönünde farklılık gösteren, sitedeki hareket yönünü gösteren aynı türde birkaç düğme vardır. En basit durumu, biri aşağı ok olan bir sonraki sayfaya ve yukarı oklu bir buton bir öncekine geçmek anlamına gelen iki butona sahip olmayı düşünelim. Boş bir ok olarak, araçla çizilmiş sıradan bir üçgen alın Çokgen(Poligon), siyahla doldurulmuş ve daha fazla etki için ağ nesnesi olarak dekore edilmiştir. Oku düğmeye hareket ettirin ve palet üzerindeki ilgili düğmeleri kullanarak tüm nesnelerin konumunu birbirine göre ayarlayın hizala(Hizalama). Elde edilen düğmelerden ilki Şekil 2'de gösterilmektedir. 15. Komutu seçerek düğme katmanının bir kopyasını oluşturun Yinelenen katman Katmanlar, - sonuç olarak, iki özdeş katman elde ederiz. Ardından, katmanın kopyası üzerinde oku seçin ve komutu seçerek 180 ° döndürün Dönüştür => Döndür- Dönüşüm => Döndürme. Şekilde gösterildiği gibi aynı düğmeyi alıyoruz. 16. Lütfen, bu durumda gösterildiği gibi, bir projedeki aynı türdeki tüm düğmeleri farklı katmanlarda tek bir dosyada saklamanın çok daha uygun olduğunu unutmayın.

Şimdi her bir düğmenin optimize edilmiş sürümlerini kaydetmeniz gerekiyor. Önce alt katmanı görünmez yapın - bu durumda üst katmandaki düğme kaydedilecektir. Bir takım seçin Dosya => Web için Kaydet(Dosya => Web İçin Kaydet), düğme optimizasyon seçeneklerini, örneğin Şekil 1-4'te gösterildiği gibi yapılandırın. 17, düğmeye tıklayın Kaydetmek(Kaydet) ve dosya adını girin. Sonuç olarak kaydedilen düğme Şekil 2'de gösterilmektedir. 18. Şimdi alt katmanın görünürlüğünü döndürün ve üst katmanı görünmez yapın ve aynı şekilde ikinci düğmeyi farklı bir ad vererek kaydedin. Sonuç, Şekil 2'de gösterilmektedir. 19.

Şimdi geriye kalan tek şey, düğmelerin Web sayfasında iyi göründüğünden emin olmak ve bunları özel bir sayfaya yerleştirmek (Şekil 20). Sonuç olarak, bu örnekte, Primer2.html dosyası ve resimler klasöründeki (klasör) iki grafik resim astar2).

İstenirse, optimizasyon işlemi sırasında düğme kolayca bir dilim haline getirilebilir. Bu durumda, komutu seçtikten sonra Dosya => Web için Kaydet(Dosya => Web için Kaydet) ve optimizasyon parametrelerini ayarlayın, araç paletinden aracı seçin Dilim seçimi(Dilim seçimi) ve sonunda otomatik olarak bir dilime dönüşecek olan resme çift tıklayın. seri numarası 1 (şek. 21). Fareye tekrar çift tıklamak pencereyi açacaktır. Dilim seçenekleri(Dilim seçenekleri), bir bağlantı belirtmeniz ve istenirse dilimin adını değiştirmeniz gerekecek (Şekil 22) ve ardından optimize edilmiş görüntüyü kaydedin. Bu durumda sonuç Primer3.html (Şekil 23) ve Primer3.gif (Primer3 klasörü) olacaktır.

Etkileşimli öğeler

Bir sayfayı hayata geçirmenin bir yolu, sayfanın özelliklerini değiştiren tasarım öğelerini tanıtmaktır. dış görünüş(veya durum) farenin davranışına bağlı olarak veya daha az sıklıkla başka durumlarda: ölçekleme, kaydırma, yükleme, hatalar vb.

Bu tür öğeler arasında en ünlüsü rollover'lardır (İngilizce roll over - roll over, ters çevirme) - bir farenin etkisi altında görünümlerini değiştiren öğeler. Hareketli düğmeler tipik rollover örnekleridir. Rollover'lar genellikle sitenin diğer gezinme öğelerini oluşturmak için kullanılır. Aslında, herhangi bir rollover bir değil, her biri belirli bir olaya karşılık gelen birkaç (dörde kadar) görüntüdür. Ana olaylar şu şekilde kabul edilir: Normal - normal durum, Fare imlecini bir öğenin üzerinde gezdirmek ve Aşağı - imleç onun üzerine geldiğinde sol fare düğmesine basmak. Teorik olarak, tıklama - bastıktan sonra sol fare düğmesini bırakma, Yukarı - düğmeyi bıraktıktan sonra, Out - aktif bölgeden ayrılırken gibi olaylar söz konusu olabilir. Bununla birlikte, uygulamada, genellikle yalnızca ilk üç hatta iki olay için öğeyi değiştirmekle sınırlıdırlar.

Klasik rollover'lar

Klasik anlamda, rollover, bir dizi GIF görüntüsü ve ilgili HTML kodudur, çünkü farenin davranışına bağlı olarak, tarayıcı penceresinde bir görüntü diğerinin yerini alır.

Illustrator, klasik anlamda doğrudan rollover'lar oluşturmak için tasarlanmamıştır, ancak bunlar için ilk öğeleri tasarlamanıza yardımcı olabilir. Bu durumda fikir, ilk olaya karşılık gelen bir görüntüye sahip bir katman oluşturmaktır. Ardından katmanın bir kopyasını alın ve görüntüyü ikinci olayla vb. eşleşecek şekilde dönüştürün. Ortaya çıkan çok katmanlı görüntü, rollover'ın Image Ready programında oluşturulduğu, katmanların korunduğu bir PSD dosyasına aktarılır. Illustrator'ı kullanmanın avantajı, diğer birçok durumda olduğu gibi, vektör grafiklerini dönüştürme kolaylığı ile birlikte, diğer yazılım araçlarında bulunmayan bir dizi ilginç özelliğidir.

Farenin davranışına bağlı olarak renk değiştiren bir yazıt şeklinde bir rollover oluşturmaya çalışalım. Illustrator'ı açın ve yuvarlak, siyah dolgulu bir dikdörtgen şekli oluşturun (Şekil 24), bunun bir kopyasını alın ve ekranın boş bir alanına yerleştirin. Dikdörtgenin ilk kopyasını, ortasında vurgu bulunan bir ızgara nesnesine dönüştürün (komut Nesne => Gradient Mesh Oluştur- Object => Create Gradient Mesh) dört satır ve on sütun belirleyerek (Şekil 25). Dikdörtgenin ikinci kopyasını etkinleştirin ve gradyan dolgusunu yaklaşık olarak Şekil 1'de gösterildiği gibi ayarlayın. 26. Degrade nesnesini ağ üzerinde karıştırın, çarpma efektini taklit etmek için degrade nesnesinin Opaklığını yaklaşık %80'e ve boyutunu yaklaşık 1 piksele düşürün. Ve sonra nesnelerin üzerine yazdırın. Orijinal biçiminde, Normal duruma karşılık gelen beyaz renge sahip olmasına izin verin (Şek. 27) ve ardından rollover durumu değiştiğinde, başlığın rengi örneğin yeşile değişecek - hareket ettiğinizde üzerine fare imlecini (Aşırı durumu) ve maviye - fare düğmesine basıldığında (Aşağı durumu).

Palete dikkat edin Katmanlar- Bu aşamada içinde sadece tek bir katman bulunur. Komutu kullanarak bu katmanın iki kopyasını oluşturun Yinelenen katman(Yinelenen Katman) palet menüsünden Katmanlar, - palette üç katman olacak (şek. 28). Ardından, katmanın ilk kopyasında, başlığın rengini yeşile, ikincisinde - maviye değiştirin (Şek. 29). Sonuç olarak, rollover için gerekli boşluğu alacaksınız.

Oluşturulan görüntüyü, komutu kullanarak katmanları koruyan PSD formatına aktarın Dosya => Dışa Aktar(Dosya => Dışa Aktar) ve RGB renk modelinin seçilmesi (Şek. 30). Oluşturulan PSD dosyasını ImageReady'de açın (Şekil 31 ve 32). Komutu seçerek katmanlardan çerçeveler oluşturun Katmanlardan Çerçeveler Yapın Palet menüsünden (Katmanlardan Çerçeveler Oluşturun) Animasyon... Animasyon penceresi Şekil 2'deki gibi görünecektir. 33. Palette aynı anda Rollover'lar başlangıçta, tek bir Normal durum oluşturulacaktır.

Daha sonra pencerede Animasyon palet içindeyken üzerine gelme durumuna karşılık gelen çerçeveyi seçin Katmanlar katman otomatik olarak seçilir Katman 1 Kopya(şek. 34). palete git Rollover'lar ve düğmeye tıklayın Rollover durumu oluştur(Dönme durumu oluştur) - şek. 35, durumun ortaya çıkmasına neden olacak aşırı durum palet içinde Rollover'lar(şek. 36). Devleti aynı şekilde oluşturun aşağı durum... durumu etkinleştir Normal palet içinde Rollover'lar ve palette sil Animasyon duruma karşılık gelmesi gereken hariç tüm çerçeveler Normal... Sonuç olarak, paletteki her rollover durumu için Animasyon sadece bir çerçeve olacaktır (şek. 37, 38 ve 39).

Pirinç. 38. Aşırı Durum durumu için görüntünün, Animasyon penceresinin ve Katmanlar ve Rollover paletlerinin görünümü

Düğmeye tıklayarak sonucu kontrol edin Varsayılan Tarayıcıda Önizleme(Tarayıcı Önizleme) öğesini seçin ve tarayıcı penceresine gidin (Şekil 40). Bundan sonra, komutu kullanarak dosyayı kaydedin. Dosya => Optimize Edilmiş Kaydet(Dosya => Optimize Edilmiş Kaydet) ve bir seçenek belirtme HTML ve Görseller (* .html)... Sonuç olarak, bu örnekte, Primer4.html dosyasını ve resimler klasöründe bir dizi grafik resmi aldık.

Pirinç. 40. Rollover-elemanlı tarayıcı penceresi

SVG rollover'ları

popülerlik kazanmak SVG formatı(Ölçeklenebilir Vektör Grafikleri - ölçeklenebilir vektör grafikleri), XML standardı temelinde oluşturulan, ayrıca çeşitli etkileşimli öğeler, özellikle rollover'lar almanıza izin verir, ancak pratikte tamamen farklı şekilde uygulanır. Etkileşimli SVG rollover'larının oluşturulmasının, klasiklerin aksine, karşılık gelen HTML kodu tamamen otomatik olarak oluşturulduğunda, JavaScript dili bilgisini ve nesne yönelimli programlamanın temel ilkelerini anlamayı gerektirdiğini belirtmekte fayda var.

SVG nesneleri ile çalışmak için özel bir palet vardır. SVG Etkileşimi, komutu kullanarak açmak kolaydır Pencere => SVG Etkileşimi(Pencere => SVG etkileşimi) - şek. 41.

Fareyi üzerine getirdiğinizde başlığın rengi siyahtan maviye değişecek ve fare etkin bölgeden ayrıldığında tekrar siyaha dönecek olan etkileşimli bir düğme örneğini kullanarak bir rollover oluşturmak için bu seçeneği düşünelim.

Kenarları yuvarlatılmış dikdörtgen bir düğme oluşturun ve bunun için uygun bir degrade dolgu seçin, örneğin Şekil 1'de gösterildiği gibi. 42. Paletteki düğmenin şeffaflığını ayarlayın şeffaflık(Şeffaflık) - bu örnekte parametre değeri opaklık(Opaklık) %50'ye ayarlandı. Düğmenin bir kopyasını alın, koyu yeşil renkle doldurun (şek. 43) ve ardından komutla onu bir ağ nesnesine dönüştürün Nesne => Gradient Mesh Oluştur(Nesne => Gradient Mesh Oluştur) dört satır ve on sütun belirterek ve listede Dış görünüş(Görüntüle) bir seçenek belirleyerek Merkez(Orta) ve değeri ayarlama Vurgulamak(Vurgulama) 100'e eşittir. Mesh nesne katmanının opaklığını yaklaşık %40 oranında azaltın (şek. 44). Kafes nesnesini degradenin üstüne yerleştirin ve düğme Şekil 1'de gösterilene benzeyecektir. 45.

Pirinç. 44. Bir düğmenin kopyasını bir ağ nesnesine dönüştürmek

Düğmeyi istenen başlık ile tamamlayın ve palet üzerindeki ilgili düğmeleri kullanarak konumunu ayarlayın hizala(Hizalama). Ortaya çıkan görüntü, üst üste binen üç nesne ile tek bir katman içerecektir (Şekil 46). Planlanmış etkinlikler metin nesnesi bu nedenle kolaylık olması için adını şu şekilde değiştirin: Metin nesneye çift tıklayarak ve yeni bir ad girerek. Katman adını aynı şekilde değiştirin Katman 1'den Katmana(şek. 47).

Olay işleme, JavaScript prosedürlerinin kullanıldığını varsayar, bu nedenle bu prosedürleri açıklayan bir dosya eklemeniz gerekir. Events.js olarak adlandırılır ve Adobe Illustrator'ı yüklediğinizde Sample Files \ Sample Art \ SVG \ SVG klasöründeki diske kaydedilir. Events.js dosyasını bağlamak için şu komutu kullanın: JavaScript Dosyaları SVG Etkileşimi(şek. 48). Ardından, düğmeye basmanız gerekir Ekle(Ekle) ve istediğiniz dosyayı sabit diskinizde bulun. Adı alanda göründüğünde URL(şek. 49), düğmesine tıklayın Tamamlandı(Oturumu Kapat).

Pirinç. 48. JavaScript Dosyaları komutunu seçme

Bundan sonra, nesne için fare olaylarına tepkiyi tanımlamanız gerekir. Metin... Alanda Metin nesnesini seçin Etkinlik(Etkinlik) paletleri SVG Etkileşimi etkinlik seç fare üzerinde elemColor (evt, "Metin", "# 3333FF")- bu, fare nesnenin üzerindeyken Metin rengi maviye döner (şek. 50). Fare aktif bölgeden ayrıldıktan sonra metin renginin siyaha dönmesi için başka bir etkinlik oluşturmanız gerekecektir. fare çıkışı- alanında seçin Etkinlik(Etkinlik) paletleri SVG Etkileşimi... Ardından eylem satırına metni girin elemColor (evt, "Metin", "# 000000")- bu siyah dönecektir (şek. 51).

Pirinç. 51. Metin nesnesi için SVG Etkileşim paletinin son görünümü

Oluşturulan rollover'ı komutla bir SVG dosyası olarak kaydedin Dosya => Farklı kaydet(Dosya => Dosya tipi biçim SVG ve ardından SVG dosyasını kaydetme seçeneklerini Şekil 1'de gösterildiği gibi yapılandırın. 52. Kaydettikten sonra, klasik rollover durumunda olduğu gibi iki değil, SVG uzantılı tek bir dosya alacaksınız - bu durumda Primer5.svg dosyası alındı ​​(Primer5 klasörü). Ancak, rollover'ın gerçekten çalışması için JavaScript prosedürlerinin açıklamasını içeren Events.js dosyasını SVG dosyasının bulunduğu klasöre de kopyalamanız gerekir. Bundan sonra, rollover'ın çalışıp çalışmadığını kontrol edebilirsiniz - sonuç Şekil 1'de gösterilene benzeyecektir. 53.

SVG animasyonu

SVG formatı, animasyonu iletmek için de kullanılabilir. Fareyi ilgili grafik nesnesinin üzerine getirdiğinizde ekranda görünecek ve fare etkileşimli öğeden kaldırıldığında kaybolacak basit bir animasyon öğesi oluşturmaya çalışalım (bu durumda şirket hakkında bilgi olacaktır).

Şekil 2'de gösterilene benzer bir dizi grafik ve metin nesnesi oluşturalım. 54. Paletteki bir sonraki nesnenin adına sırayla tıklayarak oluşturulan tüm nesneleri uygun bir şekilde yeniden adlandırın Katmanlar ve istenen adı girerek (şek. 55). Lütfen, Şekil 2'de vurgulananların olduğunu unutmayın. 56 nesne - Metin1, Metin2, Metin3 ve yol1- her zaman görünür olacak ve diğerleri - yalnızca fareyi nesnenin üzerine getirdiğinizde Metin 1.

Pirinç. 54. Resmin orijinal görünümü

Komutu kullanarak JavaScript prosedürlerinin açıklamasını içeren Events.js dosyasını ekleyin JavaScript Dosyaları(JavaScript dosyaları) paletten SVG Etkileşimi düğmesine basarak Ekle(Ekle) sabit diskinizde istediğiniz dosyayı seçip düğmesine tıklayarak Tamamlandı(Oturumu Kapat).

Bir nesne için fare olaylarına tepki tanımlama Metin 1... nesneyi seçin Metin, tarlada Etkinlik(Etkinlik) paletleri SVG Etkileşimi etkinlik seç fare üzerinde ve aşağıdaki satıra metni girin elemShow (evt, "Metin4"); elemShow (evt, "Yol2")... Sonuç olarak, fare nesnenin üzerindeyken Metin 1 nesneler görünür hale gelecek Metin4 ve yol2... Bir olay meydana geldiğinde birden fazla eylem gerçekleştirilecekse, bunların ";" işareti ile belirtilmesi gerektiğini lütfen unutmayın. Ardından olay üzerinde benzer bir işlem gerçekleştirin fare çıkışı bunun için metin girerek, bu da nesneleri gizlemek anlamına gelir (Şek. 57).

Sonucu komutuyla bir SVG dosyası olarak kaydedin Dosya => Farklı kaydet(Dosya => Farklı Kaydet) alanında seçerek dosya adını belirterek Dosya tipi SVG formatını seçin ve ardından SVG dosyasını kaydetme seçeneklerini Şekil 1'de gösterildiği gibi yapılandırın. 58. Kaydettikten sonra Primer6.svg dosyasını (Primer6 klasörü) alacaksınız. Events.js dosyasını bu dosyanın bulunduğu klasöre kopyalamayı unutmayınız. Bundan sonra cos çalıştırırsanız bu dosya, ardından Şekil 1'de gösterilen sonucu göreceksiniz. 59. Bu neredeyse ihtiyacınız olan şey. Planlarımıza dahil olmayan tek şey nesnelerin ilk görünüşüydü. Metin 4 ve Yol açılışta 2. Bu kusurdan kurtulmak için her iki veri nesnesini de aynı anda seçin ve onlar için bir eylem oluşturun. elemHide (evt, "Metin4"); elemHide (evt, "Yol2") etkinlikte aşırı yük(şek. 60). Dosyayı tekrar kaydedin ve nesnelerin şimdi olduğundan emin olun. Metin4 ve yol2 yalnızca fareyi bir nesnenin üzerine getirdiğinizde görünür Metin 1.

GIF animasyonu

Animasyonlu gifler de dahil olmak üzere Web animasyonu olmadan herhangi bir Web sayfası düşünülemez. Bunları oluşturma seçeneklerinden biri, diğer şeylerin yanı sıra katmanlardan animasyonlar oluşturmanıza olanak tanıyan Adobe ImageReady uygulamasını kullanmaktır. Bu durumda, çok katmanlı görüntünün kendisi şu şekilde hazırlanabilir: farklı uygulamalar Adobe Illustrator dahil.

Paletteki öğelere dayalı animasyon oluşturmak çok kolaydır Semboller(Semboller) komutla açılır Pencere => Semboller(Pencere => Semboller) veya komut kullanılarak açılabilen sembol kitaplıklarından birinden Pencere => Sembol Kitaplıkları(Pencere => Sembol Kitaplıkları).

Örnek olarak, herhangi bir sembol nesnesinin boyutunu büyütmeye çalışacağız; nesne büyütme işleminin temel aşamaları ayrı katmanlarda ayarlanmalıdır. İlk olarak, sembol nesnelerini üst üste yerleştirin ve ardından, örneğin Şekil 2'de gösterildiği gibi sonraki her nesnenin boyutunu artırın. 61. Sonuç olarak, palette Katmanlar birçok nesne içeren bir katman oluşturulacaktır (Şekil 62). Bu görüntüyü doğrudan PSD formatına aktarırsanız, yalnızca bir katman olduğu için bu çalışmaz ve elbette PSD dosyasını ImageReady programında açtığınızda, yalnızca bir katman olacaktır. Bu nedenle, öncelikle nesneleri farklı katmanlara yerleştirmelisiniz. Bu yapılabilir Farklı yollar- en kolay yol, önce katmanı seçmektir Katman 1 Katmanlar paletinde ve komutu kullanın Katmana bırak(Katmanlara bırakın). Sonuç, nesnelerin her birinin kendi katmanına hareketi olacaktır, ancak hepsi katmanda iç içe olacaktır. Katman 1... Bu nedenle, tüm iç içe katmanları, katmanın üzerinde olmaları için Katmanlar paletinin en üstüne manuel olarak sürüklemeniz gerekecektir. Katman 1 ve sonra boş katman Katman 1 sadece çıkarın (şek. 63). Komutu kullanarak görüntüyü PSD formatına aktarın Dosya => Dışa Aktar(Dosya => Dışa Aktar) şek. 64.

Oluşturulan PSD dosyasını ImageReady'ye yükleyin (Şekil 65 ve 66). Palet menüsünü aç AnimasyonKatmanlardan Çerçeveler Yapın(Katmanlardan çerçeveler oluşturun). Sonuç olarak, her biri kendi katmanına karşılık gelen beş çerçeve ve palet penceresi oluşturulacaktır. Animasyonşekil şek. 67.

Bundan sonra, oluşturulan karelerin her birinin süresini ayarlayın - bu durumda tüm karelerin süresi 0,2 s olarak ayarlanır. Ardından optimize edilmiş animasyonu komutla kaydedin Dosya => Optimize Edilmiş Kaydet(Dosya => Optimize Edilmiş Kaydet). Elde edilen sonuç Şekil 2'ye benzeyebilir. 68.

ImageReady'de animasyona dönüştürülmesi kolay olan boşlukları almak daha da uygundur, işlevleri kullanın Canlı karışımlarİllüstratör yazılımı. Illustrator ve ImageReady'nin bu birleşik kullanımı, GIF animasyonları oluşturma sürecini önemli ölçüde hızlandırır.

Örneğin, iki keyfi çok renkli nesne çizin ve ardından bunları uygun parametrelerle karıştırın (Şek. 69). Görüntü tek bir katmanda olduğu için bu dosyayı doğrudan animasyon oluşturmak için kullanmak mümkün değildir (Şekil 70). Bu nedenle, öncelikle karışım nesnesinin her bir öğesini ayrı bir katmana yerleştirmeniz gerekir. Bunun için pencerede Katmanlarçizgiyi vurgula , sağ üst köşesindeki siyah oka tıklayarak palet menüsünü etkinleştirin ve komutu seçin Katmanlar Sırasına Bırak(Sırasıyla katmanlara dönüştürün) (Şek. 71). Anahtarı basılı tutmak Vardiya, oluşturulan katmanları seçin ve bunları katmanın üzerine yerleştirin Katman 1 ve ardından katmanın kendisini silin Katman 1 sepete hareket ettirerek - sonuç olarak, katman paleti Şekil 1'deki ile aynı formu alacaktır. 72.

Pirinç. 70. Katmanlar penceresinin ilk durumu

Oluşturulan dosyayı komutla PSD formatına aktarın Dosya => Dışa Aktar(Dosya => Dışa Aktar). Oluşturulan PSD dosyasını ImageReady programında açın (şek. 73). Lütfen Illustrator'da oluşturulan tüm katmanların katmanlar penceresinde (Şekil 74) ve pencerede görüneceğini unutmayın. Animasyonşimdiye kadar sadece bir kare olacak.

Palet menüsünü etkinleştir Animasyon paletin sağ üst köşesindeki siyah oka tıklayarak ve komutu seçin Katmanlardan Çerçeveler Yapın(Katmanlardan çerçeveler oluşturun) - sonuç olarak, bu örnekte beş çerçeve oluşturulacak ve palet penceresi AnimasyonŞekildeki şekle göre alınacaktır. 75. Düğmeyi basılı tutarken tüm kareleri seçin. Vardiya ve uygun kare süresini ayarlayın - bu örnekte, karelerin her biri için 0,2 s'lik aynı süre alınır. Ardından optimize edilmiş dosyayı komutla kaydedin Dosya => Optimize Edilmiş Kaydet(Dosya => Optimize Edilmiş Kaydet) listede ayarlayarak Dosya tipi seçenek Yalnızca Görüntüler (* .gif)... Animasyon Şekil 2'ye benzeyecektir. 76.

Çok daha ilginç olanı, hareket etmek değil, karışım nesnelerinin düzgün bir şekilde yeniden boyutlandırılmasıdır. Örneğin, önceden oluşturulmuş karışım geçişini kullanabilirsiniz. Bu durumda, her bir karışım geçiş elemanı için ayrı katmanlar oluşturduktan sonra, butonları kullanarak tüm nesneleri birbirinin üzerine yerleştirin. Yatay hizalama merkezi(Yatay merkez hizalaması) ve Dikey Hizalama Merkezi(Dikey merkez hizalama) paleti hizala(şek. 77).

Oluşturulan dosyayı PSD formatına aktarın ( Dosya => Dışa Aktar- Dosya => Dışa Aktar) ve oluşturulan PSD dosyasını ImageReady programında açın (şek. 78). Animasyon kareleri oluşturun ( Katmanlardan Çerçeveler Yapın- Katmanlardan çerçeveler oluşturun) ve bunlar için uygun bir süre seçin (şek. 79). Ve sonra, animasyonu daha etkili hale getirmek için, mevcut kareleri kopyalayın, ancak ters sırada - böylece görüntü önce artar, sonra azalır ve bir daire içinde devam eder (Şek. 80). Ardından optimize edilmiş dosyayı kaydedin ( Dosya => Optimize Edilmiş Kaydet- Dosya => Optimizasyonla kaydet). Ortaya çıkan animasyon Şekil 2'de gösterilmektedir. 81.

Pirinç. 80. Kareleri çoğalttıktan sonra Animasyon penceresinin durumu

Pirinç. 81. Bitmiş animasyon

Herkese merhaba! Bugün programın yeteneklerini açıklamaya çalışacağım Adobe illüstratör sifonun yetenekleriyle karşılaştırmak. Bu, programın kemiklere göre küresel bir analizi olmayacak, daha ziyade bu programda keşfettiğim bazı ilginç çiplerin bir açıklaması olacak. Her şeyi tek bir gönderiye koymak için incelerken bilgileri parça parça topladım. Hemen itiraf etmeliyim ki, çok deneyimli bir illüstratör kullanıcısı değilim, sadece son altı aydır çizimde kullanıyorum (bundan önce her şeyi flaşla boyadım). Birçok kişi, illüstratörün karmaşık olduğundan, her zaman sezgisel olarak net olmadığından şikayet eder. Bir dereceye kadar, flaştan sonra bu programın zor olduğuna katılıyorum. Ancak buradaki asıl şey bırakmak değil, çalışmaya devam etmektir. Ve birkaç hafta sonra düşünce ortaya çıkıyor, daha önce onsuz nasıl yapabilirim!

Yani, illüstratör hakkında sevdiğim şey ve kendim için bulduğum şey Flash'ta değil.
1. En basit ama aynı zamanda gerekli olanla başlayacağım. Nesneleri bir daire içinde bir anda düzenlemeye çalışın. Daha önce Deko Aracı, ancak kaldırıldı, görünüşe göre gereksiz olarak kabul edildi. Kalemle yapmanın daha eğlenceli olacağına karar verdik. Illustrator'ın şu işlevi vardır: Efekt - Deforme Et ve Dönüştür - Dönüştür.

Her şey hızlı ve basit, değerler (nesneler arasındaki mesafe, kopya sayısı) ayarlarda kendimiz tarafından belirlenir.

2. Zig-zag

Daha da basit, ama yine de faydalı bir şey. Önemsiz görünebilir, ancak bir anda elle çizmeniz gerekir, bir illüstratörde bu birkaç saniye meselesidir.

3. Nesnelerin deformasyonu (Çözgü)

Bir çırpıda böyle bir şey yok. Aşağıdaki örnekte basit şekilleri deforme etmenin sadece 2 yolunu gösterdim (Efekt - Çarpıtma - Yay / Balık). Aslında programın son sürümünde bunlardan 15 tane var.

4. Köşelerin otomatik yuvarlanması (Yuvarlak Köşeler)

Bunu manuel olarak yapabilirsiniz: bir grafik nesnesinde, seçildiğinde köşede (tüm gözlerde) beyaz bir nokta ve yuvarlak bir çizgi sembolü belirir. Mouse ile çekiyoruz, zevkinize göre ayarlıyoruz.

Ancak bu yalnızca kalem çizgisi biraz farklı olan şekiller için geçerlidir - yuvarlama efektini uygulayın ( Efekt - Stilize - Yuvarlak Köşeler). Çıktıda da aynı sonucu alıyoruz.

5. Pürüzlülük (kabalaşma)

Efekt basit şekillere uygulanır ( Efekt - Deforme Et ve Dönüştür - Pürüzlendir). Çıktıda, düşük poli 3D modele benzeyen bir şey elde ederiz. Bence harika :) Ve en önemlisi - çok basit.

6. Büzme ve Şişkinlik(Çekme ve Şişkinlik)
Aşağıdaki resimde bir örnek:

7. Formun Genişletilmesi (Ofset Yolu)

Flash'ın Genişletilmiş Dolgu işlevi vardır; illüstratörün aksine kurşun kalem çizgileriyle çalışmaz.

8. Fırçalar (Resim Fırçası, Desen Fırçası, Saçılma Fırçası)
Örneklerle aşağıdaki resme bakın:

9. Doku Fırçası

Illustrator ayrıca hakkında yazdığım birçok doku fırçasına ve bunların nasıl göründüklerine de sahiptir. Yeni sürüm floş -. Adobe Animate'te fırça kullanmanın son derece yavaş olduğu fark edildi. Bu kadar:(

10. Bunun basit bir numara olup olmadığından emin değilim, ancak adı komik olan bir fırçaya odaklanmak istiyorum. kabarcıkFırçalamak... Araç kutusunda bulunan, kullanımı çok güzel bir fırça. Bir sürü ayarı var, normalden daha çok seviyorum. Faydalarını kelimelerle anlatmak zor, bir kere denemekte fayda var.

10. Izgaraya Böl

Ayrıca, bir şekli eşit parçalara ayırmanıza izin veren Izgaraya Böl işlevi (Nesne-Yol-Izgara Böl) kullanışlıdır. Bu bize neyi hatırlatıyor? Bu doğru - pencereler yüksek bir binada. Bana gelince, örneğin şehir manzaraları çizmek için harika bir şey;)

Illustrator'da, muhtemelen ilk sürümünden bu yana tanıtılan başka bir kullanışlı araç. Örneğin ahşap dokular oluşturmak için kullanılabilir:

12. Taşı (sağ - Dönüştür - Taşı)

Bir nesnenin belirli bir mesafe ile yer değiştirmesi. İstenirse, seçilen nesneden yatay / veya dikey olarak istenen mesafeye yerleştirilecek olan hemen bir kopya oluşturabilirsiniz. Flash'ın önceki bir sürümünde bunu yapan bir eklenti vardı. bu işlev... Maalesef adını hatırlamıyorum.

Illustrator'da kesintisiz desenler oluşturmak çok uygundur ( Nesne-Desen-Yap). Yaratılışta nasıl çılgınca sofistike olduğumu hatırlıyorum. CC 2015'in illüstratör versiyonunda, her şey otomatikleştirilmiştir, bir dizi ayar, deseni düzinelerce varyasyonda şekillendirmeye yardımcı olur ve sadece birkaç grafik öğesi bulunur. Programın önceki sürümlerinde, şimdiye kadar Flash'ta olduğu gibi her şeyin manuel olarak yapılması gerekiyordu.

(Not - bir desen, ayrıştırma işlevi kullanılarak vektör düzenlenebilir bir nesne haline getirilebilir ( Nesne - Görünümü Genişlet).

14. Nesne Mozaiği

Mevcut bir resme dayalı bir renk paleti oluşturma. Beğendiğimiz resmi hasta (Open) içine aktarıyoruz, sonra Nesne - Nesne Mozaiği Oluştur... Ayarlarda, yükseklik ve genişlikte bölünme sıklığını belirtiyoruz.

Ve çıktıda şunu elde ederiz:

15.Karışım

Degradeler oluşturmak için kullanılır. Örneğin resimdeki gibi adım adım geçişler oluşturabilirsiniz. Sık kullandığımı söylemeyeceğim ama birinin işine yarayabilir. Basit arka plan resimleri oluşturmak için kullanılabileceğini düşünüyorum.

Ayrıca araç, nesneleri klonlamak için kullanılabilir. İki nesneyi birbirinden belirli bir mesafeye yerleştirin ve Karışım Seçeneklerini uygulayın, adım sayısını (klonlanan nesne sayısı) seçin.

16. Araç Oluşturma Şekil Aracı.İlkellerle çalışmak için çok kullanışlı bir şey. Bir anda, bana daha az uygun göründü.

Alt tuşunu basılı tutup seçilen segmentlere tıklamak - segmentleri silin. Fareyi seçili birkaç alanın üzerine sürüklersek - bağlantılar.

Eklenti, otomatik olarak kesmeye, birleştirmeye vb. yardımcı olan bir araçtır. vurgulanan formlar Bana gelince, çok uygun değil, daha sık kullanıyorum YapıŞekilAlet.

(çalışma yüzeyleri)

18.Özel Araç Paneli

Kendi araç çubuğunuzu oluşturma, gereksiz olanları atma ve yalnızca kullandıklarınızı seçme yeteneği.

Flash'ta çalışma yüzeyleri, yani sahneler ( Sahne 1,2,3 ..) ayrı olarak bulunur ve aralarında geçiş yapmanız gerekir (Shift + F2). Illustrator'da hepsini gözünüzün önüne yerleştirebilirsiniz. Aynı çizimin birkaç versiyonunu yaptığınızda, karşılaştırma için tüm seçeneklerin gözünüzün önünde olması uygundur.

19. Grafik Stilleri ile İzometri

Ve sonuncusu, 1 tıklamada (veya daha doğrusu 3 tıklamada, çünkü 3 tarafımız olduğu için) kullanmadan izometri oluşturmaktır;) grafik stilleri kullanarak ( Grafik Stilleri). Bu nasıl yapılır, bir dahaki sefere imzalayacağım.

Illustrator'ın flash ile ortak yanı vardır - bir nesneyi bir sembole kaydetme yeteneği ve bu sembol bir flash'a kolayca aktarılabilir (bir .ai dosyasını flash'ta açın, İçe Aktar - Aşamaya aktar).
Illustrator'daki bir sembol, Flash'takiyle aynı özelliklere sahiptir.
Ve sonunda, illüstratörde, bence flaştan daha düşük olduğunu yazacağım. Evet, evet ve böyle bir şey var. Ve bu doldurma aracıdır ( Boya kovası). Hastalıkta ne kadar alışmaya çalışsam da flaşta daha rahat oluyor.
Notlarım işinize yaradıysa veya kendinizden bir şeyler eklemek istiyorsanız - yorumlara hoş geldiniz! Hepinize iyi şanslar;)