Udhëzues: si të krijoni animacion SVG duke përdorur After Effects CC. Si të animoni në Adobe Illustrator duke eksportuar skedarë SWF nga Illustrator

06.03.2022 Hekuri

Adobe Illustrator dhe After Effects
Importi dhe animacion i thjeshtë

Përshëndetje. Sot po shikojmë animacion të thjeshtë në After Effects.

Burimet: Adobe Illustrator CC
Adobe After Effects CC

Le të fillojmë të mësojmë duke vizatuar në Illustrator.

Le të vizatojmë
1) Vizatoni një drejtkëndësh të verdhë si sfond

Figura 1 - Drejtkëndësh

2) Vizatoni një rreth dhe mbusheni me një gradient
Le të punojmë pak rreth rrethit:
- fshini pikën e poshtme në kontur, marrim një hark;
- vizatoni një vijë të drejtë, duke mbyllur pjesën e poshtme të harkut, marrim një gjysmërreth

Figura 2 - 1) vizatoni rreth; 2) gradient; 3) fshini pikën

3) Vizatoni një drejtkëndësh dhe bëni një kopje të tij
- një drejtkëndësh gri;
- një drejtkëndësh tjetër është gri i errët
4) Vizatoni një trekëndësh nga një yll duke vendosur numrin e rrezeve në 3

Figura 3 - 1) dritë e drejtë; 2) errësirë e drejtë; 3) trekëndëshi

5) Vizatoni një mace duke përdorur stilolaps dhe forma të thjeshta

Figura 4 - 1) koka; 2) qafa; 3) trupi; 4) këmbë; 5) bisht

Dhe tani më KRYESORE moment
Le t'i shpërndajmë fotografitë në shtresa (ajo që do të animohet është në një shtresë të veçantë) si kjo:

Figura 5 - të gjitha fotot (e kuqe shënon shtresa të rëndësishme)

Kjo është ajo, tani le të kursejmë.
Le të shohim cilësimet e ruajtjes

Figura 6 - Ruaj

Dhe tani faza tjetër. MbylljaAdobe Illustrator dhe hapni After Effects.

Importoni në After Effects
Skedar - Import - Skedar - zgjidhni skedarin tonë të ruajtur Ilustruesi.
Le të zgjedhim të importojmë shtresa nga Illustrator; nëse vendosim pamje, do të marrim një fotografi me shtresa të bashkuara, por kjo nuk na nevojitet.

Figura 7 - Importi si përbërje

Kaq, i importuar.
Tani le të shohim se çfarë kemi. Klikoni dy herë në një përbërje , në mënyrë që të hapet dhe ne do të shohim shtresat (nëse gjithçka është bërë si duhet, do të ketë disa shtresa). Ne e marrim këtë, shihni figurën

Figura 8 - Përbërja e hapur

Dhe tani ajo që ne jemi këtu për sot është Animacioni.

Animacioni në Pas Efektet
Vendosni pikën e rrotullimit në krye të shigjetës duke përdorur mjetin Pan Behind Tool (shkurtorja - Y). Ne thjesht marrim një pikë dhe e zhvendosim aty ku nevojitet. Si rezultat do të duket kështu..

Figura 9 - Vegla e panës dhe shtresat

Kjo është e gjitha, tani le të kalojmë në shtresat për animacion.
Do të na duhet një shtresë Arrow dhe Head_cat.
Le të fillojmë me shigjetën.
Le ta zgjerojmë listën, ta gjejmë dhe të klikojmë në orën. Pra, ne vendosëm pikën e parë në zero të dytë. Animacioni do të zgjasë gjithsej 2 sekonda.
Pra, këto janë cilësimet që duhet të bëni (ne do të vendosim 3 pikë në total):

Së dyti	0	1	2
	+66	- 70	+66

Kështu do të duket:

Figura 10 - Shigjeta e rrotullimit

Tani le të animojmë kokën e maces.
Le të zgjerojmë head_cat dhe të gjejmë Pozicioni.
Këtu do të ketë 4 pika.
Vetëm koordinata e fundit do të ndryshohet pa prekur të tjerat.

Së dyti	0.1	0.17	1.12	2.0
Pozicioni	689.3	729.3	729.3	689.3

Le të shohim foton.

Figura 11 - Pozicioni i kokës

Pra, parimi i animacionit ishte i tillë. Shigjeta lëkundet nga njëra anë në tjetrën, sapo i afrohet koteles, ajo tërheq kokën brenda, qëndron në këtë pozicion për pak kohë dhe më pas e kthen në vendin e saj.

Faza përfundimtare

Prodhimi
Ju duhet të krijoni një produkt të përfunduar nga puna juaj.
Le të shkojmë në menu - Shto në Radhën e Renderit
Paneli Render do të hapet dhe në modulin e daljes (dy klikime) zgjidhni formatin e daljes. mora *.mov

Figura 12 - Render

Klikoni në butonin RENDER dhe merrni rezultatin (thjesht mos harroni të specifikoni rrugën).
Kjo eshte e gjitha.

Një GIF transparent në Adobe Illustrator është bërë si më poshtë. Shkoni te menyja Skedari > Ruaj për ueb dhe pajisje (Alt+Ctrl+Shift+S). Në dritaren që hapet, në fushën e formatit të skedarit të optimizuar, fillimisht duhet të shkoni te skeda Madhësia e imazhit(Madhësia e imazhit). Fakti është se si parazgjedhje e gjithë faqja përfshihet në dritaren e optimizimit, dhe kjo zakonisht nuk është e nevojshme. Prandaj, në skedën Madhësia e imazhit, zgjidhni kutinë Klip në Artboard(Prisni në madhësinë e faqes) dhe klikoni butonin Apliko.

Pastaj zgjidhni GIF nga lista e përzgjedhjes së formatit dhe kontrolloni kutinë e kontrollit Transparenca.

Pas kësaj, ne do të përcaktojmë se cilat ngjyra do të jenë transparente. Të gjitha ngjyrat e pranishme në imazh janë të përfshira në skedën Tabela me ngjyra(Tabela me ngjyra) dhe shfaqen si katrorë me ngjyra. Zgjidhni mjetin në shiritin e veglave në anën e majtë të dritares Pika për sy(pipetë).

