Webes grafika optimalizálás
Grafikus információk sokkal lassabb, mint a szöveg, és a képek betöltési ideje arányos a grafikus fájlok méretével. Ezért gyors betöltés A weboldalakhoz kis méretű grafikus képeket kell beágyazni, amit azok optimalizálásával érnek 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. 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ási eredményt é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ájl(Fájl). A program a négy előnézeti mód egyikének használatát kínálja, de kettő a legjobb az optimalizálás minőségének értékeléséhez:
- 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 megtekintési terület négy ablakra van osztva (2. ábra) a megjelenítéshez eredeti képés három optimalizált verzió: az első verzió a beállított optimalizálási értékek alapján jön létre, a másik kettő pedig 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 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.
Fontolgat konkrét példa képoptimalizálás. 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 exportálni a logót ide PSD formátum csapat 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 Kinézet(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 a bal oldalon felső sarok objektumot, kiemelve az ott található csomópontokat (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. 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, 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 a lefelé mutató nyíllal a következő oldalra ugrást jelent, a gomb pedig egy nyíllal az előzőre. 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(Szelet kijelölése), és kattintson duplán a képre, amely automatikusan szeletté válik sorozatszám 1 (21. ábra). Megismételt dupla kattintás az egér megnyit egy ablakot 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 kinézet(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 eredményül kapott réteges képet a rendszer egy PSD fájlba exportálja, megőrizve a rétegeket, amelyek alapján egy görgetés jön létre Képes program Kész. Az Illustrator használatának előnye, mint sok más esetben is, számos olyan érdekes funkcióban rejlik, amelyek más szoftvereszközökben nem érhetők el, kombinálva a vektorgrafikus átalakítás kényelmével.
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é nyomtasd a feliratot. Eredeti formájában legyen fehér színe, ami megfelel a Normál állapotnak (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ő rámutat (Over state), és kékre vált, ha megnyomja az egérgombot (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
Egyre népszerűbb SVG formátum Az XML szabvány alapján létrehozott skálázható vektorgrafika (Scalable Vector Graphics skálázható vektorgrafika) sokféle interaktív elemet is lehetővé tesz, különös tekintettel a rolloverekre, csak a gyakorlatban ez teljesen más módon valósul meg. Érdemes megjegyezni, hogy az interaktív SVG rolloverek létrehozása a klasszikusoktól eltérően, amikor a megfelelő HTML kód teljesen automatikusan generálódik, tudást igényel JavaScript nyelvés az objektum-orientált programozás alapelveinek megértése.
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.
Fontolgat ezt a lehetőségetáthúzás létrehozása egy interaktív gomb példáján, 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 területet.
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 Kinézet(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, ha 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 ezutá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. Ebben az esetben maga a többrétegű kép elkészíthető különböző alkalmazások, 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
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 ugyanaz a 0,2 s idő lesz. 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). 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ó 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 megtehető: egy grafikus objektumon egy sarokban (minden sarokban) kijelölve egy fehér pont és egy lekerekített vonaljel jelenik meg. 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 a flash - új verziójában. É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. A flash korábbi verziójában volt egy bővítmény, amely igen 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)
Hozzon létre egy színpalettát egy 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;)
Van egy vagy két ikonja, amelyet animációval szeretne életre kelteni. hol kezdenéd? Tegyük fel, hogy vannak SVG-fájlok, Illustrator CC és After Effects 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 az Adobe Illustrator CC programban. 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 szerzeményt. 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.
Ezen a ponton úgy tűnik, hogy minden készen áll, de van még egy dolog, amit meg kell tenni. 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.
Ma nem egészen a megszokott Adobe lecke Illusztrátor. Mert ezúttal nem statikus képet készítünk, hanem igazi animációt. Képzeld, kiderül, hogy az Adobe Illustrator segítségével rajzfilmeket is tudsz rajzolni :)
És ehhez semmi szükségünk. A rétegek kompetens 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 retro filmstílusú visszaszámláló animációt fogunk rajzolni. A kimenetnek egy flash filmnek kell lennie, ugyanazzal a visszaszámlálással.
Az első dolog, hogy megrajzolja az összes szükséges elemet a jövőbeli animációhoz. Ehhez külön dokumentumban készítettem két filmkocka 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 és feliratot.
Ha a rajzfilmünk minden része készen van, elkezdheti magának az animációnak a létrehozását. A kényelem érdekében ezt a legjobb egy új dokumentumban megtenni. Ebben az esetben a rétegek az animációs keretek szerepét töltik be. A legelső rétegben pedig csak a film képkockáját kell másolni. Helyezze a munkaterület közepére.
Most hozzon létre egy második réteget, és másolja bele a filmkockát, amelyben a széleken lévő lyukak eltolással készülnek. Azt is középre kell helyezni.
Ebből a két rétegből már egy mozgófilm animációja is beszerezhető. De később sokkal több 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éteget kell felhalmoznunk filmkockákkal, 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 túl kényelmes a munkához. Ezért néhány réteget kikapcsolhat a réteg nevétől balra található szem ikonra kattintva. 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ó a jövőbeli animációnk egy bizonyos képkockájában. És most, hogy enyhén megrázzuk a film mozgását, egy kicsit be kell mozgatnunk a kapott képkockákat különböző oldalak. Ehhez csak azt a réteget kapcsolja be, amellyel éppen dolgozni fog, majd tolja el a keretet néhány képponttal bármely irányba.
Ha végigjárta az összes réteget, é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észek dokumentumából, és helyezze a filmkocka tetején lévő első rétegre.
Ha eltávolítja a kijelölést a körből, akkor az egyetlen egésznek fog kinézni. Pontosan erre van szükségünk.
De mivel külön szektorokból áll, ezek színének megváltoztatásával nagyon gyorsan és egyszerűen lehet animációt készíteni. 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 mozgás közben remeg, ezért nem szükséges a kört pontosan a képkocka közepére helyezni. Helyezze a szemre.
Hasonlóképpen minden következő rétegre át kell másolni a kört, miközben világosabb színnel egy szektorral többet kell festeni, mint az előző alkalommal. Ez a 12 réteg együtt a film mozgásának animációját alkotja egy kitöltő körrel.
Ezután textúrát kell adnunk a rétegeinkhez. Kapcsolja be az első réteget, és másolja a textúrát a forrásfájlból a tartalék alkatrészekkel.
Ezután kapcsolja be a következő rétegeket, és másolja oda ugyanazt a textúrát. Ahhoz, hogy minden kereten másképp nézzen ki, csak forgassa el 90 fokkal. Ahogy azt már sejtette, mind a 12 képkockához textúrát kell adnunk.
Ha már eléggé 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. Marad a függőleges karcolások hozzáadása, és szinte minden. Ehhez ismét másolja le az eredeti karcolást, és tegye tetszőleges helyre több rétegben. Az én esetemben a karcolások mindössze két rétegben jelennek meg.
Most, hogy a fő ciklus a filmanimációval készen van, hátra van a számok hozzáadása. Mivel 3-tól 1-ig számolunk plusz a Go!!! szóval, 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 a rétegek következő példányához ér, ahol a kör ismét teljesen kitöltődik, a kettes számot kell megadnia. Ugyanígy másolja be az egyes számút a kívánt rétegekbe. És amikor a Go!!! címke utolsó rétegeihez ér, egyszerűen törölje a kört, mielőtt a címkét a kívánt rétegre másolja.
Az animációnál ennyi. A lényeg itt az, hogy ne keveredj össze. Adhatsz néhány kényelmes nevet a rétegeknek, de valahogy túl lusta voltam :) És mégis, ha végeztél, 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 az animáció ciklusáért. Neki köszönhetően a videó körben fog lejátszani. A Rétegsorrend: Alulról felfelé opció pedig az illusztrátor rétegeit alulról felfelé jeleníti meg a panelen. Pontosan így építettük fel az animációnkat.
Ennek eredményeként egy flash filmet kapunk az animációnkkal.
Most ezt látod egyszerű animáció az Adobe Illustratorban nem olyan nehéz elvégezni, mint amilyennek első pillantásra tűnik.
De hosszú videók vagy interaktív alkalmazások készítéséhez 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 hogy kiástam a munkahelyemen.
Az utóbbi időben a HTML5-öt és a CSS3-at is egyre gyakrabban használják animációk készítésére. Adott kód támogatott modern böngészőkés nem igényel flash lejátszót.
Roman aka dacascas főleg a blognak
Iratkozzon fel hírlevelünkre, hogy ne maradjon le semmi újdonságról:
Formátum Flash fájl(SWF) alapján vektoros grafikaés méretezhető, kompakt webes grafikákhoz készült. Mivel ez a fájlformátum vektorgrafikán alapul, az objektum bármilyen felbontásban megőrzi a képminőséget, és ideális animációs keretek létrehozásához. Az Illustratorban egyedi animációs kereteket hozhat létre rétegeken, majd a képrétegeket egyedi keretekként exportálhatja a webhelyen való használatra. Meg is határozhatod szimbólumok Illustrator fájlban, hogy csökkentse az animáció méretét. Exportáláskor minden szimbólum csak egyszer kerül meghatározásra az SWF-fájlban.
Exportálási parancs (SWF)
Biztosítja a legtöbb szabályozást az animáció és a bittömörítés felett.
Több szabályozást biztosít az SWF és bitmap formátumok keveréke felett egy töredezett elrendezésben. Ez a parancs kevesebb képbeállítást kínál, mint az Exportálás (SWF) parancs, de a legutóbb használt Export parancsbeállításokat használja (lásd ).
Tartsa szem előtt a következő irányelveket, amikor előkészít egy objektumot SWF-ként történő mentésre.
Használva Alkalmazások Eszköz Central, láthatja, hogyan fog kinézni az Illustrator-grafika az alkalmazásban Flash player különféle kézi eszközökön.
Illustrator grafika beszúrása
Az Illustratorban készített grafikák gyorsan, egyszerűen és egyszerűen másolhatók és beilleszthetők Flash alkalmazás.
Amikor Illustrator grafikát illeszt be egy Flash-alkalmazásba, a következő attribútumok megmaradnak.
A löket vastagsága
A színátmenetek definíciói
Szöveg (beleértve az OpenType betűtípusokat is)
Kapcsolódó képek
Keverési módok
Kontúrok és formák
Ezenkívül az Illustrator és a Flash a következő funkciókat támogatja a grafika beillesztésekor.
Ha egy Illustrator-grafikában teljes legfelső szintű réteget választ ki, és beilleszti a Flash-be, megőrzi a rétegeket és tulajdonságaikat (láthatóság és blokkolás).
Az RGB-n kívüli Illustrator színformátumokat (CMYK, szürkeárnyalatos és egyéni formátumok) a Flash konvertálja RGB formátum. RGB színek a szokásos módon helyezzük be.
Illustrator-grafikák importálásakor vagy beillesztésekor különféle lehetőségeket használhat bizonyos effektusok (például a szöveg által vetett árnyék) Flash-szűrőként való mentésére.
A Flash elmenti az Illustrator maszkjait.
SWF-fájlok exportálása az Illustratorból
Az Illustratorból exportált SWF-fájlok minősége és tömörítése ugyanolyan, mint a Flash-ből exportált SWF-fájlok.
Exportáláskor számos előre meghatározott stílus közül választhat az optimális kimenet érdekében, és megadhatja, hogyan használjon több rajztáblát, hogyan konvertálja a karaktereket, a rétegeket, a szöveget és a maszkokat. Dönthet például úgy, hogy az Illustrator-szimbólumokat filmként vagy grafikaként exportálja, és SWF-szimbólumokat hozhat létre az Illustrator-rétegekből.
Illustrator fájlok importálása Flash alkalmazásba
Ha teljes elrendezést szeretne létrehozni az Illustratorban, majd egy lépésben importálni a Flash-be, mentheti a grafikát Illustrator natív (AI) formátumban, és nagy pontossággal importálhatja azt a Flash-be a Fájl > Importálás a munkaterületre parancsok segítségével. terület" vagy " Fájl" > "Importálás a könyvtárba".
Ha az Illustrator fájl több rajztáblát tartalmaz, válassza ki az importálni kívánt rajztáblát a Flash importálás párbeszédpanelen, és adja meg a beállításokat a rajztáblán lévő minden egyes réteghez. A kiválasztott rajztábla összes objektuma importálásra kerül Flash program egyetlen rétegként. Amikor egy másik rajztáblát importál ugyanabból az AI-fájlból, az objektumok az adott rajztábláról új rétegként importálódnak a Flash-be.
Amikor AI-, EPS- vagy PDF-fájlként importálja az Illustrator-grafikát, a Flash megőrzi ugyanazokat az attribútumokat, mint a beillesztéskor. grafikai objektumok Illusztrátor. Továbbá, ha az importált Illustrator-fájl fóliákat tartalmaz, az alábbi módszerek egyikével importálhatja azokat.
Konvertálja az Illustrator-rétegeket Flash-rétegekké.
Konvertálja az Illustrator rétegeit Flash-keretekre.
Konvertálja az összes Illustrator-réteget egy Flash-réteggé.