Adobe Illustrator'da şeffaf bir GIF aşağıdaki gibi yapılır. Dosyaya Git> için kaydet Web ve Cihazlar (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 düşer 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üğ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ğ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 için talimat 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. 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ığı 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 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. 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'i tıklayın - şeffaf gif hazır. Çalışma, Adobe Illustrator CS4 (v. 14) sürümünde gerçekleştirilmiştir, ancak tüm eylemler ve klavye kısayolları, CS3'ün önceki sürümü (v. 13) için geçerlidir.
Bugün pek sıradan değiliz Adobe eğitimi illüstratör. Çünkü bu sefer durağan bir resim değil, gerçek bir animasyon yapacağız. ile ortaya çıktığını hayal edin Adobe ile Illustrator'da da karikatür çizebilirsiniz :)
Ve bunun için hiçbir şeye ihtiyacımız yok. Katmanların yetkin organizasyonu ve nihai çalışmanın, her katmanın bir animasyon karesine dönüştürüldüğü swf formatında dışa aktarılması. Bugünkü dersimizde retro film tarzı bir geri sayım animasyonu çizeceğiz. Çıktı, bu geri sayımla birlikte bir flash video olmalıdır.
Yapılacak ilk şey, gelecekteki animasyon için gerekli tüm öğeleri çizmektir. Bunu yapmak için, ayrı bir belgede, bir film karesinin iki konumunu, ayrı sektörlere ayrılmış bir referans çemberi, antikliğin etkisini eklemek için bir doku ve dikey bir çizik ile tüm sayıları ve yazıları yaptım. .
Çizgi filmimizin tüm parçaları hazır olduğunda animasyonun kendisini oluşturmaya başlayabilirsiniz. Kolaylık sağlamak için, bu en iyi şekilde yeni bir belgede yapılır. Bu durumda, katmanlar animasyon karelerinin rolünü oynayacaktır. Ve ilk katmanda, film şeridinin çerçevesini kopyalamanız yeterlidir. Çalışma alanının ortasına yerleştirin.
Şimdi ikinci bir katman oluşturun ve film şeridini, kenarlarındaki deliklerin kaydırıldığı içine kopyalayın. Ayrıca merkezlenmesi gerekir.
Bu iki katmandan, hareketli bir filmin animasyonunu zaten elde edebilirsiniz. Ancak daha sonra çok daha fazla katmana ihtiyacımız var. Bu yüzden ilk iki katmanı seçin, panel seçeneklerine gidin ve katmanların bir kopyasını alın.
Aynı şekilde, filmin 12 katmanlı hareketli görüntülerini de biriktirmemiz gerekiyor.
Şimdi bir sürü katmanımız var ve hepsi görünür durumda. Üst katmanların, iş için çok uygun olmayan alt katmanları engellemesi anlamında. Bu nedenle, katman adının solundaki gözle simgeye tıklayarak bazı katmanları kapatabilirsiniz. Tüm katmanları aynı anda kapatmak veya açmak için göz simgesine tıklarken Alt tuşunu basılı tutun. Katmanları açıp kapatarak, gelecekteki animasyonumuzun belirli bir karesinde tam olarak ne olduğunu görebilirsiniz. Ve şimdi, filmin hareketine hafif bir titreme katabilmemiz için, ortaya çıkan kareleri biraz farklı yönlerde hareket ettirmemiz gerekiyor. Bunu yapmak için yalnızca üzerinde çalışacağınız katmanı dahil edin. şu an ve ardından çerçeveyi her iki tarafa birkaç piksel sürükleyin.
Tüm katmanları gözden geçirip hafif bir kayma eklediğinizde, hareketli bir dairenin animasyonunu oluşturmaya başlayabilirsiniz. Bunu yapmak için, sektörlerden oluşan daireyi çizgi film bölümleriyle belgeden kopyalayın ve film şeridi çerçevesinin üzerindeki ilk katmana yerleştirin.
Dairenin seçimini kaldırırsanız, tek bir bütün gibi görünecektir. Bu tam olarak ihtiyacımız olan şey.
Fakat ayrı sektörlerden oluştuğu için renklerini değiştirerek çok hızlı ve kolay bir şekilde animasyon oluşturabilirsiniz. Bunu yapmak için, bu daireyi ikinci katmana kopyalayın ve ilk sektörü daha hafif yapın. Filmimizin hareket sırasında sallandığını hatırlarsınız, bu nedenle daireyi tam olarak çerçevenin ortasına koymanız gerekli değildir. Gözün üzerine yerleştirin.
Benzer şekilde, daireyi bir sonraki katmana kopyalamanız gerekirken, daha açık bir renkle önceki seferden bir sektör daha fazla boyamanız gerekir. Birlikte ele alındığında, bu 12 katman, bir doldurma çemberi ile bir film arası oluşturur.
Ardından katmanlarımıza doku eklememiz gerekiyor. İlk katmanı açın ve dokuyu orijinal dosyadan yedek parçalarla kopyalayın.
Ardından sonraki katmanları sırayla açın ve aynı dokuyu oraya kopyalayın. Her karede farklı görünmesi için 90 derece döndürmeniz yeterli. Tahmin edebileceğiniz gibi, 12 karenin tümüne doku eklememiz gerekiyor.
Kopyalamaktan zaten bıktıysanız, sizi memnun edebilirim - çok az şey kaldı. En zor kısım bitti. Dikey çizikler ve hemen hemen her şey eklemeye devam ediyor. Bunu yapmak için, orijinal çizikleri tekrar kopyalayın ve birkaç katman halinde rastgele bir yere yerleştirin. Benim durumumda çizikler sadece iki katmanda görünüyor.
Artık filmin animasyonlu ana döngü hazır olduğuna göre, sayıları eklemeye devam ediyor. 3'ten 1'e ve Go !!! kelimesine kadar saydığımız için daha fazla katmana ihtiyacımız var. 12 değil, 48. Bunu yapmak için, filmin animasyonu ile hazır katmanların üç kopyasını daha yapmanız gerekir.
Ve sonra her şey basit. İlk katmanı açın ve üç numarayı oraya koyun.
Ardından, dairenin animasyonu bitene kadar bu sayıyı sonraki katmanlara kopyalamanız gerekir. Dairenin tekrar tamamen doldurulacağı katmanların bir sonraki kopyasına geldiğinizde, iki numarayı zaten koymanız gerekir. Aynı şekilde bir numarayı istediğiniz katmanlara kopyalayın. Go !!! yazısının son katmanlarına ulaştığınızda, başlığı istediğiniz katmana kopyalamadan önce daireyi silmeniz yeterlidir.
Animasyon ile bu kadar. Buradaki ana şey kafa karıştırmamak. Katmanlara bazı uygun isimler verebilirsiniz, ancak bir şekilde çok tembeldim :) Ve yine de çalışmayı bitirdiğinizde, göz simgesine tıklayarak tüm katmanları tekrar açtığınızdan emin olun.
Dışa aktarma ayarlarının bulunduğu pencerede, Farklı Dışa Aktar: AI Katmanlarını SWF Çerçevelerine ayarladığınızdan emin olun. Illustrator katmanlarını animasyon karelerine dönüştüren bu seçenektir. Ardından Gelişmiş düğmesini tıklayın.
Açılacak ek ayarlar... Burada kare hızını Kare Hızını ayarlamanız gerekir. Saniyede 12 karem var. Döngü onay kutusu, animasyon döngüsünden sorumludur. Onun sayesinde video bir daire içinde oynatılacak. Ve Katman Sırası: Aşağıdan Yukarıya seçeneği, illüstratörün katmanlarını panelde aşağıdan yukarıya yeniden üretir. Animasyonumuzu tam olarak bu şekilde oluşturduk.
Çıktıda ise animasyonumuzla birlikte bir flash video elde ediyoruz.
Artık Adobe Illustrator'da basit bir animasyon yapmanın ilk bakışta göründüğü kadar zor olmadığını görebilirsiniz.
Ancak uzun videolar veya etkileşimli uygulamalar oluşturmak için Adobe Flash veya diğer flash düzenleyicileri kullanmak yine de daha iyidir. Örneğin, bu kediyi iş yerimde kazdığım eski bir Macromedia Flash'ta yaptım.
Ayrıca, son zamanlarda HTML5 ve CSS3, animasyon oluşturmak için giderek daha fazla kullanılıyor. Bu kod, modern tarayıcılar tarafından desteklenir ve bir flash oynatıcı gerektirmez.
Roma aka dacascasözellikle bir mikro stok illüstratörünün blog notları için
Yeni bir şeyi kaçırmamak için bültenimize abone olun:
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 çok 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, illüstratör konusunda çok deneyimli bir kullanıcı 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, sifondan 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 olduğuna 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ü görünür. 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 uygulanır basit formlar (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örden farklı olarak 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 ve bunların nasıl göründüklerini yazdığım birçok doku fırçasına da 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. damlaFı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 (Nesne-Yol-Izgaraya Böl) işlevi de yararlı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;)
Bir tane daha kullanışlı araç Illustrator'da, muhtemelen ilk sürümünden beri sunulmaktadır. Ö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, elde yalnızca birkaç grafik öğesi olan düzinelerce varyasyonda bir desen oluşturmaya yardımcı olacaktır. Daha fazlası erken sürümler programların hepsi şimdiye kadar flaşta olduğu gibi manuel olarak yapılmalıydı.
(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ölme 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 kendiniz 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 izometri kullanarak Grafik stilleri
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 aynı kolaylıkla bu sembol bir flash'a aktarılabilir (bir flash .ai dosyasında 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;)
Web Grafiklerini Optimize Etme
Grafik bilgileri, metin bilgilerinden çok daha yavaş aktarılır ve görüntülerin yüklenme süresi, grafik dosyalarının boyutuyla orantılıdır. Bu yüzden hızlı yükleme Web sayfaları, optimizasyonlarıyla elde edilen küçük boyutlu gömülü grafikleri varsayar. Görüntü optimizasyonu, gerekli dosya boyutunu korurken minimum dosya boyutunu sağlayan dönüşümü olarak anlaşılır. bu durumdaöncelikle grafik görüntülerdeki renk sayısını azaltarak, sıkıştırılmış ve özel dosya formatlarını kullanarak ve bireysel görüntü parçaları için sıkıştırma ayarlarını optimize ederek elde edilen görüntü kalitesi.
Illustrator'da yerleşik görüntü optimizasyon araçları vardır. farklı yöntemler optimizasyon sürecinin hızlı ve verimli uygulamasını önizleyin. Ö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, ayarlanmış optimizasyon değerlerine göre oluşturulur ve diğer ikisi mevcut optimizasyon ayarlarının çeşitleridir.
Her iki mod da aramada önemli ölçüde zaman kazandırabilir daha iyi seçenek optimizasyon, çünkü görüntüleri kaydetme ihtiyacını ortadan kaldırırlar. farklı ayarlar optimizasyon ve sonraki görsel karşılaştırma. Ayrıca, optimize edilmiş görüntünün sadece kalitesini değil, 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. Dizine alınmış görüntüler az miktarda renkler GIF formatında kaydedilir. Tam renkli ve gri tonlamalı görüntüleri (fotoğraflar ve degrade dolgular gibi zengin renkli grafikler) kaydetmek için JPG formatı... 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 iken 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 grafik, metin 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 dışa aktarmayı deneyelim PSD formatı takım 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 dikkate alındığında, bu durumda GIF formatı, karar vermeniz gereken belirli ayarlarla 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 örnekte, Primer1 klasöründe amblem.html ve amblem.gif dosyaları elde edilmiştir.
Düğmeler
Herhangi bir Web sayfasının tasarımının yeri doldurulamaz özel bir öğesi, 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 maskeli 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 => Gradyan 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 soldaki tıklayın üst köşe nesne, orada bulunan düğüm noktalarını vurgulayarak (Şekil 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 getirin ve tuşları basılı tutarken alt ve Vardiya, yeni daireyi eskisinin ü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 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 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 ve sitedeki hareket yönünü gösteren aynı türde birkaç düğme vardır. İki düğmenin olduğu en basit durumu düşünün; bunlardan biri, aşağı ok ile hareket etmek anlamına gelir. sonraki Sayfa, ve bir öncekine giden yukarı ok düğmesi. 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 tasarlanmıştır. 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. Şekil 2'de 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 2'de 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.
Artık 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 buton kolayca dilim haline getirilebilir. Bu durumda, komutu seçtikten sonra Dosya => Web için Kaydet(Dosya => Web için Kaydet) ve optimizasyon parametrelerini ayarlayarak araç paletinden aracı seçin Dilim seçimi(Bir dilim seçin) ve sonunda otomatik olarak seri numarası 1 olan bir dilime dönüşecek olan görüntüye çift tıklayın (Ş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 (Şekil 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ı 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 - roll over) - bir farenin etkisi altında görünümlerini değiştiren öğeler. Hareketli düğmeler tipik rollover örnekleridir. Rollover'lar genellikle bir web sitesinin 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, doğrudan klasik 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ü, Image Ready programında rollover'ın 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, diğerlerinde bulunmayan bir dizi ilginç özelliğidir. yazılım araçları, vektör grafiklerini dönüştürmenin rahatlığıyla birlikte.
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 konumlandırın. Dikdörtgenin ilk kopyasını, ortasında vurgu bulunan bir ağ nesnesine dönüştürün (komut Nesne => Gradyan 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. Ardından metni nesnelerin üzerine yazın. Orijinal biçiminde, Normal duruma karşılık gelen beyaz bir 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 - siz fare imlecini üzerine getirin (Aşırı durum) ve mavi - 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önüş 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 pencerelerinin 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ı
XML standardı temelinde oluşturulan SVG formatının (Ölçeklenebilir Vektör Grafikleri - ölçeklenebilir vektör grafikleri) artan popülaritesi, özellikle rollover'lar olmak üzere çeşitli etkileşimli öğeler 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.
Düşünmek bu seçenek Etkileşimli bir düğme örneğini kullanarak bir rollover oluşturma, fareyi üzerine getirdiğinizde başlığın rengi siyahtan maviye değişecek ve fare etkin bölgeden ayrıldığında tekrar siyaha dönüşecek.
Yuvarlatılmış kenarları olan 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 olarak ayarlandı. Düğmeyi çoğaltın, koyu yeşil bir renkle doldurun (şek. 43) ve ardından komutla onu bir ağ nesnesine dönüştürün Nesne => Gradyan 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ıkla tamamlayın ve palet üzerindeki ilgili düğmeleri kullanarak konumunu ayarlayın hizala(Hizalama). Ortaya çıkan görüntü, üst üste binen üç nesne içeren bir katman içerecektir (Şekil 46). Planlanmış olaylar metin nesnesine atıfta bulunacaktır, 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 kurulum sırasında Sample Files \ Sample Art \ SVG \ SVG klasörüne diske kaydedilir. Adobe programları illüstratör. 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 bul istenen dosya sabit diskinizde. 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 çıktıktan sonra metin renginin siyaha dönmesi için başka bir etkinlik oluşturmanız gerekecektir. onmouseout- 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'da olduğu gibi iki değil, SVG uzantılı tek bir dosya alacaksınız - bu durumda Primer5.svg dosyası (Primer5 klasörü) alındı. 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 en basit animasyon öğesini (bu durumda şirket hakkında bilgi olacaktır) oluşturmaya çalışalım.
Şekil 2'de gösterilene benzer bir dizi grafik ve metin nesnesi oluşturalım. 54. Yeniden Adlandır uygun yol Paletteki bir sonraki nesnenin adına sırayla tıklayarak oluşturulan tüm nesneler Katmanlar ve istenen adı girerek (şek. 55). Lütfen, Şekil 2'de vurgulananın 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ı) paletinden 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 onmouseout bunun için metin girerek, bu da nesneleri gizlemek anlamına gelir (Şek. 57).
Sonucu komutla 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. Neredeyse ihtiyacınız olan şey bu. Planlarımıza dahil olmayan tek şey nesnelerin ilk görünüşüydü. Metin 4 ve Yol açılışta 2. Bu dezavantajdan 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 fareyi bir nesnenin üzerine getirdiğinizde görünür Metin 1.
GIF animasyonu
Animasyonlu gifler de dahil olmak üzere herhangi bir Web sayfası Web animasyonu olmadan 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 Adobe Illustrator dahil farklı uygulamalarda hazırlanabilir.
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, nesneleri önce farklı katmanlara yerleştirmelisiniz. Bu farklı şekillerde yapılabilir - 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 yuvalanacaktı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). 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 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
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). Ardından, animasyonu daha etkili hale getirmek için mevcut kareleri kopyalayın, ancak Ters sipariş- böylece görüntü önce artar, sonra azalır, vb. bir daire içinde (Ş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
Flash Dosya Formatı (SWF), vektör grafikleri 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 aktardığınızda, 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 Resmi 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.
Hat kalınlığı
Gradyanların tanımı
Metin (OpenType yazı tipleri dahil)
İlgili Resimler
Karıştırma modları
Konturlar ve şekiller
Ayrıca, Illustrator ve Flash, resim eklerken aşağıdakileri destekler.
Illustrator resminde katmanları seçerken Üst düzey ve bunları Flash'a eklemek, katmanları ve özelliklerini (görünürlük ve engelleme) 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 alanını veya Dosya> İçe Aktar'ı kullanarak yüksek doğrulukla Flash'a içe aktarabilirsiniz. Kütüphaneye.
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 eki Flash, Illustrator resmini yapıştırırken olduğu gibi aynı nitelikleri 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.
