Şimdi görevi biraz karmaşıklaştıralım - hadi animasyonlu bir Flash banner yapalım. Tabii ki, bu durumda tam teşekküllü bir Flash animasyonundan bahsetmeye gerek yok - bunun için özel paketler var. Ancak basit, amatör bir video oluşturmak için Illustrator'ı da kullanabilirsiniz.

Adobe Illustrator'da, animasyon geliştirme programları için tipik olan zaman çizelgesi gibi özel araçlar ve arabirim araçları yoktur. Ancak bir incelik var - katmanlar çerçeve olarak kullanılabilir.

Yalnızca metin içeren bir afiş oluşturun.

1. Sembolleri komutla gruplandırın Nesne › Grup(Nesne › Grup).
2. Bir sonraki görev, kontur nesnelerini yazı tipi karakterlerinden yapmaktır, aksi takdirde doğru katman oluşumu çalışmayacaktır. Bunu yapmak için bir grup seçin ve Yazın › Ana hatlar oluşturun(Yazı Tipi › İzleme).
3. Bundan sonra palet menüsünü açın Katmanlar(Katmanlar) palet üzerinde ok şeklindeki butona tıklayarak (Şekil 8.11).

Pirinç. 8.11. Katmanlar paleti menüsü

Bu menüdeki komutla ilgileniyoruz Katmana Bırak (Sıra)(Katmanlara Dönüştür (Sıralı)), her bir nesneyi yeni bir katmana çevirir. Lütfen komutu uygularken grubun seçilmesi gerektiğini unutmayın. grup, katman değil Katman 1.

Palet nasıl görünmeli Katmanlar(Katmanlar) yürütmeden sonra Katmana Bırak (Sıra)(Katmanlara Dönüştür (Sıralı)), şek. 8.12.

Pirinç. 8.12. Katmana Bıraktıktan Sonra Katmanlar paleti (Sıra)

Bu, hazırlığı tamamlar, kullanarak kaydedebilirsiniz. Web için Kaydet(Web için Kaydet) SWF'ye. SWF Flash teknolojilerine dayalı ana grafik formatıdır. Bunun Flash formatı olduğunu söylemek daha doğru olur (Şekil 8.13).

Muhtemelen, bugün tüm kullanıcılar Flash'a az çok aşinadır. Şu anda İnternet'teki en yaygın animasyon formatıdır ve multimedya web sayfalarının büyük çoğunluğunu oluşturmak için kullanılır.

Tabii ki, Flash'ın onda biri bile Adobe Illustrator'da uygulanmaz, çünkü program bunun için tasarlanmamıştır. Ancak, içinde statik bir resim veya basit bir animasyon yapabilirsiniz.

Pirinç. 8.13. SWF formatı için optimizasyon ayarları

Aşağıdaki ayarlar vardır.

• Sadece oku(Sadece okuma). Kutuyu işaretlerseniz, dosya artık herhangi bir programda düzenleme için açılamayacak şekilde yazılacaktır. Bu, bir yandan dosyaların boyutunu küçültür, diğer yandan telif haklarınızı korur.
• Etiketli ayar 1. Kaydetme türünü belirten parametre - görüntü veya animasyon.
• seçeneği seçerseniz AI Dosyasından SWF Dosyasına(Illustrator dosyasından SWF dosyasına), görüntü, Illustrator'da çalışırken tam olarak ekranda gördüğünüz gibi statik bir görüntü olarak kaydedilir.
• Katmanlardan SWF Çerçevelerine(Katmanlardan SWF Çerçevelerine), çerçeve olarak işlenecek olan mevcut katmanları canlandırmanıza olanak tanır. Bu seçeneği seçmemiz gerekiyor.
• Eğri Kalitesi(Eğrilerin kalitesi). Orijinal görüntünün eğriler dosyasını tekrarlayan eğrilerin doğruluğu. Bu ayarın azaltılması, özellikle küçük ayrıntılar alanında kaliteyi önemli ölçüde düşürür, ancak dosya boyutunu küçültür. Bizim durumumuz için en uygun değer "7" dir.
• kare hızı(Çerçeve gecikmesi). Kare hızı ve sonuç olarak animasyon hızı. Efektin doğru olması için saniyede en fazla 4 kare ayarlayın.
• döngü(Tekrar et). Animasyonu birden çok kez oynatın. Tekrar eden bir döngünün önemli olduğu animasyonlar için uygundur. Banner bu türe aittir.

