Van egy vagy két ikonja, amelyet animációval szeretne életre kelteni. hol kezdenéd? Tegyük fel, hogy van SVG fájlok, Illustrator CC és utóhatás CC, de a megoldás elkerüli Önt.

Ebben a cikkben bemutatom, hogyan lehet egyszerűen animálni egy SVG-fájlt, beleértve az SVG-fájl előkészítését az Illustratorban és az After Effects CC-be való importálását. Azt is elmagyarázom, hogyan alakíthatja át alakrétegekké, és hogyan adhat hozzá mozgást. És végül beszéljünk az exportálásról és a renderelésről.

A munka végeredménye.

Most térjünk rá a legérdekesebb részre – tanulja meg, hogyan animálhat képeket.

Az SVG fájl előkészítése az Illustratorban

Kezdjük az SVG fájl megnyitásával Adobe Illustrator CC. Animálni fogok egy kisautó ikont, amely ingyenesen elérhető a Week Of Icons oldalon.

A fájl megnyitása után az összes objektumot le kell csoportosítanunk, és rétegekre kell osztanunk. Megteheti manuálisan vagy használhatja Release to Layers (szekvencia) hogy felgyorsítsa a folyamatot. Mielőtt importálnánk a fájlt az After Effectsbe, el kell mentenünk Illustrator fájlformátumban.

Az objektumokat a Release to Layers (Sequence) segítségével szétválaszthatjuk, hogy ne veszítsük el az értékes időt.

Fájl importálása és rendezése az After Effects CC-ben

Most már készen áll az After Effects CC-be történő importálásra. Használjuk a billentyűparancsot Ctrl+I (Windows) vagy Command+I (Mac) párbeszédpanel betöltéséhez import fájl, vagy menjen ide Fájl > Importálás > Fájl… Ugyanitt válassza ki az általunk készített Illustrator CC fájlt, és kattintson rá import. Egy kis párbeszédpanelnek kell megjelennie a kiválasztott fájl nevével. Válassza ki fogalmazás nevű legördülő listából Import fajtája.

Több gyors út fájl importálása - kattintson duplán az oszlop helyére a projektpanelen.

Az Idővonal panelen látni fogjuk az új kompozíciót. Duplán kattintunk rá. Most látnunk kell az Illustrator CC rétegeket narancssárga ikonokkal a nevük bal oldalán.

Mielőtt hozzálátnánk az üzlethez, ezeket a rétegeket át kell alakítanunk alakrétegek. Mindegyiket ki kell választanunk ezzel Ctrl+A/Command+A, vagy manuálisan használja Shift + bal egérgomb. Ezután kattintson a jobb gombbal a rétegre, és válassza ki Létrehozás > Alakzatok létrehozása vektorrétegből.

Most, hogy az új rétegek ki vannak jelölve, húzza őket az Illustrator CC rétegei feletti panel tetejére, majd törölje az Illustrator CC rétegeket, hogy ne akadályozzák őket.

Illustrator CC-rétegek átalakítása alakzatrétegekké az After Effects CC-ben

Bár nem szükséges, fontos, hogy minden rétegnek megfelelő nevet és/vagy színt adjunk. Ez lehetővé teszi számunkra, hogy hatékonyabban dolgozzunk, miközben a kulcskockákra összpontosítunk. Az alábbi példában a címke színei többé-kevésbé megegyeznek a megfelelő rétegek kitöltésével.

A formarétegek megfelelő nevekkel, színekkel, címkékkel és pozíciókkal való címkézése nagyon praktikus.

A beállítások konfigurálásához használja a billentyűparancsot Ctrl+K/Command+K vagy Kompozíció > Kompozíció beállításai… A Kompozíció beállításai közül ki kell választanunk a Szélesség, Magasság, Képkockasebességet és Időtartamot a Szélesség, Magasság, Képkockasebesség és Időtartam értékekhez. Ehhez a projekthez 60 fps-t választottam, hogy az animáció zökkenőmentes legyen.

A Ebben a pillanatbanúgy tűnik, minden készen áll, de van még egy dolog, amit tenni kell. Bizonyos rétegeket össze kell csoportosítanunk, hogy mozgásuk szinkronban legyen a fő réteggel, amelyet irányítani tudunk. Ezt a módszert hívják nevelés.

A Pick Whip segítségével több réteghez rendelhet szülőréteget.

Példánkban az elsődleges testréteghez (szülőréteg) kevésbé jelentős rétegeket (gyermekrétegeket) rendeltem, mint például a szélvédő, a testrészek, a fa és a kötelek. Ez lehetővé tette a teljes autó helyzetének és forgásának szabályozását (a kerekek kivételével) a szülőréteg segítségével.

Animáció készítés

Azt akartam, hogy az autó nekiütődjön egy sziklának, és egy kicsit a levegőben lógjon. Azt is akartam, hogy a fa fel-le mozogjon, és kinyissa a törzset. A kő, az autó és a kerekek megépítésével kezdtem. Aztán itt volt az ideje, hogy túllépjünk a legnagyobb akadályon – az akció fára helyezésén. Miután ez megtörtént, dolgoznom kellett az apró részleteken, például az állványon és a köteleken.

Az animációt leíró vázlat

Az első lépés egy sziklaelem vagy réteg létrehozása volt, de ahelyett, hogy visszatértem volna az Illustrator CC-hez egy újabb réteg hozzáadásához, csak a Pen Tool-t használtam az After Effects CC-ben. Ez lehetővé tette számomra, hogy gyorsan megtervezzek egy kis követ.

Ó, hatalmas tolleszköz!

A csomagtartó viszonylag egyszerű feladat volt. Az autó hátuljára szereltem fel, és horgonypontot tettem a bal alsó csúcsban. A Pick Whip segítségével hozzárendeltem a törzs szülőrétegéhez. Az utolsó előtti lépés a forgás hatásának megteremtése volt, ami viszont valósághűbbé tette az autó pattogó pillanatát Bodymovin a Lottie mobilkönyvtárral kombinálva.

P.S. megtalálja az Illustrator CC és az After Effects CC fájljaimat.

Az ikonkészlet ingyenesen letölthető a címen.