Ka dy mënyra për të përcaktuar ngjyrat. Mënyra më e lehtë është të specifikoni një ngjyrë me një pikatore direkt në imazh - pas kësaj, ngjyra do të theksohet në tabelën e ngjyrave me një goditje të errët. Epo, nëse e dini saktësisht se cila ngjyrë duhet të jetë transparente, mund ta zgjidhni direkt në tabelën e ngjyrave duke klikuar katrorin me ngjyrë përkatëse. Në rastin e parë dhe të dytë, nëse duhet të zgjidhni disa ngjyra, duhet të punoni me tastin Shift (ose Ctrl) të shtypur. Pasi të zgjidhni një ngjyrë, duhet të udhëzoni programin që ta bëjë atë transparente. Për ta bërë këtë, klikoni ikonën Harton ngjyrat e zgjedhura në Transparente(Shto ngjyrat e zgjedhura në transparencë). Në foto, ky buton është i rrethuar dhe ngjyra e kuqe është vendosur në transparente. Një zonë transparente do të shfaqet në imazh, dhe sheshi në tabelën e ngjyrave do të ndryshojë pamjen e tij - një pjesë e saj do të bëhet një trekëndësh i bardhë. Për të anuluar ngjyrën e zgjedhur, duhet ta zgjidhni atë në tabelën e ngjyrave dhe më pas të klikoni përsëri ikonën "Hartat ngjyrat e zgjedhura" te "Transparent".

Disa fjalë për metodën e vendosjes së transparencës. Menuja rënëse është përgjegjëse për të Specifikoni Algoritmin e Dither Transparency, në Rusisht - Algoritmi për simulimin e transparencës (Fig. më poshtë). Ka katër zgjedhje: Pa rrëmujë transparence, rrëmujë e transparencës së difuzionit, rrëmujë e transparencës së modelit dhe rrëmujë e transparencës së zhurmës. Në modalitetin e algoritmit difuz, rrëshqitësi bëhet aktiv Shuma(Vlera) ju lejon të ndryshoni vlerën e difuzionit. Çfarë të aplikoni në praktikë? Në varësi të qëllimit dhe imazhit. Unë nuk e përdor këtë opsion dhe e lë gjithmonë në parazgjedhje - Nuk ka trazim të transparencës.

Klikoni Ruaj - GIF transparent është gati. Puna u krye në versionin CS4 të Adobe Illustrator (v. 14), por të gjitha veprimet dhe shkurtoret e tastierës janë gjithashtu të rëndësishme për versionin e mëparshëm CS3 (v. 13).

Sot kemi një mësim të pazakontë të Adobe Illustrator. Sepse këtë herë nuk do të bëjmë një foto statike, por një animacion të vërtetë. Imagjinoni, rezulton se mund të vizatoni edhe karikatura duke përdorur Adobe Illustrator :)

Dhe për këtë nuk kemi nevojë për asgjë. Organizimi i duhur i shtresave dhe eksportimi i punës përfundimtare në formatin swf, ku çdo shtresë shndërrohet në një kornizë animacioni. Në tutorialin e sotëm do të vizatojmë një animacion me numërim mbrapsht në stilin e një filmi retro. Dalja duhet të jetë një video flash me të njëjtën numërim mbrapsht.

Gjëja e parë që duhet të bëni është të vizatoni të gjithë elementët e nevojshëm për animacionin e ardhshëm. Për ta bërë këtë, në një dokument të veçantë, bëra dy pozicione të një kornize filmi, një rreth për referencë, i cili pritet në sektorë të veçantë, një teksturë dhe një gërvishtje vertikale për të shtuar efektin e antikitetit, si dhe të gjithë numrat dhe mbishkrimet.

Kur të gjitha pjesët e filmit tonë vizatimor të jenë gati, mund të fillojmë të krijojmë vetë animacionin. Për lehtësi, është më mirë ta bëni këtë në një dokument të ri. Në këtë rast, shtresat tona do të luajnë rolin e kornizave të animacionit. Dhe në shtresën e parë ju vetëm duhet të kopjoni një kornizë filmi. Vendoseni në mes të zonës tuaj të punës.

Tani krijoni një shtresë të dytë dhe kopjoni një kornizë filmi në të, në të cilën vrimat përgjatë skajeve bëhen me një kompensim. Gjithashtu duhet të vendoset në qendër.

Nga këto dy shtresa tashmë mund të merrni animacion të filmit në lëvizje. Por më vonë do të na duhen shumë shtresa të tjera. Pra, zgjidhni dy shtresat e para, shkoni te opsionet e panelit dhe bëni një kopje të shtresave.

Në mënyrë të ngjashme, ne duhet të grumbullojmë 12 shtresa të kornizave të filmit që përcaktojnë lëvizjen e tij.

Tani kemi një grup të tërë shtresash dhe ato janë të gjitha të dukshme. Në kuptimin që shtresat e sipërme bllokojnë ato të poshtme, gjë që nuk është plotësisht e përshtatshme për punë. Prandaj, mund të çaktivizoni disa shtresa duke klikuar në ikonën me një sy në të majtë të emrit të shtresës. Për të çaktivizuar ose aktivizuar të gjitha shtresat menjëherë, mbani të shtypur butonin Alt ndërsa klikoni në ikonën e syrit. Duke ndezur dhe fikur shtresat, mund të shihni saktësisht se çfarë ndodhet në një kornizë specifike të animacionit tonë të ardhshëm. Dhe tani, në mënyrë që ne të shtojmë nervozizëm të lehtë në lëvizjen e filmit, duhet të lëvizim kornizat që rezultojnë pak në drejtime të ndryshme. Për ta bërë këtë, aktivizoni vetëm shtresën me të cilën do të punoni për momentin dhe më pas lëvizni kornizën disa pikselë në çdo drejtim.

Pasi të keni kaluar nëpër të gjitha shtresat dhe të keni shtuar një zhvendosje të vogël, mund të filloni të krijoni animacionin e rrethit në lëvizje. Për ta bërë këtë, kopjoni rrethin e përbërë nga sektorë nga dokumenti me pjesët e filmit vizatimor dhe vendoseni në shtresën e parë në krye të kornizës së filmit.

Nëse e çaktivizoni rrethin, ai do të duket si një tërësi e vetme. Kjo është pikërisht ajo që na nevojitet.

Por duke qenë se përbëhet nga sektorë individualë, ju mund të krijoni animacion shumë shpejt dhe lehtë duke ndryshuar ngjyrën e tyre. Për ta bërë këtë, kopjoni këtë rreth në shtresën e dytë dhe bëni sektorin e parë më të lehtë. Ju kujtohet se filmi ynë dridhet ndërsa lëviz, kështu që nuk është aspak e nevojshme të vendosni rrethin pikërisht në qendër të kornizës. Pozicionoje me sy.

Në mënyrë të ngjashme, ju duhet të kopjoni rrethin në secilën shtresë tjetër, ndërsa lyeni një sektor më shumë me një ngjyrë më të çelur se herën e mëparshme. Së bashku, këto 12 shtresa formojnë një animacion të filmit që lëviz me një rreth mbushës.

Më pas duhet të shtojmë teksturë në shtresat tona. Ndizni shtresën e parë dhe kopjoni teksturën nga skedari origjinal me pjesë këmbimi atje.

Pastaj ndizni shtresat e ardhshme një nga një dhe kopjoni të njëjtën strukturë atje. Për ta bërë atë të duket ndryshe në çdo kornizë, thjesht rrotullojeni 90 gradë. Siç mund ta keni marrë me mend, ne duhet të shtojmë teksturë në të 12 kornizat.

