Illustrator-da sadə animasiya necə hazırlanır. Adobe Illustrator CS üzrə illüstrasiyalı dərslik. Plugini yükləyin və qoşun
Animasiya ilə canlandırmaq istədiyiniz bir və ya iki ikonanız var. Hardan başlamaq istərdiniz? Deyək ki, sizdə SVG faylları, Illustrator CC və After Effects CC var, lakin həll yolu sizdən qaçır.
Bu yazıda mən SVG faylını necə asanlıqla canlandıra biləcəyinizi, o cümlədən SVG faylını Illustrator-da hazırlamaq və After Effects CC-ə idxal etmək barədə məlumat verəcəyəm. Onu Forma Layers-ə necə çevirə və hərəkət əlavə edə biləcəyinizi də izah edəcəyəm. Nəhayət, ixrac və göstərmə haqqında danışaq.
İşin yekun nəticəsi.
İndi gəlin əyləncəli hissəyə - şəkilləri necə canlandırmağı öyrənək.
Illustrator-da SVG faylının hazırlanmasıSVG faylınızı Adobe Illustrator CC-də açmaqla başlayaq. Icons Həftəsində pulsuz olaraq mövcud olan kiçik avtomobil ikonasını canlandıracağam.
Faylı açdıqdan sonra bütün obyektləri qrupdan çıxarıb təbəqələrə bölmək lazımdır. Bunu əl ilə edə və ya istifadə edə bilərsiniz Laylara buraxılış (ardıcıllıq) prosesi sürətləndirmək üçün. Faylı After Effects-ə idxal etməzdən əvvəl onu Illustrator fayl formatı kimi saxlamalıyıq.
Qiymətli vaxt itirməmək üçün Layers to Release (Ardıcıllıq) istifadə edərək obyektlərin qruplarını ayıra bilərik. After Effects CC-də faylı idxal edin və təşkil edin İndi After Effects CC-yə idxal etməyə hazırsınız. Import File dialoq qutusunu yükləmək üçün Ctrl+I (Windows) və ya Command+I (Mac) klaviatura qısa yolundan istifadə edək və ya Fayl > İdxal > Fayl bölməsinə keçək... Oradan hazırladığımız Illustrator CC faylını seçin və Import düyməsini sıxın. . Seçilmiş faylın adı ilə kiçik bir dialoq qutusu görünməlidir. İdxal Növü adlı açılan siyahıdan Kompozisiyanı seçin.
Daha çox sürətli yol faylın idxalı - layihə panelindəki sütunun yerini iki dəfə klikləyin. Timeline Panelində biz yeni kompozisiya görəcəyik. Bunun üzərinə iki dəfə klikləyin. İndi adlarının solunda narıncı nişanları olan Illustrator CC təbəqələrini görməliyik.
Başlamazdan əvvəl bütün bu təbəqələri Forma Layers-ə çevirməliyik. Onların hamısını Ctrl+A/Command+A və ya Shift+Sol Siçan ilə əl ilə seçməliyik. Bundan sonra, təbəqənin üzərinə sağ vurun və Yarat > Vektor Layerindən Şekiller Yarat seçin.
İndi yeni təbəqələr seçildikdən sonra onları Illustrator CC təbəqələrinin üstündəki panelin yuxarı hissəsinə dartın və sonra Illustrator CC qatlarını silin ki, yoldan çıxsınlar.
After Effects CC-də Illustrator CC Qatlarını Formalaşdırmağa Dönüştürün Bu zəruri olmasa da, hər bir təbəqəyə uyğun ad və/və ya rəng kodunu verməmiz vacibdir. Bu, əsas kadrlara diqqət yetirdiyimiz üçün bizə daha səmərəli işləməyə imkan verəcək. Aşağıdakı nümunədə etiketlərin rəngləri onların müvafiq təbəqələrinin dolğunluğuna az və ya çox uyğun gəlir.
Forma Qatlarının uyğun adlar, rənglər, mətn və yerləşdirmə ilə etiketlənməsi çox praktikdir. Parametrləri konfiqurasiya etmək üçün klaviatura qısa yolundan istifadə edin Ctrl+K/Command+K və ya Kompozisiya > Kompozisiya Parametrləri... Kompozisiya Parametrlərindən biz Genişlik, Hündürlük, Kadr sürəti və Müddəti seçməliyik. Bu layihə üçün animasiyanı hamar saxlamaq üçün saniyədə 60 kadr seçdim.
Aktiv Bu an Hər şey getməyə hazır görünür, amma görülməli olan daha bir şey var. Müəyyən təbəqələri elə qruplaşdırmalıyıq ki, onların hərəkətləri bizim idarə edə biləcəyimiz əsas təbəqə ilə sinxronlaşdırılsın. Bu üsul valideynlik adlanır.
Birdən çox təbəqəyə ana təbəqə təyin etmək üçün Pick Whip-dən istifadə edin. Bizim nümunəmizdə mən daha az əhəmiyyətli təbəqələr (alt təbəqələr) təyin etmişəm, məsələn Ön şüşə, bədən hissələri, ağac və iplərdən ilkin bədən təbəqəsinə (ana təbəqə). Bu, ana təbəqədən istifadə edərək bütün avtomobilin (təkərlər istisna olmaqla) mövqeyini və fırlanmasını idarə etməyə imkan verdi.
Animasiya yaradılmasıİstədim ki, maşın daşa dəyib bir az havada qalsın. Mən də istəyirdim ki, ağac yuxarı-aşağı hərəkət edib gövdəsini açsın. Daş, maşın və təkərlər yaratmaqla başladım. Sonra ən böyük maneəni dəf etməyin vaxtı gəldi - hərəkəti ağaca qoymaq. Bunu etdikdən sonra raf və iplər kimi kiçik hissələrə keçdim.
Animasiyanı təsvir edən eskiz İlk addım qaya elementi və ya təbəqə yaratmaq idi, lakin başqa qat əlavə etmək üçün Illustrator CC-yə qayıtmaq əvəzinə, mən sadəcə After Effects CC-də Qələm Alətindən istifadə etdim. Bu, mənə tez bir zamanda kiçik bir daşı dizayn etməyə imkan verdi.
Oh, qüdrətli Qələm Aləti! Baqaj nisbətən sadə bir iş idi. Mən onu maşının arxasına quraşdırdım və aşağı sol təpədə lövbər nöqtəsi düzəltdim. Pick Whip istifadə edərək, mən onu ana bədən təbəqəsinə təyin etdim. Sondan əvvəlki addım fırlanma effektini vermək idi ki, bu da öz növbəsində avtomobilin sıçrayış anını daha reallaşdırdı.Bodymovin Lottie mobil kitabxanası ilə birlikdə.
P.S. mənimkini tapa bilərsən Illustrator faylları CC və After Effects CC.
Simge dəsti pulsuz olaraq yükləmək üçün mövcuddur.
Son zamanlar vebsaytlarda və proqramlarda SVG (Ölçeklenebilir Vektor Qrafikası) qrafiklərinin müxtəlif növ animasiyaları çox populyarlaşıb. Bu, hər şeyin olması ilə bağlıdır ən son brauzerlər artıq bu formatı dəstəkləyir. Burada SVG üçün brauzer dəstəyi haqqında məlumat var.
Bu məqalə yüngül Jquery plaginindən istifadə edərək SVG vektor animasiyasının ən sadə nümunəsini müzakirə edir Lazy Line Painter.
MənbəBu tapşırığı yerinə yetirmək və tam başa düşmək üçün HTML, CSS, Jquery-nin əsas bilikləri arzuolunandır, lakin sadəcə SVG-ni canlandırmaq istəyirsinizsə, tələb olunmur) Gəlin başlayaq!
Və bunlar bizə əməl etməli olduğumuz addımlardır:
1. Düzgün fayl strukturunu yaradın
Initializr xidməti bu işdə bizə kömək edəcək, burada aşağıdakı şəkildəki kimi parametrləri seçməliyik.
- Klassik H5BP (HTML5 Qazan Plitəsi)
- Şablon yoxdur
- Sadəcə HTML5 Shiv
- Kiçikləşdirilmiş
- IE dərsləri
- Chrome Çərçivə
- Sonra Yükləyin!
2. Plugini yükləyin və birləşdirin
Initializr, Lazy Line Painter layihə deposundan yükləməli olduğumuz arxivdən ən son JQuery kitabxanası ilə gəldiyi üçün layihəmizə yalnız 2 fayl köçürməliyik. Birincisi ‘jquery.lazylinepainter-1.1.min.js’ (plugin versiyası fərqli ola bilər) yaranan qovluğun kökündə yerləşir. İkincisi, example/js/vendor/raphael-min.js-dir.
Bu 2 faylı js qovluğuna yerləşdiririk. Biz onları main.js-dən əvvəl index.html-ə aşağıdakı kimi bağlayırıq:
3. Adobe Illustrator proqramında gözəl kontur şəkli çəkin
Məsələn, siz qoşmadakı nişanlardan istifadə edə bilərsiniz.
4. Şəkilimizi Lazy Line Converter-ə çevirin
Sadəcə ikonanızı aşağıdakı şəkildəki pəncərəyə sürükləyin.
Konturun qalınlığı, rəngi və animasiya sürəti kodun özündə dəyişdirilə bilər, çevrildikdən sonra görünəcək!
5. Nəticə kodunu main.js-ə yapışdırın
İndi biz sadəcə olaraq yaranan kodu boş main.js faylına yapışdırırıq
Seçimlər:
strokeWidth — kontur qalınlığı
strokeColor — kontur rəngi
Müddət parametrinin dəyərlərini dəyişdirərək hər bir vektorun çəkmə sürətini də dəyişə bilərsiniz (standart 600)
6. Zövqünüzə bir az CSS əlavə edin
index.html-dən paraqrafın silinməsi
Salam dünya! Bu HTML5 Boilerplate-dir.
Və bunun əvəzinə animasiyamızın yerləşəcəyi bir blok daxil edirik
sonra main.css faylının daha gözəl görünməsi üçün ona bəzi CSS əlavə edirik:
Gövdə (fon:#F3B71C; ) #işarələr (mövqe: sabit; yuxarı:50%; sol:50%; kənar: -300px 0 0 -400px; )
bütün faylları saxla.
İndi sadəcə müasir brauzerdə index.html açın və effektdən həzz alın.
P.S. başlayanda yerli maşın Animasiyanın başlamasında bir neçə saniyə gecikmə ola bilər.
Hamıya salam! Bu gün mən imkanları təsvir etməyə çalışacağam Adobe proqramları Illustrator, onu Flash imkanları ilə müqayisə edir. Bu proqramın qlobal təhlili olmayacaq, əksinə bu proqramda kəşf etdiyim bəzi maraqlı xüsusiyyətlərin təsviri olacaq. Hər şeyi bir yazıda yerləşdirmək üçün onları tədqiq edərkən hissə-hissə məlumat topladım. Dərhal etiraf edim ki, mən Illustrator-un super təcrübəli istifadəçisi deyiləm, mən ondan yalnız son altı ay ərzində rəsm çəkmək üçün istifadə edirəm (bundan əvvəl hər şeyi Flash-da çəkirdim). Bir çox insanlar illüstratorun mürəkkəb olduğundan və həmişə intuitiv olmadığından şikayətlənirlər. Müəyyən dərəcədə razıyam ki, yuyulduqdan sonra bu proqram mürəkkəbdir. Amma burada əsas olan təslim olmaq deyil, oxumağa davam etməkdir. Və bir neçə həftədən sonra belə bir fikir yaranır ki, mən onsuz necə bacardım!
Beləliklə, illüstratorda nəyi bəyəndim və flaşda olmayan nəyi tapdım?
1. Ən sadə, lakin eyni zamanda zəruri olandan başlayacağam. Flash-da obyektləri dairədə yerləşdirməyə cəhd edin. Əvvəllər bir Deco Aləti var idi, lakin o, lazımsız hesab edilən silindi. Bunu əllərlə etməyin daha əyləncəli olacağına qərar verdik. Illustrator-un bu funksiyası var: Effekt – Təhrif et və Dönüştür – Çevir.
Hər şey tez və sadədir, parametrlərdə dəyərləri (obyektlər arasındakı məsafə, nüsxələrin sayı) özümüz təyin edirik.
2. Ziq-zaq
Daha sadə, lakin buna baxmayaraq faydalı bir şey. Bu kiçik bir şey kimi görünə bilər, lakin Flash-da əl ilə çəkmək lazımdır, Illustrator-da bu bir neçə saniyədir.
3. Obyektlərin deformasiyası (Warp)
Flash-da belə bir şey yoxdur. Aşağıdakı nümunədə sadə formaları deformasiya etməyin yalnız 2 yolunu göstərdim (Effekt – Çözgü – Qövs/Balıq). Əslində onlardan 15-i var son versiya proqramlar.
4. Künclərin avtomatik yuvarlaqlaşdırılması (Round Corners)
Bunu əl ilə edə bilərsiniz: qrafik obyektdə, seçildikdə, küncdə (bütün künclərdə) ağ nöqtə və dairəvi xətt işarəsi görünür. Siçan ilə sürükləyirik və zövqünüzə uyğunlaşdırırıq.
Ancaq bu, yalnız formalara aiddir, bir qələm xətti ilə biz bunu bir az fərqli edirik - yuvarlaqlaşdırma effekti tətbiq edirik (Effekt - Stilize - Yuvarlaq künclər). Çıxışda eyni nəticəni alırıq.
5. Kobudlaşdırmaq
Effekt sadə formalara tətbiq olunur (Effekt – Distort & Transform – Roughen). Çıxış aşağı poli 3D modellərə bənzəyən bir şeydir. Məncə sərin :) Və ən əsası çox sadədir.
6. Pucker & Bloat (Çəkmə və Şişkinlik)
Aşağıdakı şəkildəki nümunə:
7. Formanın genişləndirilməsi (Offset yolu)
Flash-ın Genişləndirilmiş Doldurma funksiyası var; o, Illustrator-dan fərqli olaraq ümumiyyətlə qələm xətləri ilə işləmir.
8. Fırçalar (İncəsənət Fırçası, Naxış Fırçası, Dağılma Fırçası)
Aşağıdakı şəklə nümunələrlə baxın:
9.Texture Brush
Illustrator, həmçinin haqqında yazdığım və onların necə göründüyü haqqında bir çox faktura fırçaları təqdim edir yeni versiya flash - . Qeyd olundu ki, Adobe Animate-də fırçalardan istifadə olduqca yavaşdır. Bu belədir:(
10. Bunun əsl hiylə olub-olmadığından əmin deyiləm, amma mən diqqətimi Blob Brush adlı gülməli bir fırçaya yönəltmək istəyirəm. Alətlər panelində yerləşən bu, istifadə etmək üçün çox gözəl fırçadır. Çoxlu parametrləri var, adi olandan daha çox xoşuma gəlir. Faydalarını sözlə izah etmək çətindir, bir dəfə cəhd etmək daha yaxşıdır.
10. Şəbəkəyə bölün
Digər faydalı şey Split to Grid (Object-Path-Split to Grid) funksiyasıdır.O, formanı bərabər seqmentlərə kəsməyə imkan verir. Bu bizə nəyi xatırladır? Doğrudur - hündürmərtəbəli binanın pəncərələri. Məncə, bu, məsələn, şəhər mənzərələrini çəkmək üçün gözəl bir şeydir;)
Başqa biri faydalı alət, yəqin ki, ilk buraxılışından bəri illustrator-da nümayiş etdirilir. Onun köməyi ilə, məsələn, ağac toxumaları yarada bilərsiniz:
12. Köçürün (sağa - Çevirin - Köçürün)
Obyekti müəyyən bir məsafəyə köçürür. İstəyirsinizsə, dərhal seçilmiş obyektdən üfüqi/yaxud şaquli olaraq istədiyiniz məsafədə yerləşdiriləcək surəti yarada bilərsiniz. Flash-ın əvvəlki versiyasında bunu edən bir plagin var idi bu funksiya. Təəssüf ki, adını xatırlamıram.
Illustrator qüsursuz naxışlar yaratmaq üçün çox rahatdır (Obyekt-Naxış-Yarat). Yadımdadır ki, mən necə qəzəbli bir şəkildə incəlik yaratdım. Illustrator-un SS 2015 versiyasında hər şey avtomatlaşdırılıb; bir dəstə parametr əlinizdə bir neçə qrafik elementlə onlarla variasiyada naxış yaratmağa kömək edəcək. Daha çox əvvəlki versiyalar Bütün proqramlar indiyə qədər Flash-da olduğu kimi əl ilə edilməli idi.
(Qeyd – Obyekt – Görünüşü genişləndir funksiyasından istifadə etməklə nümunə vektor redaktə edilə bilən obyektə çevrilə bilər.
14. Obyekt Mozaikası
Mövcud bir şəkil əsasında rəng palitrasının yaradılması. Bəyəndiyiniz şəkli illüstrasiyaya idxal edin (Açıq), sonra Obyekt – Obyekt Mozaikasını yaradın. Parametrlərdə hündürlüyü və eni bölmə tezliyini təyin edirik.
Və çıxışda alırıq:
15. Qarışdırın
Qradiyent yaratmaq üçün istifadə olunur. Şəkildəki kimi addım-addım keçidlər yarada bilərsiniz. Tez-tez istifadə etdiyimi söyləməyəcəyəm, amma kiməsə faydalı ola bilər. Mənə elə gəlir ki, ondan sadə fon şəkilləri yaratmaq üçün istifadə etmək olar.
Alət obyektləri klonlaşdırmaq üçün də istifadə edilə bilər. İki obyekti bir-birindən aralıda yerləşdirin və Qarışıq Seçimlərini tətbiq edin, addımların sayını seçin (klonlanmış obyektlərin sayı).
16. Forma Yaratma Aləti. Primitivlərlə işləmək üçün çox rahat bir şey. Flaşda mənə elə gəldi ki, daha az rahatdır.
Alt düyməsini basıb saxlayın və seqmentləri silmək üçün seçilmiş seqmentlərə klikləyin. Siçanı sadəcə bir neçə seçilmiş sahənin üzərinə sürükləsək - bağlantılar.
Əlavə avtomatik kəsmə, qoşulma və s. kömək edən bir vasitədir. vurğulanmış formalar. Mənə gəlincə, bu çox rahat deyil, mən tez-tez Forma Yaratma Alətindən istifadə edirəm.
(iş lövhələri)
18. Xüsusi Alət Paneli
Öz alətlər panelinizi yaratmaq, lazımsızları atmaq və yalnız istifadə etdiyinizləri seçmək imkanı.
Flash-da iş lövhələri, yəni səhnələr (Səhnə 1,2,3..) ayrıca yerləşir və onlar arasında keçid etmək lazımdır (Shift+F2). Illustrator-da onların hamısı gözləriniz qarşısında yerləşdirilə bilər. Eyni rəsmin bir neçə versiyasını hazırladığınız zaman rahatdır ki, bütün variantlar müqayisə üçün gözünüzün qabağında olsun.
19. Qrafik Üslublardan istifadə edən izometriya
Ən son isə qrafik üslublardan (Qrafik Üslublar) istifadə etməklə 1 kliklə (daha doğrusu 3 kliklə, çünki 3 tərəfimiz var;) istifadə etmədən izometriya yaratmaqdır. Bunun növbəti dəfə necə edildiyini təsvir edəcəyəm.
İllüstratorun flaşla ortaq cəhəti obyekti simvolda saxlamaq imkanıdır və bu simvolu asanlıqla flasha köçürmək olar (İdxal – Səhnəyə idxal et istifadə edərək faylı flash.ai-də açın).
Illustrator-da simvol Flash-da olduğu kimi eyni xüsusiyyətlərə malikdir.
Və sonda yazacağam ki, Illustrator-da mənim fikrimcə flaşdan aşağıdır. Bəli, bəli, belə bir şey var. Və bu doldurma vasitəsidir (Paint Bucket). Illa-da buna öyrəşməyə nə qədər çalışsam da, Flash-da daha rahatdır.
Əgər mənim qeydlərim sizin üçün faydalı olubsa və ya özünüzdən nəsə əlavə etmək istəyirsinizsə, şərhlərdə xoş gəlmisiniz! Hamıya uğurlar ;)
Veb Qrafik Optimizasiyası
Qrafik məlumat mətndən çox yavaş ötürülür və şəkillərin yüklənmə vaxtı onların ölçüsünə mütənasibdir qrafik fayllar. Buna görə də, Web-səhifələrin sürətli yüklənməsi kiçik ölçüdə quraşdırılmış səhifələr tələb edir qrafik şəkillər, bu da onların optimallaşdırılması yolu ilə əldə edilir. Təsvirin optimallaşdırılması onun transformasiyasına aiddir, bu halda tələb olunan görüntü keyfiyyətini qoruyarkən minimum fayl ölçüsünü təmin edir ki, bu da ilk növbədə qrafik təsvirlərdə rənglərin sayını azaltmaqla, sıxılmış və xüsusi fayl formatlarından istifadə etməklə və fərdi təsvir üçün sıxılma parametrlərini optimallaşdırmaqla əldə edilir. fraqmentlər.
Illustrator, müxtəlif önizləmə üsulları ilə optimallaşdırma prosesini tez və səmərəli edən daxili təsvir optimallaşdırma alətlərinə malikdir. Ön baxış optimallaşdırılmış görüntünün real vaxtda necə görünəcəyi barədə kifayət qədər dəqiq fikir verir ki, bu da optimallaşdırma nəticəsini qiymətləndirməyə və düzgün parametrləri uğurla seçməyə kömək edir. Siz həm birbaşa Illustrator-da yaradılmış şəkilləri, həm də digərləri, məsələn, veb-saytda yerləşdirilməli olan fotoşəkilləri optimallaşdıra bilərsiniz.
Optimallaşdırma parametrləri Fayl menyusunun eyniadlı əmri ilə çağırılan Save for Web pəncərəsində təyin edilir. Proqram sizə dörd baxış rejimindən birini istifadə etməyi təklif edir, lakin ikisi optimallaşdırmanın keyfiyyətini qiymətləndirmək üçün ən uyğundur:
- 2-Up (iki seçim) göstərilən parametrlərə uyğun olaraq orijinal və optimallaşdırılmış təsvirə eyni vaxtda baxılması (şək. 1);
- 4-Yuxarı (dörd seçim) Bu rejimdə görünüş pəncərəsi orijinal təsviri və optimallaşdırılmışın üç versiyasını göstərmək üçün dörd pəncərəyə bölünür (şək. 2): ilk versiya təyin edilmiş optimallaşdırma dəyərlərinə əsasən yaradılır və digər ikisi cari optimallaşdırma parametrlərinin varyasyonlarıdır.
Hər iki rejim ən yaxşı optimallaşdırma variantını tapmaq üçün vaxta əhəmiyyətli dərəcədə qənaət etməyə imkan verir, çünki onlar müxtəlif optimallaşdırma parametrləri ilə şəkilləri saxlamaq ehtiyacını və onların sonrakı vizual müqayisəsini aradan qaldırır. Bundan əlavə, müxtəlif əlaqə variantları altında yalnız optimallaşdırılmış təsvirin keyfiyyətini deyil, həm də ölçüsünü və yükləmə müddətini qiymətləndirmək mümkündür. Müqayisə üçün, ən əlverişli rejim 4-Up (dörd seçim) dir, bu, sıxılma və ya palitranın kiçilməsinin görüntü keyfiyyətinə və onun ölçüsünə təsirini vizual olaraq qiymətləndirməyə və nəticədə ən yaxşı optimallaşdırma parametrlərini müəyyən etməyə imkan verir.
Illustrator sizə yalnız GIF, JPG, PNG-8 və PNG-24 formatlarında deyil, həm də SWF və SVG formatlarında Veb qrafikasını optimallaşdırmağa imkan verir. Az sayda rəngə malik indekslənmiş şəkillər GIF formatında saxlanılır. JPG formatı tam rəngli və boz tonlu şəkilləri, fotoşəkilləri və gradient dolguları kimi rənglərlə zəngin qrafikləri saxlamaq üçün istifadə olunur. Şəffaf sahələri olan tam rəngli şəkillər üçün PNG formatı istifadə olunur ki, bu da həm indekslənmiş, həm də tam rəngli şəkilləri saxlamağa imkan verir, PNG-8 formatında isə optimallaşdırılmış təsvirin rənglərinin maksimum mümkün sayı 256-dır. PNG-24 formatında şəkil milyonlarla rəngə malik ola bilər və buna görə də o, belə görünür JPEG formatı. PNG-24 və JPEG arasındakı fərq ondan ibarətdir ki, PNG-24 formatında şəkilləri optimallaşdırmaq üçün istifadə olunan sıxılma üsulu keyfiyyətin itirilməsinə səbəb olmur, lakin nəticədə fayl ölçüsü artır. SVG və SWF formatları qrafika, mətn və interaktiv komponentləri birləşdirir və həmçinin optimallaşdırıla bilər.
Gəlin nəzərdən keçirək konkret misal təsvirin optimallaşdırılması. Tutaq ki, Illustrator-da veb-sayt loqosu hazırlanmışdır (Şəkil 3), əvvəlcə AI formatında saxlanmışdır. Onu dərhal İnternet üçün optimallaşdırmaq cəhdi yaxşı heç nəyə gətirib çıxarmayacaq, çünki bu halda şəkil avtomatik olaraq kəsiləcək və bu, deformasiya nəticəsində yaranan yazının həqiqi mövqeyini nəzərə almayacaq (Şəkil 4 və 5).
Odur ki, File=>Export (File=>Export) əmri ilə loqonu PSD formatına ixrac etməyə çalışaq, yaradılan şəklin ölçüsü 143 KB olacaq. Yaranan PSD faylını açın və File=>Save for Web əmrindən istifadə edin. Şəkildə cəlb olunan rənglərin məhdud sayını nəzərə alsaq, bu halda GIF formatı optimaldır, onun xüsusi parametrlərinə qərar verilməlidir. Parametrləri sınaqdan keçirərək, buna əmin ola bilərsiniz ən yaxşı keyfiyyət proqramın standart sıxılma alqoritmini verir, Seçici. Hamarlaşdırmağa gəldikdə, bir gradient dolğunun mövcudluğunu nəzərə alaraq, səs-küy yaratma Səs ilə bir alqoritm seçmək daha yaxşıdır (şək. 6). Alınan optimallaşdırma faylının ölçüsü 6,729 KB (şək. 7), fonun şəffaflığı isə qorunub saxlanılacaq, bunu HTML faylı ilə birlikdə şəkli GIF formatında saxlamaqla yoxlamaq asandır (şək. 8). Nəticədə, bu nümunədə Primer1 qovluğunda emblem.html və emblem.gif faylları əldə edilmişdir.
İstənilən veb-səhifənin dizaynının əvəzsiz xüsusi elementi qrafik idarəetmə düymələridir. Onlarsız bir səhifə təsəvvür etmək sadəcə mümkün deyil. Düymə rəsmləri bu gün xüsusi bir janra çevrilib və Illustrator sizə ən mürəkkəb variantları yaratmağa imkan verir. Məsələn, mesh obyektlər kimi hazırlanmış və/və ya üst-üstə düşən maskalar olan düymələr adi olanlardan daha təsir edici görünür.
Illustrator-da dəyirmi, qabarıq düymə yaratmaq variantını nəzərdən keçirin. İxtiyari rənglə doldurulmuş dairə şəklində vektor obyekti çəkin (şək. 9) və onu Obyekt => Gradient Mesh yarat (Obyekt => Qradient mesh yarat) əmri ilə dörd cərgə və dörd sətir göstərərək onu şəbəkəyə çevirin. sütunları və Görünüş siyahısında 60-a bərabər olan Mərkəzə Vurğulanma seçimini seçin (Şəkil 10). Birbaşa Seçim alətini seçin və orada yerləşən anker nöqtələrini seçərək obyektin yuxarı sol küncündə klikləyin (şək. 11). Swatches palitrasında onu seçməklə uyğun xananın rəngini ağ rəngə dəyişdirin (şək. 12).
Ellips alətini götürün, siçan markerini əvvəl yaradılmış dairənin mərkəzinə qoyun və Alt və Shift düymələrini basıb saxlayın, yeni dairəni köhnənin üzərinə elə uzatın ki, o, köhnədən 1-2 piksel böyük olsun. tərəflər. Ona 1-2 piksel enində qara haşiyə (Stroke) verin və qırmızıdan ağa doğru radial qradiyentlə doldurun (şək. 13). Yaradılmış vektor obyektini 1-2 piksel sağa və aşağı dartın, sonra seçimi silmədən üzərinə sağ klikləyin və çıxarın kontekst menyusu Arrange=>Göndər seçin. Nəticə Şəkildə göstərilən düymə üçün boşluq olacaq. 14.
Bir qayda olaraq, hər hansı bir Web səhifəsində eyni tipli bir neçə düymə var, məsələn, yalnız onların üzərində çəkilmiş oxlar istiqamətində fərqlənir, saytın ətrafında hərəkət istiqamətini göstərir. İki düymənin olmasının ən sadə halını nəzərdən keçirək, bunlardan biri aşağı ox ilə növbəti səhifəyə keçmək, yuxarı oxlu düymə isə əvvəlki birinə keçmək deməkdir. Ox şablonu olaraq, çoxbucaqlı aləti ilə çəkilmiş, qara rəngə boyanmış və daha böyük effekt əldə etmək üçün həm də mesh obyekt kimi hazırlanmış adi üçbucağı götürək. Oxu düymənin üzərinə aparın və Align palitrasındakı müvafiq düymələrdən istifadə edərək bütün obyektlərin bir-birinə nisbətən mövqeyini tənzimləyin. Yaranan düymələrdən birincisi Şəkildə göstərilmişdir. 15. Duplicate Layer Layers əmrini seçməklə düymə ilə qatın surətini çıxaraq, nəticədə iki eyni təbəqə əldə edəcəyik. Sonra təbəqənin surətində oxu seçin və kontekst menyusundan Transform=>Rotate Transformation=>Rotate əmrini seçməklə onu 180° fırladın. Şəkildə göstərildiyi kimi eyni düyməni alacağıq. 16. Nəzərə alın ki, bir layihə üçün eyni tipli bütün düymələri bir faylda müxtəlif təbəqələrdə saxlamaq daha rahatdır, bu, bu halda nümayiş etdirilir.
İndi hər bir düymənin optimallaşdırılmış versiyalarını saxlamalısınız. Əvvəlcə alt təbəqəni görünməz hala gətirin, bu halda üst təbəqədəki düymə qorunacaqdır. File=>Save for Web əmrini seçin, düyməni optimallaşdırma parametrlərini konfiqurasiya edin, məsələn, Şəkildə göstərildiyi kimi. 17, Saxla düyməsini basın və fayl adını daxil edin. Nəhayət saxlanılan düymə Şəkildə göstərilmişdir. 18. İndi görünmə qabiliyyətini alt təbəqəyə qaytarın, üst təbəqəni görünməz hala gətirin və ikinci düyməni eyni şəkildə qeyd edin, ona fərqli bir ad verin. Nəticə Şəkildə göstərilmişdir. 19.
İndi qalan şey düymələrin Veb-səhifədə kifayət qədər məqbul göründüyünə əmin olmaq və onları xüsusi səhifəyə yerləşdirməkdir (Şəkil 20). Nəticədə, bu nümunədə Primer2.html faylı və şəkillər qovluğunda (Primer2 qovluğunda) iki qrafik təsvir əldə edilmişdir.
İstəyirsinizsə, optimallaşdırma prosesi zamanı düyməni dilimə çevirmək asandır. Bu halda, File=>Save for Web (Fayl=>Save for Web) əmrini seçdikdən və optimallaşdırma parametrlərini təyin etdikdən sonra alətlər palitrasından Slice Select alətini seçməli və şəklin üzərinə iki dəfə klik etməlisiniz, nəticədə o avtomatik olaraq seriya nömrəsi 1 olan bir dilimə çevrilir (şək. 21). Yenidən iki dəfə kliklədikdə, Dilim Seçimləri pəncərəsi açılacaq, burada siz linki təyin etməli və isteğe bağlı olaraq dilimin adını dəyişdirməli olacaqsınız (Şəkil 22) və sonra optimallaşdırılmış şəkli saxlamaq lazımdır. Bu halda nəticə Primer3.html (Şəkil 23) və Primer3.gif (Primer3 qovluğu) faylları olacaq.
Səhifəni canlandırmağın bir yolu onu dəyişdirən dizayn elementlərini təqdim etməkdir görünüş(və ya vəziyyət) siçanın davranışından asılı olaraq və ya daha az hallarda, hər hansı digər vəziyyətlərdə: miqyaslama, sürüşmə, yükləmə, səhvlər və s.
Belə elementlər arasında ən məşhurları siçanın təsiri ilə görünüşünü dəyişən rollover (ingilis dilindən roll over roll, turn over) elementləridir. Tipik dönmələrə misal olaraq animasiya düymələridir. Digər veb-sayt naviqasiya elementlərini yaratarkən tez-tez rolloverlərdən istifadə olunur. Əslində, hər hansı bir rollover bir deyil, hər biri müəyyən bir hadisəyə uyğun gələn bir neçə (dördədək) təsvirdir. Əsas hadisələr aşağıdakılar hesab olunur: Normal normal vəziyyət, Siçan kursorunu elementin üzərinə gətirmək və kursoru onun üzərinə apararkən siçanın sol düyməsini Aşağı basmaq. Nəzəri olaraq, kliklədikdən sonra sol siçan düyməsini buraxmaq, düyməni buraxdıqdan sonra Yuxarı, aktiv zonanı tərk edərkən Out kimi hadisələr iştirak edə bilər. Bununla belə, praktikada onlar çox vaxt elementi yalnız ilk üç və ya hətta iki hadisə üçün dəyişdirməklə məhdudlaşırlar.
Klassik dönmələrKlassik mənada yuvarlanma GIF formatında bir sıra qrafik şəkillər və müvafiq HTML kodudur, bunun sayəsində siçan davranışından asılı olaraq brauzer pəncərəsində bir şəkil digərini əvəz edir.
Illustrator klassik mənada bilavasitə rolloverlər yaratmaq üçün nəzərdə tutulmayıb, lakin onlar üçün ilkin elementlərin işlənib hazırlanmasında kömək edə bilər. Bu vəziyyətdə ideya ilk hadisəyə uyğun olan görüntü ilə bir təbəqə yaratmaqdır. Sonra təbəqənin surətini çıxarın və şəkli ikinci hadisəyə uyğunlaşdırmaq üçün çevirin və s. Yaranan çoxqatlı görüntü, təbəqələri qorunub saxlanılan PSD faylına ixrac olunur, bunun əsasında Image Ready proqramında rollover yaradılır. Illustrator proqramından istifadənin üstünlüyü, bir çox digər hallarda olduğu kimi, onun digər ölkələrdə mövcud olmayan bir sıra maraqlı xüsusiyyətləridir. proqram təminatı, vektor qrafikasının dəyişdirilməsinin rahatlığı ilə birlikdə.
Siçan davranışından asılı olaraq rəngini dəyişən bir yazı şəklində yuvarlanma yaratmağa çalışaq. Illustrator proqramını açın və qara rənglə doldurulmuş dairəvi düzbucaqlı şəklində forma yaradın (şək. 24), onun surətini çıxarın və ekranın boş hissəsinə qoyun. Düzbucaqlının birinci nüsxəsini mərkəzdə vurğulanmış mesh obyektinə çevirin (əmr Obyekt=>Qradient Mesh Obyektini Yarat=>Qradient Mesh Yarat), dörd sətir və on sütun göstərin (şək. 25). Düzbucaqlının ikinci nüsxəsini aktivləşdirin və onu təxminən şəkildə göstərildiyi kimi qradiyentlə doldurun. 26. Qradiyent obyektini mesh obyektin üstünə qoyun, qradiyent obyektinin qeyri-şəffaflığını təqribən 80%-ə, ölçüsünü isə təxminən 1 piksel azaldın ki, nəticədə zərbə effektini simulyasiya edin. Və sonra obyektlərin üstündəki yazı çap edin. Orijinal formada, normal vəziyyətə uyğun gələn ağ rəngə sahib olsun (şək. 27), sonra yuvarlanma vəziyyəti dəyişdikdə, yazının rəngi, məsələn, siçan işarəsi ilə yaşıl rəngə çevriləcək. üzərinə sürülür (Üst vəziyyət) və siçan düyməsini sıxdıqda mavi olur (Aşağı vəziyyət).
Bu mərhələdə Layers palitrasına diqqət yetirin, içərisində yalnız bir təbəqə var. Layers palitrası menyusundan Duplicate Layer əmrindən istifadə etməklə bu təbəqənin iki nüsxəsini çıxarın, palitrada üç qat olacaq (şək. 28). Sonra təbəqənin birinci nüsxəsində yazının rəngini yaşıl, ikinci nüsxədə isə mavi rəngə dəyişdirin (şək. 29). Nəticədə, yuvarlanma üçün lazımi boşluq əldə ediləcəkdir.
File=>Export əmrindən istifadə edərək və RGB rəng modelini seçməklə, layları qoruyub saxlayaraq yaradılmış təsviri PSD formatına ixrac edin (şək. 30). Yaradılmış PSD faylını ImageReady proqramında açın (şəkil 31 və 32). Animation palitrası menyusundan Make Frames From Layers əmrini seçməklə təbəqələr əsasında çərçivələr yaradın. Animasiya pəncərəsi şəkildəki kimi görünəcək. 33. Bu halda Rollovers palitrasında ilkin olaraq vahid Normal vəziyyət yaradılacaq.
Sonra Animasiya pəncərəsində induksiya vəziyyətinə uyğun kadrı seçin və Layer 1 Copy təbəqəsi avtomatik olaraq Layers palitrasında seçiləcək (şək. 34). Rollovers palitrasına gedin və Rollover statusu yarat düyməsini sıxın (Dönmə vəziyyəti yaradın) əncir. 35, bu, Over State vəziyyətinin Rollovers palitrasında görünməsinə səbəb olacaq (Şəkil 36). Eyni şəkildə Aşağı Dövlət yaradın. Rollovers palitrasında Normal vəziyyəti aktivləşdirin və Animasiya palitrasında Normal vəziyyətə uyğun gələndən başqa bütün çərçivələri silin. Nəticə olaraq, hər bir rollover vəziyyəti üçün Animasiya palitrasında yalnız bir kadr olacaq (şək. 37, 38 və 39).
düyü. 38. Şəklin görünüşü, Animasiya pəncərəsi və Over State vəziyyəti üçün Layers və Rollovers palitrası
Alətlər panelindəki Default Browser-də Preview düyməsini sıxaraq və brauzer pəncərəsinə keçərək nəticəni yoxlayın (Şəkil 40). Bundan sonra File=>Save Optimized əmrindən istifadə edərək və HTML və Şəkillər (*.html) seçimini göstərərək faylı qeyd edin. Nəticədə, bu nümunədə Primer4.html faylı və şəkillər qovluğunda bir sıra qrafik təsvirlər əldə edilmişdir.
düyü. 40. Rollover elementi olan brauzer pəncərəsi
SVG sürüşmələriGetdikcə populyarlaşan SVG (Scalable Vector Graphics) formatı Vektor qrafikası), XML standartı əsasında yaradılmışdır, həmçinin müxtəlif interaktiv elementləri, xüsusən də rolloverləri almağa imkan verir, lakin praktikada bu tamamilə fərqli şəkildə həyata keçirilir. Qeyd etmək lazımdır ki, klassik kodlardan fərqli olaraq, müvafiq HTML kodu tamamilə avtomatik yaradıldıqda, interaktiv SVG rolloverlərinin yaradılması JavaScript dilini bilməyi və obyekt yönümlü proqramlaşdırmanın əsas prinsiplərini başa düşməyi tələb edir.
SVG obyektləri ilə işləmək üçün xüsusi SVG Interactivity palitrası mövcuddur, onu Window => SVG Interactivity (Window => SVG interactivity) əmrindən istifadə etməklə asanlıqla açmaq olar şək. 41.
İnteraktiv düymənin nümunəsindən istifadə edərək sürüşmə yaratmaq üçün bu variantı nəzərdən keçirək, siçan üzərinə sürdükdə üzərindəki yazının rəngi qaradan maviyə dəyişəcək və siçan aktiv zonadan çıxdıqda yenidən qara rəngə çevriləcək.
Dairəvi kənarları olan düzbucaqlı bir düymə yaradın və bunun üçün uyğun bir gradient doldurma seçin, məsələn, Şəkil 1-də göstərildiyi kimi. 42. Transparence palitrasında düymənin şəffaflığını tənzimləyin.Bu misalda Opacity dəyəri 50% olaraq təyin olunub. Düymənin surətini çıxarın, onu tünd yaşıl rənglə doldurun (Şəkil 43) və sonra onu Object => Create Gradient Mesh əmri ilə dörd sətir və on sütun göstərərək və Görünüş siyahısında (Görünüş) mesh obyektinə çevirin. To Center seçimini seçməklə və Highlight dəyərini 100-ə təyin etməklə. Mesh obyekti ilə təbəqənin qeyri-şəffaflığını təxminən 40%-ə qədər azaldın (şək. 44). Qradiyentin üstünə bir mesh obyekti qoyun və düymə Şəkildə göstərilənə bənzəyəcək. 45.
düyü. 44. Düymənin surətini şəbəkə obyektinə çevirin
Düyməni nəzərdə tutulan yazı ilə tamamlayın və Align palitrasındakı müvafiq düymələrdən istifadə edərək onun mövqeyini tənzimləyin. Yaranan şəkil bir-birinin üzərinə qoyulmuş üç obyektdən ibarət bir təbəqədən ibarət olacaq (şək. 46). Planlaşdırılmış hadisələr mətn obyektinə nisbətən olacaq, ona görə də rahatlıq üçün obyektə iki dəfə klikləmək və yeni ad daxil etməklə onun adını Mətn olaraq dəyişdirin. Eynilə, təbəqənin adını Layer 1-dən Layer-ə dəyişdirin (şək. 47).
Hadisələrin işlənməsi JavaScript prosedurlarından istifadəni nəzərdə tutur, ona görə də bu prosedurları təsvir edən faylı daxil etməlisiniz. O, Events.js adlanır və Adobe Illustrator proqramını quraşdırdığınız zaman Nümunə Fayllar\Nümunə Sənəti\SVG\SVG qovluğunda diskdə saxlanılır. Events.js faylını birləşdirmək üçün JavaScript Files SVG Interactivity əmrindən istifadə edin (şək. 48). Sonra, Əlavə et düyməsini basmalı və sabit diskinizdə istədiyiniz faylı tapmalısınız. Onun adı URL sahəsində görünəndə (Şəkil 49), Bitti düyməsini sıxın.
düyü. 48. JavaScript Faylları Komandasının seçilməsi
Sonra, Mətn obyekti üçün siçan hadisələrinə cavab təyin etməlisiniz. Mətn obyektini seçin, SVG İnteraktivlik palitrasının Hadisə sahəsində, siçan üzərində hadisəni seçin elemColor(evt, "Text", "#3333FF") bu o deməkdir ki, siçan Mətn obyektinin üzərində olduqda onun rəngi dəyişəcək. mavi (Şəkil 50). Siçan aktiv sahəni tərk etdikdən sonra mətn rənginin qara rəngə keçməsi üçün başqa bir onmouseout hadisəsi yaratmalı və onu SVG İnteraktivlik palitrasının Hadisə sahəsində seçin. Sonra hərəkət sətirinə elementi daxil edin.Color(evt, "Mətn", "#000000") bu rəngi qara rəngə qaytaracaq (Şəkil 51).
düyü. 51. Mətn obyekti üçün SVG İnteraktivlik palitrasının yekun görünüşü
Yaradılmış çevrilməni SVG faylı kimi File=>Save as (Fayl=>Fayl növü SVG formatı) əmri ilə yadda saxlayın və sonra Şəkil 52-də göstərildiyi kimi SVG faylının saxlanması üçün seçimləri təyin edin. Saxladıqdan sonra siz yalnız birini alacaqsınız. klassik rollover vəziyyətində olduğu kimi iki deyil, SVG uzantılı tək fayl, bu halda Primer5.svg faylı (Primer5 qovluğu) qəbul edildi.Lakin, çevirmənin həqiqətən işləməsi üçün əlavə olaraq kopyalamalısınız JavaScript prosedurlarının təsvirindən Events.js faylı. Bundan sonra siz rolloverin funksionallığını yoxlaya bilərsiniz - nəticə Şəkil 53-də göstərildiyi kimi görünəcək.
SVG formatı animasiyanı ötürmək üçün də istifadə edilə bilər. Gəlin sadə animasiya elementi yaratmağa çalışaq (bu halda bu, şirkət haqqında məlumat olacaq), siçanı müvafiq qrafik obyektin üzərinə gətirdikdə ekranda görünəcək və siçanı interaktiv elementdən çıxardıqda yox olacaq.
Şəkildə göstərildiyi kimi təxminən aşağıdakı qrafik və mətn obyektləri seriyasını yaradaq. 54. Layers palitrasında növbəti obyektin adını ardıcıl olaraq vurub daxil etməklə bütün yaradılmış obyektlərin adını rahat şəkildə dəyişdirək. arzu olunan ad(Şəkil 55). Nəzərə alın ki, Şəkildə vurğulananlar. 56 obyekt Text1, Text2, Text3 və Path1 həmişə, digərləri isə yalnız siçanı Mətn1 obyektinin üzərinə gətirdiyiniz zaman görünəcək.
düyü. 54. Şəklin orijinal görünüşü
SVG İnteraktivlik palitrasından JavaScript Faylları əmrindən istifadə edərək, Əlavə et düyməsini sıxaraq, sabit diskinizdə istədiyiniz faylı göstərərək və Bitdi düyməsini klikləməklə JavaScript prosedurlarını təsvir edən Events.js faylını daxil edin.
Text1 obyekti üçün siçan hadisələrinə cavab təyin edin. Text obyektini seçin, SVG Interactivity palitrasının Hadisə sahəsində, onmouseover hadisəsini seçin və aşağıdakı sətirdə elemShow(evt, "Text4") mətnini daxil edin; elemShow(evt, "Path2") . Nəticədə, siçan Text1 obyektinin üzərində olduqda, Text4 və Path2 obyektləri görünəcək. Nəzərə alın ki, hadisə baş verən zaman bir neçə hərəkət yerinə yetirilməlidirsə, onlar “;” işarəsi ilə qeyd edilməlidir. Sonra onmouseout hadisəsi üçün oxşar əməliyyatı yerinə yetirin, onun üçün mətni daxil edin, bu, obyektlərin gizlədilməsi demək olacaq (şək. 57).
Nəticəni File=>Save as əmrindən istifadə edərək, faylın adını göstərərək, File type sahəsində SVG formatını seçərək və sonra SVG faylının saxlanması üçün şəklə uyğun seçimləri təyin edərək SVG faylı kimi yadda saxlayın. 58. Saxladıqdan sonra Primer6.svg faylı alınacaq (Primer6 qovluğu). Events.js faylını bu faylın olduğu qovluğa kopyalamağı unutmayın. Bundan sonra coz run bu fayl, onda siz Şəkildə göstərilən nəticəni görəcəksiniz. 59. Demək olar ki, sizə lazım olan budur. Planlarımıza daxil olmayan yeganə şey, yükləmə zamanı Text 4 və Path 2 obyektlərinin ilkin görünüşü idi. Bu çatışmazlıqdan xilas olmaq üçün bir anda hər iki obyekt məlumatını seçin və onlar üçün hərəkət yaradın elemHide(evt, "Text4"); yüklənmə hadisəsində elemHide(evt, "Path2") (Şəkil 60). Faylı yenidən yadda saxlayın və əmin olun ki, Text4 və Path2 obyektləri indi yalnız siçanı Text1 obyektinin üzərinə gətirdiyiniz zaman görünəcək.
Hər hansı bir veb səhifəni Web animasiyası, o cümlədən animasiya gifləri olmadan təsəvvür etmək mümkün deyil. Onları yaratmaq variantlarından biri, digər şeylərlə yanaşı, təbəqələrdən animasiya yaratmağa imkan verən Adobe ImageReady proqramından istifadə etməkdir. Bu halda, çoxqatlı təsvirin özü müxtəlif proqramlarda, o cümlədən Adobe Illustrator-da hazırlana bilər.
Window=>Symbols əmri ilə açılan Simvollar palitrasının elementləri əsasında və ya Window=>Symbol Libraries əmrindən istifadə etməklə açıla bilən simvol kitabxanalarından birindən animasiya yaratmaq çox asandır. ).
Məsələn, hər hansı bir simvol obyektinin ölçüsünü artırmağa çalışacağıq, obyektin artırılması prosesinin əsas mərhələləri ayrı-ayrı təbəqələrdə qurulmalıdır. Əvvəlcə simvol obyektlərini bir-birinin üstünə qoyun və sonra hər bir sonrakı obyektin ölçüsünü artırın, məsələn, Şəkil 1-də göstərildiyi kimi. 61. Nəticədə Layers palitrasında çoxlu obyektli bir təbəqə yaradılacaq (şək. 62). Bu şəkli birbaşa PSD formatına ixrac etsəniz, heç bir şey verməyəcək, çünki yalnız bir təbəqə var və təbii olaraq, PSD faylını ImageReady proqramında açdığınız zaman yalnız bir təbəqə də olacaq. Buna görə də, əvvəlcə müxtəlif təbəqələrə obyektləri yerləşdirməlisiniz. Bunu etmək olar fərqli yollarƏn asan yol əvvəlcə Layers palitrasında Layer 1-i seçmək və Release to Layer əmrindən istifadə etməkdir. Nəticə o olacaq ki, obyektlərin hər biri öz təbəqəsinə köçürüləcək, lakin onların hamısı Layer 1-də yerləşəcək. Buna görə də, daha sonra bütün iç-içə layları Layer 1 qatının üstündə olması üçün əl ilə Layers palitrasının yuxarısına çəkməli olacaqsınız və sonra sadəcə olaraq indi boş olan Layer 1 qatını silməlisiniz (Şəkil 63). Şəkildə göstərildiyi kimi parametrlərlə Fayl=>İxrac əmrindən istifadə edərək şəkli PSD formatına ixrac edin. 64.
Yaradılmış PSD faylını ImageReady proqramına yükləyin (şək. 65 və 66). Layers palitrası menyusunu açın. Nəticədə, hər biri öz təbəqəsinə uyğun gələn beş çərçivə yaradılacaq və Animasiya palitrası pəncərəsi şəkildəki kimi görünəcəkdir. 67.
Bundan sonra, bu halda yaradılmış çərçivələrin hər birinin müddətini təyin edin, bütün çərçivələr üçün müddət 0,2 s olaraq təyin olunur. Və sonra File=>Save Optimized (File=>Save with optimization) əmrindən istifadə edərək optimallaşdırma ilə animasiyanı yadda saxlayın. Nəticə Şəkil 1-ə bənzəyir. 68.
Illustrator-un Live Blends funksiyalarından istifadə etmək üçün ImageReady-də asanlıqla animasiyaya çevrilə bilən blankları əldə etmək daha rahatdır. Illustrator və ImageReady-nin bu birgə istifadəsi GIF animasiyalarının yaradılması prosesini əhəmiyyətli dərəcədə sürətləndirir.
Məsələn, iki ixtiyari çoxrəngli obyekti çəkin və sonra onları uyğun parametrlərlə qarışdırma bağlantısı ilə birləşdirin (Şəkil 69). Animasiya yaratmaq üçün bu fayldan birbaşa istifadə etmək qeyri-mümkündür, çünki şəkil bir təbəqədə yerləşir (şək. 70). Buna görə, əvvəlcə qarışıq obyektinin hər bir elementini ayrı bir təbəqəyə yerləşdirməli olacaqsınız. Bunun üçün Layers pəncərəsində xətti seçin, onun yuxarı sağ küncündəki qara oxun üzərinə klikləməklə palitra menyusunu aktivləşdirin və Release to Layers Sequence əmrini seçin (şək. 71). Shift düyməsini basıb saxlayın, yaradılmış təbəqələri seçin və onları Layer 1-in üstünə qoyun və sonra Layer 1-in özünü silin, nəticədə onu zibil qutusuna köçürün, təbəqələr palitrası Şəkil 1-də olduğu kimi eyni formanı alacaq. 72.
düyü. 70. İlkin vəziyyət Qatlı pəncərələr
File=>Export əmrindən istifadə edərək yaradılmış faylı PSD formatına ixrac edin. Yaradılmış PSD faylını ImageReady proqramında açın (şək. 73). Nəzərə alın ki, Illustrator-da yaradılmış bütün təbəqələr təbəqələr pəncərəsində görünəcək (şək. 74), Animasiya pəncərəsində isə hələlik yalnız bir çərçivə olacaq.
Palitranın yuxarı sağ küncündə yerləşən qara oxun üzərinə klikləməklə Animasiya palitrası menyusunu aktivləşdirin və “Layerlərdən çərçivələr yarat” əmrini seçin.Nəticədə bu nümunədə beş kadr yaradılacaq və Animasiya palitrası pəncərəsi şəklə uyğun formada. 75. Shift düyməsini basıb saxlayaraq bütün kadrları seçin və bu misalda müvafiq kadr müddətini təyin edin, hər kadr üçün eyni vaxt 0,2 s götürülür. Sonra Fayl növü siyahısında Yalnız Şəkillər (*.gif) seçimini təyin edərək, Fayl=>Optimallaşdırılmış Saxla (Fayl=>Optimallaşdırılmış Saxla) əmrindən istifadə edərək faylı optimallaşdırma ilə yadda saxlayın. Animasiya Şəklə bənzəyəcək. 76.
Daha maraqlı görünən hərəkət deyil, qarışıq obyektlərin hamar ölçülərinin dəyişdirilməsidir. Məsələn, artıq yaradılmış qarışıq keçidindən istifadə edə bilərsiniz. Bu halda, hər bir qarışıq keçid elementi üçün ayrıca təbəqələr yaratdıqdan sonra Align palitrasının Horizontal Align Center və Vertical Align Center düymələrindən istifadə edərək bütün obyektləri bir-birinin üzərinə qoyun (Şəkil 77) .
Yaradılmış faylı PSD formatına ixrac edin (File=>Export File=>Export) və yaradılmış PSD faylı ImageReady proqramında açın (Şəkil 78). Qatlara əsaslanan animasiya çərçivələri yaradın (Laylardan çərçivələr yaradın Laylardan çərçivələr yaradın) və onlar üçün uyğun müddət seçin (şək. 79). Və sonra, animasiyanı daha təsirli etmək üçün, mövcud kadrları köçürün, lakin tərs qaydada ki, şəkil əvvəlcə artsın, sonra azalsın və s. dairədə (şək. 80). Sonra optimallaşdırma faylını qeyd edin (Fayl=>Optimallaşdırılmış Faylı Saxla=>Optimallaşdırma ilə Saxla). Nəticədə animasiya Şəkildə göstərilmişdir. 81.
düyü. 80. Kadrların təkrarlanmasından sonra Animasiya pəncərəsinin vəziyyəti
düyü. 81. Tamamlanmış animasiya
İdxal və sadə animasiya Salam. Bu gün biz After Effects-də sadə animasiyaya baxırıq.
Resurslar: Adobe Illustrator CC
Adobe After Effects CC
Illustrator-da rəsm çəkərək öyrənməyə başlayaq.
Gəlin çəkək
1) Fon kimi sarı düzbucaqlı çəkin
Şəkil 1 - Düzbucaqlı
2) Dairə çəkin və onu gradientlə doldurun
Gəlin dairə üzərində bir az işləyək:
- konturdakı alt nöqtəni silin, bir qövs alırıq;
- qövsün altını bağlayaraq düz bir xətt çəkin, yarımdairə alırıq
Şəkil 2 - 1) dairəni çəkin; 2) gradient; 3) nöqtəni silin
3) Düzbucaqlı çəkin və onun surətini çıxarın
- bir boz düzbucaqlı;
- başqa bir düzbucaqlı tünd boz rəngdədir
4) Şüaların sayını 3-ə təyin edərək ulduzdan Üçbucaq çəkin
Şəkil 3 - 1) düz işıq; 2) düz qaranlıq; 3) üçbucaq
5) Qələm və sadə formalardan istifadə edərək pişik çəkin 
Şəkil 4 - 1) baş; 2) boyun; 3) bədən; 4) ayaq; 5) quyruq
İndi isə ən ƏHƏMİYYƏTLİ an
Gəlin şəkilləri təbəqələrə paylayaq (animasiya ediləcək ayrı bir təbəqədədir): 
Şəkil 5 - bütün şəkillər (mühüm təbəqələri qırmızı işarələyin)
Budur, indi qənaət edək.
Saxlama parametrlərinə baxaq
Şəkil 6 - Saxla
Və indi növbəti mərhələ. Adobe Illustrator proqramını bağlayın və After Effects proqramını açın.
After Effects-ə idxal edin
Fayl - İdxal - Fayl - saxlanmış Illustrator faylımızı seçin.
Gəlin Illustrator-dan təbəqələri idxal etməyi seçək; görüntüləri yerləşdirsək, birləşmiş təbəqələri olan bir şəkil əldə edəcəyik, lakin buna ehtiyacımız yoxdur.
Şəkil 7 - Kompozisiya kimi idxal
Budur, idxal.
İndi gəlin görək əlimizdə nə var. Kompozisiyaya iki dəfə vurun ki, açılır və biz təbəqələri görürük (əgər hər şey düzgün aparılırsa, bir neçə təbəqə olacaq). Bunu alırıq, rəqəmə baxın
Şəkil 8 - Açıq Kompozisiya
İndi isə bu gün burada olduğumuz şey Animasiyadır.
After Effects-də animasiya
Pan Behind Alətindən (qısayol - Y) istifadə edərək oxun yuxarı hissəsində fırlanma nöqtəsini təyin edin. Biz sadəcə bir nöqtə götürürük və lazım olan yerə köçürürük. Nəticədə belə görünəcək.. 
Şəkil 9 - Pan aləti və Layers
Budur, indi animasiya üçün təbəqələrə keçək.
Bizə Arrow və Head_cat qatına ehtiyacımız olacaq.
Ok ilə başlayaq.
Siyahını genişləndirək, onu tapıb saata klik edək. Beləliklə, birinci nöqtəni sıfır saniyəyə təyin etdik. Animasiya cəmi 2 saniyə davam edəcək.
Beləliklə, etməli olduğunuz parametrlər bunlardır (cəmi 3 xal qoyacağıq):
| İkinci | 0 | 1 | 2 |
| +66 | - 70 | +66 |
Şəkil 10 - Fırlanma oxu
İndi pişiyin başını canlandıraq.
Head_cat-i genişləndirək və Mövqeyi tapaq.
Burada 4 nöqtə olacaq.
Digərlərinə təsir etmədən yalnız sonuncu koordinat dəyişdiriləcək.
| İkinci | 0.1 | 0.17 | 1.12 | 2.0 |
| Vəzifə | 689.3 | 729.3 | 729.3 | 689.3 |
Şəkil 11 - Başlığı yerləşdirin
Beləliklə, animasiya prinsipi belə idi. Ox o yan-bu yana yellənir, pişik balasına yaxınlaşan kimi başını içəri çəkir, bir müddət bu vəziyyətdə qalır, sonra isə onu yerinə qaytarır.
Son mərhələ
İstehsal
İşinizdən hazır məhsul yaratmalısınız.
Menyuya gedin - Render növbəsinə əlavə edin
Render paneli açılacaq və Çıxış Modulunda (iki klik) çıxış formatını seçin. *.mov götürdüm
Şəkil 12 - Render
RENDER düyməsini klikləyin və nəticə əldə edin (sadəcə yolu göstərməyi unutmayın).
Hamısı budur.