Adobe Illustrator ve After Effects
İçe aktarma ve basit animasyon

Merhaba. Bugün After Effects'te basit bir animasyonu inceliyoruz.

Kaynaklar: Adobe Illustrator CC
Adobe After Effects CC

Illustrator'da çizim yaparak başlayalım.

Çiziyoruz
1) Arka plan olarak sarı bir Dikdörtgen çizin

Şekil 1 - Dikdörtgen

2) Bir Daire çizin ve bir degrade ile doldurun
Daire üzerinde biraz çalışalım:
- konturdaki alt noktayı kaldırın, bir yay elde ederiz;
- yayın altını kapatarak düz bir çizgi çizin, yarım daire elde ederiz

Şekil 2 - 1) daire çizin; 2) gradyan; 3) noktayı sil

3) Bir Dikdörtgen çizin ve bir kopyasını alın
- bir gri dikdörtgen;
- başka bir koyu gri dikdörtgen
4) Işın sayısını ayarlayarak bir yıldızdan bir Üçgen çizin - 3

Şekil 3 - 1) düz ışık; 2) düz karanlık; 3)üçgen

5) Kalem ve basit şekillerle bir kedi çizin

Şekil 4 - 1) kafa; 2) boyun; 3) vücut; 4) bacak; 5) kuyruk

Ve şimdi en ANA an
Resimleri şu şekilde katmanlara dağıtalım (harekete geçirilecekler - ayrı bir katmanda):

Şekil 5 - tüm resimler (kırmızı işaretli önemli katmanlar)

Her şey, şimdi kurtarıyoruz.
Kaydet ayarlarına bakalım

Şekil 6 - Kaydet

Ve şimdi bir sonraki aşama. KapatAdobe Illustrator ve After Effects'i açın.

After Effects'e Aktar
Dosya - İçe Aktar - Dosya - kayıtlı dosyamızı seçin illüstratör.
Illustrator'dan katmanları içe aktarmayı seçelim, çekim koyarsak, birleştirilmiş katmanlara sahip bir görüntü elde edeceğiz, ancak buna ihtiyacımız yok.

Şekil 7 - Kompozisyon Olarak İçe Aktar

Hepsi ithal.
Şimdi elimizde ne olduğuna bir bakalım. Kompozisyona çift tıklayın , ne açılır ve katmanları görürdük (her şey doğru yapılırsa, birkaç katman olacaktır). Bunu anladık, resme bakın

Şekil 8 - Açık kompozisyon

Ve şimdi bugün burada olduğumuz şey - Animasyon.

Animasyon After Effects
Arkasında Kaydır Aracı (kısayol - Y) ile üst kısmındaki oktaki pivot noktasını ayarlayın. Sadece bir nokta alın ve istediğiniz yere taşıyın. Sonuç olarak böyle olacak..

Şekil 9 - Pan aracı ve Katmanlar

İşte bu, şimdi animasyon için katmanlara geçelim.
Bir Arrow katmanına ve bir Head_cat'e ihtiyacımız var.
Ok ile başlayalım.
Listeyi genişletin, saati bulun ve tıklayın. Böylece ilk noktayı sıfır saniyeye koyuyoruz. Toplamda, animasyon 2 saniye sürecektir.
Yani yapmanız gereken ayarlar bunlar (toplam 3 puan koyacağız)

ikinci	0	1	2
	+66	- 70	+66

Bu nasıl görünecek:

Şekil 10 - Döndürme oku

Şimdi kedinin kafasını canlandıralım.
head_cat'i genişletin ve bulun konum.
4 puan olacak.
Geri kalanına dokunmadan sadece son koordinatı değiştirecektir.

ikinci	0.1	0.17	1.12	2.0
konum	689.3	729.3	729.3	689.3

Resime bakalım.