Nëse tashmë jeni mjaft të lodhur nga kopjimi, atëherë mund t'ju pëlqej - ka mbetur shumë pak. Pjesa më e vështirë ka mbaruar. Mbetet vetëm për të shtuar gërvishtjet vertikale dhe kjo është pothuajse e gjitha. Për ta bërë këtë, ne përsëri kopjojmë gërvishtjen origjinale dhe e vendosim në një vend arbitrar në disa shtresa. Në rastin tim, gërvishtjet shfaqen vetëm në dy shtresa.

Tani që cikli kryesor me animacionin e filmit është gati, mbetet vetëm shtimi i numrave. Meqenëse numërimi ynë mbrapsht shkon nga 3 në 1 plus fjalën Shko!!!, na duhen edhe më shumë shtresa. Jo 12, por 48. Për ta bërë këtë, duhet të bëni edhe tre kopje të shtresave të gatshme me animacion filmi.

Dhe pastaj gjithçka është e thjeshtë. Ndizni shtresën e parë dhe vendosni numrin tre atje.

Pastaj ju duhet ta kopjoni këtë figurë në shtresat e ardhshme derisa të përfundojë animacioni i rrethit. Kur të arrini kopjen tjetër të shtresave, ku rrethi përsëri do të plotësohet plotësisht, duhet të vendosni numrin dy. Në të njëjtën mënyrë, kopjoni numrin një në shtresat e dëshiruara. Dhe kur të arrini në shtresat përfundimtare për mbishkrimin Go!!!, thjesht fshini rrethin përpara se të kopjoni mbishkrimin në shtresën e dëshiruar.

Kjo është e gjitha për animacionin. Gjëja kryesore këtu është të mos ngatërrohemi. Mund t'u jepni shtresave disa emra të përshtatshëm, por unë isha disi dembel :) Dhe gjithashtu, kur të përfundoni punën tuaj, sigurohuni që t'i ktheni përsëri të gjitha shtresat duke klikuar në ikonën e syrit.

Në dritaren e cilësimeve të eksportit, sigurohuni që të vendosni Export As: AI Layers në SWF Frames. Është ky opsion që i kthen shtresat e Illustrator në korniza animacioni. Tjetra, klikoni butonin Advanced.

Cilësimet shtesë do të hapen. Këtu ju duhet të vendosni Frame Rate. Unë kam 12 korniza në sekondë. Kutia e kontrollit Looping është përgjegjëse për animacionin ciklik. Falë tij, videoja do të luhet në një rreth. Dhe opsioni Layer Order: Bottom Up riprodhon shtresat e ilustruesit nga poshtë lart në panel. Kjo është pikërisht mënyra se si e ndërtuam animacionin tonë.

Dalja është një video flash me animacionin tonë.

Tani e shihni që bërja e animacionit të thjeshtë në Adobe Illustrator nuk është aq e vështirë sa duket në shikim të parë.

Por për të krijuar video të gjata ose aplikacione interaktive, është akoma më mirë të përdorni Adobe Flash ose redaktues të tjerë flash. Për shembull, e bëra këtë mace në një Macromedia Flash të vjetër që e nxora nga puna ime.

Gjithashtu, kohët e fundit HTML5 dhe CSS3 po përdoren gjithnjë e më shumë për të krijuar animacion. Ky kod mbështetet nga shfletues modern dhe nuk kërkon përdorimin e një flash player.

romake aka dakaska veçanërisht për blogun Shënime nga një Illustrator Microstock

Abonohuni në buletinin tonë që të mos humbisni asgjë të re:

Tani krijoni një shtresë të dytë dhe kopjoni një kornizë filmi në të, në të cilën vrimat përgjatë skajeve bëhen me një kompensim. Gjithashtu duhet të vendoset në qendër.

Në mënyrë të ngjashme, ne duhet të grumbullojmë 12 shtresa të kornizave të filmit që përcaktojnë lëvizjen e tij.

Nëse e çaktivizoni rrethin, ai do të duket si një tërësi e vetme. Kjo është pikërisht ajo që na nevojitet.

Më pas duhet të shtojmë teksturë në shtresat tona. Ndizni shtresën e parë dhe kopjoni teksturën nga skedari origjinal me pjesë këmbimi atje.

Dhe pastaj gjithçka është e thjeshtë. Ndizni shtresën e parë dhe vendosni numrin tre atje.

Dalja është një video flash me animacionin tonë.

Tani e shihni që bërja e animacionit të thjeshtë në Adobe Illustrator nuk është aq e vështirë sa duket në shikim të parë.

Gjithashtu, kohët e fundit HTML5 dhe CSS3 po përdoren gjithnjë e më shumë për të krijuar animacion. Ky kod mbështetet nga shfletues modern dhe nuk kërkon përdorimin e një flash player.

romake aka dakaska veçanërisht për blogun

Abonohuni në buletinin tonë që të mos humbisni asgjë të re:

Optimizimi i Grafikës së Uebit

Informacioni grafik transferohet shumë më ngadalë se informacioni i tekstit dhe koha e ngarkimit të imazheve është proporcionale me madhësinë e skedarëve të tyre grafikë. Prandaj, ngarkimi i shpejtë i faqeve të internetit kërkon një madhësi të vogël të imazheve grafike të ngulitura në to, gjë që arrihet përmes optimizimit të tyre. Optimizimi i imazhit kuptohet si konvertimi i tij, duke siguruar një madhësi minimale skedari duke ruajtur cilësinë e imazhit të kërkuar në këtë rast, i cili arrihet kryesisht duke reduktuar numrin e ngjyrave në imazhet grafike, duke përdorur formate të ngjeshur dhe të veçantë të skedarëve dhe duke optimizuar parametrat e kompresimit për individët. fragmente imazhi.

Illustrator ka mjete të integruara për optimizimin e imazhit që e bëjnë procesin e optimizimit të shpejtë dhe efikas me një sërë metodash të pamjes paraprake. Pamja paraprake jep një ide mjaft të saktë se si do të duket imazhi i optimizuar në kohë reale, gjë që ju ndihmon të vlerësoni rezultatin e optimizimit dhe të zgjidhni me sukses cilësimet e duhura. Dhe mund të optimizoni të dyja imazhet e krijuara drejtpërdrejt në Illustrator, dhe të tjerat, për shembull, fotografitë që supozohet të vendosen në një faqe interneti.

Parametrat e optimizimit vendosen në dritare Ruaj për ueb(Save for Web), thirret me komandën me të njëjtin emër nga menyja Skedari(Dosje). Programi ju ofron të përdorni një nga katër mënyrat e shikimit, por dy janë më të përshtatshmet për të vlerësuar cilësinë e optimizimit:

2-Lart(dy opsione) shikimi i njëkohshëm i imazhit origjinal dhe i optimizuar në përputhje me cilësimet e specifikuara (Fig. 1);
4-Lart(katër opsione) Në këtë modalitet, porta e pamjes ndahet në katër dritare (Fig. 2) për të shfaqur imazhin origjinal dhe tre versione të atij të optimizuar: versioni i parë krijohet bazuar në vlerat e vendosura të optimizimit, dhe dy të tjerët janë variacionet e cilësimeve aktuale të optimizimit.

Të dy mënyrat ju lejojnë të kurseni ndjeshëm kohë në gjetjen e opsionit më të mirë të optimizimit, pasi ato eliminojnë nevojën për të ruajtur imazhe me cilësime të ndryshme optimizimi dhe krahasimin e tyre vizual pasues. Përveç kësaj, është e mundur të vlerësohet jo vetëm cilësia e imazhit të optimizuar, por edhe madhësia dhe koha e ngarkimit të tij nën opsione të ndryshme lidhjeje. Për krahasim, mënyra më e përshtatshme është 4-Up (katër opsione), e cila ju lejon të vlerësoni vizualisht efektin e ngjeshjes ose zvogëlimit të paletës në cilësinë e figurës dhe madhësinë e saj dhe në fund të përcaktoni parametrat më të mirë të optimizimit.

Illustrator ju lejon të optimizoni grafikat në ueb jo vetëm në formatet GIF, JPG, PNG-8 dhe PNG-24, por edhe SWF dhe SVG. Imazhet e indeksuara që kanë një numër të vogël ngjyrash ruhen në formatin GIF. Formati JPG përdoret për të ruajtur imazhe me ngjyra të plota dhe gri, fotografi dhe grafika të pasura me ngjyra, të tilla si mbushjet me gradient. Për imazhet me ngjyra të plota me zona transparente, përdoret formati PNG, i cili ju lejon të ruani imazhe të indeksuara dhe me ngjyra të plota, ndërsa në formatin PNG-8 numri maksimal i mundshëm i ngjyrave të imazhit të optimizuar është 256, dhe në formati PNG-24 imazhi mund të ketë miliona ngjyra, dhe për këtë arsye është i ngjashëm me formatin JPEG. Dallimi midis PNG-24 dhe JPEG është se metoda e kompresimit e përdorur për të optimizuar imazhet në formatin PNG-24 nuk çon në humbje të cilësisë, por si rezultat rritet madhësia e skedarit. Formatet SVG dhe SWF kombinojnë grafikë, tekst dhe komponentë ndërveprues dhe gjithashtu mund të optimizohen.

Le të shohim një shembull specifik të optimizimit të imazhit. Le të themi se një logo uebsajti u zhvillua në Illustrator (Fig. 3), fillimisht i ruajtur në formatin AI. Një përpjekje për ta optimizuar menjëherë atë për Ueb-in nuk do të çojë në asgjë të mirë, pasi në këtë rast imazhi do të pritet automatikisht, gjë që nuk do të marrë parasysh pozicionin e vërtetë të mbishkrimit që rezulton si rezultat i deformimit (Fig. 4 dhe 5).

Prandaj, le të përpiqemi të eksportojmë logon në formatin PSD me komandën File=>Eksporto(File=>Export) Madhësia e imazhit të krijuar do të jetë 143 KB. Hapni skedarin PSD që rezulton dhe përdorni komandën File=>Ruaj për Web(File=>Save for Web). Duke marrë parasysh numrin e kufizuar të ngjyrave të përfshira në imazh, në këtë rast formati GIF është optimal, cilësimet specifike të të cilit duhet të vendosen. Duke eksperimentuar me cilësimet, mund të siguroheni që cilësia më e mirë prodhohet nga algoritmi i parazgjedhur i kompresimit të zgjedhur nga programi Selektive(Selektive). Sa për anti-aliasing, duke pasur parasysh praninë e një mbushje gradient, është më mirë të zgjidhni një algoritëm me gjenerimin e zhurmës Zhurma(Fig. 6). Madhësia e skedarit të optimizimit që rezulton do të jetë 6,729 KB (Fig. 7), ndërsa transparenca e sfondit do të ruhet, e cila është e lehtë për t'u verifikuar duke ruajtur imazhin në formatin GIF së bashku me skedarin HTML (Fig. 8). Si rezultat, në këtë shembull, skedarët emblem.html dhe emblem.gif u morën në dosjen Primer1.

Butonat

Një element specifik i domosdoshëm i dizajnit të çdo faqeje interneti janë butonat e kontrolleve grafike. Është thjesht e pamundur të imagjinohet një faqe pa to. Vizatimi me butona është bërë një zhanër i veçantë sot, dhe Illustrator ju lejon të krijoni opsionet më të ndërlikuara. Për shembull, butonat e projektuar si objekte rrjetë dhe/ose me maska mbivendosje duken shumë më mbresëlënëse se ato të zakonshmet.

Merrni parasysh mundësinë e krijimit të një butoni të rrumbullakët, konveks në Illustrator. Vizatoni një objekt vektori në formën e një rrethi të mbushur me një ngjyrë arbitrare (Fig. 9) dhe kthejeni atë në një rrjetë duke përdorur komandën Object=>Krijo rrjetë gradienti(Object=>Create Gradient Mesh) duke specifikuar katër rreshta dhe katër kolona, dhe në listë Pamja e jashtme(Shiko) duke zgjedhur opsionin Në qendër Theksoj(Thekso) e barabartë me 60 (Fig. 10). Zgjidhni një mjet Përzgjedhja e drejtpërdrejtë dhe klikoni në këndin e sipërm të majtë të objektit, duke zgjedhur pikat e ankorimit të vendosura atje (Fig. 11). Ndryshoni ngjyrën e qelizës përkatëse në të bardhë duke e zgjedhur atë në paleta Swatches(Fig. 12).

Merrni mjetin Elipsa(Elipse), vendoseni shënuesin e miut në qendër të rrethit të krijuar më parë dhe, duke mbajtur të shtypur tastet, Alt Dhe Ndërrimi, shtrini rrethin e ri mbi të vjetrin në mënyrë që të jetë më i madh se i vjetri me 1-2 piksel nga të gjitha anët. Jepini një kufi të zi ( Goditja në tru) 1-2 piksel të gjerë dhe mbusheni me një gradient radial në drejtim nga e kuqja në të bardhë (Fig. 13). Zvarriteni objektin vektorial të krijuar 1-2 piksel djathtas dhe poshtë, më pas, pa hequr përzgjedhjen, klikoni me të djathtën mbi të dhe zgjidhni komandën nga menyja e kontekstit Arrange=>Dërgo Prapa(Rregulloni=>Dërgo prapa). Rezultati do të jetë një bosh për butonin, i paraqitur në Fig. 14.