Webes grafika optimalizálás

A grafikus információk továbbítása sokkal lassabban történik, mint a szöveges információ, és a képek betöltési ideje arányos a grafikus fájlok méretével. Ezért a weblapok gyors betöltéséhez kis méretű, beléjük ágyazott grafikai képekre van szükség, ami ezek optimalizálásával érhető el. A képoptimalizálás alatt annak átalakítása értendő, amely a minimális fájlméretet biztosítja az ebben az esetben szükséges képminőség megőrzése mellett, amelyet 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 tömörítési beállítások optimalizálásával érnek el. képtöredékek.

Az Illustrator beépített képoptimalizáló eszközökkel rendelkezik különféle módszerek tekintse meg a gyors és hatékony optimalizálási folyamatot. Az előnézet meglehetősen pontos képet ad arról, hogyan fog kinézni az optimalizált kép valós időben, ami segít kiértékelni az optimalizálás eredményét és kiválasztani a megfelelőt. kívánt beállításokat. É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 el szeretne helyezni egy webhelyen.

Az optimalizálási paraméterek beállítása az ablakban történik Mentés webre(Mentés webre), amelyet a menü azonos nevű paranccsal hívnak meg fájlt(Fájl). A program a négy előnézeti mód egyikének használatát kínálja, de az optimalizálás minőségének értékelésére a legjobb mód illik kettő:

• 2-Fel(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-Fel(négy lehetőség) Ebben a módban a nézet területe négy ablakra van osztva (2. ábra) az eredeti kép és az optimalizált három verziójának megjelenítéséhez: az első verzió a beállított optimalizálási értékek alapján jön létre, a másik kettő pedig opciók az aktuális optimalizálási beállításokhoz.

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 mentését különböző beállításokat optimalizálás és ezek későbbi vizuális összehasonlítása. Ezen túlmenően nem csak az optimalizált kép minősége, hanem annak mérete és letöltési ideje is értékelhető a különböző csatlakozási lehetőségekhez. Ö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 méretre 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 nem csak GIF, JPG, PNG-8 és PNG-24 formátumban, hanem SWF és SVG formátumban is lehetővé teszi a webes grafika optimalizálását. A kis számú színnel rendelkező indexelt képek GIF formátumban kerülnek mentésre. A színes és szürkeárnyalatos képek mentéséhez fényképeket és színgazdag grafikákat, például színátmenetes kitöltéseket használunk a JPG formátumban. Átlátszó területekkel rendelkező, színes képek esetén alkalmazza PNG formátum, amely lehetővé teszi az indexelt és a színes képek mentését is, míg a PNG-8-ban egy optimalizált kép maximális színszáma 256, a PNG-24-ben pedig egy kép több millió színt tartalmazhat, ezért úgy néz ki, mint jpeg formátumban. A PNG-24 és a JPEG között az a különbség, hogy a PNG-24 képek optimalizálására használt tömörítési módszer nem okoz minőségromlást, viszont növeli a fájlméretet. 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.

Vegyünk egy konkrét példát a képoptimalizálásra. Tegyük fel, hogy az Illustrator programban egy webhely emblémát fejlesztettek ki (3. ábra), amelyet eredetileg 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 deformáció eredményeként kapott felirat valódi helyzetét (4. ábra ill. 5).

Ezért próbáljuk meg az emblémát PSD formátumba exportálni a paranccsal Fájl=>Exportálás(Fájl=>Exportálás) A generált kép mérete 143 KB lesz. Nyissa meg a kapott PSD-fájlt, és használja a parancsot Fájl=>Mentés webre(Fájl=>Mentés webre). Tekintettel a képben szereplő színek korlátozott számára, ebben az esetben a GIF formátum az optimális, amelynek konkrét beállításait Önnek kell eldöntenie. A beállításokkal kísérletezve ezt láthatja legjobb minőség megadja a program alapértelmezett tömörítési algoritmusát szelektív(Szelektív). Ami a simítást illeti, akkor a gradiens kitöltése miatt jobb, ha zajkeltő algoritmust választ. 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 GIF-kép és a HTML fájl mentésével könnyű ellenőrizni (8. ábra). Ennek eredményeként in ezt a példát az emblem.html és emblem.gif fájlokat a Primer1 mappába szereztük be.

Gombok

A weblapok nélkülözhetetlen egyedi tervezési elemei a grafikus vezérlőgombok. Egyszerűen lehetetlen elképzelni egy oldalt nélkülük. A gombok rajzolása manapság 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 rácsobjektumként és (vagy) maszkkal ellátott gombok sokkal hatásosabbak, mint a szokásosak.

Fontolja meg a kerek emelt gomb létrehozásának lehetőségét az Illustratorban. Rajzolj egy tetszőleges színnel kitöltött vektorobjektumot kör alakban (9. ábra), és alakítsd át rácsmá a paranccsal Object=>Gradiens háló létrehozása(Object=>Create Gradient Mesh) négy sor és négy oszlop megadásával és a listában Megjelenés(Nézet) egy opció kiválasztásával A központba Kiemel(Háttérvilágítás) 60-ra (10. ábra). Válasszon egy eszközt Közvetlen kiválasztásé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 a palettán történő kijelöléssel Színminták(12. ábra).

Vegyünk egy szerszámot Ellipszis(Ellipszis), állítsa az egérjelölőt a korábban létrehozott kör közepére, és miközben lenyomva tartja a billentyűket altés Váltás, az új kört a régi tetejére feszítse úgy, hogy az minden oldalról 1-2 pixellel nagyobb legyen a réginél. Csinálj belőle fekete szegélyt Stroke) 1-2 képpont széles, és töltse ki radiális színátmenettel vöröstől 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 válassza ki a parancsot a helyi menüből Rendezés=>Visszaküldés(Szervez=>Visszaküld). Ennek eredményeként az ábrán látható gombhoz egy ürességet kapunk. tizennégy.