Şekil 11 - Konum başlığı

Yani animasyonun mantığı şu şekildeydi. Ok sağa sola sallanır, kediye yaklaşır yaklaşmaz kafasını içine çeker, biraz bu pozisyonda kalır ve sonra yerine geri döner.

son aşama

Üretim
Çalışmanızdan bitmiş bir ürün yaratmanız gerekiyor.
Menüye git - Oluşturma Sırasına Ekle
Render paneli açılır ve Çıktı Modülünde (iki tıklama) çıktı biçimini seçin. *.mov aldım

Şekil 12 - Oluşturma

RENDER butonuna tıklayın ve sonucu alın (yolu belirtmeyi unutmayın).
Bu kadar.

Flash (SWF) dosya formatı vektör grafiklerine dayanır ve web için ölçeklenebilir, kompakt grafiklere yöneliktir. 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 sitesinde kullanmak üzere ayrı kareler olarak dışa aktarabilirsiniz. Ayrıca tanımlayabilirsiniz semboller animasyonun boyutunu küçültmek için bir 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 olarak kaydetmeye hazırlarken aşağıdaki yönergeleri aklınızda bulundurun.

Device Central ile, Illustrator resminin çeşitli el cihazlarında Flash Player'da nasıl görüneceğini görebilirsiniz.

Illustrator grafiği ekleme

Illustrator'da oluşturulan bir grafik nesnesi hızlı, kolay ve kolay bir şekilde kopyalanabilir ve bir Flash uygulamasına yapıştırılabilir.

Bir Illustrator grafiğini bir Flash uygulamasına yapıştırdığınızda, aşağıdaki nitelikler korunur.

Konturlar ve şekiller

• strok kalınlığı

  Gradyanların tanımları

  Metin (OpenType yazı tipleri dahil)

  İlgili resimler

• Karışım Modları

Ayrıca, Illustrator ve Flash, bir grafik yapıştırırken aşağıdaki özellikleri destekler.

Bir 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 engelleme) korur.

RGB dışındaki Illustrator renk biçimleri (CMYK, gri tonlamalı ve özel biçimler) Flash tarafından RGB'ye dönüştürülür. RGB renkleri olağan şekilde eklenir.

Illustrator resmini içe aktardığınızda veya yapıştırdığınızda, belirli efektleri (metne göre gölge dökümü gibi) Flash filtreleri olarak kaydetmek 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ıyla aynı kalite ve sıkıştırmaya sahiptir.

Dışa aktardığınızda, optimum çıktı için önceden tanımlanmış çeşitli stiller arasından seçim yapabilir ve birden çok çalışma yüzeyini nasıl kullanmak istediğinizi, sembollerin, katmanların, metnin ve maskelerin nasıl dönüştürüleceğini belirtebilirsiniz. Örneğin, Illustrator sembollerini film veya grafik olarak dışa aktarmayı veya Illustrator katmanlarından SWF sembolleri oluşturmayı seçebilirsiniz.

Illustrator Dosyalarını Flash Uygulamasına İçe Aktarma

Illustrator'da eksiksiz bir mizanpaj oluşturmak ve ardından bunu tek adımda Flash'a içe aktarmak için, resminizi Illustrator yerel (AI) biçiminde kaydedebilir ve Dosya > Çalışma Alanına İçe Aktar komutlarını kullanarak yüksek doğrulukla Flash'a içe aktarabilirsiniz. Dosya" > "Kitaplığa Aktar".

Illustrator dosyası birden çok çalışma yüzeyi içeriyorsa, Flash İçe Aktarma iletişim kutusundan 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, tek bir katman olarak Flash'a içe aktarılır. Aynı AI dosyasından başka bir çalışma yüzeyi içe aktardığınızda, o ç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ırdığınızda olduğu gibi aynı öznitelikleri korur. Ayrıca, içe aktardığınız Illustrator dosyası katmanlar içeriyorsa, bunları aşağıdaki yöntemlerden birini kullanarak 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.

Animasyonla canlandırmak istediğiniz bir veya iki simgeniz var. Nereden başlayacaksın? Diyelim ki SVG dosyalarınız, Illustrator CC ve After Effects CC'niz var, ancak çözüm sizden kaçıyor.