Si rregull, në çdo faqe interneti ka disa butona të të njëjtit lloj, të ndryshëm, për shembull, vetëm në drejtimin e shigjetave të vizatuara në to, duke treguar drejtimin e lëvizjes rreth sajtit. Le të shqyrtojmë rastin më të thjeshtë të të pasurit dy butona, njëri prej të cilëve, me një shigjetë poshtë, do të thotë kalim në faqen tjetër, dhe një buton me një shigjetë lart do të thotë lëvizje në atë të mëparshme. Si një shigjetë bosh, merrni një trekëndësh të rregullt të vizatuar me një mjet Shumëkëndëshi(Poligoni) i hijezuar në të zezë dhe i projektuar gjithashtu si një objekt rrjetë për efekt të shtuar. Zhvendosni shigjetën te butoni dhe rregulloni pozicionin e të gjitha objekteve në lidhje me njëri-tjetrin duke përdorur butonat përkatës të paletës Rreshtoni(Radhitje). I pari nga butonat që rezultojnë është paraqitur në Fig. 15. Le të bëjmë një kopje të shtresës me butonin duke zgjedhur komandën Shtresa e dyfishtë Shtresat, si rezultat marrim dy shtresa identike. Pastaj zgjidhni shigjetën në kopjen e shtresës dhe rrotullojeni atë 180° duke zgjedhur komandën nga menyja e kontekstit Transformoni=>Rrotulloni Transformim=>Rrotullimi. Do të marrim të njëjtin buton siç tregohet në Fig. 16. Ju lutemi vini re se është shumë më i përshtatshëm për të ruajtur të gjithë të njëjtin lloj butonash për një projekt në një skedar në shtresa të ndryshme, gjë që demonstrohet në këtë rast.

Tani ju duhet të ruani versionet e optimizuara të secilit buton. Së pari bëni shtresën e poshtme të padukshme në këtë rast butoni në shtresën e sipërme do të ruhet. Zgjidhni një ekip File=>Ruaj për Web(File=>Save for Web), konfiguroni parametrat e optimizimit të butonit, për shembull, siç tregohet në Fig. 17, klikoni butonin Ruaj(Ruaj) dhe futni një emër skedari. Butoni i ruajtur përfundimisht është paraqitur në Fig. 18. Tani kthejeni dukshmërinë në shtresën e poshtme, bëni shtresën e sipërme të padukshme dhe ruajeni butonin e dytë në të njëjtën mënyrë, duke i dhënë një emër tjetër. Rezultati është treguar në Fig. 19.

Tani mbetet vetëm të siguroheni që butonat të duken mjaft të pranueshëm në faqen e internetit dhe t'i vendosni ato në një faqe të personalizuar (Fig. 20). Si rezultat, në këtë shembull, skedari Primer2.html dhe dy imazhe grafike u morën në dosjen e imazheve (dosje Abetare2).

Nëse dëshironi, është e lehtë të ktheni një buton në një fetë gjatë procesit të optimizimit. Në këtë rast, pas zgjedhjes së komandës File=>Ruaj për Web(File=>Save for Web) dhe përcaktimi i parametrave të optimizimit duhet të zgjidhen nga paleta e mjeteve Slice Select(Slice Selection) dhe klikoni dy herë mbi imazhin, i cili përfundimisht do të kthehet automatikisht në një fetë me numër serik 1 (Fig. 21). Duke klikuar dy herë përsëri do të hapet dritarja. Opsionet e copëzave(Slice Options), në të cilën do t'ju duhet të specifikoni një lidhje dhe, nëse dëshironi, të ndryshoni emrin e pjesës (Fig. 22) dhe pastaj të ruani imazhin e optimizuar. Rezultati në këtë rast do të jenë skedarët Primer3.html (Fig. 23) dhe Primer3.gif (dosja Primer3).

Elementet interaktive

Një mënyrë për t'i dhënë jetë një faqeje është futja e elementeve të dizajnit që ndryshojnë pamjen (ose gjendjen) e tyre në varësi të sjelljes së miut ose, më rrallë, kur ndodh ndonjë situatë tjetër: shkallëzimi, lëvizja, ngarkimi, gabimet, etj.

Ndër elementë të tillë, më të famshmit janë elementët rrotullues (nga anglishtja roll over roll over, turn over) që ndryshojnë pamjen nën ndikimin e miut. Shembuj të rrotullimeve tipike janë butonat e animuar. Rrotullimet shpesh përdoren kur krijohen elementë të tjerë të navigimit të faqes në internet. Në realitet, çdo përmbysje nuk është një, por disa (deri në katër) imazhe, secila prej të cilave korrespondon me një ngjarje specifike. Ngjarjet kryesore konsiderohen si më poshtë: Gjendja normale normale, Mbi kalimin e kursorit të mausit mbi një element dhe poshtë shtypjes së butonit të majtë të miut kur rri pezull kursorin mbi të. Teorikisht, mund të përfshihen ngjarje të tilla si Klikoni duke lëshuar butonin e majtë të miut pasi të klikoni, Lart pas lëshimit të butonit, Jashtë kur dilni nga zona aktive. Sidoqoftë, në praktikë, ato shpesh kufizohen në ndryshimin e elementit vetëm për tre ose edhe dy ngjarjet e para.

Rrotullime klasike

Në kuptimin klasik, një rrotullim është një seri imazhesh grafike në formatin GIF dhe kodin përkatës HTML, falë të cilit, në varësi të sjelljes së miut, një imazh zëvendëson një tjetër në dritaren e shfletuesit.

Illustrator nuk ka për qëllim krijimin e drejtpërdrejtë të rrotullimeve në kuptimin klasik, por mund të ndihmojë në zhvillimin e elementeve fillestare për to. Ideja në këtë rast është të krijohet një shtresë me imazhin që korrespondon me ngjarjen e parë. Më pas bëni një kopje të shtresës dhe transformoni imazhin që të përputhet me ngjarjen e dytë, e kështu me radhë. Imazhi me shumë shtresa që rezulton eksportohet në një skedar PSD me shtresat e ruajtura, në bazë të së cilës krijohet një përmbysje në programin Image Ready. Avantazhi i përdorimit të Illustrator, si në shumë raste të tjera, është një numër i veçorive të tij interesante që nuk janë të disponueshme në programe të tjera, së bashku me komoditetin e transformimit të grafikës vektoriale.