Á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, amelyek a webhelyen való mozgás irányát jelzik. Tekintsük a legegyszerűbb esetet, amikor két gomb van, amelyek közül az egyik, egy lefelé mutató nyíllal, azt jelenti, hogy a következőre kell lépni következő oldal, és a felfelé mutató nyíl gombot az előzőhöz. A nyíl üres helyeként vegyünk a szerszámmal megrajzolt szabályos háromszöget Poligon(Sokszög) feketével kitöltve, és hálós objektumként is kialakítva a nagyobb hatás érdekében. Mozgassa a nyilat a gombra, és állítsa be az összes objektum egymáshoz viszonyított helyzetét a megfelelő palettagombok segítségével Igazítsa(Igazítás). A fogadott gombok közül az első az ábrán látható. 15. Készítsen másolatot a fóliáról a gombbal a parancs kiválasztásával Duplikált réteg Rétegek, ennek eredményeként két egyforma réteget kapunk. Ezután válassza ki a nyilat a réteg másolatán, és forgassa el 180°-kal a helyi menü parancsának kiválasztásával Transform=>Forgatás Transformation=>Forgatás. Ugyanazt a gombot kapjuk, mint az ábrán. 16. Kérjük, vegye figyelembe, hogy sokkal kényelmesebb egy projekt minden azonos típusú gombját egy fájlban, különböző rétegeken tárolni, ami ebben az esetben látható.

Most el kell mentenie az egyes gombok optimalizált beállításait. Először az alsó réteget tegye láthatatlanná, ebben az esetben a felső réteg gombja megmarad. Válasszon csapatot Fájl=>Mentés webre(Fájl=>Mentés webre), állítsa be a gomb optimalizálási paramétereit, például a 2. ábrán látható módon. 17, kattintson a gombra Megment(Mentés), és adjon meg egy fájlnevet. Az eredményként elmentett gomb az ábrán látható. 18. Most tegyük láthatóvá az alsó réteget, tegyük láthatatlanná a felső réteget, és ugyanúgy mentsük el a második gombot, adjunk neki más nevet. Az eredmény az ábrán látható. 19.

Most már nincs más hátra, mint megbizonyosodni arról, hogy a gombok jól mutatnak-e a weblapon, és elhelyezni őket egy egyéni oldalon (20. ábra). Ennek eredményeként ebben a példában a Primer2.html fájlt és két grafikus képet kaptunk a képek mappában (mappában Primer2).

Kívánság szerint az optimalizálás során a gomb könnyen szeletté alakítható. Ebben az esetben a parancs kiválasztása után Fájl=>Mentés webre(Fájl => Mentés webre) és az optimalizálási beállításokat az eszközpaletta eszközből kell kiválasztani Szelet kiválasztása(Slice selection) gombot, és kattintson duplán a képre, amely automatikusan 1-es sorozatszámú szeletté válik (21. ábra). Ha ismét duplán kattint, megnyílik az ablak Szelet opciók(Slice Options), amelyben meg kell adnia egy hivatkozást, és szükség esetén módosítania kell a szelet nevét (22. ábra), majd mentenie kell 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.

Interaktív elemek

Az oldal feldobásának egyik módja az, ha olyan design elemeket vezetünk be, amelyek megváltoztatják az oldalukat megjelenés(vagy állapot) az egér viselkedésétől függően, vagy ritkábban bármilyen egyéb helyzet esetén: nagyítás, görgetés, betöltés, hibák stb.

Ezen elemek közül a leghíresebbek a rollover (az angol roll over to roll, roll over) elemek, amelyek az egér hatására megváltoztatják megjelenésüket. Az animált gombok a tipikus felborulás példái. Az átgörgetést gyakran használják más webhelynavigációs elemek létrehozásakor. Valójában 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ényeknek a következőket tekintjük: Normál normál állapot, az egérkurzornak az elem fölé helyezése és az egér bal gombjának lenyomása, amikor az egérmutatót 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 ez gyakrabban korlátozódik arra, hogy az elemet csak az első három vagy akár két eseménynél módosítsák.

Klasszikus borulások

Klasszikus értelemben a rollover egy GIF formátumú grafikus képsorozat és a hozzájuk 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 Illustratort nem arra tervezték, hogy a klasszikus értelemben vett átfordításokat közvetlenül hozza létre, de segíthet a kezdeti elemek kidolgozásában. Az ötlet ebben az esetben egy réteg létrehozása 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ő réteges kép egy PSD fájlba kerül exportálásra, megőrizve a rétegeket, amely alapján az Image Ready programban egy görgetés jön létre. Az Illustrator 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 eszközök, a vektorgrafikus átalakítás kényelmével együtt.

Próbáljunk meg egy olyan felirat formájában átverést létrehozni, 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 lekerekített, fekete téglalap formájú alakzatot (24. ábra), készítsen róla másolatot, és helyezze a képernyő szabad részére. Alakítsa át a téglalap első példányát rácsobjektummá, amelynek közepén egy kiemelés található (parancs Object=>Gradiens háló létrehozása Object=>Create Gradient Mesh), amely négy sort és tíz oszlopot ad meg (25. ábra). Aktiválja a téglalap második példányát, és állítson be hozzá egy színátmenetes kitöltést, hasonlóan az 1. ábrán láthatóhoz. 26. Fedje le a színátmenet objektumot a háló tetejére, csökkentse a színátmenet objektum átlátszatlanságát körülbelül 80%-ra, és a színátmenet objektum méretét körülbelül 1 pixelre, hogy a végén egy kidudorodást szimuláljon. Aztán a tárgyak fölé nyomtassa a feliratot. Eredeti formájában hagyjuk fehér szín, 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, ha az egérmutatót fölé viszi (Over state) és kékre. az egér gombjának lenyomásakor (Down állapot) .

Ügyeljen a palettára Rétegek ebben a szakaszban csak egyetlen rétege van. A paranccsal készítsen két másolatot erről a rétegről Duplikált réteg(Duplikált réteg) a paletta menüből Rétegek, 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ásodikban 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 a paranccsal megőrzött rétegekkel Fájl=>Exportálás(Fájl=>Exportálás) és az RGB színmodell kiválasztása (30. ábra). Nyissa meg a generált PSD-fájlt az ImageReady-ben (31. és 32. ábra). Hozzon létre kereteket rétegek alapján a parancs kiválasztásával Készítsen kereteket rétegekből(Keretek létrehozása rétegekből) a paletta menüből élénkség. Az Animációs ablak úgy fog kinézni, mint az 1. ábrán. 33. Ugyanakkor a palettán Borulások Kezdetben egyetlen Normál állapot jön létre.