Bu makalede, SVG dosyasını Illustrator'da hazırlama ve After Effects CC'ye içe aktarma dahil olmak üzere bir SVG dosyasını nasıl kolayca canlandırabileceğinizi göstereceğim. Ayrıca onu Shape Layers'a nasıl dönüştürebileceğinizi ve hareket ekleyebileceğinizi de anlatacağım. Son olarak, dışa aktarma ve oluşturma hakkında konuşalım.

Çalışmanın nihai sonucu.

Şimdi en ilginç kısma geçelim - görüntüleri nasıl canlandıracağınızı öğrenin.

Illustrator'da SVG dosyasını hazırlama

SVG dosyanızı Adobe Illustrator CC'de açarak başlayalım. Week Of Icons'ta ücretsiz olarak sunulan küçük bir araba ikonunu canlandıracağım.

Dosyayı açtıktan sonra tüm nesneleri gruplandırmamız ve katmanlara ayırmamız gerekiyor. Manuel olarak yapabilir veya kullanabilirsiniz Katmanlara Bırak (Sıra) süreci hızlandırmak için. Dosyayı After Effects'e aktarmadan önce, onu bir Illustrator dosya formatı olarak kaydetmemiz gerekiyor.

Değerli zamanı boşa harcamamak için Katmanlara Bırak (Sıralama) kullanarak nesnelerin grubunu çözebiliriz.

After Effects CC'de bir dosyayı içe aktarma ve düzenleme

Artık After Effects CC'ye aktarmaya hazırsınız. Klavye kısayolunu kullanalım Ctrl+I (Windows) veya Komut+I (Mac) iletişim kutusunu yüklemek için önemli dosya ya da git Dosya > İçe Aktar > Dosya… Aynı yerde hazırladığımız Illustrator CC dosyasını seçin ve tıklayın. içe aktarmak. Seçilen dosyanın adıyla küçük bir iletişim kutusu görünmelidir. Seçme kompozisyon adlı açılır listeden İçe Aktarma Türü.

Bir dosyayı içe aktarmanın daha hızlı bir yolu, proje panelinde bir sütun konumuna çift tıklamaktır.

Zaman Çizelgesi Panelinde yeni kompozisyonu göreceğiz. Üzerine çift tıklıyoruz. Artık adlarının solunda turuncu simgelerle Illustrator CC katmanlarını görmeliyiz.

İşe başlamadan önce, tüm bu katmanları dönüştürmemiz gerekiyor. şekil katmanları. hepsini seçmemiz gerekiyor Ctrl+A/Komut+A veya manuel olarak kullanarak Shift + Sol Fare. Bundan sonra katmana sağ tıklayın ve seçin Oluştur > Vektör Katmanından Şekiller Oluşturun.

Artık yeni katmanlar seçildiğine göre, bunları Illustrator CC katmanlarının üzerindeki panelin en üstüne sürükleyin ve ardından araya girmemeleri için Illustrator CC katmanlarını silin.

After Effects CC'de Illustrator CC Katmanlarını Şekil Katmanlarına Dönüştürme

Gerekli olmasa da her katmana uygun bir ad ve/veya renk vermemiz önemlidir. Bu, ana karelere odaklandıkça daha verimli çalışmamızı sağlayacaktır. Aşağıdaki örnekte, etiket renkleri, ilgili katmanların dolgularıyla aşağı yukarı eşleşir.

Şekil Katmanlarını uygun isimler, renkler, etiketler ve konumlarla etiketlemek çok pratiktir.

Ayarları yapılandırmak için klavye kısayolunu kullanın Ctrl+K/Komut+K veya Beste > Beste Ayarları… Kompozisyon Ayarlarından Genişlik, Yükseklik, Kare Hızı ve Süre için Genişlik, Yükseklik, Kare Hızı ve Süre'yi seçmemiz gerekiyor. Bu proje için animasyonu pürüzsüz tutmak için 60 fps seçtim.