Le të përpiqemi të krijojmë një rrotullim në formën e një mbishkrimi që ndryshon ngjyrën në varësi të sjelljes së miut. Hapni Illustrator dhe krijoni një formë në formën e një drejtkëndëshi të rrumbullakosur të mbushur me të zezë (Fig. 24), bëni një kopje të tij dhe vendoseni në një pjesë të lirë të ekranit. Shndërroni kopjen e parë të drejtkëndëshit në një objekt rrjetë me një theksim në qendër (komandë Object=>Krijo rrjetë gradienti Object => Krijo rrjetë gradient), duke specifikuar katër rreshta dhe dhjetë kolona (Fig. 25). Aktivizoni kopjen e dytë të drejtkëndëshit dhe vendoseni në një mbushje gradient afërsisht siç tregohet në Fig. 26. Mbivendosni objektin e gradientit në majë të rrjetës, zvogëloni opacitetin e objektit të gradientit në rreth 80%, dhe madhësinë me rreth 1 piksel për të simuluar përfundimisht efektin e një përplasjeje. Dhe pastaj shtypni mbishkrimin në krye të objekteve. Në formën e tij origjinale, le të ketë një ngjyrë të bardhë, e cila do të korrespondojë me gjendjen Normale (Fig. 27), dhe më pas kur ndryshon gjendja e rrotullimit, ngjyra e mbishkrimit do të ndryshojë, për shembull, në jeshile kur shënuesi i miut qëndron pezull mbi të (Gjendja mbi të) dhe në blu kur shtypet butoni i mausit (gjendja poshtë).

Kushtojini vëmendje paletës Shtresat në këtë fazë ka vetëm një shtresë të vetme në të. Bëni dy kopje të kësaj shtrese duke përdorur komandën Shtresa e dyfishtë(Duplicate Layer) nga menyja e paletës Shtresat, paleta do të ketë tre shtresa (Fig. 28). Pastaj në kopjen e parë të shtresës ndryshoni ngjyrën e mbishkrimit në jeshile, dhe në kopjen e dytë në blu (Fig. 29). Si rezultat, do të merret boshllëku i nevojshëm për rrotullimin.

Eksportoni imazhin e krijuar në formatin PSD duke ruajtur shtresat duke përdorur komandën File=>Eksporto(File=>Export) dhe zgjedhja e modelit të ngjyrave RGB (Fig. 30). Hapni skedarin e krijuar PSD në programin ImageReady (Fig. 31 dhe 32). Krijoni korniza të bazuara në shtresa duke zgjedhur komandën Krijoni korniza nga shtresat(Krijoni Korniza nga Shtresat) nga menyja e paletës Animacion. Dritarja e Animacionit do të duket si në Fig. 33. Në të njëjtën kohë në paleta Rrotullime Fillimisht, do të krijohet një gjendje e vetme Normale.

Pastaj në dritare Animacion zgjidhni kornizën që i përgjigjet gjendjes së induktuar, ndërsa është në paleta Shtresat shtresa do të zgjidhet automatikisht Kopjo e shtresës 1(Fig. 34). Shkoni te paleta Rrotullime dhe klikoni në butonin Krijo gjendjen Rollover(Krijoni një gjendje rollover) fig. 35, e cila do të rezultojë në gjendjen Mbi shtetin në paleta Rrotullime(Fig. 36). Krijo një shtet në të njëjtën mënyrë Down State. Aktivizo gjendjen Normale në paleta Rrotullime dhe fshini në paleta Animacion të gjitha kornizat përveç atij që duhet të përputhet me gjendjen Normale. Si rezultat, për çdo gjendje rollover në paleta Animacion do të ekzistojë vetëm një kornizë (Fig. 37, 38 dhe 39).

Oriz. 38. Pamja e imazhit, dritarja e animacionit dhe paletat Layers dhe Rollovers për gjendjen mbi gjendjen

Kontrolloni rezultatin duke klikuar butonin Pamja paraprake në shfletuesin e parazgjedhur(Browser Preview) në shiritin e veglave dhe duke shkuar në dritaren e shfletuesit (Fig. 40). Pas kësaj, ruani skedarin duke përdorur komandën File=>Ruaj i optimizuar(File=>Save with optimization) dhe duke specifikuar opsionin HTML dhe imazhe (*.html). Si rezultat, në këtë shembull, skedari Primer4.html dhe një seri imazhesh grafike u morën në dosjen e imazheve.

Oriz. 40. Dritarja e shfletuesit me element Rollover

Rrotullimet SVG

Formati gjithnjë e më i popullarizuar SVG (Scalable Vector Graphics), i krijuar në bazë të standardit XML, ju lejon gjithashtu të merrni një sërë elementësh ndërveprues, në veçanti përmbysje, por në praktikë kjo zbatohet krejtësisht ndryshe. Vlen të përmendet se krijimi i rrotullimeve interaktive SVG, ndryshe nga ato klasike, kur kodi përkatës HTML gjenerohet plotësisht automatikisht, kërkon njohuri të gjuhës JavaScript dhe kuptim të parimeve bazë të programimit të orientuar drejt objektit.

Një paletë e veçantë është krijuar për të punuar me objekte SVG Interaktiviteti SVG, i cili mund të hapet lehtësisht duke përdorur komandën Window=>Interaktiviteti SVG(Window=>Interaktiviteti SVG) fig. 41.

Le të shqyrtojmë këtë opsion për krijimin e një rrokullisjeje duke përdorur shembullin e një butoni interaktiv, ngjyra e mbishkrimit në të cilin do të ndryshojë nga e zeza në blu kur rri pezull miun dhe do të shndërrohet përsëri në të zezë kur miu largohet nga zona aktive.

Krijoni një buton drejtkëndor me skaje të rrumbullakosura dhe zgjidhni një mbushje të përshtatshme gradient për të, për shembull siç tregohet në Fig. 42. Rregulloni transparencën e butonit në paleta Transparenca(Transparenca) në këtë shembull vlera e parametrit Opaciteti(Opaciteti) është vendosur në 50%. Bëni një kopje të butonit, mbusheni me jeshile të errët (Figura 43) dhe më pas shndërrojeni atë në një objekt rrjetë me komandën Object=>Krijo rrjetë gradienti(Object=>Create Gradient Mesh) duke specifikuar katër rreshta dhe dhjetë kolona, dhe në listë Pamja e jashtme(Shiko) duke zgjedhur opsionin Në qendër(Drejt qendrës) dhe vendosja e vlerës Theksoj(Theksoni) e barabartë me 100. Zvogëloni opacitetin e shtresës me objektin rrjetë në rreth 40% (Fig. 44). Vendosni një objekt rrjetë sipër një gradienti dhe butoni do të ngjajë me atë të treguar në Fig. 45.

Oriz. 44. Kthejeni një kopje të një butoni në një objekt rrjetë

Plotësoni butonin me mbishkrimin e synuar dhe rregulloni pozicionin e tij duke përdorur butonat përkatës të paletës Rreshtoni(Radhitje). Imazhi që rezulton do të përmbajë një shtresë me tre objekte të mbivendosura mbi njëri-tjetrin (Fig. 46). Ngjarjet e planifikuara do t'i referohen objektit të tekstit, kështu që për lehtësi, ndryshoni emrin e tij në Teksti duke klikuar dy herë mbi objektin dhe duke futur një emër të ri. Në mënyrë të ngjashme ndryshoni emrin e shtresës nga Shtresa 1 në shtresë(Fig. 47).