Aztán az ablakban élénkség válassza ki a lebegtetett állapotnak megfelelő keretet a palettán Rétegek a réteg automatikusan kiválasztásra kerül 1. réteg másolata(34. ábra). Ugrás a palettára Borulásokés kattintson a gombra Hozzon létre átgörgetési állapotot(Átborítási állapot létrehozása) ábra. 35, ami miatt megjelenik az állam Állam felett a palettán Borulások(36. ábra). Ugyanígy hozza létre az állapotot Down State. Állapot aktiválása Normál a palettán Borulásokés törölje a palettáról élénkség minden képkocka, kivéve azt, amelyiknek meg kell egyeznie az állapottal Normál. Ennek eredményeként a palettán minden átgörgetési állapothoz élénkség csak egy keret lesz (37., 38. és 39. ábra).

Rizs. 38. A kép nézete, az Animáció ablak és a Rétegek és Átgörgetések palettája az Over State-hez

Ellenőrizze az eredményt a gombra kattintva Előnézet az alapértelmezett böngészőben(Böngésző előnézete) az eszköztáron, és lépjen a böngészőablakba (40. ábra). Ezt követően mentse a fájlt a paranccsal Fájl=>Optimalizált mentés(Fájl=>Mentés optimalizálással) és az opció megadása HTML és képek (*.html). Ennek eredményeként ebben a példában a Primer4.html fájlt és a képek mappában lévő grafikus képek sorozatát kaptuk meg.

Rizs. 40. Böngésző ablak Rollover elemmel

SVG rollovers

Az XML szabvány alapján megalkotott SVG (Scalable Vector Graphics Scalable Vector Graphics) formátum növekvő népszerűsége sokféle interaktív elem beszerzését is lehetővé teszi, különös tekintettel a rolloverekre, csak a gyakorlatban ez teljesen más formában valósul meg. út. Érdemes megjegyezni, hogy az interaktív SVG rolloverek létrehozása a klasszikustól eltérően, amikor a megfelelő HTML kód teljesen automatikusan generálódik, megköveteli a JavaScript nyelv ismeretét és az objektum-orientált programozás alapelveinek megértését.

Egy speciális palettát terveztek az SVG objektumokkal való együttműködésre. SVG interaktivitás, amely paranccsal könnyen megnyitható Window=>SVG interaktivitás(Window=>SVG interaktivitás) ábra. 41.

Tekintsük az átgörgetés létrehozásának ezt a változatát egy interaktív gomb példájával, amelyen a címke színe feketéről kékre változik, amikor az egeret fölé viszi, és visszaváltozik feketére, 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 a palettán Átláthatóság(Átlátszóság) ebben a példában a paraméter értéke Átlátszatlanság(Átlátszatlanság) 50%-ra van állítva. Készítsen másolatot a gombról, töltse ki sötétzölddel (43. ábra), majd alakítsa át hálóobjektummá a paranccsal Object=>Gradiens háló létrehozása(Object=>Create Gradient Mesh) négy sor és tíz oszlop megadásával és a listában Megjelenés(Nézet) egy opció kiválasztásával A központba(Közép felé) és az érték beállítása Kiemel(Kiemelés) 100-ra. Csökkentse a háló objektumréteg átlátszatlanságát körülbelül 40%-ra (44. ábra). Helyezze a háló objektumot a gradiens objektum tetejére, és a gomb úgy fog kinézni, mint az ábra. 45.

Rizs. 44. Egy gomb másolatának átalakítása rács objektummá

Egészítse ki a gombot a kívánt felirattal, és állítsa be a pozícióját a megfelelő palettagombok segítségével Igazítsa(Igazítás). Az eredményül kapott kép egy réteget fog tartalmazni három egymásra helyezett objektummal (46. ábra). Az ütemezett események szöveges objektumra hivatkoznak, ezért a kényelem kedvéért változtassa meg a nevét Szöveg duplán az objektumra kattintva és új név megadásával. Hasonlóképpen változtassa meg a réteg nevét 1-es rétegtől rétegig(47. ábra).

Az eseményfeldolgozás JavaScript-eljárások használatát foglalja magában, ezért csatolnia kell egy fájlt ezen eljárások leírásával. Az Events.js neve, és az Adobe Illustrator telepítésekor a Sample Files\Sample Art\SVG\SVG mappába kerül a lemezre. Az Events.js fájl felvételéhez használja a parancsot JavaScript fájlok SVG interaktivitás(48. ábra). Ezután meg kell nyomnia a gombot Hozzáadás(hozzáadás) és keresse meg kívánt fájlt a merevlemezen. Amikor a neve megjelenik a mezőben URL(49. ábra), kattintson a gombra Kész(Eljár szórakozni).

Rizs. 48. Válassza ki a JavaScript Files parancsot

Ezt követően meg kell határoznia az objektum egéreseményeire adott reakciót Szöveg. Válassza ki a Szöveg objektumot a mezőben esemény(Esemény) paletták SVG interaktivitás válasszon egy eseményt az egér felett elemColor(evt, "Szöveg", "#3333FF") ez azt jelenti, hogy amikor az egér az objektum felett van Szöveg színe kékre változik (50. ábra). Ahhoz, hogy a szöveg színe feketére változzon, miután az egér elhagyja az aktív zónát, létre kell hoznia még egy eseményt on mouseout válassza ki a mezőben esemény(Esemény) paletták SVG interaktivitás. Ezután a műveletsorba írja be a szöveget elemColor(evt, "Szöveg", "#000000") ez feketére tér vissza (51. ábra).

Rizs. 51. Az SVG interaktivitás paletta végső megjelenése a szöveg objektumhoz

