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 méretükkel. grafikus fájlok. 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 az átalakítást értjük, amely biztosítja a minimális fájlméretet, miközben fenntartja a szükségeset ez az eset képminőség, 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 képrészletek tömörítési beállításainak optimalizálásával érnek el.

Az Illustrator beépített képoptimalizáló eszközökkel rendelkezik, amelyek gyors és hatékony optimalizálási folyamatot biztosítanak számos előnézeti módszerrel. 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 a Mentés webre (Save for Web) ablakban történik, amit a Fájl (Fájl) menü azonos nevű parancsa okoz. 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-Up (két lehetőség) az eredeti és az optimalizált kép egyidejű megtekintése a megadott beállításoknak megfelelően (1. ábra);
• 4-Up (négy lehetőség) Ebben a módban a nézetablak négy ablakra van osztva (2. ábra) az eredeti kép és az optimalizált három változatának megjelenítéséhez: az első verzió a beállított optimalizálási értékek alapján jön létre, és a másik kettő opció az aktuális optimalizálási beállításokhoz.

Mindkét mód jelentősen megtakarítja a keresési időt. a legjobb lehetőség optimalizálás, mivel szükségtelenné teszik a képek mentését különböző beállításokat optimalizálás és azok utólagos vizuális összehasonlítás. Ezen túlmenően nem csak az optimalizált kép minősége, hanem annak mérete és betöltési ideje is értékelhető különböző lehetőségeket kapcsolatokat. Ö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 nemcsak 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ínes grafikákat, például színátmenetes kitöltéseket használnak a JPG formátumban. Átlátszó területekkel rendelkező, színes képek esetén alkalmazza PNG formátum, amely lehetővé teszi indexelt és színes képek mentését is, míg a PNG-8-ban a maximális színszám egy optimalizált képhez 256, a PNG-24-ben pedig egy kép több millió színt tartalmazhat, ezért hasonló JPEG formátumba. 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 PSD formátumba exportálni az emblémát a File=>Export paranccsal (File => Export) a létrehozott kép mérete 143 KB lesz. Nyissa meg a kapott PSD-fájlt, és használja a File=>Save for Web (Fájl=>Mentés webre) parancsot. 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, a Selective-t. Ami a simítást illeti, akkor, tekintettel a gradiens kitöltésére, jobb, ha olyan algoritmust választunk, amely zajkeltő Zajjal rendelkezik (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 ebben a példában az emblem.html és emblem.gif fájlokat a Primer1 mappában kaptuk meg.

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á az Object => Create Gradient Mesh (Object => Create a gradient mesh) paranccsal, négy sort és négyet megadva. oszlopokat, és a listában a Megjelenés (Nézet) kiválasztási lehetőséget a Középre emelés (Megvilágítás) 60 értéknek felel meg (10. ábra). Válassza ki a Közvetlen kijelölés eszközt, és kattintson az objektum bal felső sarkában az ott található rögzítési pontok kiválasztásával (11. ábra). Módosítsa a megfelelő cella színét fehérre, ha kiválasztja azt a Színtár palettán (12. ábra).

Vegyük az Ellipszis (Ellipszis) eszközt, állítsuk az egérjelölőt az előtte létrehozott kör közepére, és az Alt és Shift billentyűket nyomva tartva feszítsük ki az új kört a régi fölé úgy, hogy az 1-2 képponttal nagyobb legyen, mint a minden oldalról régi. Készítsen belőle 1-2 pixel széles fekete keretet ( Stroke ), és töltse fel radiális színátmenettel a pirostól a fehérig (13. ábra). Húzza a létrehozott vektorobjektumot 1-2 pixel jobbra és lefelé, majd a kijelölés eltávolítása nélkül kattintson rá jobb gombbal, és helyi menü válassza az Arrange=>Send To Back parancsot. 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 ürességeként vegyünk egy szabályos háromszöget, amelyet a Polygon eszközzel rajzoltak (Polygon), feketével átfestve, és a nagyobb hatás érdekében hálós tárgynak is tervezték. Vigyük a nyilat a gombra, és állítsuk be az összes objektum egymáshoz viszonyított helyzetét az Igazítás paletta megfelelő gombjaival (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 Duplicate Layer Layers parancs kiválasztásával, ennek eredményeként két egyforma fóliát kapunk. Ezután válassza ki a nyilat a fólia másolatán, és forgassa el 180°-kal a Transform=>Rotate Transformation=>Rotate parancs kiválasztásával a helyi menüből. Ugyanazt a gombot kapjuk, mint az ábrán. 16. Kérjük, vegye figyelembe, hogy sokkal kényelmesebb 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álassza ki a Fájl=>Mentés webre (File=>Save for Web) parancsot, állítsa be a gomb optimalizálási paramétereit, például az ábra szerint. 17, kattintson a Mentés gombra, és írjon be 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 (a Primer2 mappában).

Kívánság szerint az optimalizálás során a gomb könnyen szeletté alakítható. Ebben az esetben a Fájl => Mentés webre (File => Save for Web) parancs kiválasztása és az optimalizálási paraméterek beállítása után válassza ki az eszközpalettáról a Szelet kijelölés eszközt és kattintson duplán a képre, amely automatikusan 1-es sorszámú szelet (21. ábra). Újbóli duplán kattintva megnyílik a Szelet beállításai ablak, amelyben meg kell adnia egy hivatkozást, és opcionálisan módosítania kell a szelet nevét (22. ábra), majd 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 í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. A téglalap első példányát alakítsa át hálóobjektummá, középen kiemeléssel (Object=>Create Gradient Mesh Object=>Create Gradient Mesh parancs), adjon meg négy sort és tíz oszlopot (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 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 Layers palettára, ebben a szakaszban csak egyetlen réteg van benne. Készítsen két másolatot erről a rétegről a Layers paletta menü Duplicate Layer parancsával, három réteg lesz a palettán (28. ábra). Ezután a réteg első példányán változtassa meg a felirat színét zöldre, a másodikban pedig kékre (29. ábra). Ennek eredményeként megkapjuk a boruláshoz szükséges üres felületet.

Export cos adott kép a Fájl=>Exportálás (Fájl=>Exportálás) paranccsal és kiválasztva a rétegeket megőrzött PSD formátumba színes modell RGB (30. ábra). Nyissa meg a létrehozott PSD-fájlt az ImageReady-ben (31. és 32. ábra). Hozzon létre kereteket rétegek alapján az Animáció paletta menüjében a Keretek létrehozása rétegekből (Keretek létrehozása rétegekből) parancs kiválasztásával. Az Animációs ablak úgy fog kinézni, mint az 1. ábrán. 33. Ez kezdetben egyetlen Normál állapotot hoz létre a Rollovers palettán.

Ezután az Animáció ablakban válasszuk ki a lebegtetett állapotnak megfelelő keretet, és a Layers palettán automatikusan a Layer 1 Copy réteg kerül kiválasztásra (34. ábra). Lépjen a Rollovers palettára, és kattintson a Create Rollover State (Görgetési állapot létrehozása) gombra. ábra. 35, ami miatt az Over State állapot megjelenik a Rollovers palettán (36. ábra). Hasonló módon hozzon létre egy Down állapotot. Aktiválja a Normál állapotot a Rollovers palettán, és törölje az összes képkockát az Animáció palettáról, kivéve azt, amelyiknek meg kell felelnie a Normál állapotnak. Ennek eredményeként az Animáció palettán az átgörgetés minden egyes állapotához csak egy képkocka 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 úgy, hogy az eszköztáron kattintson az Előnézet gombra az alapértelmezett böngészőben (Előnézet a böngészőben), és lépjen a böngészőablakba (40. ábra). Ezután mentse el a fájlt a Fájl=>Optimalizált mentése (Fájl=>Mentés optimalizálással) paranccsal, és adja meg a HTML és képek (*.html) opciót. Ennek eredményeként ebben a példában a Primer4.html fá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 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.

Az SVG objektumokkal való munkavégzéshez egy speciális palettát terveztek, az SVG Interactivity, amely könnyen megnyitható a Window => SVG Interactivity (Window => SVG interactivity) paranccsal. á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 az Átlátszóság (Transparency) palettán, ebben a példában az Opacity (Opacity) paraméter értéke 50%. Készítsen másolatot a gombról, töltse ki sötétzölddel (43. ábra), majd alakítsa át hálóobjektummá az Object => Create Gradient Mesh (Object => Create Gradient Mesh) paranccsal, négy sort és tíz oszlopot megadva. , majd a Megjelenés listában (Nézet) a Középre (Középre) opció kiválasztásával és a Kiemelés (Kiemelés) értékének 100-ra állításával. Csökkentse a hálóobjektum réteg átlátszatlanságát körülbelül 40%-kal (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. Gombmásolat átalakítása rács objektummá

Egészítse ki a gombot a kívánt felirattal, és állítsa be a helyzetét az Align paletta megfelelő gombjaival (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 egy szöveges objektumra hivatkoznak, ezért a kényelem kedvéért módosítsa a nevét Szövegre úgy, hogy duplán kattint az objektumra, és ír be egy új nevet. Hasonlóképpen változtassa meg a réteg nevét Layer 1-ről Layer-re (47. ábra).

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

Rizs. 48. A JavaScript Files parancs kiválasztása

Ezt követően meg kell határoznia a Text objektum egéreseményeire adott reakciót. Válassza ki a Szöveg objektumot, az SVG Interaktivitás paletta Event mezőjében válassza ki az eseményt az egér felett elemColor(evt, "Text", "#3333FF") ez azt jelenti, hogy amikor az egeret a Text objektum fölé viszi, a színe a következőre változik. kék (50. ábra). Ahhoz, hogy a szöveg színe feketére változzon, miután az egér elhagyja az aktív területet, létre kell hoznia egy másik onmouseout eseményt, és válassza ki azt az SVG Interaktivitás paletta Esemény mezőjében. Ezután írja be az elemColor(evt, "Szöveg", "#000000") szöveget a műveletsorba - ez feketét ad vissza (51. ábra).

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

Mentse el a létrehozott görgetést SVG fájlként a Fájl=>Mentés másként (Fájl=>Fájltípus formátum SVG ) paranccsal, majd állítsa be az SVG fájl mentési beállításait az 52. ábrán látható módon. Mentés után csak egyetlen fájl SVG kiterjesztéssel lehet beszerezni, és nem kettőt, mint a klasszikus átgörgetésnél, ebben az esetben a Primer5.svg fájl (Primer5 mappa) érkezett. Ahhoz azonban, hogy az átgörgetés valóban működjön, ezen felül még szükséges másolja az Events.js fájlt az SVG fájlt tartalmazó mappába a JavaScript-eljárások leírásával. Ezt követően ellenőrizheti az átgörgetés működőképességét, az eredmény az 53. ábrán látható módon fog kinézni.

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 a Rétegek palettán egymás után kattintson a következő objektum nevére, és adja meg a kívánt nevet (55. ábra). Vegye figyelembe, hogy az ábrán kiemelve. 56 objektumok A Szöveg1, Szöveg2, Szöveg3 és 1. útvonal mindig látható lesz, a többi pedig csak akkor, ha az egérmutatót a Szöveg1 objektum fölé viszi.

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

Illessze be az Events.js fájlt a JavaScript-eljárások leírásával. Ehhez használja az SVG Interactivity palettáról a JavaScript Files parancsot, kattintson a Hozzáadás gombra, válassza ki a kívánt fájlt a merevlemezen, majd kattintson a Kész gombra.

Adjon meg egy egéresemény választ a Text1 objektumhoz. Válassza ki a Szöveg objektumot, az SVG Interaktivitás paletta Event mezőjében válassza ki az onmouseover eseményt, és az alábbi sorba írja be az elemShow(evt, "Text4") szöveget; elemShow(evt, "Path2") . Ennek eredményeként, ha az egeret a Text1 objektum fölé viszi, a Text4 és Path2 objektumok láthatóvá válnak. Kérjük, vegye figyelembe, hogy ha egy esemény bekövetkeztekor több műveletet kell végrehajtani, akkor ezeket a „;” jellel kell megadni. Ezután hajtsa végre ugyanezt a műveletet az onmouseout eseménynél, beírva a szöveget, ami objektumok elrejtését jelenti (57. ábra).

Mentse el az eredményt SVG fájlként a Fájl=>Mentés másként paranccsal (Fájl => Mentés másként), adja meg a fájl nevét, válassza ki az SVG formátumot a Fájltípus mezőben, majd állítsa be az SVG fájl mentési beállításait ennek megfelelően. ábrával. 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 lefuttatja a létrehozott fájlt, akkor a 2. ábrán látható eredményt fogja látni. 59. Szinte erre van szüksége. Az egyetlen dolog, ami nem szerepelt a terveinkben, az a Text 4 és Path 2 objektumok kezdeti megjelenése terhelés alatt. Ennek a hiányosságnak a megszüntetéséhez jelölje ki egyszerre mindkét objektumot, és hozzon létre egy műveletet nekik elemHide(evt, "Text4"); elemHide(evt, "Path2") a betöltési eseményen (60. ábra). Mentse újra a fájlt, és ellenőrizze, hogy a Text4 és Path2 objektumok most már csak akkor láthatók, ha az egérmutatót a Text1 objektum fölé viszi.

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 a Adobe Illustrator.

Nagyon egyszerű animációt készíteni a Szimbólumok paletta (Symbols) elemei alapján, amelyeket az Ablak => Szimbólumok paranccsal nyitnak meg (Window => Symbols), vagy az Ablak => segítségével megnyitható szimbólumkönyvtárak valamelyikéből. Szimbólumtárak parancs (Ablak => Szimbólumtá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, amint az az ábrán látható. 61. Ennek eredményeként a Layers palettán egy sok objektumot tartalmazó réteg 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. Ez sokféleképpen megtehető. A legegyszerűbb módja, ha először kiválasztja az 1. réteget a Rétegek palettán, és használja a Release to Layer (Release to Layer) parancsot. Az eredmény az lesz, hogy mindegyik objektumot a saját fóliájára helyezi át, de mindegyik az 1. rétegbe kerül beágyazásra. Ezért ezután manuálisan kell behúznia az összes beágyazott réteget felső rész paletták A rétegeket úgy, hogy azok az 1. réteg felett legyenek, majd az üressé vált fóliát egyszerűen törli az 1. réteget (63. ábra). Exportálja a képet PSD formátumba a Fájl=>Exportálás paranccsal (Fájl => Exportálás) 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 az Animáció, keretek készítése rétegekből paletta menüt. Ennek eredményeként öt képkocka jön létre, amelyek mindegyike a saját rétegének felel meg, és az Animáció paletta ablaka úgy fog kinézni, mint az 1. ábrán. 67.

Ezután állítsa be az egyes létrehozott képkockák időtartamát ebben az esetben, az összes képkocka időtartama 0,2 s. Ezután mentse el az animációt optimalizálással a Fájl => Optimalizált mentése (Fájl => Mentés optimalizálással) paranccsal. A kapott eredmény hasonlíthat az ábrához. 68.

Még kényelmesebb az ImageReadyben egyszerűen animációvá alakítható üres elemek beszerzése, ha az Illustrator Live Blends funkcióit használja. 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 a Layers ablakban jelöljük ki a sort, a jobb felső sarkában lévő fekete nyílra kattintva aktiváljuk a paletta menüt, majd válasszuk a Release to Layers Sequence parancsot (71. ábra). Tartsa lenyomva a Shift billentyűt, jelölje ki a létrehozott fóliákat és helyezze el őket az 1. réteg fölé, majd törölje magát a réteget. Layer 1 a kukába helyezve, ennek eredményeként a rétegpaletta a 1. ábrán látható alakban jelenik meg. 72.

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

Exportálja a létrehozott fájlt PSD formátumba a Fájl=>Exportálás (Fájl=>Exportálás) paranccsal. 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), az Animáció ablakban pedig eddig csak egy keret lesz.

Aktiválja az Animáció paletta menüt a paletta jobb felső sarkában lévő fekete nyílra kattintva, majd válassza ki a Képkockák készítése rétegekből parancsot ennek eredményeként, ebben a példában öt képkocka jön létre, és az Animáció paletta ablaka a következő alakú lesz. ábra szerint. 75. Jelölje ki az összes képkockát a Shift billentyű lenyomva tartásával, és állítsa be a megfelelő képkocka időtartamot ebben a példában, minden egyes képkocka esetében ugyanannyi 0,2 mp lesz. Ezután mentse el a fájlt optimalizálással a Fájl=>Optimalizált mentése paranccsal (Fájl => Mentés optimalizálással), állítsa a Fájltípus listát Csak Képek (*.gif) értékre. 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 minden egyes keverési átmeneti elemhez külön fóliát készített, helyezze az összes objektumot egymásra az Igazítás paletta Vízszintes igazítása középre és Függőleges igazítás középre gombjaival (77. ábra).

Exportálja a létrehozott fájlt PSD formátumba (File=>Export File=>Export), és nyissa meg a létrehozott PSD fájlt az ImageReady programban (78. ábra). Hozzon létre animációs képkockákat rétegek alapján (Make Frames From Layers Create frames from layers), és vá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 az optimalizált fájlt (Fájl=>Optimalizált fájl mentése=>Optimalizált fájl mentése). 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ó

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 Ctrl+I (Windows) vagy Command+I (Mac) billentyűkombinációt a Fájl importálása párbeszédpanel betöltéséhez, vagy menjünk a Fájl > Importálás > Fájl menüpontra… Ugyanitt jelöljük ki az általunk készített Illustrator CC fájlt, és kattintsunk az Importálás gombra. Egy kis párbeszédpanelnek kell megjelennie a kiválasztott fájl nevével. Válassza a Kompozíció lehetőséget az Importálási típus legördülő listából.

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 alakzatrétegekké kell alakítanunk. Mindegyiket ki kell jelölnünk a Ctrl+A/Command+A billentyűkombinációval, vagy manuálisan a Shift+Bal egérgombbal. Ezután kattintson a jobb gombbal a rétegre, és válassza a Create > Create Shapes from Vector Layer menüpontot.

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.

Használja a Ctrl+K/Command+K billentyűkombinációt vagy a 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ég és Időtartamot. Ehhez a projekthez 60 fps-t választottam, hogy az animáció zökkenőmentes legyen.

Tovább 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 parentingnek hívják.

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.

A Flash-fájlformátum (SWF) azon alapul 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.

Kontúrok és formák

• 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

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 RGB-vé alakítja. Az RGB színek beillesztése a szokásos módon történik.

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.

Illustrator grafikák importálásakor AI, EPS vagy PDF alkalmazás A Flash megőrzi ugyanazokat az attribútumokat, mint az Illustrator grafika beillesztésekor. 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 egyetlen Flash-réteggé.

Sziasztok! Ma megpróbálok egy leírást készíteni az Adobe Illustrator program képességeiről, összehasonlítva azt egy flash 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 egy Deco Tool, de azt eltávolították, láthatóan feleslegesnek 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 - alkalmazd a kerekítő hatást (Effect - Stilize - Round Corners). A kimeneten ugyanazt az eredményt kapjuk.

5. Érdesíteni

A hatást egyszerű alakzatokra alkalmazzák (Effect - Distort&Transform - Roughen). Ennek eredményeként valami alacsony poliszintű 3D modellekre emlékeztetőt kapunk. Szerintem klassz :) És ami a legfontosabb - nagyon egyszerű.

6. Pucker&Bloat (Pucker & Bloat)
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 szeretnék egy vicces nevű ecsettel foglalkozni, Blob Brush. 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. Többben korai változatai a programokat manuálisan kellett végrehajtani, mint eddig a flashben.

(Megjegyzés - a minta vektorral szerkeszthető objektummá tehető az expand funkcióval ( Object - Expand Appeaence ).

14. Tárgymozaik (mozaik)

Teremtés szín paletta a meglévő kép alapján. Importálja a kívánt képet a betegbe (Open), majd Object - Create Object Mosaic. 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 nekem nem túl kényelmes, gyakrabban használom a Build Shape Tool-t.

(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.

A vakuban a rajztáblák, nevezetesen a jelenetek (1., 2., 3. jelenet) külön vannak elhelyezve, é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ó - izometriák létrehozása 1 kattintás (vagy inkább 3 kattintás, mert három oldalunk van;) használata grafikus stílusok (Grafikus stílusok) használatával. Hogy ez hogyan történik, azt legközelebb megírom.

Ami az illusztrátorban közös a flashben, az az, hogy egy objektumot szimbólumba (szimbólumba) menthet, és ez a szimbólum probléma nélkül átvihető flash-re is (.ai fájl megnyitása flash-ben, az Import - Import to stage segítségével).
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. Ez pedig a kitöltő eszköz ( Paint Bucket ). 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 utóbbi időben nagyon népszerűvé váltak az SVG (Scalable Vector Graphics) grafikák különféle animációi webhelyeken és alkalmazásokban. Ez annak a ténynek köszönhető, hogy minden legújabb böngészők már támogatja ezt a formátumot. Itt találsz információkat az SVG böngésző támogatásáról.

Ez a cikk egy SVG-vektor animációjának legegyszerűbb példáját írja le a Lazy Line Painter könnyű Jquery beépülő modul használatával.

forrás

A feladat elvégzéséhez és teljes megértéséhez alapszintű HTML, CSS, Jquery ismeretek kívánatosak, de nem kötelező, ha csak SVG-t akarunk animálni) Kezdjük!

Tehát a lépéseket kell követnünk:

Hozza létre a megfelelő fájlstruktúrát

Töltse le és csatlakoztassa a bővítményt

Rajzoljon egy klassz vonalrajzot az Adobe Illustratorban

Alakítsa át képünket Lazy Line Converterre

Illessze be a kapott kódot a main.js fájlba

Adjon hozzá egy kis CSS-t ízlés szerint

1. Hozza létre a megfelelő fájlstruktúrát
Ebben segít nekünk az Initializr szolgáltatás, ahol az alábbi képen látható módon kell kiválasztani a paramétereket.

• Klasszikus H5BP (HTML5 Boiler Plate)
• Nincs sablon
• Csak HTML5 Shiv
• kicsinyített
• .IE osztályok
• Króm keret
• Ezután kattintson a Letöltés gombra!

2. Töltse le és csatlakoztassa a bővítményt

Mivel az inicializálás a legújabbal érkezik jquery könyvtár, az archívumból, amit a Lazy Line Painter projekttárból kell letöltenünk, mindössze 2 fájlt kell átvinni a projektünkbe. Az első a „jquery.lazylinepainter-1.1.min.js” (a beépülő modul verziója eltérhet), az eredményül kapott mappa gyökerében található. A második az example/js/vendor/raphael-min.js.

Ez a 2 fájl a js mappába kerül. És ezeket az index.html-ünkbe a main.js elé helyezzük, így:

3. Rajzoljon egy klassz körvonalképet az Adobe Illustratorban

Rajzolja meg a vázlatos képünket az Illustratorban (ez a legegyszerűbb módja a toll eszközzel)

Szükséges, hogy rajzunk kontúrjai ne zárjanak össze, mert hatásunkhoz kell egy kezdet és egy vég

Nem szabad kitölteni

A maximális fájlméret 1000×1000 px, 40 kb

Vágjuk át az Objektum > Rajztáblák > Illesztés a rajztáblákhoz határokhoz objektum határaira

Mentés SVG-ként (a normál mentési beállítások rendben vannak)

Használhatja például a mellékletben található ikonokat.

4. Alakítsa át képünket Lazy Line Converterre
Csak húzza az ikonját az alábbi mezőbe.
Az átalakítás után megjelenő kódban magában a kódban módosítható a körvonal vastagsága, színe és az animáció sebessége!

5. Illessze be a kapott kódot a main.js fájlba
Most csak illessze be a kapott kódot egy üres main.js fájlba
Lehetőségek:
strokeWidth — körvonalvastagság
strokeColor - körvonal színe
Az időtartam paraméter értékének módosításával (alapértelmezett 600) az egyes vektorok rajzolási sebességét is módosíthatja.

6. Adjon hozzá némi CSS-t ízlés szerint
Bekezdés eltávolítása az index.html fájlból

Helló Világ! Ez a HTML5 Boilerplate.

Ehelyett pedig beszúrunk egy blokkot, amelyben az animációnk fog játszódni

majd adjon hozzá némi CSS-t a main.css fájlhoz a szebb megjelenés érdekében:

Törzs (háttér:#F3B71C; ) #ikonok (pozíció: rögzített; felső:50%; bal:50%; margó: -300px 0 0 -400px; )

mentse az összes fájlt.
Most nyissa meg az index.html oldalt egy modern böngészőben, és élvezze a hatást.

P.S. helyi gépen futtatva az animáció indítása néhány másodperccel késhet.