Përpunimi i ngjarjeve përfshin përdorimin e procedurave JavaScript, kështu që ju duhet të përfshini një skedar që përshkruan këto procedura. Quhet Events.js dhe ruhet në disk në dosjen Sample Files\Sample Art\SVG\SVG kur instaloni Adobe Illustrator. Për të përfshirë skedarin Events.js, përdorni komandën Skedarët JavaScript Interaktiviteti SVG(Fig. 48). Tjetra ju duhet të klikoni butonin Shtoni(Shto) dhe gjeni skedarin e dëshiruar në hard diskun tuaj. Kur emri i tij shfaqet në fushë URL(Fig. 49), klikoni në butonin U krye(Dil jashtë).

Oriz. 48. Zgjedhja e komandës JavaScript Files

Pas kësaj, duhet të përcaktoni reagimin ndaj ngjarjeve të miut për objektin Teksti. Zgjidhni objektin Tekst në fushë Ngjarje Paleta (Ngjarje). Interaktiviteti SVG zgjidhni ngjarje mbi mouse elemColor(evt, "Text", "#3333FF") kjo do të thotë se kur miu është mbi një objekt Teksti ngjyra e tij do të ndryshojë në blu (Fig. 50). Në mënyrë që ngjyra e tekstit të ndryshojë në të zezë pasi miu të largohet nga zona aktive, do t'ju duhet të krijoni një ngjarje tjetër jashtë mouseout zgjidhni atë në fushë Ngjarje Paleta (Ngjarje). Interaktiviteti SVG. Pastaj në shiritin e veprimeve futni tekstin elemColor(evt, "Text", "#000000") kjo do të bëjë që ngjyra të kthehet në të zezë (Fig. 51).

Oriz. 51. Pamja përfundimtare e paletës SVG Interactivity për objektin Text