Bu noktada her şey gitmeye hazır görünüyor ancak yapılması gereken bir şey daha var. Hareketleri kontrol edebildiğimiz ana katmanla senkronize olacak şekilde belirli katmanları birlikte gruplandırmamız gerekiyor. Bu yöntem denir ebeveynlik.

Birden çok katmana bir üst katman atamak için Kırbaç Seç'i kullanın.

Örneğimizde, ön cam, gövde parçaları, ahşap ve halatlar gibi daha az önemli katmanları (alt katmanlar) birincil gövde katmanına (ana katman) atadım. Bu, ana katmanı kullanarak tüm arabanın (tekerlekler hariç) konumunu ve dönüşünü kontrol etmemi sağladı.

Animasyon oluşturma

Arabanın bir kayaya çarpmasını ve biraz havada asılı kalmasını istedim. Ayrıca ağacın yukarı aşağı hareket etmesini ve gövdesini açmasını istedim. Taşı, arabayı ve tekerlekleri yaparak başladım. O zaman en büyük engeli aşmanın zamanı gelmişti - eylemi ağaca koymak. Bu yapıldıktan sonra, raf ve ipler gibi küçük detaylar üzerinde çalışmam gerekti.

Animasyonu açıklayan eskiz

İlk adım bir rock öğesi veya katmanı yapmaktı, ancak başka bir katman eklemek için Illustrator CC'ye geri dönmek yerine After Effects CC'de Kalem Aracını kullandım. Bu, hızlı bir şekilde küçük bir taş tasarlamamı sağladı.

Ah, güçlü Kalem Aracı!

Bagaj nispeten basit bir işti. Arabanın arkasına kurdum ve sol alt köşede bir bağlantı noktası yaptım. Pick Whip kullanarak, onu vücudun ana katmanına atadım. Sondan bir önceki adım, dönüş efektini vermekti, bu da arabanın zıplama anını daha gerçekçi hale getirdi.Lottie mobil kitaplığı ile birlikte Bodymovin.

not Illustrator CC ve After Effects CC dosyalarımı bulabilirsiniz.

Simge seti adresinden ücretsiz olarak indirilebilir.

Adobe Illustrator'da Şeffaf GIF aşağıdaki gibi yapılır. Dosya > Web ve Aygıtlar için Kaydet menüsüne 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, tüm sayfa varsayılan olarak optimizasyon penceresine giriyor ve bu genellikle gerekli değil. Bu nedenle, Görüntü Boyutu sekmesinde onay kutusunun işaretini kaldırın. Çalışma Yüzeyine Klip(Sayfaya sığdırmak için kırpın) ve Uygula düğmesini tıklayın.

Ardından, biçim seçim listesinde 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ğundan bir araç seçin damlalık(pipet).

Renkler iki şekilde tanımlanabilir. En kolay yol, rengi doğrudan görüntü üzerinde bir damlalık ile belirlemektir - bundan sonra renk, renk tablosunda koyu bir vuruşla vurgulanacaktır. Peki, tam olarak hangi rengin şeffaf olması gerektiğini biliyorsanız, ilgili renkli kutuya 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 için talimat vermeniz gerekir. Bunu yapmak için simgeye tıklayın Seçilen renkleri Şeffaf ile eşler(Seçili renkleri saydamlığa ekleyin). Şekilde bu buton daire içine alınmış ve kırmızı renk şeffaf olarak ayarlanmıştır. Görüntüde şeffaf bir alan görünecek 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ığı ayarlama yöntemi hakkında birkaç söz. Açılır menü bundan sorumludur. Şeffaflık Titreme Algoritmasını Belirtin, Rusça - Şeffaflık simülasyonu algoritması (aşağıdaki şekil). Dört seçenek vardır: Saydamlık Titreşimi Yok - algoritma yok, Yayılma Saydamlık Taklidi - dağınık algoritma, Desen Saydamlık Taklidi - desen tabanlı algoritma ve Gürültü Saydamlık Taklidi - 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. Pratikte ne uygulanmalı? Amaca ve görüntüye bağlı olarak. Bu seçeneği kullanmıyorum ve her zaman varsayılanı bırakıyorum - Şeffaflık Taklit Yok.

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