Illustrator'da basit bir animasyon nasıl yapılır. Adobe Illustrator CS için resimli öğretici. Eklentiyi indirin ve bağlayın
Animasyonla hayata geçirmek istediğiniz bir veya iki simgeniz var. Nereden başlarsın? Diyelim ki SVG dosyalarınız, Illustrator CC'niz ve After Effects CC'niz var ama çözüm sizden kaçıyor.
Bu makalede, SVG dosyasını Illustrator'da hazırlamak ve After Effects CC'ye aktarmak da dahil olmak üzere, bir SVG dosyasını kolayca nasıl canlandıracağınızı göstereceğim. Ayrıca Shape Layers'a nasıl dönüştürebileceğinizi ve hareket ekleyebileceğinizi de anlatacağım. Son olarak, dışa aktarma ve işleme 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.
SVG dosyasını Illustrator'da 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 simgesini canlandıracağım.
Dosyayı açtıktan sonra grubu çözmemiz ve tüm nesneleri 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 Illustrator dosya formatında kaydetmemiz gerekiyor.
Değerli zamanımızı boşa harcamamak için Katmanlara Bırak (Sıralama) seçeneğini 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+ı (Mac) iletişim kutusunu yüklemek için önemli dosya veya şuraya 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 İthalat Türü.
Daha hızlı yol bir dosyayı içe aktarma - proje panelindeki sütunun yerine çift tıklayın. 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 ile seçmemiz gerekiyor Ctrl+A/Komut+A veya manuel olarak kullanarak Shift + Sol Fare. Bundan sonra katmana sağ tıklayın ve seçin Yarat > Vektör Katmanından Şekiller Oluştur.
Artık yeni katmanlar seçildiğine göre, bunları Illustrator CC katmanlarının üzerindeki panelin üst kısmına sürükleyin ve ardından Illustrator CC katmanlarını, araya girmemeleri için silin.
Illustrator CC Katmanlarını After Effects CC'de Şekil Katmanlarına Dönüştürme Gerekli olmamakla birlikte, her katmana uygun bir ad ve/veya renk vermemiz önemlidir. Bu, anahtar karelere odaklanırken daha verimli çalışmamızı sağlayacaktır. Aşağıdaki örnekte, etiket renkleri aşağı yukarı ilgili katmanlarının dolgularıyla eşleşir.
Şekil Katmanlarını uygun adlar, renkler, etiketler ve konumlarla etiketlemek çok pratiktir. Ayarları yapılandırmak için klavye kısayolunu kullanın Ctrl+K/Komut+K veya Kompozisyon > Kompozisyon 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 projede animasyonu akıcı tutmak için 60 fps seçtim.
Açık şu an her şey hazır görünüyor ama yapılması gereken bir şey daha var. Belirli katmanları, hareketlerinin kontrol edebileceğimiz ana katmanla senkronize olması için bir arada gruplamamız gerekiyor. Bu yöntem denir ebeveynlik.
Birden fazla katmana bir üst katman atamak için Pick Whip'i kullanın. Örneğimizde, aşağıdaki gibi daha az önemli katmanlar (alt katmanlar) atadım: ön cam, gövde parçaları, ahşap ve ipler birincil gövde katmanına (ana katman). Bu, ana katmanı kullanarak tüm arabanın (tekerlekler hariç) konumunu ve dönüşünü kontrol etmeme izin verdi.
Animasyon oluşturma
Arabanın bir kayaya çarpmasını ve biraz havada asılı kalmasını istedim. Ayrıca ağacın aşağı yukarı hareket etmesini ve gövdeyi 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 askı ve halatlar gibi küçük ayrıntılar üzerinde çalışmam gerekiyordu.
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, sadece After Effects CC'de Kalem Aracını kullandım. Bu, hızlıca küçük bir taş tasarlamamı sağladı.
Oh, güçlü Kalem Aracı! Gövde nispeten basit bir işti. Onu arabanın arkasına yerleştirdim ve sol alt köşede bir bağlantı noktası yaptım. Pick Whip kullanarak onu vücudun üst katmanına atadım. Sondan bir önceki adım, dönüş efekti vermekti, bu da arabanın zıplama anını daha gerçekçi hale getirdi Bodymovin, Lottie mobil kitaplığı ile birlikte.
Not: benimkini bulabilirsin Illustrator dosyaları CC ve After Effects CC.
Simge seti adresinden ücretsiz olarak indirilebilir.
Son zamanlarda, web sitelerinde ve uygulamalarda SVG (Scalable Vector Graphics) grafiklerinin çeşitli animasyonları çok popüler hale geldi. Bunun nedeni, her şeyin en yeni tarayıcılar zaten bu formatı destekliyor. SVG için tarayıcı desteği hakkında bilgi burada.
Bu makale, hafif Jquery eklentisi Lazy Line Painter'ı kullanarak bir SVG vektörünü canlandırmanın en basit örneğini açıklamaktadır.
kaynakBu görevi tamamlamak ve tam olarak anlamak için temel HTML, CSS, Jquery bilgisi gereklidir, ancak yalnızca SVG'yi canlandırmak istiyorsanız gerekli değildir) Haydi başlayalım!
Ve böylece izlememiz gereken adımlar:
- Doğru dosya yapısını oluşturun
- Eklentiyi indirin ve bağlayın
- Adobe Illustrator'da Harika Bir Çizgi Sanatı Çizin
- Resmimizi Lazy Line Converter'a dönüştürün
- Ortaya çıkan kodu main.js'ye yapıştırın
- Tatmak için biraz CSS ekleyin
1. Doğru dosya yapısını oluşturun
Aşağıdaki resimdeki gibi parametreleri seçmeniz gereken Initializr servisi bu konuda bize 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 birlikte geldiği için Lazy Line Painter proje deposundan indirmemiz gereken arşivden sadece 2 dosyanın projemize aktarılması gerekmektedir. İlki 'jquery.lazylinepainter-1.1.min.js' (eklenti sürümü farklı olabilir) çıkan klasörün kök dizininde bulunur. İkincisi, example/js/vendor/raphael-min.js şeklindedir.
Bu 2 dosya js klasörüne yerleştirilir. Ve onları şu şekilde main.js'den önce index.html'mize dahil ediyoruz:
3. Adobe Illustrator'da harika bir anahat resmi çizin
- Anahat resmimizi Illustrator'da çizin (bunu yapmanın en kolay yolu Kalem Aracı'dır)
- Çizimimizin konturlarının kapanmaması gereklidir, çünkü etkimiz için bir başlangıca ve bir sona ihtiyacımız var.
- Dolgu olmaması gerekir
- Maksimum dosya boyutu 1000×1000 piksel, 40kb'dir.
- Nesnenin kenarlarına kırpalım Nesne>Çalışma Yüzeyleri>Çalışma Yüzeylerine Sığdır Sınırları
- SVG olarak kaydet (standart kaydetme ayarları uygundur)
Örneğin, ekteki simgeleri kullanabilirsiniz.
4. Resmimizi Lazy Line Converter'a dönüştürün
Simgenizi aşağıdaki kutuya sürükleyip bırakmanız yeterlidir.
Konturun kalınlığı, rengi ve animasyon 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ın.
Seçenekler:
strokeWidth — dış hat kalınlığı
strokeColor - anahat rengi
Süre parametresinin değerini değiştirerek (varsayılan 600) her vektörün çizim hızını da değiştirebilirsiniz.
6. Tatmak için biraz CSS ekleyin
index.html'den paragrafı kaldır
Selam Dünya! Bu, HTML5 Ortak Plakasıdır.
Bunun yerine animasyonumuzun yer alacağı bir blok ekliyoruz.
daha sonra daha hoş 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ı kaydet.
Şimdi index.html'yi modern bir tarayıcıda açın ve efektin keyfini çıkarın.
Not: çalışırken yerel makine animasyonun başlamasını birkaç saniye geciktirmek mümkündür.
Herkese selam! Bugün programın özelliklerini açıklamaya çalışacağım. Adobe Illustrator, floş yetenekleri ile karşılaştırarak. Bu, kemik programının genel bir analizi olmayacak, daha çok bu programda keşfettiğim bazı ilginç çiplerin bir açıklaması olacak. Hepsini tek bir gönderiye koymak için inceledikçe bilgileri parça parça topladım. Çok deneyimli bir illüstratör kullanıcısı olmadığımı hemen itiraf etmeliyim, sadece son altı aydır çizimde kullanıyorum (ondan önce her şeyi flaşla çizdim). Birçoğu, illüstratörün karmaşık olduğundan ve her zaman sezgisel olmadığından şikayet ediyor. Flash'tan sonra bu programın zor olduğuna bir dereceye kadar katılıyorum. Ancak burada asıl mesele bırakmak değil, çalışmaya devam etmektir. Ve birkaç hafta sonra, daha önce onsuz nasıl idare ettiğim düşüncesi ortaya çıkıyor!
Yani, illüstratör hakkında sevdiğim şeyler ve flash'ta olmayan kendim için bulduklarım.
1. En basitinden başlayacağım ama aynı zamanda gerekli. Flaşta nesneleri bir daire içinde düzenlemeye çalışın. önceden Deko Aracı, ancak kaldırıldı, görünüşe göre gereksiz görüldü. Elle yapmanın daha eğlenceli olacağına karar verdik. Illustrator'ın şu özelliği vardır: Efekt - Deforme Et&Dönüştür - Dönüştür.
Her şey hızlı ve basit, ayarlarda değerleri (nesneler arasındaki mesafe, kopya sayısı) kendimiz belirliyoruz.
2. Zikzak
Daha da basit ama yine de faydalı bir şey. Önemsiz görünebilir, ancak flaşta elle çizmeniz gerekir, illüstratörde bu saniyeler meselesidir.
3. Nesnelerin deformasyonu (Warp)
Flash'ta böyle bir şey yok. Aşağıdaki örnekte basit şekilleri deforme etmenin sadece 2 yolunu gösterdim (Effect - Warp - Arc / Fish). Aslında 15 tane var. En son sürüm programlar.
4. Otomatik köşe yuvarlama (Round Corners)
Manuel olarak yapılabilir: grafiksel bir nesnede, bir köşede (tüm köşelerde) seçildiğinde, beyaz bir nokta ve yuvarlak bir çizgi işareti görünür. Fareyi sürükleyin, zevkinize göre ayarlayın.
Ancak bu yalnızca, kalem çizgisi biraz farklı olan şekiller için geçerlidir - yuvarlama efektini uygulayın ( Efekt - Stilize Et - Yuvarlak Köşeler). Çıktıda da aynı sonucu alıyoruz.
5. Sertleştir
Efekt basit şekillere uygulanır ( Efekt-Bozulma&Dönüştürme-Kabalaştırma). Sonuç olarak, düşük poli 3D modellere benzeyen bir şey elde ediyoruz. Bence harika :) Ve en önemlisi - çok basit.
6 Büzüşme ve Şişkinlik(İçeri Çekin ve Şişirin)
Aşağıdaki resimde bir örnek:
7. Form uzantısı (Yolu Kaydır)
Flaşta Genişlet Dolgu (doldurma uzantısı) işlevi vardır, illüstratörden farklı olarak kalem çizgileriyle hiç çalışmaz.
8. Fırçalar (Resim Fırçası, Desen Fırçası, Dağılım Fırçası)
Örnekler için aşağıdaki resme bakın:
9.Doku Fırçası (Doku Fırçaları)
Illustrator'da hakkında yazdığım ve nasıl göründükleri hakkında yazdığım birçok doku fırçası da var. Yeni sürüm flaş - . Adobe Animate'te fırça kullanımının çok yavaş olduğu fark edildi. Bu kadar:(
10. Bunun bir numara olup olmadığından emin değilim ama komik bir isme sahip bir fırçaya odaklanmak istiyorum. damlaFırçalamak. Araç çubuğunda yer alan, kullanımı çok güzel bir fırça. Bir sürü ayarı var, normalden daha çok beğendim. Faydalarını kelimelerle anlatmak zor, bir kere denemekte fayda var.
10. Izgaraya Böl
Bir diğer kullanışlı özellik ise Split to Grid (Object-Path-Split to Grid) fonksiyonu, formu eşit parçalara ayırmanıza olanak tanır. Bu bize neyi hatırlatıyor? Bu doğru - çok katlı bir binadaki pencereler. Bana gelince, örneğin şehir manzaraları çizmek için harika bir şey;)
Bir diğeri kullanışlı araç, muhtemelen ilk sürümünden bu yana illüstratörde sunulmaktadır. Bununla, örneğin ahşap dokular oluşturabilirsiniz:
12. Taşı (sağ - Dönüştür - Taşı)
Bir nesneyi belirli bir mesafeye göre kaydır. İstenirse, seçilen nesneden istenen mesafeye yatay / veya dikey olarak yerleştirilecek bir kopyayı hemen oluşturabilirsiniz. Flash'ın önceki bir sürümünde bunu yapan bir eklenti vardı. bu işlev. Ne yazık ki adını hatırlamıyorum.
Illustrator'da kesintisiz desenler oluşturmak çok uygundur ( Nesne-Desen-Yap). . CC 2015'in illüstratör versiyonunda her şey otomatiktir, bir dizi ayar elinizin altında yalnızca birkaç grafik öğeyle düzinelerce varyasyonda bir desen oluşturmanıza yardımcı olur. Programın önceki sürümlerinde, şimdiye kadar flash'ta olduğu gibi her şeyin manuel olarak yapılması gerekiyordu.
(Not - model, ayrıştırma işlevi kullanılarak vektör düzenlenebilir bir nesne haline getirilebilir ( Nesne Genişletme Görünümü).
14. Nesne Mozaiği (Mozaik)
Mevcut bir görüntüyü temel alan bir renk paleti oluşturun. Beğendiğiniz resmi resme aktarın (Aç), ardından Nesne - Nesne Mozaiği Oluştur. Ayarlarda, bölme sıklığını yükseklik ve genişlik olarak belirtiyoruz.
Ve çıktıda şunu elde ederiz:
15.Harman (Karıştırma)
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öyleyemem ama birilerinin işine yarayabilir. Bana öyle geliyor ki basit arka plan resimleri oluşturmak için kullanılabilir.
Araç, nesneleri klonlamak için de kullanılabilir. İki nesneyi birbirinden uzağa yerleştiriyoruz ve Karışım Seçenekleri uyguluyoruz, adım sayısını (klonlanan nesne sayısı) seçiyoruz.
16. Şekil Aracı oluşturun.İlkellerle çalışmak için çok kullanışlı bir şey. Bir anda, bana göründüğü gibi, daha az uygun.
Alt tuşunu basılı tutup seçili bölümlere tıklayın - bölümleri silin. Fareyi seçili birkaç alanın üzerine sürüklersek - bağlantılar.
Ek - otomatik olarak kesmeye, bağlamaya vb. Yardımcı olan bir araç. seçilmiş formlar Bana gelince, çok uygun değil, daha sık kullanıyorum İnşa etmekşekilalet.
(çalışma yüzeyleri)
18.Özel Araç Paneli
Gereksiz olanları atarak kendi araç çubuğunuzu oluşturma 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 hepsi gözünüzün önünde konumlandırılabilir. 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 İzometrik
Ve son olarak, 1 tıklama kullanmadan (veya daha doğrusu 3 tıklama, çünkü 3 tarafımız var;) grafik stilleri kullanarak izometri oluşturmaktır ( Grafik Stilleri). Bu nasıl yapılır, bir dahaki sefere yazacağım.
İllüstratörün flaşla ortak noktası, bir nesneyi bir sembole (sembol) kaydetme yeteneğidir ve bu sembol sorunsuz bir şekilde flaşa aktarılabilir (bir .ai dosyasını flaşta açın, İçe Aktar - Sahne alanına aktar).
Illustrator'daki sembol, flash'taki ile aynı özelliklere sahiptir.
Ve sonunda, illüstratörde bence flaştan daha düşük olanı yazacağım. Evet, evet ve var. Ve bu doldurma aracıdır ( boya kovası). İllada ne kadar alışmaya çalışsam da flashta daha rahat oluyor.
Notlarım işinize yaradıysa veya kendi kendinize bir şeyler eklemek istiyorsanız - yorumlara hoş geldiniz! Hepinize iyi şanslar;)
Web grafik optimizasyonu
Grafik Bilgisi metinden çok daha yavaş iletilir ve resimlerin yüklenme süresi boyutlarıyla orantılıdır grafik dosyaları. Bu nedenle, hızlı yüklenen Web sayfaları, içlerine gömülü küçük bir boyut gerektirir. grafik görüntüler, optimize ederek elde edilir. Görüntü optimizasyonu, öncelikle grafik görüntülerdeki renk sayısını azaltmak, sıkıştırılmış ve özel dosya formatları kullanmak ve bireysel dosyalar için sıkıştırma ayarlarını optimize etmek suretiyle elde edilen, bu durumda gereken görüntü kalitesini korurken minimum dosya boyutunu sağlayan dönüşümü olarak anlaşılmaktadır. 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. Önizleme, 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 sonucunun değerlendirilmesine ve doğru ayarların seçilmesine yardımcı olur. Hem doğrudan Illustrator'da oluşturulan görüntüleri hem de bir Web sitesine koymayı planladığınız fotoğraflar gibi diğerlerini optimize edebilirsiniz.
Optimizasyon parametreleri pencerede ayarlanır Web için kaydet(Web için kaydet), menüden aynı isimli komut ile çağrılır. Dosya(Dosya). Program, dört ön izleme modundan birini kullanmayı önerir, ancak optimizasyon kalitesini değerlendirmek için en iyi iki tanesidir:
- 2-Yukarı(iki seçenek) orijinalin ve optimize edilmiş görüntünün belirtilen ayarlara göre aynı anda görüntülenmesi (Şek. 1);
- 4'lü(dört seçenek) Bu modda, orijinal görüntüyü ve optimize edilmiş olanın üç sürümünü görüntülemek için görüntüleme alanı dört pencereye (Şekil 2) bölünür: ilk sürüm ayarlanan optimizasyon değerlerine göre oluşturulur ve diğer ikisi geçerli optimizasyon ayarları için seçeneklerdir.
Her iki mod da görüntüleri farklı optimizasyon ayarlarıyla kaydetme ve ardından bunları görsel olarak karşılaştırma ihtiyacını ortadan kaldırdığından, en iyi optimizasyon seçeneğini bulma konusunda önemli ölçüde zaman kazanmanıza olanak tanır. Ayrıca optimize edilmiş görüntünün sadece kalitesini değil, boyutunu ve farklı bağlantı seçenekleri için indirme süresini de değerlendirmek mümkündür. Karşılaştırma için en uygun mod, sıkıştırma veya palet küçültmenin görüntü kalitesi ve boyutu üzerindeki etkisini görsel olarak değerlendirmenize ve sonuçta en iyi optimizasyon parametrelerini belirlemenize olanak tanıyan 4-Yukarı'dır (dört seçenek).
Illustrator, Web grafiklerini yalnızca GIF, JPG, PNG-8 ve PNG-24 formatlarında 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. Tam renkli ve gri tonlamalı görüntüleri kaydetmek için fotoğraflar ve degrade dolgular gibi zengin renkli grafikler JPG formatı kullanılır. Saydam alanlara sahip tam renkli görüntüler için, hem dizine eklenmiş hem de tam renkli görüntüleri kaydetmenize olanak tanıyan PNG formatı kullanılırken, PNG-8'de optimize edilmiş bir görüntünün mümkün olan maksimum renk sayısı 256'dır ve PNG-'de 24 görüntü milyonlarca renge sahip olabilir ve bu nedenle jpeg formatı. PNG-24 ve JPEG arasındaki fark, PNG-24 görüntülerini optimize etmek için kullanılan sıkıştırma yönteminin kalite kaybına neden olmaması, ancak dosya boyutunu artırmasıdır. SVG ve SWF biçimleri grafikleri, metni ve etkileşimli bileşenleri birleştirir ve ayrıca optimize edilebilir.
Dikkate almak özel örnek görüntü optimizasyonu. Diyelim ki Illustrator programında, orijinal olarak AI formatında kaydedilmiş bir site amblemi geliştirildi (Şekil 3). Web için hemen optimize etme girişimi, iyi bir şeye yol açmayacaktır, çünkü bu durumda görüntü, deformasyon sonucu elde edilen yazının gerçek konumunu dikkate almayacak şekilde otomatik olarak kırpılacaktır (Şekil 4 ve 5).
Bu nedenle, amblemi komutla PSD formatına aktarmayı deneyelim. 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, bunu görebilirsiniz. en iyi kalite programın varsayılan sıkıştırma algoritmasını verir seçici(Seçici). Yumuşatmaya 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 olacaktır (Şekil 7), arka plan şeffaflığı korunacaktır; bu, GIF görüntüsünü HTML dosyasıyla birlikte kaydederek kolayca doğrulanabilir (Şekil 8). Sonuç olarak, bu örnekte, Primer1 klasöründe amblem.html ve amblem.gif dosyaları elde edildi.
düğmeler
Herhangi bir Web sayfasının vazgeçilmez bir özel tasarım öğesi, grafik kontrol düğmeleridir. Onlarsız bir sayfa hayal etmek imkansızdır. Düğme çizme bugün özel bir tür haline geldi ve Illustrator, en karmaşık seçenekleri oluşturmanıza olanak tanıyor. Örneğin, ızgara nesneleri olarak tasarlanmış ve (veya) maskeli düğmeler, normal olanlardan çok daha etkili görünüyor.
Illustrator'da yuvarlak yükseltilmiş bir düğme oluşturma seçeneğini göz önünde bulundurun. Daire şeklinde rastgele bir renkle doldurulmuş bir vektör nesnesi çizin (Şekil 9) ve komutu kullanarak onu bir ızgaraya dönüştürün Nesne=>Degrade Ağ Oluştur(Object=>Create Gradient Mesh) 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 Işık) 60'a (Şekil 10). Bir araç seçin Doğrudan Seçim ve orada bulunan bağlantı noktalarını seçerek nesnenin sol üst köşesine tıklayın (Şek. 11). Palette seçerek karşılık gelen hücrenin rengini beyaz olarak değiştirin renk örnekleri(Şek. 12).
bir alet al Elips(Elips), tuşları basılı tutarken fare işaretçisini ve öncesinde oluşturulan dairenin merkezine getirin alternatif Ve Vardiya, yeni daireyi eskisinden her tarafta 1-2 piksel daha büyük olacak şekilde eskisinin üzerine uzatın. Siyah bir kenarlık yap Felç) 1-2 px genişliğinde ve kırmızıdan beyaza radyal bir eğimle 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 sağ tıklayın ve bağlam menüsü takım seç Düzenle=>Arkaya Gönder(Düzenle=>Geri gönder). Sonuç olarak, Şekil l'de gösterilen düğme için bir boşluk elde ederiz. 14.
Kural olarak, herhangi bir Web sayfasında, örneğin yalnızca üzerlerine çizilen ve sitede hareket yönünü gösteren okların yönünde farklılık gösteren aynı türde birkaç düğme vardır. Biri aşağı oklu bir sonraki sayfaya geçmek anlamına gelen ve yukarı oklu düğme bir önceki sayfaya gitmek anlamına gelen iki düğmenin olduğu en basit durumu düşünün. Ok için boşluk olarak, araçla çizilen normal bir üçgeni alalım. Çokgen(Poligon) siyahla doldurulmuş ve ayrıca daha fazla etki için kafes nesnesi olarak biçimlendirilmiş. Oku düğmeye hareket ettirin ve karşılık gelen palet düğmelerini kullanarak tüm nesnelerin konumunu birbirine göre ayarlayın Hizala(Hizalama). Alınan düğmelerden ilki Şek. 15. Komutu seçerek butonu ile katmanın bir kopyasını oluşturun. Yinelenen katman Katmanlar, sonuç olarak, iki özdeş katman elde ederiz. Ardından katmanın kopyası üzerindeki oku seçin ve bağlam menüsünden komutu seçerek 180° döndürün. Dönüştür=>Döndür Dönüşüm=>Döndür. Şekil l'de gösterildiği gibi aynı düğmeyi alıyoruz. 16. Lütfen bir projenin tüm aynı tip düğmelerini farklı katmanlardaki tek bir dosyada saklamanın çok daha uygun olduğunu unutmayın, bu örnekte de gösterilmiştir.
Şimdi, düğmelerin her biri için optimize edilmiş seçenekleri kaydetmeniz gerekiyor. Önce alt katmanı görünmez yapın bu durumda üst katmandaki düğme tutulacaktır. Bir takım seçin Dosya=>Web için Kaydet(Dosya=>Web için Kaydet), örneğin şekil 2'de gösterildiği gibi düğme optimizasyon parametrelerini yapılandırın. 17, düğmeye tıklayın Kaydetmek(Kaydet) ve bir dosya adı girin. Sonuç olarak kaydedilen düğme, Şekil 1'de gösterilmektedir. 18. Şimdi alt katmanı görünür yapın, üst katmanı görünmez yapın ve ikinci düğmeyi de aynı şekilde farklı bir ad vererek kaydedin. Sonuç, Şek. 19.
Şimdi geriye sadece düğmelerin Web sayfasında iyi görünmesini sağlamak ve onları özel bir sayfaya yerleştirmek kalıyor (Şekil 20). Sonuç olarak bu örnekte Primer2.html dosyası ve resimler klasöründe (klasör) iki grafik resim elde edilmiştir. Astar2).
İstenirse optimizasyon işlemi sırasında buton kolaylıkla dilim haline getirilebilir. Bu durumda, komutu seçtikten sonra Dosya=>Web için Kaydet(Dosya => Web için Kaydet) ve optimizasyon ayarları araç paleti aracından seçilmelidir. Dilim Seçimi(Dilim seçimi) ve otomatik olarak seri numarası 1 olan bir dilime dönüşecek olan görüntüye çift tıklayın (Şek. 21). Tekrar çift tıklamak pencereyi açacaktır. Dilim Seçenekleri(Dilim Seçenekleri), burada bir bağlantı belirtmeniz ve istenirse dilimin adını değiştirmeniz (Şek. 22) ve ardından optimize edilmiş görüntüyü kaydetmeniz gerekir. Bu durumda sonuç, Primer3.html (Şekil 23) ve Primer3.gif (Primer3 klasörü) dosyaları olacaktır.
Etkileşimli öğeler
Bir sayfayı renklendirmenin bir yolu, sayfalarını değiştiren tasarım öğelerini tanıtmaktır. dış görünüş(veya durum) farenin davranışına bağlı olarak veya daha nadiren başka durumlarda: yakınlaştırma, kaydırma, yükleme, hatalar vb.
Bu öğeler arasında en ünlüsü, farenin etkisi altında görünümlerini değiştiren rollover'lardır (İngiliz yuvarlanmasından yuvarlanmaya, yuvarlanmaya) öğeler. Animasyonlu düğmeler, tipik rollover örnekleridir. Diğer site gezinme öğeleri oluşturulurken rollover'lar sıklıkla 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 aşağıdakiler olarak kabul edilir: Normal normal durum, Fare imlecini öğenin üzerine getirin ve üzerine gelirken farenin sol düğmesine Aşağı basın. Teorik olarak, tıkladıktan sonra sol fare düğmesini bırakan Tıklama, düğmeyi bıraktıktan sonra Yukarı, aktif bölgeden çıkarken Çıkış gibi olaylar söz konusu olabilir. Bununla birlikte, pratikte, genellikle yalnızca ilk üç veya hatta iki olay için öğeyi değiştirmekle sınırlıdır.
Klasik rollover'lar
Klasik anlamda rollover, farenin davranışına bağlı olarak tarayıcı penceresinde bir görüntünün diğerinin yerini aldığı GIF formatındaki bir dizi grafik görüntü ve bunlara karşılık gelen HTML kodudur.
Illustrator, klasik anlamda rollover'ları doğrudan oluşturmak için tasarlanmamıştır, ancak bunlar için başlangıç öğelerinin geliştirilmesine yardımcı olabilir. Bu durumda fikir, ilk olaya karşılık gelen bir görüntü ile bir katman oluşturmaktır. Ardından katmanın bir kopyasını oluşturun ve görüntüyü ikinci olayla eşleşecek şekilde dönüştürün ve bu şekilde devam edin. Ortaya çıkan katmanlı görüntü, Image Ready programında bir rollover'ın oluşturulduğu temelde, katmanları korunmuş bir PSD dosyasına aktarılır. Diğer birçok durumda olduğu gibi Illustrator kullanmanın avantajı, diğerlerinde bulunmayan bir dizi ilginç özelliğidir. yazılım araçları, vektör grafik dönüşümünün rahatlığıyla birlikte.
Farenin davranışına bağlı olarak renk değiştiren yazıt şeklinde bir rollover oluşturmaya çalışalım. Illustrator'ı açın ve yuvarlak ve içi siyah dikdörtgen şeklinde bir şekil oluşturun (Şek. 24), bunun bir kopyasını yapın ve ekranın boş bir yerine yerleştirin. Dikdörtgenin ilk kopyasını ortasında bir vurgu bulunan bir ızgara nesnesine dönüştürün (komut Nesne=>Degrade Ağ Oluştur Object=>Create Gradient Mesh), dört satır ve on sütun belirterek (Şekil 25). Dikdörtgenin ikinci kopyasını etkinleştirin ve bunun için şekil 2'de gösterilene benzer bir degrade dolgu ayarlayın. 26. Degrade nesneyi ağın üzerine yerleştirin, degrade nesnenin opaklığını yaklaşık %80'e ve degrade nesnesinin boyutunu, sonunda bir çıkıntı efekti simüle etmek için yaklaşık 1 piksele düşürün. Ve sonra nesnelerin üzerine yazıyı yazdırın. Orijinal haliyle, Normal duruma karşılık gelecek beyaz bir renge sahip olmasına izin verin (Şek. 27) ve ardından rollover durumu değiştiğinde, yazının rengi örneğin fare işaretçisi yeşile döndüğünde yeşile dönecektir. üzerine geldi (Üzerinde durumu) ve fare düğmesine basıldığında maviye döndü (Aşağı durumu).
Palete dikkat edin Katmanlar bu aşamada sadece tek bir katmanı vardır. Komutu kullanarak bu katmanın iki kopyasını oluşturun. Yinelenen katman(Yinelenen Katman) palet menüsünden Katmanlar, palette üç katman olacaktır (Şek. 28). Ardından, katmanın ilk kopyasında yazının rengini yeşile, ikinci kopyada maviye çevirin (Şek. 29). Sonuç olarak, rollover için gerekli boşluk elde edilecektir.
Oluşturulan görüntüyü, komut kullanılarak korunan katmanlarla PSD formatına aktarın Dosya=>Dışa Aktar(Dosya=>Dışa Aktar) ve RGB renk modelini seçin (Şek. 30). Oluşturulan PSD dosyasını ImageReady'de açın (Şekil 31 ve 32). Komutu seçerek katmanlara dayalı çerçeveler oluşturun Katmanlardan Çerçeveler Oluşturun(Katmanlardan Çerçeveler Oluştur) palet menüsünden animasyon. Animasyon penceresi, şek. 33. Palette aynı anda Rollover'lar Başlangıçta, tek bir Normal durumu oluşturulacaktır.
Daha sonra pencerede animasyon paletin içindeyken üzerine gelinen duruma karşılık gelen çerçeveyi seçin Katmanlar katman otomatik olarak seçilir Katman 1 Kopyası(Şek. 34). palete git Rollover'lar ve düğmeye tıklayın Rollover Durumu Oluştur(Yuvarlanma durumu oluştur) şek. 35, bu 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 paletten sil animasyon durumla eşleşmesi gereken dışındaki 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. Resmin görünümü, Animasyon penceresi ve Over State için Layers and Rollovers paletleri
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=>Optimizasyon ile kaydet) ve seçeneğin belirtilmesi HTML ve Resimler (*.html). Sonuç olarak, bu örnekte, Primer4.html dosyası ve resimler klasöründe bir dizi grafik resim elde edildi.
Pirinç. 40. Rollover öğeli tarayıcı penceresi
SVG rollover'ları
Giderek daha popüler hale gelen 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 elde etmenizi sağlar, ancak pratikte bu tamamen farklı bir şekilde uygulanır. Karşılık gelen HTML kodu tamamen otomatik olarak oluşturulduğunda, klasik olanlardan farklı olarak etkileşimli SVG rollover'larının oluşturulması, JavaScript dili bilgisi ve nesne yönelimli programlamanın temel ilkelerinin anlaşılmasını gerektirir.
SVG nesneleri ile çalışmak için özel bir palet tasarlanmıştır. SVG Etkileşimi komutuyla kolayca açılabilen Pencere=>SVG Etkileşimi(Pencere=>SVG etkileşimi) şek. 41.
Fareyle üzerine gelindiğinde üzerindeki etiketin rengi siyahtan maviye değişen ve fare etkin bölgeden ayrıldığında tekrar siyaha dönen etkileşimli bir düğme örneğini kullanarak rollover oluşturmanın bu varyantını ele alalım.
Kenarları yuvarlatılmış dikdörtgen bir düğme oluşturun ve bunun için uygun bir gradyan dolgusu seçin, örneğin şekil 2'de gösterildiği gibi. 42. Paletteki düğmenin şeffaflığını ayarlayın şeffaflık(Şeffaflık) Bu örnekte, parametrenin değeri opaklık(Opaklık) %50 olarak ayarlanmıştır. Düğmenin bir kopyasını oluşturun, koyu yeşille doldurun (Şek. 43) ve ardından komutla bir kafes nesnesine dönüştürün Nesne=>Degrade Ağ Oluştur(Object=>Create Gradient Mesh) dört satır ve on sütun belirterek ve listede Dış görünüş(Görüntüle) bir seçenek belirleyerek Merkez(Merkeze doğru) ve değerin ayarlanması vurgulamak(Vurgula) 100'e getirin. Kafes nesne katmanının opaklığını yaklaşık %40'a düşürün (Şekil 44). Kafes nesnesini degrade nesnenin üstüne yerleştirin ve düğme Şekil 1'de gösterilen gibi görünecektir. 45.
Pirinç. 44. Bir Düğmenin Kopyasını Izgara Nesnesine Dönüştürme
Düğmeyi amaçlanan yazı ile tamamlayın ve karşılık gelen palet düğmelerini kullanarak konumunu ayarlayın Hizala(Hizalama). Ortaya çıkan görüntü, birbiri üzerine bindirilmiş üç nesne içeren bir katman içerecektir (Şek. 46). Planlanmış olaylar bir metin nesnesine atıfta bulunacaktır, bu nedenle kolaylık sağlamak için adını şu şekilde değiştirin: Metin nesneye çift tıklayarak ve yeni bir ad girerek. Benzer şekilde, katman adını Katman 1'den Katmana(Şek. 47).
Olay işleme, JavaScript prosedürlerinin kullanımını içerir, bu nedenle bu prosedürlerin açıklamasını içeren bir dosya eklemeniz gerekir. Events.js olarak adlandırılır ve yüklendiğinde Sample Files\Sample Art\SVG\SVG klasöründe diske kaydedilir. Adobe yazılımı illüstratör. Events.js dosyasını dahil etmek için şu komutu kullanın: JavaScript Dosyaları SVG Etkileşimi(Şek. 48). Ardından, düğmeye basmanız gerekir Eklemek(Ekle) ve sabit sürücünüzde istediğiniz dosyayı bulun. Adı alanda göründüğünde URL(şek. 49), düğmeye tıklayın Tamamlamak(Dışarı çıkmak).
Pirinç. 48. JavaScript Dosyaları Komutunu Seçme
Bundan sonra, nesne için fare olaylarına tepkiyi tanımlamanız gerekir. Metin. Alandaki Metin nesnesini seçin etkinlik(Olay) paletleri SVG Etkileşimi bir etkinlik seçin fareyle üzerine gelindiğinde elemColor(evt, "Metin", "#3333FF") bu, fare nesnenin üzerindeyken Metin rengi maviye dönecektir (Şek. 50). Fare aktif bölgeden çıktıktan sonra yazı renginin siyaha dönüşmesi için bir event daha oluşturmanız gerekmektedir. onmouseout alanda seçin etkinlik(Olay) paletleri SVG Etkileşimi. Ardından eylem satırına metni girin elemColor(evt, "Metin", "#000000") bu siyaha 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 şekil 2'de gösterildiği gibi SVG dosyasını kaydetme seçeneklerini ayarlayın. 52. Kaydettikten sonra, klasik rollover durumunda olduğu gibi iki değil, SVG uzantılı yalnızca bir tek dosya elde edilecektir, bu durumda Primer5.svg dosyası (Primer5 klasörü) elde edilmiştir. 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 kopyalamanız gerekir. Bundan sonra, rollover performansını kontrol edebilirsiniz, sonuç Şekil 1'de gösterildiği gibi görünecektir. 53.
SVG animasyonu
SVG biçimi, animasyonu iletmek için de kullanılabilir. Fare ilgili grafik nesnesinin üzerine getirildiğinde ekranda görünecek ve fare etkileşimli öğeden çekildiğinde kaybolacak olan basit bir animasyon öğesi (bu durumda şirket hakkında bilgi olacaktır) oluşturmaya çalışalım.
Şekil 1'de gösterildiği gibi yaklaşık olarak böyle bir dizi grafik ve metin nesnesi oluşturalım. 54. Paletteki bir sonraki nesnenin adına art arda tıklayarak oluşturulan tüm nesneleri uygun bir şekilde yeniden adlandırın. Katmanlar ve tanıtmak istenen isim(Şek. 55). Şekil l'de vurgulanana dikkat edin. 56 ürün Metin1, Metin2, Metin3 Ve Yol1 her zaman görünür olacak ve diğerleri yalnızca nesnenin üzerine geldiğinizde görünür olacak Metin 1.
Pirinç. 54. Resmin orijinal görünümü
Komutu kullanarak JavaScript prosedürlerinin açıklamasını içeren Events.js dosyasını dahil edin JavaScript Dosyaları(JavaScript dosyaları) paletinden SVG Etkileşimi düğmesine basarak Eklemek(Ekle) sabit sürücüde istenen dosyayı seçip düğmesine tıklayarak Tamamlamak(Dışarı çıkmak).
Bir nesne için bir fare olay yanıtı tanımlayın Metin 1. nesne seç Metin, alanda etkinlik(Olay) paletleri SVG Etkileşimi bir etkinlik seçin fareyle üzerine gelindiğinde 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 birkaç eylemin gerçekleştirilmesi gerekiyorsa, bunların ";" işaretiyle belirtilmesi gerektiğini lütfen unutmayın. Ardından etkinlik için aynısını yapın onmouseout, bunun için metni girerek, nesneleri gizlemek anlamına gelir (Şek. 57).
Sonucu komutla bir SVG dosyası olarak kaydedin Dosya=>Farklı kaydet(Dosya=>Farklı kaydet), dosya adını belirterek, alanda seçerek Dosya tipi SVG formatı ve ardından SVG dosyasını kaydetme seçeneklerini Şekil 1'e göre ayarlayın. 58. Kaydettikten sonra Primer6.svg dosyası (Primer6 klasörü) alınacaktır. Events.js dosyasını bu dosyanın bulunduğu klasöre kopyalamayı unutmayınız. Eğer bundan sonra coz'u çalıştırırsan verilen dosya, Ş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 ortaya çıkışıydı. Metin 4 ve Yol 2 yüklerken. Bu eksiklikten kurtulmak için bu iki nesneyi 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 fare nesnenin üzerine getirildiğinde görünür Metin 1.
GIF animasyonu
Herhangi bir Web sayfası, animasyonlu gif'ler de dahil olmak üzere Web animasyonu olmadan düşünülemez. Bunları oluşturmanın bir yolu, diğer şeylerin yanı sıra katmanlardan animasyon oluşturmanıza izin veren Adobe ImageReady uygulamasını kullanmaktır. Aynı zamanda, çok katmanlı görüntünün kendisi, Adobe Illustrator dahil olmak üzere farklı uygulamalarda hazırlanabilir.
Paletteki öğelere dayalı bir animasyon oluşturmak çok kolaydır. Semboller(Semboller) komutu ile 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ı).
Örneğin, herhangi bir nesne-sembolün boyutunu büyütmeye çalışalım, nesneyi büyütme sürecinin temel aşamaları ayrı katmanlarda ayarlanmalıdır. İlk olarak, sembol nesnelerini üst üste yerleştirin ve ardından, örneğin Şekil 1'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 (Şek. 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 doğal olarak PSD dosyasını ImageReady'de açtığınızda da yalnızca bir katman olacaktır. Bu nedenle, önce 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(Katmanlar halinde bırakın). Sonuç, nesnelerin her birini kendi katmanına taşımak olacaktır, ancak hepsi katmanda iç içe olacaktır. katman 1. Bu nedenle, iç içe geçmiş tüm katmanları katmanın üzerinde olacak şekilde manuel olarak Katmanlar paletinin en üstüne sürüklemeniz gerekecektir. Katman 1 ve ardından boş katman katman 1çıkarılması kolaydır (Ş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 programına yükleyin (Şek. 65 ve 66). Palet menüsünü aç animasyonKatmanlardan Çerçeveler Oluşturun(Katmanlardan çerçeveler oluşturun). Sonuç olarak, her biri kendi katmanına ve palet penceresine karşılık gelecek beş çerçeve oluşturulacaktır. animasyonŞekil l'deki gibi görünecek. 67.
Bundan sonra, oluşturulan çerçevelerin her birinin süresini ayarlayın, bu durumda tüm çerçevelerin süresi 0,2 s olarak ayarlanır. Ardından optimize edilmiş animasyonu şu komutla kaydedin: Dosya=> Optimize Edilmiş Kaydet(Dosya=>Optimizasyon ile kaydet). Elde edilen sonuç Şekil 1'e benzeyebilir. 68.
İşlevleri kullanmak daha da uygundur Canlı Karışımlar Illustrator yazılımı. Illustrator ve ImageReady'nin bu birlikte kullanımı, GIF animasyonları oluşturma sürecini önemli ölçüde hızlandırır.
Örneğin, rastgele iki çok renkli nesne çizin ve ardından bunları uygun parametrelerle karıştırın (Şek. 69). Görüntü tek bir katmanda yer aldığından (Şekil 70), bu dosyayı doğrudan bir animasyon oluşturmak için kullanmak imkansızdır. Bu nedenle, öncelikle blend nesnesinin her bir öğesini ayrı bir katmana yerleştirmeniz gerekecektir. Bunun için pencerede Katmanlarçizgiyi vurgula
Pirinç. 70. Başlangıç hali Katman pencereleri
Oluşturulan dosyayı komut ile PSD formatına aktarın. Dosya=>Dışa Aktar(Dosya=>Dışa Aktar). Oluşturulan PSD dosyasını ImageReady'de açın (Şek. 73). Lütfen Illustrator programında oluşturulan tüm katmanların katmanlar penceresinde (Şek. 74) ve pencerede görüneceğini unutmayın. animasyon sadece bir çerçeve olacak.
Palet menüsünü etkinleştir animasyon, paletin sağ üst köşesindeki siyah oka tıklayarak ve komutu seçin Katmanlardan Çerçeveler Oluşturun(Katmanlardan çerçeveler oluştur) sonunda, bu örnekte beş çerçeve oluşturulacak ve palet penceresi animasyonşekline göre şekil alacaktır. 75. tuşunu basılı tutarak tüm çerçeveleri seçin Vardiya ve bu örnekte uygun bir çerçeve süresi ayarlayın, çerçevelerin her biri için 0,2 s'lik aynı süre alınır. Ardından dosyayı optimizasyon komutuyla kaydedin. Dosya=> Optimize Edilmiş Kaydet Listede (Dosya=>Optimizasyon ile kaydet) ayarı Dosya tipi seçenek Yalnızca Görüntüler (*.gif). Animasyon Şek. 76.
Çok daha ilginç olanı, hareket 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, karışım geçişinin her bir öğesi için ayrı katmanlar oluşturduktan sonra, butonları kullanarak tüm nesneleri üst üste yerleştirin. Yatay Hizalama Merkezi(Yatay merkeze göre hizalama) ve Dikey Hizalama Merkezi(Dikey merkez hizalama) paletleri 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). Katmanlara dayalı animasyon kareleri oluşturun ( Katmanlardan Çerçeveler Oluşturun Katmanlardan kareler oluşturun) ve bunlar için uygun süreyi 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 böylece bir daire içinde devam eder (Şek. 80). Ardından optimizasyon dosyasını kaydedin ( Dosya=> Optimize Edilmiş Kaydet Dosya=>Optimizasyon ile kaydet). Ortaya çıkan animasyon, Şek. 81.
Pirinç. 80. Kareleri çoğalttıktan sonra Animasyon penceresinin durumu
Pirinç. 81. Bitmiş animasyon
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 çizmeye 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
Çember üzerinde biraz çalışalım:
- konturdaki alt noktayı kaldırın, bir yay elde ederiz;
- düz bir çizgi çizin, yayın altını kapatın, yarım daire elde ederiz
Şekil 2 - 1) daire çizin; 2) eğim; 3) silme noktası
3) Bir Dikdörtgen çizin ve bunun bir kopyasını oluşturun.
- 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) doğru ışık; 2) doğrudan karanlık; 3)üçgen
5) Kalem ve basit şekillerle bir kedi çizin 
Şekil 4 - 1) baş; 2) boyun; 3) gövde; 4) bacak; 5) kuyruk
Ve şimdi en ANA an
Resimleri şu şekilde katmanlara dağıtalım (canlandırılacak olan - ayrı bir katmanda): 
Şekil 5 - tüm resimler (önemli katmanları kırmızıyla işaretleyin)
Her şey, şimdi kurtarıyoruz.
Kaydetme ayarlarını görelim
Şekil 6 - Kaydet
Ve şimdi bir sonraki aşama. KapalıAdobe Illustrator ve After Effects'i açın.
After Effects'e Aktarın
Dosya - İçe Aktar - Dosya - kayıtlı dosyamızı seçin illüstratör.
Illustrator'dan katmanları içe aktarmayı seçelim, metraj koyarsak katmanları birleştirilmiş bir görüntü elde ederiz ama buna ihtiyacımız yok.
Şekil 7 - Kompozisyon Olarak İçe Aktar
Tamamı ithal.
Şimdi elimizde ne var bir bakalım. Kompozisyona çift tıklayın
, ne açılırdı 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 bunun için buradayız - Animasyon.
Animasyon
After Effects
Arkasında Kaydırma Aracı (kısayol - Y) ile pivot noktasını üstündeki okla ayarlayın. Sadece bir nokta al ve istediğin yere taşı. Sonuç olarak bu şekilde olacak..
Şekil 9 - Kaydırma aracı ve Katmanlar
İşte bu kadar, şimdi animasyon için katmanlara geçelim.
Bir Ok 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. Bu yüzden ilk noktayı sıfır saniyeye koyuyoruz. Toplamda, animasyon 2 saniye sürecektir.
Yani yapmanız gereken ayarlar bunlar (toplamda 3 puan koyacağız)
| Saniye | 0 | 1 | 2 |
| +66 | - 70 | +66 |
Ş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.
| Saniye | 0.1 | 0.17 | 1.12 | 2.0 |
| konum | 689.3 | 729.3 | 729.3 | 689.3 |
Şekil 11 - Başlığı konumlandırın
Yani animasyonun prensibi şöyleydi. Ok bir yandan diğer yana sallanır, yavru kediye yaklaşır yaklaşmaz kafasını kendi içine çeker, bu pozisyonda biraz oyalanır ve sonra yerine geri getirir.
son aşama
Üretme
Çalışmanızdan bitmiş bir ürün oluşturmanız gerekir.
Menüye git - Oluşturma Sırasına Ekle
İşleme paneli açılır ve Çıktı Modülünde (iki tıklama) çıktı biçimini seçin. *.mov'u aldım
Şekil 12 - İşleme
RENDER butonuna tıklayın ve sonucu alın (yolu belirtmeyi unutmayın).
Bu kadar.