Mentse a generált görgetést SVG-fájlként a paranccsal Fájl=>Mentés másként(Fájl=> Fájltípus formátum SVG, majd állítsa be az SVG-fájl mentési beállításait az ábrán látható módon. 52. Mentés után csak egyetlen, SVG kiterjesztésű fájlt kapunk, és nem kettőt, mint a klasszikus átgörgetésnél, ebben az esetben a Primer5.svg fájlt (Primer5 mappa) kaptuk meg. Ahhoz azonban, hogy az átgörgetés valóban működjön, a JavaScript-eljárások leírását tartalmazó Events.js fájlt is át kell másolni az SVG-fájlt tartalmazó mappába. Ezt követően ellenőrizheti az átgörgetés teljesítményét, és az eredmény az ábrán látható módon fog kinézni. 53.

SVG animáció

Az SVG formátum animáció közvetítésére is használható. Próbáljunk meg létrehozni egy egyszerű animációs elemet (jelen esetben a cégről szóló információ lesz), amely akkor jelenik meg a képernyőn, amikor az egeret a megfelelő grafikus objektum fölé viszi, és eltűnik, ha az egeret eltávolítjuk az interaktív elemről.

Készítsünk hozzávetőlegesen egy ilyen sorozatot a grafikus és szöveges objektumokból, ahogy 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 palettán Rétegekés beírjuk a kívánt nevet (55. ábra). Vegye figyelembe, hogy az ábrán kiemelve. 56 tétel Szöveg1, Szöveg2, Szöveg3és Path1 mindig látható lesz, a többi pedig csak akkor, ha az egérmutatót az objektum fölé viszi Szöveg1.

Rizs. 54. A kép eredeti nézete

A parancs használatával tartalmazza az Events.js fájlt a JavaScript-eljárások leírásával JavaScript fájlok(JavaScript fájlok) a palettáról SVG interaktivitás gomb megnyomásával Hozzáadás(Hozzáadás) válassza ki a kívánt fájlt a merevlemezen, és kattintson a gombra Kész(Eljár szórakozni).

Adja meg az egér eseményválaszát egy objektumhoz Szöveg1. Válassza ki az objektumot Szöveg, mezőben esemény(Esemény) paletták SVG interaktivitás válasszon egy eseményt az egér felettés az alábbi sorba írja be a szöveget elemShow(evt, "Szöveg4"); elemShow(evt, "Path2"). Ennek eredményeként, ha az egér az objektum felett van Szöveg1 tárgyak láthatóvá válnak Szöveg4és Path2. Kérjük, vegye figyelembe, hogy ha egy esemény bekövetkeztekor több műveletet kell végrehajtani, akkor ezeket a „;” jellel kell megadni. Ezután tegye ugyanezt az eseménynél on mouseout, írja be a hozzá tartozó szöveget, ami tárgyak elrejtését jelenti (57. ábra).

Mentse az eredményt SVG-fájlként a paranccsal Fájl=>Mentés másként(Fájl=>Mentés másként), a fájlnév megadásával, a mezőben történő kijelöléssel Fájltípus SVG formátumban, majd állítsa be az SVG fájl mentési beállításait az ábra szerint. 58. Mentés után a rendszer megkapja a Primer6.svg fájlt (Primer6 mappa). Ne felejtse el átmásolni az Events.js fájlt a fájlt tartalmazó mappába. Ha ezek után futsz coz adott fájlá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 tárgyak kezdeti megjelenése Szöveg 4 és Pálya 2 betöltéskor. Ennek a hiányosságnak a megszüntetéséhez jelölje ki egyszerre mindkét objektumot, és hozzon létre hozzájuk egy műveletet elemHide(evt, "Szöveg4"); elemHide(evt, "Path2") eseményen Feltöltés alatt(60. ábra). Mentse újra a fájlt, és győződjön meg arról, hogy az objektumok most vannak Szöveg4és Path2 csak akkor látható, ha az egeret az objektum fölé viszi Szöveg1.

GIF animáció

Bármely weboldal elképzelhetetlen webanimáció nélkül, beleértve az animált gifeket is. Elkészítésük egyik módja az Adobe ImageReady alkalmazás, amely többek között lehetővé teszi, hogy rétegekből animációkat készítsünk. Ugyanakkor maga a többrétegű kép is elkészíthető különböző alkalmazásokban, beleértve az Adobe Illustratort is.

Nagyon egyszerű animációt készíteni a paletta elemei alapján Szimbólumok(Szimbólumok) megnyitja a parancsot Ablak=>Szimbólumok(Window=>Symbols) vagy a paranccsal megnyitható szimbólumkönyvtárak valamelyikéből Window=>Szimbólumkönyvtárak(Window=>Szimbólumkönyvtárak).

Például próbáljuk meg bármilyen objektum-szimbólum méretét növelni, az objektum növelésének folyamatának kulcsfontosságú szakaszait külön rétegekre kell beállítani. Először egyszerűen helyezze el 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 palettán Rétegek egy réteg sok objektummal jön létre (62. ábra). Ha közvetlenül exportálja ezt a képet PSD formátumba, akkor ez nem fog működni, mivel csak egy réteg van, és természetesen, amikor megnyitja a PSD fájlt az ImageReadyben, 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 az, ha először kiválasztja a réteget 1. réteg a Rétegek palettán, és használja a parancsot Engedje el rétegre(Rétegenkénti kiadás). Az eredmény az lesz, hogy az objektumok mindegyikét a saját fóliájára helyezik, de mindegyik beágyazódik a rétegbe 1. réteg. Ezért ezután manuálisan kell húznia az összes beágyazott réteget a Rétegek paletta tetejére, hogy azok a réteg felett legyenek. 1. réteg, majd az üres réteget 1. réteg könnyen eltávolítható (63. ábra). Exportálja a képet PSD formátumba a paranccsal Fájl=>Exportálás(File=>Export) az ábrán látható beállításokkal. 64.

Töltse be a létrehozott PSD fájlt az ImageReady programba (65. és 66. ábra). Nyissa meg a paletta menüt élénkségKészítsen kereteket rétegekből(Keretek létrehozása rétegekből). Ennek eredményeként öt keret jön létre, amelyek mindegyike megfelel a rétegének és a paletta ablakának élénkségábrán látható módon fog kinézni. 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 optimalizált animációt a paranccsal Fájl=>Optimalizált mentés(Fájl=>Mentés optimalizálással). A kapott eredmény hasonlíthat az ábrához. 68.

Még kényelmesebb a funkciók használata Élő keverékek Illustrator szoftver. 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 keverje össze őket 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 található (70. ábra). Ezért először a keverési objektum minden elemét külön rétegre kell helyeznie. Ehhez az ablakban Rétegek jelölje ki a vonalat , aktiválja a paletta menüt a jobb felső sarokban lévő fekete nyílra kattintva, és válassza ki a parancsot Release to Layers Sequence(Alakítsa egymás után rétegekké) (71. ábra). Egy kulcsot lenyomva tartva Váltás, válassza ki a létrehozott rétegeket, és helyezze a réteg fölé 1. réteg, majd törölje magát a réteget 1. réteg, ennek eredményeként a kukába helyezve a rétegpaletta ugyanolyan formát ölt, mint az 1. ábrán. 72.

Rizs. 70. A Rétegek ablak kezdeti állapota

Exportálja a létrehozott fájlt PSD formátumba a paranccsal Fájl=>Exportálás(Fájl=>Exportálás). Nyissa meg a létrehozott PSD-fájlt az ImageReady-ben (73. ábra). Felhívjuk figyelmét, hogy az Illustrator programban létrehozott összes fólia megjelenik a rétegablakban (74. ábra), és az ablakban. élénkség csak egy keret lesz.

Aktiválja a paletta menüt élénkség, kattintson a fekete nyílra a paletta jobb felső sarkában, és válassza ki a parancsot Készítsen kereteket rétegekből(Keretek létrehozása rétegekből) végül ebben a példában öt keret jön létre, és a paletta ablak élénkségábra szerinti formát vesz fel. 75. Válassza ki az összes keretet a gomb nyomva tartásával Váltás, és állítson be megfelelő képkocka időtartamot ebben a példában, minden egyes képkocka esetében ugyanazt a 0,2 s időt veszik figyelembe. Ezután mentse a fájlt az optimalizálás paranccsal Fájl=>Optimalizált mentés(Fájl=>Mentés optimalizálással) beállítást a listában Fájltípus választási lehetőség Csak képek (*.gif). Az animáció a 2. ábrához fog hasonlítani. 76.

Sokkal érdekesebb nem a mozgás, hanem a kevert objektumok sima átméretezése. Használhatja például a már létrehozott keverési átmenetet. Ebben az esetben, miután a keverési átmenet minden eleméhez külön fóliát készített, helyezze az összes objektumot egymásra a gombok segítségével. Vízszintes igazítási központ(Igazítás a vízszintes középponthoz képest) és Függőleges igazítás középre(Függőleges középre igazítás) paletták Igazítsa(77. ábra).

Exportálja a létrehozott fájlt PSD formátumba ( Fájl=>Exportálás File=>Export) és nyissa meg a létrehozott PSD fájlt az ImageReady programban (78. ábra). Animációs keretek létrehozása rétegek alapján ( Készítsen kereteket rétegekből Hozzon létre kereteket rétegekből), és válassza ki a megfelelő időtartamot (79. ábra). Aztán, hogy az animáció hatásosabb legyen, másold át a meglévő képkockákat, de be fordított sorrendbenúgy, hogy a kép először növekszik, majd csökken, és így tovább egy körben (80. ábra). Ezután mentse el az optimalizáló fájlt ( Fájl=>Optimalizált mentés Fájl=>Mentés optimalizálással). Az eredményül kapott animáció a 2. á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ó

Sziasztok! Ma megpróbálom leírni a program funkcióit Adobe Illustrator, összehasonlítva az öblítés képességeivel. Ez nem a csontprogram globális elemzése lesz, hanem néhány érdekes chip leírása, amelyeket ebben a programban fedeztem fel. Az információkat darabonként gyűjtöttem, miközben tanulmányoztam, hogy mindezt egy bejegyzésbe foglalhassam. Azonnal be kell vallanom, hogy nem vagyok túltapasztalt illusztrátor felhasználó, csak az elmúlt fél évben használom rajzban (előtte mindent flash-ben rajzoltam). Sokan panaszkodnak, hogy az illusztrátor összetett, nem mindig intuitív. Bizonyos mértékig egyetértek azzal, hogy a flash után nehéz ez a program. De itt nem az a lényeg, hogy abbahagyjuk, hanem hogy tovább tanuljunk. Pár hét múlva pedig felvetődik a gondolat, hogy is bírtam korábban nélküle!

Szóval, mit szerettem az illusztrátorban, és mit találtam magamnak, ami nem villámgyors.
1. Kezdem a legegyszerűbbel, de ugyanakkor szükséges. Próbáld meg villogással körbe rendezni a tárgyakat. Korábban volt Deco eszköz, de eltávolították, láthatóan szükségtelennek tartották. Úgy döntöttünk, sokkal szórakoztatóbb lesz kézzel csinálni. Az Illustrator a következő funkcióval rendelkezik: Hatás - Torzítás és átalakítás - Átalakítás.

Minden gyors és egyszerű, az értékeket (objektumok közötti távolság, példányszám) magunk állítjuk be a beállításokban.

2. Cikcakk

Még egyszerűbb, de mégis hasznos dolog. Apróságnak tűnik, de flashben kézzel kell rajzolni, illusztrátorban ez másodpercek kérdése.

3. Tárgyak deformációja (Warp)

A Flashben nincs ilyen. Az alábbi példában csak 2 módot mutattam be az egyszerű formák deformálására (Effect - Warp - Arc / Fish). Valójában 15 van belőlük. legújabb verzió programokat.

4. A sarkok automatikus lekerekítése (Kerek sarkok)

Kézzel is elvégezhető: grafikus objektum egy sarokban kiválasztva (minden sarokban) megjelenik fehér pontés egy lekerekített vonaljel. Húzza az egeret, igazítsa ízlése szerint.

De ez csak a formákra vonatkozik, ceruzavonallal kicsit másképp - alkalmazza a kerekítő hatást ( Hatás - Stilizálás - Lekerekített sarkok). A kimeneten ugyanazt az eredményt kapjuk.

5. Érdesíteni

A hatást egyszerű alakzatokra alkalmazzák ( Hatás-torzítás és átalakítás-nagyítás). Ennek eredményeként valami alacsony poliszintű 3D modellekre emlékeztetőt kapunk. Szerintem klassz :) És ami a legfontosabb - nagyon egyszerű.