Ruani rollover-in e krijuar si një skedar SVG me komandën File=>Ruaj si(Skedari=> Lloji i skedarit format SVG, dhe më pas vendosni opsionet për ruajtjen e skedarit SVG siç tregohet në Fig. 52. Pas ruajtjes, do të merrni vetëm një skedar të vetëm me shtesën SVG, dhe jo dy, si në rastin e një rikthimi klasik; në këtë rast, skedari Primer5.svg (dosja Primer5) është marrë. Megjithatë, në mënyrë që përmbysja të funksionojë vërtet, duhet të kopjoni gjithashtu skedarin Events.js me një përshkrim të procedurave JavaScript në dosjen me skedarin SVG. Pas kësaj, mund të kontrolloni funksionalitetin e rrotullimit; rezultati do të duket siç tregohet në Fig. 53.

Animacion SVG

Formati SVG mund të përdoret gjithashtu për të përcjellë animacion. Le të përpiqemi të krijojmë një element të thjeshtë të animuar (në këtë rast do të jetë informacion për kompaninë), i cili do të shfaqet në ekran kur të vendosni miun mbi objektin grafik përkatës dhe do të zhduket kur të hiqni miun nga elementi interaktiv.

Le të krijojmë përafërsisht serinë e mëposhtme të objekteve grafike dhe tekstuale, siç tregohet në Fig. 54. Le të riemërtojmë të gjitha objektet e krijuara në një mënyrë të përshtatshme duke klikuar në mënyrë sekuenciale mbi emrin e objektit tjetër në paleta Shtresat dhe duke futur emrin e dëshiruar (Fig. 55). Ju lutemi vini re se ato të theksuara në Fig. 56 objekte Teksti 1, Teksti 2, Teksti 3 Dhe Rruga 1 do të jenë gjithmonë të dukshme, dhe të gjitha të tjerat vetëm kur e vendosni miun mbi objekt Teksti 1.

Oriz. 54. Pamje origjinale e imazhit

Përfshini skedarin Events.js me një përshkrim të procedurave JavaScript duke përdorur komandën Skedarët JavaScript(Skedarët JavaScript) nga paleta Interaktiviteti SVG duke shtypur butonin Shtoni(Shto) duke specifikuar skedarin e dëshiruar në hard diskun tuaj dhe duke klikuar butonin U krye(Dil jashtë).

Përcaktoni përgjigjen ndaj ngjarjeve të miut për një objekt Teksti 1. Zgjidhni një objekt Teksti, në fushë Ngjarje Paleta (Ngjarje). Interaktiviteti SVG zgjidhni ngjarje mbi mouse dhe në rreshtin më poshtë shkruani tekstin elemShow(evt, "Text4"); elemShow(evt, "Shtegu 2"). Si rezultat, kur miu është mbi një objekt Teksti 1 objektet do të bëhen të dukshme Teksti 4 Dhe Rruga 2. Ju lutemi vini re se nëse duhet të kryhen disa veprime kur ndodh një ngjarje, ato duhet të specifikohen duke përdorur shenjën ";". Pastaj kryeni një operacion të ngjashëm për ngjarjen jashtë mouseout, duke futur tekstin për të, që do të thotë fshehje e objekteve (Fig. 57).

Ruani rezultatin si një skedar SVG me komandën File=>Ruaj si(File=>Save As), duke specifikuar emrin e skedarit, duke zgjedhur në fushë Lloji i skedarit Formati SVG dhe më pas vendosja e opsioneve për ruajtjen e skedarit SVG në përputhje me Fig. 58. Pas ruajtjes do të merret skedari Primer6.svg (dosja Primer6). Mos harroni të kopjoni skedarin Events.js në dosjen me këtë skedar. Nëse më pas ekzekutoni skedarin e krijuar, do të shihni rezultatin e treguar në Fig. 59. Kjo është pothuajse ajo që ju nevojitet. E vetmja gjë që nuk përfshihej në planet tona ishte pamja fillestare e objekteve Teksti 4 dhe Rrugë 2 gjatë ngarkimit. Për të hequr qafe këtë mangësi, zgjidhni të dy të dhënat e objektit menjëherë dhe krijoni një veprim për to elemHide(evt, "Text4"); elemHide (evt, "Shtegu 2") pas ngjarjes në ngarkim(Fig. 60). Ruani sërish skedarin dhe sigurohuni që objektet janë tani Teksti 4 Dhe Rruga 2 e dukshme vetëm kur kaloni miun mbi objekt Teksti 1.

Animacion GIF

Çdo faqe në internet është e paimagjinueshme pa animacion në ueb, duke përfshirë gif-et e animuara. Një nga opsionet për krijimin e tyre është përdorimi i aplikacionit Adobe ImageReady, i cili lejon, ndër të tjera, të krijojë animacion nga shtresat. Në këtë rast, vetë imazhi me shumë shtresa mund të përgatitet në aplikacione të ndryshme, duke përfshirë Adobe Illustrator.

Është shumë e lehtë të krijosh animacion bazuar në elemente nga paleta Simbolet(Simbolet) të hapura nga komanda Dritare=>Simbolet(Window=>Symbols) ose nga një prej bibliotekave të simboleve që mund të hapet duke përdorur komandën Window=>Bibliotekat e simboleve(Window=>Bibliotekat e simboleve).

Për shembull, ne do të përpiqemi të rrisim madhësinë e çdo objekti simbol; fazat kryesore të procesit të rritjes së objektit duhet të vendosen në shtresa të veçanta. Së pari, thjesht vendosni objektet e simboleve njëri mbi tjetrin dhe më pas rrisni madhësinë e secilit objekt pasues, për shembull siç tregohet në Fig. 61. Së fundi në paleta Shtresat do të krijohet një shtresë me shumë objekte (Fig. 62). Nëse e eksportoni drejtpërdrejt këtë imazh në formatin PSD, ai nuk do të japë asgjë, pasi ka vetëm një shtresë, dhe natyrisht, kur hapni skedarin PSD në programin ImageReady, do të ketë gjithashtu vetëm një shtresë. Prandaj, së pari duhet të vendosni objekte në shtresa të ndryshme. Kjo mund të bëhet në mënyra të ndryshme; mënyra më e lehtë është që fillimisht të zgjidhni shtresën Shtresa 1 në paletën Layers dhe përdorni komandën Lëshojeni në shtresë(Lëshojeni në shtresa). Rezultati do të jetë se secili prej objekteve do të zhvendoset në shtresën e vet, por të gjithë do të futen në shtresë Shtresa 1. Prandaj, do t'ju duhet të tërhiqni manualisht të gjitha shtresat e mbivendosura në krye të paletës së shtresave në mënyrë që ato të jenë mbi shtresën Shtresa 1, dhe më pas shtresa që u bë bosh Shtresa 1 thjesht hiqni (Fig. 63). Eksportoni imazhin në formatin PSD duke përdorur komandën File=>Eksporto(File=>Export) me cilësimet si në Fig. 64.

Ngarkoni skedarin e krijuar PSD në programin ImageReady (Fig. 65 dhe 66). Hapni menunë e paletës AnimacionKrijoni korniza nga shtresat(Krijoni korniza nga shtresat). Si rezultat, do të krijohen pesë korniza, secila prej të cilave do të korrespondojë me shtresën e vet dhe dritaren e paletës Animacion do të duket si në Fig. 67.

Pas kësaj, vendosni kohëzgjatjen e secilit prej kornizave të krijuara në këtë rast, kohëzgjatja për të gjitha kornizat vendoset në 0.2 s. Dhe pastaj ruani animacionin me optimizim duke përdorur komandën File=>Ruaj i optimizuar(File=>Ruaj me optimizim). Rezultati që rezulton mund të ngjajë me Fig. 68.

Është edhe më i përshtatshëm për të marrë boshllëqe, të cilat më pas mund të konvertohen lehtësisht në animacion në ImageReady, për të përdorur funksionet Përzierje të gjalla Programet ilustruese. Ky përdorim i kombinuar i Illustrator dhe ImageReady përshpejton ndjeshëm procesin e krijimit të animacioneve GIF.

Për shembull, vizatoni dy objekte arbitrare me shumë ngjyra dhe më pas lidhini ato me një lidhje përzierjeje me parametrat e duhur (Fig. 69). Është e pamundur të përdoret direkt ky skedar për të krijuar animacion, pasi imazhi është në një shtresë të vetme (Fig. 70). Prandaj, së pari do t'ju duhet të vendosni çdo element të objektit të përzierjes në një shtresë të veçantë. Për ta bërë këtë në dritare Shtresat nxjerr në pah vijën , aktivizoni menynë e paletës duke klikuar në shigjetën e zezë në këndin e sipërm të djathtë të saj dhe zgjidhni komandën Lirimi në sekuencën e shtresave(Konvertoni në shtresa në mënyrë sekuenciale) (Fig. 71). Ndërsa mbani të shtypur çelësin Ndërrimi, zgjidhni shtresat e krijuara dhe vendosini mbi shtresë Shtresa 1 dhe pastaj fshini vetë shtresën Shtresa 1, duke e zhvendosur atë në koshin e plehrave si rezultat, paleta e shtresave do të marrë të njëjtën formë si në Fig. 72.

Oriz. 70. Gjendja fillestare e dritares Layers

Eksportoni skedarin e krijuar në formatin PSD me komandën File=>Eksporto(File=>Eksport). Hapni skedarin e krijuar PSD në programin ImageReady (Fig. 73). Ju lutemi vini re se të gjitha shtresat e krijuara në Illustrator do të shfaqen në dritaren e shtresave (Fig. 74) dhe në dritaren Animacion Për momentin do të ketë vetëm një kornizë.

Aktivizoni menynë e paletës Animacion duke klikuar mbi shigjetën e zezë në këndin e sipërm djathtas të paletës dhe duke zgjedhur Krijoni korniza nga shtresat(Krijoni korniza nga shtresat) Si rezultat, në këtë shembull, do të krijohen pesë korniza dhe dritarja e paletës Animacion do të marrë formën në përputhje me Fig. 75. Zgjidhni të gjitha kornizat duke mbajtur të shtypur tastin Ndërrimi, dhe vendosni kohëzgjatjen e duhur të kornizës në këtë shembull, e njëjta kohë prej 0,2 s merret për çdo kornizë. Pastaj ruani skedarin e optimizimit me komandën File=>Ruaj i optimizuar(File=>Ruaj me optimizim), duke vendosur në listë Lloji i skedarit opsion Vetëm imazhe (*.gif). Animacioni do të ngjajë me Fig. 76.

Ajo që duket shumë më interesante nuk është lëvizja, por ndryshimi i butë i madhësisë së objekteve të përzierjes. Për shembull, mund të përdorni tranzicionin e përzierjes tashmë të krijuar. Në këtë rast, pasi të krijoni shtresa të veçanta për çdo element tranzicioni të përzierjes, vendosni të gjitha objektet njëra mbi tjetrën duke përdorur butonat Qendra Horizontal Align(Rastoni me qendrën horizontale) dhe Qendra vertikale e rreshtimit Paletat (Rreshtoni në lidhje me qendrën vertikale). Rreshtoni(Fig. 77).

Eksporto skedarin e krijuar në formatin PSD ( File=>Eksporto File => Export) dhe hapni skedarin e krijuar PSD në programin ImageReady (Fig. 78). Krijoni korniza animacioni bazuar në shtresa ( Krijoni korniza nga shtresat Krijoni korniza nga shtresat) dhe zgjidhni një kohëzgjatje të përshtatshme për to (Fig. 79). Dhe pastaj, për ta bërë animacionin më efektiv, kopjoni kornizat ekzistuese, por në rend të kundërt në mënyrë që imazhi së pari të rritet dhe më pas të zvogëlohet, dhe kështu me radhë në një rreth (Fig. 80). Pastaj ruani skedarin e optimizimit ( File=>Ruaj i optimizuar File=>Ruaj me optimizim). Animacioni që rezulton është paraqitur në Fig. 81.