Hogyan készítsünk gif animációt az illusztrátorban. Hogyan készítsünk animációt az Adobe Illustratorban. SWF-fájlok exportálása az Illustratorból
Ma van valami szokatlan Adobe lecke Illusztrátor. Mert ezúttal nem statikus képet készítünk, hanem igazi animációt. Képzeld, kiderül vele Adobe segítségével Az Illustrator rajzfilmeket is tud rajzolni :)
És ehhez semmi szükségünk. A rétegek megfelelő szervezése és a végső munka exportálása swf formátumba, ahol minden réteg animációs keretté alakul. A mai oktatóanyagban egy retrofilm stílusú visszaszámláló animációt rajzolunk. A kimenetnek egy flash videónak kell lennie, ugyanazzal a visszaszámlálással.
Az első dolog, amit meg kell tennie, hogy megrajzolja az összes szükséges elemet a jövőbeli animációhoz. Ehhez egy külön dokumentumban elkészítettem egy filmkockából két pozíciót, referenciaként egy kört, amely külön szektorokra van vágva, egy textúrát és egy függőleges karcolást, hogy hozzáadja az ókor hatását, valamint az összes számot, ill. feliratok.
Amikor a rajzfilmünk minden része elkészült, elkezdhetjük magának az animációnak a készítését. A kényelem kedvéért jobb ezt egy új dokumentumban megtenni. Ebben az esetben a rétegeink az animációs képkockák szerepét töltik be. És a legelső rétegben csak egy filmkockát kell másolnia. Helyezze a munkaterület közepére.
Most hozzon létre egy második réteget, és másoljon bele egy filmkockát, amelyben a szélek mentén eltolt lyukak vannak kialakítva. Azt is középre kell helyezni.
Ebből a két rétegből már mozgófilm animációja is elérhető. De később még sok rétegre lesz szükségünk. Tehát válassza ki az első két réteget, lépjen a panelbeállításokhoz, és készítsen másolatot a rétegekről.
Hasonló módon 12 réteg filmkockát kell felhalmoznunk, amelyek meghatározzák a mozgását.
Most egy csomó rétegünk van, és mindegyik látható. Abban az értelemben, hogy a felső rétegek blokkolják az alsókat, ami nem teljesen kényelmes a munkához. Ezért néhány réteget kikapcsolhat, ha a réteg nevétől balra lévő ikonra kattint. Az összes réteg egyidejű ki- és bekapcsolásához tartsa lenyomva az Alt billentyűt, miközben a szem ikonra kattint. A rétegek be- és kikapcsolásával pontosan láthatja, mi található jövőbeli animációnk adott képkockájában. És most, hogy enyhe remegést adjunk a film mozgásához, a kapott képkockákat kissé el kell mozgatnunk különböző irányokba. Ehhez csak azt a réteget kapcsolja be, amellyel dolgozni fog. Ebben a pillanatban, majd mozgassa a keretet néhány képponttal bármilyen irányba.
Miután végigment az összes rétegen, és hozzáadott egy kis eltolást, elkezdheti létrehozni a mozgó kör animációját. Ehhez másolja ki a szektorokból álló kört a rajzfilmrészekkel ellátott dokumentumból, és helyezze a filmkocka tetejére az első rétegre.
Ha megszünteti a kör kijelölését, az egyetlen egésznek fog kinézni. Pontosan erre van szükségünk.
De mivel egyedi szektorokból áll, nagyon gyorsan és egyszerűen hozhat létre animációt a színük megváltoztatásával. Ehhez másolja ezt a kört a második rétegre, és világítsa meg az első szektort. Emlékszel, hogy a filmünk mozgás közben remeg, ezért egyáltalán nem szükséges pontosan a képkocka közepére helyezni a kört. Helyezze el szemmel.
Hasonló módon be kell másolni a kört minden következő rétegbe, miközben egy szektorral többet kell festeni világosabb színnel, mint az előző alkalommal. Ez a 12 réteg együtt egy betöltőkörrel mozgó film animációját alkotja.
Ezután textúrát kell adnunk a rétegeinkhez. Kapcsolja be az első réteget, és másolja a textúrát az eredeti fájlból a tartalék alkatrészekkel.
Ezután kapcsolja be egyenként a következő rétegeket, és másolja oda ugyanazt a textúrát. Ahhoz, hogy minden keretben máshogy nézzen ki, egyszerűen forgassa el 90 fokkal. Ahogy azt már sejtette, mind a 12 képkockához textúrát kell adnunk.
Ha már nagyon belefáradt a másolásba, akkor a kedvére tehetek - már nagyon kevés van hátra. A legnehezebb része véget ért. Már csak függőleges karcolások maradnak hátra, és majdnem kész. Ehhez ismét lemásoljuk az eredeti karcolást, és több rétegben tetszőleges helyre helyezzük. Az én esetemben a karcolások csak két rétegben jelennek meg.
Most, hogy elkészült a filmanimáció fő ciklusa, már csak a számokat kell összeadni. Mivel a visszaszámlálásunk 3-tól 1-ig tart, plusz a Go!!! szó, még több rétegre van szükségünk. Nem 12, hanem akár 48. Ehhez még három másolatot kell készíteni a kész rétegekből filmanimációval.
És akkor minden egyszerű. Kapcsolja be a legelső réteget, és tegye oda a hármast.
Ezután át kell másolnia ezt az ábrát a következő rétegekre, amíg a kör animáció véget nem ér. Amikor eléri a rétegek következő példányát, ahol a kör ismét teljesen ki lesz töltve, be kell írnia a kettes számot. Ugyanígy másolja az egyes számút a kívánt rétegekre. És amikor a Go!!! felirat utolsó rétegeihez ér, egyszerűen törölje a kört, mielőtt átmásolja a feliratot a kívánt rétegre.
Az animációhoz ennyi. Itt a lényeg az, hogy ne keveredj össze. Adhatsz néhány kényelmes elnevezést a rétegeknek, de lusta voltam :) És ha befejezted a munkát, mindenképpen kapcsold vissza az összes réteget a szem ikonra kattintva.
Az exportálási beállítások ablakban győződjön meg arról, hogy az Exportálás másként: AI Layers SWF-keretek értékre van állítva. Ez az opció teszi az Illustrator rétegeit animációs keretekké. Ezután kattintson a Speciális gombra.
Megnyílik további beállítások. Itt kell beállítani a Frame Rate-t. 12 képkocka van másodpercenként. A Looping jelölőnégyzet felelős a ciklikus animációért. Ennek köszönhetően a videót körben játsszák le. A Rétegsorrend: Alulról felfelé opció pedig alulról felfelé reprodukálja az illusztrátor rétegeket a panelen. Pontosan így építettük fel az animációnkat.
A kimenet egy flash videó az animációnkkal.
Most láthatja, mire képes egy egyszerű animáció Adobe Illustrator nem olyan nehéz, mint amilyennek első pillantásra tűnik.
De hosszú videók készítéséhez ill interaktív alkalmazások még mindig jobb használni Adobe Flash vagy más flash szerkesztők. Például ezt a macskát egy régiben készítettem Macromedia Flash, amit a munkahelyemen ástam ki.
Ezenkívül az utóbbi időben a HTML5-öt és a CSS3-at egyre gyakrabban használják animációk készítésére. Ezt a kódot a modern böngészők támogatják, és nem igényel flash lejátszót.
Roman aka dacascas kifejezetten a bloghoz
Iratkozzon fel hírlevelünkre, hogy ne maradjon le semmi újdonságról:
Az utóbbi időben nagyon népszerűvé váltak az SVG (Scalable Vector Graphics) grafikák különféle animációi webhelyeken és alkalmazásokban. Ez annak a ténynek köszönhető, hogy minden legújabb böngészők már támogatja ezt a formátumot. Itt talál információkat az SVG böngésző támogatásáról.
Ez a cikk a Lazy Line Painter könnyű Jquery beépülő modult használó SVG vektoranimáció legegyszerűbb példáját tárgyalja.
ForrásA feladat elvégzéséhez és teljes megértéséhez alapszintű HTML, CSS, Jquery ismeretek kívánatosak, de nem kötelező, ha csak SVG-t akarunk animálni) Kezdjük!
És ezeket a lépéseket kell követnünk:
1. Hozza létre a megfelelő fájlstruktúrát
Ebben lesz segítségünkre az Initializr szolgáltatás, ahol az alábbi képen látható módon kell paramétereket kiválasztanunk.
- Klasszikus H5BP (HTML5 Boiler Plate)
- Nincs sablon
- Csak HTML5 Shiv
- Minimalizált
- IE osztályok
- Chrome Frame
- Ezután kattintson a Letöltés gombra!
2. Töltse le és csatlakoztassa a bővítményt
Mivel az inicializálás a legújabb Jquery könyvtárral érkezik, az archívumból, amelyet a Lazy Line Painter projekttárból kell letöltenünk, csak 2 fájlt kell átvinnünk a projektünkbe. Az első a „jquery.lazylinepainter-1.1.min.js” (a beépülő modul verziója eltérhet), az eredményül kapott mappa gyökerében található. A második az example/js/vendor/raphael-min.js.
Ez a 2 fájl a js mappába kerül. És összekapcsoljuk őket az index.html-ünkkel a main.js előtt a következőképpen:
3. Rajzoljon egy klassz körvonalképet az Adobe Illustratorban
Használhatja például a mellékletben található ikonokat.
4. Alakítsa át képünket Lazy Line Converterre
Csak húzza az ikonját az alábbi képen látható ablakba.
Magában a kódban módosítható a körvonal vastagsága, színe és az animáció sebessége, ami a konvertálás után jelenik meg!
5. Illessze be a kapott kódot a main.js fájlba
Most egyszerűen beillesztjük a kapott kódot egy üres main.js fájlba
Lehetőségek:
strokeWidth — körvonalvastagság
strokeColor — körvonal színe
Az egyes vektorok rajzolási sebességét is módosíthatja az időtartam paraméter értékeinek módosításával (alapértelmezett 600)
6. Adjon hozzá némi CSS-t ízlés szerint
Bekezdés eltávolítása az index.html fájlból
Helló Világ! Ez a HTML5 Boilerplate.
Ehelyett pedig beszúrunk egy blokkot, amelyben az animációnk fog játszódni
majd hozzáadunk néhány CSS-t a main.css fájlhoz, hogy szebb legyen:
Törzs (háttér:#F3B71C; ) #ikonok (pozíció: rögzített; felső:50%; bal:50%; margó: -300px 0 0 -400px; )
mentse az összes fájlt.
Most nyissa meg az index.html oldalt egy modern böngészőben, és élvezze a hatást.
P.S. induláskor helyi gép Az animáció kezdete néhány másodpercig késhet.
Webes grafika optimalizálás
Grafikus információk sokkal lassabban továbbítható, mint a szöveg, és a képek betöltési ideje arányos a méretükkel grafikus fájlok. Ezért a weboldalak gyors betöltéséhez kis méretű beágyazott elemekre van szükség grafikus képek, amelyet az optimalizálásukkal érnek el. A képoptimalizálás annak átalakítását, minimális fájlméret biztosítását jelenti az ebben az esetben szükséges képminőség megőrzése mellett, amit elsősorban a grafikus képek színszámának csökkentésével, tömörített és speciális fájlformátumok használatával, valamint az egyes képek tömörítési paramétereinek optimalizálásával érnek el. töredékek.
Az Illustrator beépített képoptimalizáló eszközökkel rendelkezik, amelyek az optimalizálási folyamatot gyorssá és hatékonnyá teszik számos előnézeti módszerrel. Az előnézet meglehetősen pontos képet ad arról, hogy az optimalizált kép valós időben hogyan fog kinézni, ami segít az optimalizálás eredményének értékelésében és a megfelelő beállítások sikeres kiválasztásában. És optimalizálhatja mind a közvetlenül az Illustratorban létrehozott képeket, mind a többit, például azokat a fényképeket, amelyeket egy webhelyen kell elhelyezni.
Az optimalizálási paraméterek a Mentés webre ablakban adhatók meg, amelyet a Fájl menü azonos nevű paranccsal hívnak meg. A program a négy előnézeti mód egyikének használatát kínálja, de kettő a legalkalmasabb az optimalizálás minőségének felmérésére:
- 2-Up (két lehetőség) az eredeti és az optimalizált kép egyidejű megtekintése a megadott beállításoknak megfelelően (1. ábra);
- 4-Up (négy lehetőség) Ebben a módban a nézetablak négy ablakra van osztva (2. ábra) az eredeti kép és az optimalizált három változatának megjelenítéséhez: az első verzió a beállított optimalizálási értékek alapján jön létre, és a másik kettő az aktuális optimalizálási beállítások változata.
Mindkét mód lehetővé teszi, hogy jelentősen időt takarítson meg a legjobb optimalizálási lehetőség megtalálása során, mivel szükségtelenné teszi a képek különböző optimalizálási beállításokkal történő mentését és azok későbbi vizuális összehasonlítását. Ezen túlmenően nem csak az optimalizált kép minősége, hanem annak mérete és betöltési ideje is értékelhető különböző csatlakozási lehetőségek mellett. Összehasonlításképpen a legkényelmesebb mód a 4-Up (négy lehetőség), amely lehetővé teszi a tömörítés vagy a palettacsökkentés képminőségre és annak méretére gyakorolt hatásának vizuális értékelését, és végső soron a legjobb optimalizálási paraméterek meghatározását.
Az Illustrator lehetővé teszi a webes grafika optimalizálását nem csak GIF, JPG, PNG-8 és PNG-24 formátumban, hanem SWF és SVG formátumban is. A kis számú színnel rendelkező indexelt képek GIF formátumban kerülnek mentésre. A JPG formátum a színes és szürkeárnyalatos képek, fényképek és színgazdag grafikák, például színátmenetes kitöltések mentésére szolgál. Az átlátszó területekkel rendelkező színes képekhez a PNG formátumot használják, amely lehetővé teszi az indexelt és a színes képek mentését is, míg a PNG-8 formátumban az optimalizált kép maximális lehetséges színszáma 256, ill. A PNG-24 formátumban a képnek több millió színe lehet, és ezért néz ki JPEG formátum. A PNG-24 és a JPEG között az a különbség, hogy a PNG-24 formátumú képek optimalizálására használt tömörítési módszer nem vezet minőségromláshoz, hanem ennek eredményeként nő a fájlméret. Az SVG és SWF formátumok egyesítik a grafikát, a szöveget és az interaktív összetevőket, és optimalizálhatók is.
Mérlegeljük konkrét példa képoptimalizálás. Tegyük fel, hogy egy weboldal logóját az Illustratorban fejlesztették ki (3. ábra), amelyet kezdetben AI formátumban mentettek el. Az azonnali webre optimalizálási kísérlet nem vezet semmi jóra, mivel ebben az esetben a kép automatikusan levágásra kerül, ami nem veszi figyelembe a keletkező felirat valódi helyzetét a deformáció következtében (4. ábra ill. 5).
Ezért próbáljuk meg PSD formátumba exportálni a logót a File=>Export (Fájl=>Exportálás) paranccsal, a létrehozott kép mérete 143 KB lesz. Nyissa meg a kapott PSD-fájlt, és használja a File=>Save for Web parancsot. Figyelembe véve a képben szereplő színek korlátozott számát, ebben az esetben a GIF formátum az optimális, melynek konkrét beállításait kell eldönteni. A beállításokkal kísérletezve megbizonyosodhat arról legjobb minőség megadja a program alapértelmezett tömörítési algoritmusát, a Selective-t. Ami a simítást illeti, tekintettel a gradiens kitöltés jelenlétére, jobb, ha olyan algoritmust választunk, amely zajgeneráló Zaj (6. ábra). Az így létrejövő optimalizáló fájl mérete 6,729 KB lesz (7. ábra), miközben a háttér átlátszósága megmarad, amit a kép GIF formátumban történő elmentésével a HTML fájllal együtt könnyű ellenőrizni (8. ábra). Ennek eredményeként ebben a példában az emblem.html és az emblem.gif fájlokat a Primer1 mappában kaptuk meg.
Minden weboldal tervezésének nélkülözhetetlen eleme a grafikus vezérlőgombok. Egyszerűen lehetetlen elképzelni egy oldalt nélkülük. A gombos rajzolás mára különleges műfajná vált, és az Illustrator lehetővé teszi a legbonyolultabb lehetőségek létrehozását. Például a hálóobjektumként és/vagy fedőmaszkokkal ellátott gombok sokkal lenyűgözőbbek, mint a hagyományosak.
Fontolja meg a kerek, domború gomb létrehozásának lehetőségét az Illustratorban. Rajzoljon egy vektorobjektumot tetszőleges színnel kitöltött kör formájában (9. ábra), és alakítsa át hálóvá az Object => Create Gradient Mesh (Object => Create a gradient mesh) paranccsal, négy sort és négyet megadva. oszlopokat, és a Megjelenés listában válassza ki a Középre emelés 60-nak megfelelő opciót (10. ábra). Válassza ki a Közvetlen kijelölés eszközt, és kattintson az objektum bal felső sarkában az ott található rögzítési pontok kiválasztásával (11. ábra). Módosítsa a megfelelő cella színét fehérre, ha kiválasztja azt a Színtár palettán (12. ábra).
Fogjuk az Ellipszis eszközt, helyezzük az egérjelölőt a korábban létrehozott kör közepére, és az Alt és Shift billentyűket lenyomva tartva feszítsük ki az új kört a régire úgy, hogy az 1-2 pixellel nagyobb legyen, mint a régi. oldalain. Adjunk neki egy 1-2 pixel széles fekete keretet (Stroke), és töltsük fel radiális színátmenettel a pirostól a fehérig (13. ábra). Húzza a létrehozott vektorobjektumot 1-2 pixel jobbra és lefelé, majd a kijelölés eltávolítása nélkül kattintson rá jobb gombbal és ki helyi menü válassza az Elrendezés=>Visszaküldés lehetőséget. Az eredmény egy üres gomb lesz, az ábrán látható. 14.
Általános szabály, hogy bármely weboldalon több azonos típusú gomb található, amelyek például csak a rájuk rajzolt nyilak irányában különböznek, jelezve a webhely körüli mozgás irányát. Tekintsük a legegyszerűbb esetet, amikor két gomb van, amelyek közül az egyik a lefelé mutató nyíllal a következő oldalra, a felfelé mutató nyíl pedig az előző oldalra ugrást jelent. Nyílsablonként vegyünk egy szabályos háromszöget, amelyet a Sokszög eszközzel rajzoltunk meg, feketére festünk, és a nagyobb hatás érdekében hálós objektumnak is tervezzük. Mozgassa a nyilat a gombra, és állítsa be az összes objektum helyzetét egymáshoz képest az Igazítás paletta megfelelő gombjaival. Az eredményül kapott gombok közül az első az ábrán látható. 15. Készítsünk másolatot a fóliáról a gombbal a Fólia duplikálása parancs kiválasztásával, ennek eredményeként két egyforma fóliát kapunk. Ezután válassza ki a nyilat a fólia másolatán, és forgassa el 180°-kal a Transform=>Rotate Transformation=>Rotate parancs kiválasztásával a helyi menüből. Ugyanazt a gombot kapjuk, mint az ábrán. 16. Kérjük, vegye figyelembe, hogy sokkal kényelmesebb, ha egy projekthez tartozó összes azonos típusú gombot egy fájlban, különböző rétegeken tárolja, ami ebben az esetben látható.
Most el kell mentenie az egyes gombok optimalizált verzióit. Először tegye láthatatlanná az alsó réteget, ebben az esetben a felső réteg gombja megmarad. Válassza ki a File=>Save for Web parancsot, állítsa be például a gomb optimalizálási paramétereit, amint az az ábrán látható. 17, kattintson a Mentés gombra, és írjon be egy fájlnevet. A végül elmentett gomb az ábrán látható. 18. Most állítsa vissza a láthatóságot az alsó rétegre, tegye láthatatlanná a felső réteget, és mentse el a második gombot is ugyanúgy, más nevet adva neki. Az eredmény az ábrán látható. 19.
Most már csak meg kell győződni arról, hogy a gombok teljesen elfogadhatónak tűnnek a weboldalon, és elhelyezzük őket egy egyedi oldalon (20. ábra). Ennek eredményeként ebben a példában a Primer2.html fájl és két grafikus kép került a képek mappába (Primer2 mappa).
Kívánt esetben az optimalizálás során könnyen szeletté alakítható a gomb. Ebben az esetben a Fájl=>Mentés webre (File=>Save for Web) parancs kiválasztása és az optimalizálási paraméterek beállítása után válassza ki a Szelet kijelölés eszközt az eszközpalettáról, és kattintson duplán a képre, ami végül automatikusan 1-es sorozatszámú szeletté alakul (21. ábra). Újbóli duplán kattintva megnyílik a Szelet beállításai ablak, amelyben meg kell adnia egy hivatkozást, és opcionálisan módosítania kell a szelet nevét (22. ábra), majd el kell mentenie az optimalizált képet. Az eredmény ebben az esetben a Primer3.html (23. ábra) és a Primer3.gif (Primer3 mappa) fájlok lesznek.
Az oldal életre keltésének egyik módja az, ha olyan dizájnelemeket vezetünk be, amelyek megváltoztatják az oldalt kinézet(vagy állapot) az egér viselkedésétől függően, vagy ritkábban bármilyen egyéb helyzet esetén: méretezés, görgetés, betöltés, hibák stb.
Az ilyen elemek közül a leghíresebbek a rollover (az angol roll over roll over, turn over) elemek, amelyek az egér hatására megváltoztatják a megjelenést. A tipikus átgörgetés példái az animált gombok. Az átgörgetést gyakran használják más webhelynavigációs elemek létrehozásakor. A valóságban minden görgetés nem egy, hanem több (legfeljebb négy) kép, amelyek mindegyike egy adott eseménynek felel meg. A főbb események a következők: Normál normál állapot, Az egérkurzort egy elem fölé vigye, és lefelé nyomja le a bal egérgombot, amikor a kurzort fölé viszi. Elméletileg olyan események is szerepet játszhatnak, mint a kattintás kattintás után a bal egérgomb felengedése, a gomb elengedése után felfelé, az aktív zónából való kilépéskor. A gyakorlatban azonban gyakran csak az első három vagy akár két esemény elemének megváltoztatására korlátozódnak.
Klasszikus borulásokKlasszikus értelemben a rollover egy GIF formátumú grafikus képsorozat és a hozzá tartozó HTML kód, aminek köszönhetően az egér viselkedésétől függően a böngészőablakban egy kép helyettesít egy másikat.
Az Illustrator nem a klasszikus értelemben vett átfordítások közvetlen létrehozására szolgál, de segíthet a kezdeti elemek kidolgozásában. Az ötlet ebben az esetben az, hogy létrehozunk egy réteget az első eseménynek megfelelő képpel. Ezután készítsen másolatot a rétegről, és alakítsa át a képet, hogy megfeleljen a második eseménynek, és így tovább. Az így létrejövő többrétegű kép egy PSD fájlba kerül exportálásra a megőrzött rétegekkel, amely alapján az Image Ready programban egy rollover jön létre. Az Illustrator program használatának előnye, mint sok más esetben, számos olyan érdekes funkcióban rejlik, amelyek máshol nem érhetők el. szoftver, kombinálva a vektorgrafika átalakításának kényelmével.
Próbáljunk meg létrehozni egy olyan feliratot, amely az egér viselkedésétől függően változtatja a színét. Nyissa meg az Illustratort, és hozzon létre egy feketével kitöltött, lekerekített téglalap alakú alakzatot (24. ábra), készítsen róla másolatot, és helyezze el a képernyő egy szabad részére. Alakítsa át a téglalap első példányát hálóobjektummá, középen egy kiemeléssel (Object=>Create Gradient Mesh Object=>Create Gradient Mesh parancs), négy sort és tíz oszlopot megadva (25. ábra). Aktiválja a téglalap második példányát, és állítsa be hozzávetőlegesen színátmenetes kitöltésre, amint az az ábrán látható. 26. Fedje le a színátmenetes objektumot a háló tetejére, csökkentse a színátmenet objektum átlátszatlanságát körülbelül 80%-ra, a méretét pedig körülbelül 1 képponttal, hogy végül szimulálja az ütés hatását. Ezután nyomtassa ki a feliratot a tárgyak tetejére. Eredeti formájában legyen fehér színe, ami a Normál állapotnak fog megfelelni (27. ábra), majd amikor a görgetési állapot megváltozik, a felirat színe például zöldre változik, amikor az egérjelölőt az egérgomb lenyomásakor (Over state), és kékre vált, ha megnyomja az egérgombot (Down állapot).
Ügyeljen a Layers palettára, ebben a szakaszban csak egyetlen réteg van benne. Készítsen két másolatot erről a fóliáról a Rétegek paletta menüjének Duplicate Layer parancsával, három réteg lesz a palettán (28. ábra). Ezután a réteg első példányán változtassa meg a felirat színét zöldre, a második példányban pedig kékre (29. ábra). Ennek eredményeként megkapjuk a boruláshoz szükséges üres felületet.
Exportálja a létrehozott képet PSD formátumba, megőrizve a rétegeket, a File=>Export paranccsal és az RGB színmodell kiválasztásával (30. ábra). Nyissa meg a létrehozott PSD fájlt az ImageReady programban (31. és 32. ábra). Hozzon létre kereteket rétegek alapján az Animáció paletta menüjének Képkockák létrehozása rétegekből parancsával. Az Animáció ablak úgy fog kinézni, mint az ábra. 33. Ebben az esetben először egyetlen Normál állapot jön létre a Rollovers palettán.
Ezután az Animáció ablakban válassza ki az indukált állapotnak megfelelő keretet, és a Layers palettán automatikusan a Layer 1 Copy réteg kerül kiválasztásra (34. ábra). Lépjen a Rollovers palettára, és kattintson az Átgörgetési állapot létrehozása gombra (Görgetési állapot létrehozása) ábra. 35, ami miatt az Over State állapot megjelenik a Rollovers palettán (36. ábra). Hasonló módon hozzon létre egy Down állapotot. Aktiválja a Normál állapotot a Rollovers palettán, és törölje az összes képkockát az Animáció palettáról, kivéve azt, amelyiknek meg kell felelnie a Normál állapotnak. Ennek eredményeként minden átgörgetési állapothoz csak egy képkocka lesz az Animáció palettán (37., 38. és 39. ábra).
Rizs. 38. A kép nézete, az Animáció ablak, valamint a Rétegek és Rollovers paletták az Over State állapothoz
Ellenőrizze az eredményt úgy, hogy az eszköztáron az Előnézet az alapértelmezett böngészőben gombra kattint, és a böngészőablakba lép (40. ábra). Ezután mentse el a fájlt a Fájl=>Optimalizált mentése paranccsal, és adja meg a HTML és képek (*.html) opciót. Ennek eredményeként ebben a példában a Primer4.html fájl és egy sor grafikus kép került a képek mappába.
Rizs. 40. Böngésző ablak Rollover elemmel
SVG rolloversAz egyre népszerűbb SVG (Scalable Vector Graphics) formátum vektoros grafika), amely az XML szabvány alapján készült, különféle interaktív elemek fogadását is lehetővé teszi, különösen a rollovereket, de a gyakorlatban ez teljesen másképpen valósul meg. Érdemes megjegyezni, hogy az interaktív SVG rolloverek létrehozásához a klasszikusokkal ellentétben, amikor a megfelelő HTML kód teljesen automatikusan generálódik, a JavaScript nyelv ismerete és az objektum-orientált programozás alapelveinek ismerete szükséges.
Az SVG objektumokkal való munkához létezik egy speciális SVG Interactivity paletta, amely egyszerűen megnyitható a Window => SVG Interactivity (Window => SVG interactivity) paranccsal. ábra. 41.
Vegyük fontolóra ezt a lehetőséget az átgörgetés létrehozására egy interaktív gomb példájával, amelyen a felirat színe feketéről kékre változik, amikor az egeret ráhelyezi, és újra feketévé változik, amikor az egér elhagyja az aktív zónát.
Hozzon létre egy téglalap alakú, lekerekített élű gombot, és válasszon hozzá megfelelő színátmenetes kitöltést, például az ábra szerint. 42. Állítsa be a gomb átlátszóságát az Átlátszóság palettán Ebben a példában az Opacitás értéke 50%. Készítsen másolatot a gombról, töltse ki sötétzölddel (43. ábra), majd alakítsa át hálóobjektummá az Object => Create Gradient Mesh paranccsal, négy sort és tíz oszlopot megadva, majd a Megjelenés listában (View) a Középre opció kiválasztásával és a Kiemelés értékének 100-ra állításával. Csökkentse a háló objektumot tartalmazó réteg átlátszatlanságát körülbelül 40%-ra (44. ábra). Helyezzen egy hálós tárgyat egy színátmenet tetejére, és a gomb hasonlít a 2. ábrán láthatóra. 45.
Rizs. 44. A gomb másolatát alakítsa át hálóobjektummá
Egészítse ki a gombot a kívánt felirattal, és állítsa be a pozícióját az Igazítás paletta megfelelő gombjaival. Az eredményül kapott kép egy réteget fog tartalmazni három egymásra helyezett objektummal (46. ábra). Az ütemezett események relatívak egy szöveges objektumhoz, ezért a kényelem kedvéért módosítsa a nevét Szövegre úgy, hogy duplán kattint az objektumra, és ír be egy új nevet. Hasonlóképpen változtassa meg a réteg nevét Layer 1-ről Layer-re (47. ábra).
Az eseményfeldolgozás JavaScript eljárások használatát foglalja magában, ezért csatolnia kell egy fájlt, amely leírja ezeket az eljárásokat. Events.js-nek hívják, és telepítéskor a Sample Files\Sample Art\SVG\SVG mappába menti a lemezre. Adobe programok Illusztrátor. Az Events.js fájl csatlakoztatásához használja a JavaScript Files SVG Interactivity parancsot (48. ábra). Ezután kattintson a Hozzáadás gombra, és keresse meg a kívánt fájlt a merevlemezen. Amikor a neve megjelenik az URL mezőben (49. ábra), kattintson a Kész gombra.
Rizs. 48. Válassza ki a JavaScript Files parancsot
Ezután választ kell adnia a Text objektum egéreseményeire. Válassza ki a Szöveg objektumot, az SVG Interaktivitás paletta Event mezőjében válassza ki az eseményt az egér felett elemColor(evt, "Text", "#3333FF") ez azt jelenti, hogy amikor az egeret a Text objektum fölé viszi, a színe a következőre változik. kék (50. ábra). Ahhoz, hogy a szöveg színe feketére változzon, miután az egér elhagyja az aktív területet, létre kell hoznia egy másik onmouseout eseményt, és válassza ki azt az SVG Interaktivitás paletta Esemény mezőjében. Ezután a műveletsorba írja be az elemColor(evt, "Szöveg", "#000000") szöveget, ezzel visszaadja a színt feketére (51. ábra).
Rizs. 51. A Szöveg objektum SVG Interaktivitás paletta végső megjelenése
Mentse el a létrehozott görgetést SVG fájlként a Fájl=>Mentés másként paranccsal (Fájl=>Fájl típusú SVG formátum, majd állítsa be az SVG fájl mentési beállításait az 52. ábra szerint. Mentés után csak egyet kap egyetlen fájl SVG kiterjesztéssel, és nem kettő, mint a klasszikus átgörgetésnél, ebben az esetben a Primer5.svg fájl (Primer5 mappa) érkezett. Ahhoz azonban, hogy az átgörgetés valóban működjön, még másolni kell Az Events.js fájlt a JavaScript eljárások leírásából. Ezután ellenőrizheti a görgetés működőképességét, és az eredmény az 53. ábrán látható módon fog kinézni.
Az SVG formátum animáció közvetítésére is használható. Próbáljunk meg létrehozni egy egyszerű animált elemet (jelen esetben a cégről szóló információ lesz), amely akkor jelenik meg a képernyőn, ha a megfelelő grafikus objektum fölé viszi az egeret, és eltűnik, ha eltávolítja az egeret az interaktív elemről.
Készítsük el hozzávetőlegesen a következő grafikus és szöveges objektumok sorozatát, amint az ábra mutatja. 54. Nevezze át az összes létrehozott objektumot kényelmes módon úgy, hogy egymás után kattintson a következő objektum nevére a Rétegek palettán, és írja be választott név(55. ábra). Felhívjuk figyelmét, hogy az ábrán kiemeltek. 56 objektumok Szöveg1, Szöveg2, Szöveg3 és 1. útvonal mindig látható lesz, a többi pedig csak akkor, ha az egeret a Szöveg1 objektum fölé viszi.
Rizs. 54. A kép eredeti nézete
Szerelje be az Events.js fájlt, amely leírja a JavaScript-eljárásokat. Ehhez használja az SVG Interactivity palettáról a JavaScript Files parancsot, kattintson a Hozzáadás gombra, mutasson a kívánt fájlra a merevlemezen, majd kattintson a Kész gombra.
Adjon meg választ az egéreseményekre a Text1 objektumhoz. Válassza ki a Szöveg objektumot, az SVG Interaktivitás paletta Event mezőjében válassza ki az onmouseover eseményt, és az alábbi sorba írja be az elemShow(evt, "Text4") szöveget; elemShow(evt, "Path2") . Ennek eredményeként, ha az egeret a Text1 objektum fölé viszi, a Text4 és Path2 objektumok láthatóvá válnak. Kérjük, vegye figyelembe, hogy ha egy esemény bekövetkezésekor több műveletet kell végrehajtani, akkor ezeket a „;” jellel kell megadni. Ezután hajtsunk végre egy hasonló műveletet az onmouseout eseménynél, írjuk be a szöveget, ami objektumok elrejtését jelenti (57. ábra).
Mentse el az eredményt SVG fájlként a Fájl=>Mentés másként paranccsal, adja meg a fájl nevét, válassza ki az SVG formátumot a Fájltípus mezőben, majd állítsa be az SVG fájl mentési beállításait az ábra szerint. 58. Mentés után a Primer6.svg fájl érkezik (Primer6 mappa). Ne felejtse el átmásolni az Events.js fájlt a fájlt tartalmazó mappába. Ha ezek után futsz coz ez a fájl, akkor az ábrán látható eredményt fogja látni. 59. Szinte erre van szüksége. Az egyetlen dolog, ami nem szerepelt a terveinkben, az a Text 4 és Path 2 objektumok kezdeti megjelenése a betöltéskor. Ennek a hiányosságnak a megszüntetéséhez jelölje ki egyszerre mindkét objektumadatot, és hozzon létre egy műveletet nekik elemHide(evt, "Text4"); elemHide(evt, "Path2") a betöltési eseménynél (60. ábra). Mentse újra a fájlt, és győződjön meg arról, hogy a Text4 és Path2 objektumok most csak akkor láthatók, ha az egérmutatót a Text1 objektum fölé viszi.
Bármely weboldal elképzelhetetlen webanimáció nélkül, beleértve az animált gifeket is. Létrehozásukra az egyik lehetőség az Adobe ImageReady alkalmazás, amely lehetővé teszi többek között animáció létrehozását rétegekből. Ebben az esetben maga a többrétegű kép elkészíthető különböző alkalmazásokban, beleértve az Adobe Illustratort is.
Nagyon egyszerű animációt készíteni a Szimbólumok paletta elemei alapján, amelyet a Window=>Symbols paranccsal lehet megnyitni, vagy a Window=>Symbol Libraries paranccsal megnyitható szimbólumkönyvtárak valamelyikéből. ).
Például megpróbáljuk megnövelni bármely szimbólum objektum méretét, az objektum növelésének folyamatának kulcsfontosságú szakaszait külön rétegeken kell beállítani. Először egyszerűen helyezze a szimbólum objektumokat egymás fölé, majd növelje meg az egyes következő objektumok méretét, például a 2. ábrán látható módon. 61. Ennek eredményeként a Layers palettán egy sok objektumot tartalmazó réteg jön létre (62. ábra). Ha ezt a képet közvetlenül PSD formátumba exportálja, az nem ad semmit, mivel csak egy réteg van, és természetesen, amikor megnyitja a PSD fájlt az ImageReady programban, akkor is csak egy réteg lesz. Ezért először el kell helyeznie az objektumokat különböző rétegekre. Ezt meg lehet tenni különböző utak A legegyszerűbb módja, ha először kiválasztja az 1. réteget a Rétegek palettán, és használja a Release to Layer parancsot. Az eredmény az lesz, hogy mindegyik objektum átkerül a saját fóliájába, de mindegyik az 1. rétegbe kerül beágyazásra. Ezért ezután manuálisan kell húznia az összes beágyazott réteget a Rétegek paletta tetejére, hogy azok az 1. réteg felett legyenek, majd egyszerűen törölnie kell a most üres 1. réteg réteget (63. ábra). Exportálja a képet PSD formátumba a Fájl=>Exportálás paranccsal az ábra szerinti beállításokkal. 64.
Töltse be a létrehozott PSD fájlt az ImageReady programba (65. és 66. ábra). Nyissa meg az Animáció, keretek készítése rétegekből paletta menüt. Ennek eredményeként öt képkocka jön létre, amelyek mindegyike a saját rétegének felel meg, és az Animáció paletta ablaka úgy fog kinézni, mint az 1. ábrán. 67.
Ezután állítsa be az egyes létrehozott képkockák időtartamát ebben az esetben, az összes képkocka időtartama 0,2 s. Ezután mentse el az animációt optimalizálással a Fájl=>Optimalizált mentése (Fájl=>Mentés optimalizálással) paranccsal. A kapott eredmény hasonlíthat az ábrához. 68.
Még kényelmesebb olyan üres részeket beszerezni, amelyeket az ImageReady programban egyszerűen animációvá alakíthat az Illustrator Live Blends funkcióinak használatához. Az Illustrator és az ImageReady együttes használata jelentősen felgyorsítja a GIF-animációk létrehozásának folyamatát.
Például rajzoljon két tetszőleges többszínű objektumot, majd kösse össze őket egy keverési hivatkozással a megfelelő paraméterekkel (69. ábra). Ezt a fájlt nem lehet közvetlenül animáció készítésére használni, mivel a kép egyetlen rétegen van (70. ábra). Ezért először a keverési objektum minden elemét külön rétegre kell helyeznie. Ehhez a Layers ablakban jelöljük ki a sort, aktiváljuk a paletta menüt a jobb felső sarkában lévő fekete nyílra kattintva, majd válasszuk a Release to Layers Sequence parancsot (71. ábra). Tartsa lenyomva a Shift billentyűt, jelölje ki a létrehozott rétegeket, és helyezze őket az 1. réteg réteg fölé, majd törölje magát az 1. réteg réteget, és ennek eredményeként a kukába helyezi, a rétegek paletta ugyanolyan formát ölt, mint az 1. ábrán. 72.
Rizs. 70. Kezdeti állapot Rétegek ablakok
Exportálja a létrehozott fájlt PSD formátumba a File=>Export paranccsal. Nyissa meg a létrehozott PSD fájlt az ImageReady programban (73. ábra). Kérjük, vegye figyelembe, hogy az Illustratorban létrehozott összes fólia megjelenik a rétegablakban (74. ábra), és az Animáció ablakban egyelőre csak egy keret lesz.
Aktiválja az Animáció paletta menüt a paletta jobb felső sarkában lévő fekete nyílra kattintva, és válassza a Make Frames From Layers parancsot, ennek eredményeként ebben a példában öt képkocka jön létre, és az Animáció paletta ablak a ábra szerinti forma. 75. Jelölje ki az összes képkockát, miközben lenyomva tartja a Shift billentyűt, és állítsa be a megfelelő képkocka időtartamot ebben a példában, minden képkocka esetében ugyanannyi 0,2 mp lesz. Ezután mentse el a fájlt optimalizálással a Fájl=>Optimalizált mentése (Fájl=>Mentés optimalizálással) paranccsal, a Csak Képek (*.gif) beállításával a Fájltípus listában. Az animáció a 2. ábrához fog hasonlítani. 76.
Ami sokkal érdekesebbnek tűnik, az nem a mozgás, hanem a kevert objektumok egyenletes átméretezése. Használhatja például a már létrehozott keverési átmenetet. Ebben az esetben, miután minden egyes keverési átmeneti elemhez külön fóliát készített, helyezze az összes objektumot egymásra az Igazítás paletta Vízszintes igazítása középre és Függőleges igazítás középre gombjaival (77. ábra).
Exportálja a létrehozott fájlt PSD formátumba (File=>Export File=>Export), és nyissa meg a létrehozott PSD fájlt az ImageReady programban (78. ábra). Hozzon létre animációs képkockákat rétegek alapján (Make Frames From Layers Create frames from layers), és válasszon ezeknek megfelelő időtartamot (79. ábra). Utána pedig, hogy az animáció hatásosabb legyen, másoljuk át a meglévő képkockákat, de fordított sorrendben úgy, hogy a kép először növekszik, majd csökken, és így tovább körben (80. ábra). Ezután mentse el az optimalizálási fájlt (Fájl=>Optimalizált fájl mentése=>Mentés optimalizálással). Az eredményül kapott animáció a ábrán látható. 81.
Rizs. 80. Az Animáció ablak állapota a képkockák sokszorosítása után
Rizs. 81. Kész animáció
Az Adobe Illustratorban az átlátszó GIF a következőképpen készül. Nyissa meg a Fájl menü Mentés webhez és eszközökhöz menüpontját (Alt+Ctrl+Shift+S). A megnyíló ablakban az Optimalizált fájlformátum mezőben először a Képméret fülre kell lépni. Az a helyzet, hogy alapértelmezés szerint a teljes oldal benne van az optimalizálási ablakban, és erre általában nincs szükség. Ezért a Képméret lapon törölje a Clip to Artboard jelölőnégyzet jelölését, és kattintson az Alkalmaz gombra.
Ezután válassza ki a GIF-et a formátumválasztó listából, és jelölje be az Átlátszóság jelölőnégyzetet.
Ezt követően határozzuk meg, hogy mely színek lesznek átlátszóak. A képen látható összes szín megtalálható a Színtáblázat lapon, és színes négyzetekként jelennek meg. Válassza ki a Pipetta eszközt az ablak bal oldalán található eszköztárról.
A színek meghatározásának két módja van. A legegyszerűbb, ha egy színt pipettával közvetlenül a képen adunk meg - ezután a szín egy sötét húzással kiemelésre kerül a színtáblázaton. Nos, ha pontosan tudja, hogy milyen színnek kell átlátszónak lennie, akkor a megfelelő színes négyzetre kattintva közvetlenül kiválaszthatja a színtáblázatban. Mind az első, mind a második esetben, ha több színt kell kiválasztani, akkor a Shift (vagy Ctrl) billentyű lenyomásával kell dolgoznia. A szín kiválasztása után utasítani kell a programot, hogy átlátszó legyen. Ehhez kattintson a Kijelölt színek átlátszóvá tétele ikonra. A képen ez a gomb be van karikázva és a piros szín átlátszóra van állítva. Egy átlátszó terület jelenik meg a képen, és a színtáblázat négyzetének megjelenése megváltozik - egy része fehér háromszög lesz. A kiválasztott szín törléséhez ki kell jelölnie azt a Színtáblázatban, majd ismét kattintson a Kijelölt színek átlátszóvá tételére ikonra.
Néhány szó az átlátszóság beállításának módjáról. Felelős az Átlátszóság Dither Algorithm megadása legördülő menüjéért, oroszul - Átlátszóság szimulációs algoritmus (ábra lent). Négy lehetőség közül választhat: Nincs átlátszó dither, Diffúziós átlátszó dither, Pattern Transparency Dither és Noise Transparency Dither. Diffúz algoritmus módban az Amount csúszka aktívvá válik, lehetővé téve a diffúziós érték módosítását. Mit kell alkalmazni a gyakorlatban? Céltól és képtől függően. Nem használom ezt az opciót, és mindig az alapértelmezetten hagyom – No Transparency Dither.
Kattintson a Mentés gombra – az átlátszó GIF készen áll. A munka az Adobe Illustrator CS4 (v.14) verziójában történt, de minden művelet és billentyűparancs a korábbi CS3 (v. 13) verzióra is vonatkozik.
Import és egyszerű animáció Helló. Ma az After Effects egyszerű animációit nézzük.
Források: Adobe Illustrator CC
Adobe After Effects CC
Kezdjük a tanulást rajzolással az Illustratorban.
Rajzoljunk
1) Rajzolj egy sárga téglalapot háttérnek
1. ábra - Téglalap
2) Rajzolj egy kört, és töltsd ki színátmenettel
Dolgozzunk egy kicsit a körön:
- töröljük az alsó pontot a kontúron, ívet kapunk;
- húzunk egy egyenest, lezárva az ív alját, félkört kapunk
2. ábra - 1) rajzoljon kört; 2) gradiens; 3) pont törlése
3) Rajzolj egy téglalapot, és készíts róla egy másolatot
- egy szürke téglalap;
- egy másik téglalap sötétszürke
4) Rajzoljon háromszöget egy csillagból úgy, hogy a sugarak számát 3-ra állítja
3. ábra - 1) egyenes fény; 2) egyenes sötét; 3) háromszög
5) Rajzolj egy macskát toll és egyszerű formák segítségével 
4. ábra - 1) fej; 2) nyak; 3) test; 4) láb; 5) farok
És most a legfontosabb pillanat
Osszuk el a képeket rétegekre (ami animált lesz, az egy külön rétegen van), így: 
5. ábra - minden kép (piros jelöli a fontos rétegeket)
Ennyi, most spóroljunk.
Nézzük a mentési beállításokat
6. ábra – Mentés
És most jön a következő szakasz. Zárja be az Adobe Illustrator programot, és nyissa meg az After Effects alkalmazást.
Importálás az After Effectsbe
Fájl - Importálás - Fájl - válassza ki a mentett Illustrator fájlunkat.
Válasszuk a rétegek Illustratorból történő importálását, ha felvételt teszünk be, akkor összevont rétegekkel kapunk képet, de erre nincs szükségünk.
7. ábra – Importálás összetételként
Ennyi, importált.
Most pedig lássuk, mi van. Kattintson duplán a kompozícióra, hogy megnyíljon, és lássuk a rétegeket (ha mindent jól csináltunk, több réteg lesz). Ezt értjük, lásd az ábrát
8. ábra - Nyitott kompozíció
És amiért ma itt vagyunk, az az animáció.
Animáció az After Effectsben
Állítsa be a forgáspontot a nyíl tetején a Pan Behind Tool segítségével (parancsikon - Y). Csak veszünk egy pontot, és áthelyezzük a kívánt helyre. Ennek eredményeként így fog kinézni.. 
9. ábra - Pan eszköz és rétegek
Ennyi, most térjünk át az animáció rétegeire.
Szükségünk lesz egy Arrow és Head_cat rétegre.
Kezdjük a nyíllal.
Bővítsük a listát, keressük meg és kattintsunk az órára. Tehát az első pontot nulla másodpercre állítottuk. Az animáció összesen 2 másodpercig fog tartani.
Tehát ezeket a beállításokat kell elvégezned (összesen 3 pontot adunk):
| Második | 0 | 1 | 2 |
| +66 | - 70 | +66 |
10. ábra - Forgatás nyíl
Most animáljuk meg a macska fejét.
Bontsa ki a head_cat elemet, és keresse meg a Pozíciót.
Itt 4 pont lesz.
Csak az utolsó koordináta módosul a többi koordináta befolyásolása nélkül.
| Második | 0.1 | 0.17 | 1.12 | 2.0 |
| Pozíció | 689.3 | 729.3 | 729.3 | 689.3 |
11. ábra - Helyezze el a fejet
Tehát az animáció elve ilyen volt. A nyílvessző egyik oldalról a másikra lendül, amint a cicához közeledik, behúzza a fejét, egy ideig elidőzik ebben a helyzetben, majd visszateszi a helyére.
A végső szakasz
Termelés
A munkádból kész terméket kell létrehoznod.
Lépjen a menübe - Hozzáadás a renderelési sorhoz
Megnyílik a Render panel, és az Output Module-ban (két kattintással) válassza ki a kimeneti formátumot. Vettem *.mov
12. ábra - Renderelés
Kattintson a RENDER gombra, és megkapja az eredményt (csak ne felejtse el megadni az elérési utat).
Ez minden.