6 Pucker&Bloat(Húzza be és fújja fel)
Példa az alábbi képen:

7. Űrlapkiterjesztés (Eltolási útvonal)

A vakuban van egy Expand Fill (kitöltés kiterjesztése) funkció, ceruzavonalakkal egyáltalán nem működik, ellentétben az illusztrátorral.

8. Ecsetek (Art Brush, Pattern Brush, Scatter Brush)
Példákért lásd az alábbi képet:

9. Texture Brush (Texture Brush)

Az Illusztrátorban sok textúra ecset is található, amelyekről írtam, és hogyan jelentek meg új verzió flash - . Észrevették, hogy az Adobe Animate programban az ecsetek használata rettenetesen lassú. Ez az:(

10. Nem vagyok benne biztos, hogy ez trükk, de egy vicces nevű ecsettel szeretnék foglalkozni foltKefe. Az eszköztáron található, nagyon szép ecset. Van rajta egy csomó beállítás, nekem jobban tetszik, mint máskor. Nehéz szavakkal elmagyarázni előnyeit, jobb, ha egyszer kipróbálod.

10. Felosztás rácsra

Egy másik hasznos funkció a Split to Grid (Object-Path-Split to Grid) funkció, amellyel az űrlapot egyenlő szegmensekre vághatja. Mire emlékeztet ez minket? Így van - ablakok egy sokemeletes épületben. Ami engem illet, remek dolog például városi tájak rajzolásához;)

Másik hasznos eszköz, illusztrátorban bemutatva, valószínűleg az első megjelenése óta. Ezzel például fa textúrákat hozhat létre:

12. Mozgatás (jobbra - Átalakítás - Mozgatás)

Eltolja az objektumot egy adott távolsággal. Kívánt esetben azonnal létrehozhat egy másolatot, amely vízszintesen / függőlegesen a kiválasztott objektumtól a kívánt távolságra kerül. Többben korai változat A flash egy plugin volt, amely végrehajtotta ezt a funkciót. Sajnos nem emlékszem a nevére.

Nagyon kényelmes zökkenőmentes minták létrehozása az Illusztrátorban ( Object-Pattern-Make). Emlékszem, milyen eszeveszetten jeleskedtem flashben a létrehozásával. A CC 2015 illusztrátor verziójában minden automatizált, egy csomó beállítás segít létrehozni egy mintát több tucat változatban, mindössze néhány grafikus elemmel. A program korábbi verzióiban mindent manuálisan kellett elvégezni, mint eddig a flashben.

(Megjegyzés - a minta vektorral szerkeszthető objektummá tehető a parse funkcióval ( Objektum kibontása).

14. Tárgymozaik (mozaik)

Teremtés szín paletta a meglévő kép alapján. Ezután importálja a kívánt képet az illusztrációba (Megnyitás). Objektum – Objektummozaik létrehozása. A beállításokban megadjuk az osztási gyakoriságot magasságban és szélességben.

És a kimeneten ezt kapjuk:

15. Keverés (keverés)

Színátmenetek létrehozására szolgál. Lépésről lépésre létrehozhat átmeneteket, mint például a képen. Nem mondhatom, hogy gyakran használom, de valakinek jól jöhet. Számomra úgy tűnik, hogy egyszerű háttérképek készítésére használható.

Az eszköz objektumok klónozására is használható. Elhelyezünk két objektumot egymástól távol, és alkalmazzuk a Keverési beállításokat, kiválasztjuk a lépések számát (a klónozott objektumok számát).

16. Build Shape Tool. Nagyon praktikus dolog a primitívekkel való munkához. Egy pillanat alatt, ahogy nekem tűnt, kevésbé kényelmes.

Tartsa lenyomva az Alt billentyűt, és kattintson a kiválasztott szegmensekre - törölje a szegmenseket. Ha egyszerűen húzzuk az egeret több kijelölt területre - kapcsolatok.

Kiegészítés - olyan eszköz, amely segít automatikusan vágni, csatlakoztatni stb. kiválasztott formák. Ami engem illet, nem túl kényelmes, gyakrabban használom Építalakeszköz.

(rajztáblák)

18.Egyéni eszközpanel

Lehetőség saját eszköztár létrehozására, eldobva a feleslegeseket, és csak azokat választhatja ki, amelyeket használ.

Vakuban, rajztáblákon, nevezetesen jeleneteken ( 1,2,3 jelenet...) külön találhatók, és váltani kell közöttük (Shift + F2). Az Illusztrátorban mindegyik a szeme elé helyezhető. Kényelmes, ha ugyanabból a rajzból több változatot készít, így minden lehetőség a szeme előtt van összehasonlítás céljából.

19. Izometrikus grafikai stílusokkal

És az utolsó dolog az izometria létrehozása 1 kattintás (vagy inkább 3 kattintás, mert 3 oldalunk van;) használata nélkül grafikus stílusok segítségével ( Grafikai stílusok). Hogy ez hogyan történik, azt legközelebb megírom.

Az illusztrátor közös a flash-ben, hogy egy objektumot szimbólummá (szimbólummá) menthet, és ez a szimbólum probléma nélkül átvihető flash-re is (.ai fájl megnyitása flash-ben, Importálás – Importálás a színpadra).
Az illusztrátorban a szimbólum ugyanazokkal a tulajdonságokkal rendelkezik, mint a flashben.
És a végén leírom, mi az, ami az Illusztrátorban szerintem rosszabb, mint a flash. Igen, igen, és van. És ez a kitöltő eszköz ( festékes vödör). Hiába próbálom illaban megszokni, flashben kényelmesebb.
Ha a jegyzeteim hasznosak lettek számodra, vagy ha szeretnél valamit saját magad hozzáfűzni - üdv a megjegyzésekben! Sok szerencsét mindenkinek;)

Az Adobe Illustratorban az átlátszó GIF a következőképpen történik. Válassza a Fájl menü Mentés webre és eszközökre menüpontját (Alt+Ctrl+Shift+S). A megnyíló ablakban az Optimalizált fájlformátum mezőben először a fülre kell lépnie képméret(képméret). A helyzet az, hogy alapértelmezés szerint a teljes oldal bekerül az optimalizálási ablakba, és erre általában nincs szükség. Ezért a Képméret lapon törölje a jelölőnégyzet bejelölését Klip a rajztáblára(Vágás, hogy illeszkedjen az oldalhoz), és kattintson az Alkalmaz gombra.

Ezután a formátumválasztó listában válassza ki a GIF-et, é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 fülön színes táblázat(Színdiagram) és színes négyzetekként jelennek meg. Válasszon ki egy eszközt az ablak bal oldalán található eszköztárról szemcseppentő(pipetta).

A színeket kétféleképpen lehet meghatározni. A legegyszerűbb, ha egy cseppentővel közvetlenül a képen adjuk meg a színt - 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 melyik színnek kell átlátszónak lennie, akkor a megfelelő színes mezőre kattintva közvetlenül kiválaszthatja a színtáblázatban. És az első és a második esetben, ha több színt kell kiválasztania, 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 az ikonra Leképezi a kiválasztott színeket átlátszóra(Adja hozzá a kiválasztott színeket az átlátszósághoz). Az ábrán 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. A legördülő menü felelős érte. Adja meg a Transparency Dither algoritmust, oroszul - Átlátszóság szimulációs algoritmus (ábra lent). Négy lehetőség közül választhat: No Transparency Dither – nincs algoritmus, Diffusion Transparency Dither – diffúz algoritmus, Pattern Transparency Dither – minta alapú algoritmus és Noise Transparency Dither – zaj alapú algoritmus. Diffúz algoritmus módban a csúszka aktívvá válik Összeg(Mennyiség), amely lehetővé teszi 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 a lehetőséget, és mindig hagyom az alapértelmezett - No Transparency Dither -t.

Nyomja meg a Mentés gombot - 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 vonatkozik.

Most bonyolítsuk egy kicsit a feladatot – készítsünk animált Flash bannert. Természetesen ebben az esetben nem kell teljes értékű Flash-animációról beszélni - erre vannak speciális csomagok. De az Illustrator segítségével egyszerű, amatőr videót is készíthet.

Az Adobe Illustratorban nincsenek speciális eszközök és interfészeszközök, például idővonal, amelyek az animációs fejlesztő programokra jellemzőek. De van egy finomság - a rétegek keretként használhatók.

Hozzon létre egy szalaghirdetést, amely csak szöveget tartalmaz.

1. Csoportosítsa a szimbólumokat a paranccsal Objektum › Csoport(Objektum › Csoport).
2. A következő feladat a kontúrobjektumok elkészítése font karakterekből, különben a rétegek helyes kialakítása nem működik. Ehhez válasszon ki egy csoportot, majd válassza ki Írja be: › Körvonalak létrehozása(Betűtípus › Trace).
3. Ezután nyissa meg a paletta menüt Rétegek(Rétegek) a palettán lévő nyíl formájában lévő gombra kattintva (8.11. ábra).

Rizs. 8.11. Réteg paletta menü

Érdekel bennünket a menü parancsa Feladás rétegre (sorozat)(Konvertálás rétegekké (szekvenciálisan)), amely minden egyes objektumot új fóliává alakít át. Felhívjuk figyelmét, hogy a parancs alkalmazásakor a csoportot ki kell választani csoport, nem egy réteg 1. réteg.

Hogy nézzen ki a paletta Rétegek(Rétegek) a végrehajtás után Feladás rétegre (sorozat)ábrán látható (Konvertálás rétegekké (szekvenciális)). 8.12.

Rizs. 8.12. A Rétegek paletta rétegre való kiadás után (szekvencia)

Ezzel az előkészítés befejeződött, használatával megtakaríthat Mentés webre(Mentés webhez) SWF-re. SWF a Flash technológiákon alapuló fő grafikai formátum. Helyesebb lenne azt mondani, hogy ez a Flash formátum (8.13. ábra).

Valószínűleg ma már minden felhasználó többé-kevésbé ismeri a Flash-t. Jelenleg ez a legelterjedtebb animációs formátum az interneten, és a multimédiás weboldalak túlnyomó többségének elkészítésére használják.

Természetesen a Flash képességeinek még a tizede sincs az Adobe Illustratorban implementálva, mert a program nem erre készült. Ebben azonban akár statikus képet, akár egyszerű animációt készíthet.

Rizs. 8.13. Optimalizálási beállítások az SWF formátumhoz

A következő beállítások vannak.

• Csak olvasható(Csak olvasni). Ha bejelöli a jelölőnégyzetet, akkor a fájl úgy lesz megírva, hogy már nem nyitható meg szerkesztésre semmilyen programban. Ez egyrészt csökkenti a fájlok méretét, másrészt védi a szerzői jogait.
• 1. feliratú beállítás. A mentés típusát - kép vagy animáció - meghatározó paraméter.
• Ha a lehetőséget választja AI-fájlból SWF-fájlba(Az Illustrator fájl be SWF fájl), a kép statikus képként lesz elmentve, pontosan ugyanúgy, mint amit a képernyőn lát, amikor az Illustratorban dolgozik.
• Rétegek az SWF-keretekhez(Rétegek SWF-keretekre) lehetővé teszi a meglévő rétegek animálását, amelyek keretként jelennek meg. Ezt a lehetőséget kell választanunk.
• Görbe minősége(Görbék minősége). Az eredeti kép görbefájlját ismétlő görbék pontossága. Ennek a beállításnak a csökkentése jelentősen csökkenti a minőséget, különösen az apró részletek területén, de csökkenti a fájlméretet. Esetünkben az optimális érték "7".
• filmkocka szám(Frame késleltetés). Képkockasebesség és ennek eredményeként az animáció sebessége. A megfelelő hatás érdekében állítson be másodpercenként legfeljebb 4 képkockát.
• hurok(Ismétlés). Játssz animációt többször. Alkalmas olyan animációkhoz, ahol fontos az ismétlődő ciklus. A banner ehhez a típushoz tartozik.