Átlátszó GIF be Adobe Illustrator a következőképpen történik. Nyissa meg a Fájl menü Mentés webhez és eszközökhöz menüpontját (Alt+Ctrl+Shift+S). A megnyíló ablakban az Optimalizált fájlformátum mezőben először a Képméret fülre kell lépni. Az a helyzet, hogy alapértelmezés szerint a teljes oldal benne van az optimalizálási ablakban, és erre általában nincs szükség. Ezért a Képméret lapon törölje a Clip to Artboard jelölőnégyzet jelölését, és kattintson az Alkalmaz gombra.

Ezután válassza ki a GIF-et a formátumválasztó listából, és jelölje be az Átlátszóság jelölőnégyzetet.

Ezt követően határozzuk meg, hogy mely színek lesznek átlátszóak. A képen látható összes szín megtalálható a Színtáblázat lapon, és színes négyzetekként jelennek meg. Válassza ki a Pipetta eszközt az ablak bal oldalán található eszköztárról.

A színek meghatározásának két módja van. A legegyszerűbb, ha egy színt pipettával közvetlenül a képen adunk meg - ezután a szín egy sötét húzással kiemelésre kerül a színtáblázaton. Nos, ha pontosan tudja, hogy milyen színnek kell átlátszónak lennie, akkor a megfelelő színes négyzetre kattintva közvetlenül kiválaszthatja a színtáblázatban. Mind az első, mind a második esetben, ha több színt kell kiválasztani, akkor a Shift (vagy Ctrl) billentyű lenyomásával kell dolgoznia. A szín kiválasztása után utasítani kell a programot, hogy átlátszó legyen. Ehhez kattintson a Kijelölt színek átlátszóvá tétele ikonra. A képen ez a gomb be van karikázva, és a piros szín átlátszóra van állítva. Egy átlátszó terület jelenik meg a képen, és a színtáblázat négyzetének megjelenése megváltozik - egy része fehér háromszög lesz. A kiválasztott szín törléséhez ki kell jelölnie azt a Színtáblázatban, majd ismét kattintson a Kijelölt színek átlátszóvá tételére ikonra.

Néhány szó az átlátszóság beállításának módjáról. Ez felelős az Átlátszóság Dither Algorithm megadása legördülő menüjéért, oroszul - Átlátszóság szimulációs algoritmus (ábra lent). Négy lehetőség közül választhat: Nincs átlátszó dither, Diffúziós átlátszó dither, Pattern Transparency Dither és Noise Transparency Dither. Diffúz algoritmus módban az Amount csúszka aktívvá válik, lehetővé téve a diffúziós érték módosítását. Mit kell alkalmazni a gyakorlatban? Céltól és képtől függően. Nem használom ezt az opciót, és mindig az alapértelmezetten hagyom – No Transparency Dither.

Kattintson a Mentés gombra – az átlátszó GIF készen áll. A munkát az Adobe Illustrator CS4 (v.14) verziójában végezték, de minden művelet és billentyűparancs több szempontból is releváns korai változat CS3 (13. v.).

Az utóbbi időben nagyon népszerűvé váltak az SVG (Scalable Vector Graphics) grafikák különféle animációi webhelyeken és alkalmazásokban. Ez annak a ténynek köszönhető, hogy minden legújabb böngészők már támogatja ezt a formátumot. Itt talál információkat az SVG böngésző támogatásáról.

Ez a cikk tárgyalja legegyszerűbb példa SVG vektorok animálása a Lazy Line Painter könnyű Jquery beépülő modullal.

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!

És ezeket 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

Rajzolj egy klassz körvonalképet 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 lesz segítségünkre az Initializr szolgáltatás, ahol az alábbi képen látható módon kell paramétereket kiválasztanunk.

• Klasszikus H5BP (HTML5 Boiler Plate)
• Nincs sablon
• Csak HTML5 Shiv
• Minimalizált
• IE osztályok
• Chrome Frame
• Ezután kattintson a Letöltés gombra!

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

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

Ezt a 2 fájlt a js mappába helyezzük. És összekapcsoljuk őket az index.html-ünkkel a main.js előtt a következőképpen:

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

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 szükségünk van egy kezdetre és egy végre

Nem lehetnek kitöltések

Maximális fájlméret – 1000×1000 px, 40 kb

Vágjunk körbe az Objektum > Rajztáblák > Illesztés a rajztáblák határaihoz objektum határaihoz

Mentés SVG formátumban (a normál mentési beállítások megfelelőek)

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

4. Alakítsa át képünket Lazy Line Converterre
Csak húzza az ikonját az alábbi képen látható ablakba.
Magában a kódban módosítható a körvonal vastagsága, színe és az animáció sebessége, ami a konvertálás után jelenik meg!

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

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

Helló Világ! Ez a HTML5 Boilerplate.

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

majd hozzáadunk néhány CSS-t a main.css fájlhoz, hogy szebb legyen:

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

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

P.S. Ha helyi gépen fut, az animáció indítása néhány másodpercig késhet.

Adobe Illustrator és Utóhatás
Import és egyszerű animáció Hello. Ma az After Effects egyszerű animációit nézzük.

Források: Adobe Illustrator CC
Adobe After Effects CC

Kezdjük a tanulást rajzolással az Illustratorban.

Rajzoljunk
1) Rajzolj egy sárga téglalapot háttérnek

1. ábra - Téglalap

2) Rajzolj egy kört, és töltsd ki színátmenettel
Dolgozzunk egy kicsit a körön:
- töröljük az alsó pontot a kontúron, ívet kapunk;
- húzunk egy egyenest, lezárva az ív alját, félkört kapunk

2. ábra - 1) rajzoljon kört; 2) gradiens; 3) pont törlése

3) Rajzolj egy téglalapot, és készíts róla egy másolatot
- egy szürke téglalap;
- egy másik téglalap sötétszürke
4) Rajzoljon háromszöget egy csillagból úgy, hogy a sugarak számát 3-ra állítja

3. ábra - 1) egyenes fény; 2) egyenes sötét; 3) háromszög

5) Rajzolj egy macskát toll és egyszerű formák segítségével

4. ábra - 1) fej; 2) nyak; 3) test; 4) láb; 5) farok

És most a legfontosabb pillanat
Osszuk el a képeket rétegekre (ami animált lesz, az egy külön rétegen van), így:

5. ábra - minden kép (piros jelöli a fontos rétegeket)

Ennyi, most spóroljunk.
Nézzük a mentési beállításokat

6. ábra - Mentés

És most jön a következő szakasz. Zárja be az Adobe Illustrator programot, és nyissa meg az After Effects alkalmazást.

Importálás az After Effectsbe
Fájl - Importálás - Fájl - válassza ki a mentett Illustrator fájlunkat.
Válasszuk a rétegek Illustratorból történő importálását, ha felvételt teszünk be, akkor összevont rétegekkel kapunk képet, de erre nincs szükségünk.

7. ábra – Importálás összetételként

Ennyi, importált.
Most pedig lássuk, mi van. Kattintson duplán a kompozícióra, hogy megnyíljon, és lássuk a rétegeket (ha mindent jól csináltunk, több réteg lesz). Ezt értjük, lásd az ábrát

8. ábra - Nyitott kompozíció

És amiért ma itt vagyunk, az az animáció.

Animáció az After Effectsben
Állítsa be a forgáspontot a nyíl tetején a Pan Behind eszközzel ( gyorsbillentyű- Y). Csak veszünk egy pontot, és áthelyezzük a kívánt helyre. Ennek eredményeként így fog kinézni..

9. ábra - Pan eszköz és rétegek

Ennyi, most térjünk át az animáció rétegeire.
Szükségünk lesz egy Arrow és Head_cat rétegre.
Kezdjük a nyíllal.
Bővítsük a listát, keressük meg és kattintsunk az órára. Tehát az első pontot nulla másodpercre állítottuk. Az animáció összesen 2 másodpercig fog tartani.
Tehát ezeket a beállításokat kell elvégezned (összesen 3 pontot adunk):

Második	0	1	2
	+66	- 70	+66

Így fog kinézni:

10. ábra - Forgatás nyíl

Most animáljuk meg a macska fejét.
Bontsa ki a head_cat elemet, és keresse meg a Pozíciót.
Itt 4 pont lesz.
Csak az utolsó koordináta módosul a többi koordináta befolyásolása nélkül.

Második	0.1	0.17	1.12	2.0
Pozíció	689.3	729.3	729.3	689.3

Nézzük a képet.

11. ábra - Helyezze el a fejet

Tehát az animáció elve ilyen volt. A nyílvessző egyik oldalról a másikra lendül, amint a cicához közeledik, behúzza a fejét, egy ideig elidőzik ebben a helyzetben, majd visszateszi a helyére.

A végső szakasz

Termelés
A munkádból kész terméket kell létrehoznod.
Lépjen a menübe - Hozzáadás a renderelési sorhoz
Megnyílik a Render panel, és az Output Module-ban (két kattintással) válassza ki a kimeneti formátumot. Vettem *.mov

12. ábra - Renderelés

Kattintson a RENDER gombra, és megkapja az eredményt (csak ne felejtse el megadni az elérési utat).
Ez minden.

Ma egy szokatlan Adobe Illustrator leckénk van. 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 és az export megfelelő szervezése végső munka swf formátumba, ahol minden réteg animációs keretté alakul. A mai oktatóanyagban egy retrofilm stílusú visszaszámláló animációt rajzolunk. A kimenetnek egy flash videónak kell lennie, ugyanazzal a visszaszámlálással.

Az első dolog, amit meg kell tennie, hogy megrajzolja az összes szükséges elemet a jövőbeli animációhoz. Ehhez egy külön dokumentumban elkészítettem egy filmkockából két pozíciót, referenciaként egy kört, amely külön szektorokra van vágva, egy textúrát és egy függőleges karcolást, hogy hozzáadja az ókor hatását, valamint az összes számot, ill. feliratok.

Amikor a rajzfilmünk minden része elkészült, elkezdhetjük magának az animációnak a készítését. A kényelem kedvéért jobb ezt egy új dokumentumban megtenni. Ebben az esetben a rétegeink az animációs képkockák szerepét töltik be. És a legelső rétegben csak egy filmkockát kell másolnia. Helyezze a munkaterület közepére.

Most hozzon létre egy második réteget, és másoljon bele egy filmkockát, amelyben a szélek mentén eltolt lyukak vannak kialakítva. Azt is középre kell helyezni.

Ebből a két rétegből már mozgófilm animációja is elérhető. De később még sok rétegre lesz szükségünk. Tehát válassza ki az első két réteget, lépjen a panelbeállításokhoz, és készítsen másolatot a rétegekről.

Hasonló módon 12 réteg filmkockát kell felhalmoznunk, amelyek meghatározzák a mozgását.

Most egy csomó rétegünk van, és mindegyik látható. Abban az értelemben, hogy a felső rétegek blokkolják az alsókat, ami nem teljesen kényelmes a munkához. Ezért néhány réteget kikapcsolhat, ha a réteg nevétől balra lévő ikonra kattint. Az összes réteg egyidejű ki- és bekapcsolásához tartsa lenyomva az Alt billentyűt, miközben a szem ikonra kattint. A rétegek be- és kikapcsolásával pontosan láthatja, mi található jövőbeli animációnk adott képkockájában. És most, hogy enyhe remegést adjunk a film mozgásához, a kapott képkockákat kissé el kell mozgatnunk különböző irányokba. Ehhez csak azt a réteget kapcsolja be, amellyel dolgozni fog. Ebben a pillanatban, majd mozgassa a keretet néhány képponttal bármilyen irányba.

Miután végigment az összes rétegen, és hozzáadott egy kis eltolást, elkezdheti létrehozni a mozgó kör animációját. Ehhez másolja ki a szektorokból álló kört a rajzfilmrészekkel ellátott dokumentumból, és helyezze a filmkocka tetejére az első rétegre.

Ha megszünteti a kör kijelölését, az egyetlen egésznek fog kinézni. Pontosan erre van szükségünk.

De mivel egyedi szektorokból áll, nagyon gyorsan és egyszerűen hozhat létre animációt a színük megváltoztatásával. Ehhez másolja ezt a kört a második rétegre, és világítsa meg az első szektort. Emlékszel, hogy a filmünk mozgás közben remeg, ezért egyáltalán nem szükséges pontosan a képkocka közepére helyezni a kört. Helyezze el szemmel.

Hasonló módon be kell másolni a kört minden következő rétegbe, miközben egy szektorral többet kell festeni világosabb színnel, mint az előző alkalommal. Ez a 12 réteg együtt egy betöltőkörrel mozgó film animációját alkotja.

Ezután textúrát kell adnunk a rétegeinkhez. Kapcsolja be az első réteget, és másolja a textúrát az eredeti fájlból a tartalék alkatrészekkel.

Ezután kapcsolja be egyenként a következő rétegeket, és másolja oda ugyanazt a textúrát. Ahhoz, hogy minden keretben máshogy nézzen ki, egyszerűen forgassa el 90 fokkal. Ahogy azt már sejtette, mind a 12 képkockához textúrát kell adnunk.

Ha már nagyon belefáradt a másolásba, akkor a kedvére tehetek - már nagyon kevés van hátra. A legnehezebb része véget ért. Már csak függőleges karcolások maradnak hátra, és majdnem kész. Ehhez ismét lemásoljuk az eredeti karcolást, és több rétegben tetszőleges helyre helyezzük. Az én esetemben a karcolások csak két rétegben jelennek meg.

Most, hogy elkészült a filmanimáció fő ciklusa, már csak a számokat kell összeadni. Mivel a visszaszámlálásunk 3-tól 1-ig tart, plusz a Go!!! szó, még több rétegre van szükségünk. Nem 12, hanem akár 48. Ehhez még három másolatot kell készíteni a kész rétegekből filmanimációval.

És akkor minden egyszerű. Kapcsolja be a legelső réteget, és tegye oda a hármast.

Ezután át kell másolnia ezt az ábrát a következő rétegekre, amíg a kör animáció véget nem ér. Amikor eléri a rétegek következő példányát, ahol a kör ismét teljesen ki lesz töltve, be kell írnia a kettes számot. Ugyanígy másolja az egyes számút a kívánt rétegekre. És amikor a Go!!! felirat utolsó rétegeihez ér, egyszerűen törölje a kört, mielőtt átmásolja a feliratot a kívánt rétegre.

Az animációhoz ennyi. Itt a lényeg az, hogy ne keveredj össze. Adhatsz néhány kényelmes elnevezést a rétegeknek, de lusta voltam :) És ha befejezted a munkát, mindenképpen kapcsold vissza az összes réteget a szem ikonra kattintva.

Az exportálási beállítások ablakban győződjön meg arról, hogy az Exportálás másként: AI Layers SWF-keretek értékre van állítva. Ez az opció teszi az Illustrator rétegeit animációs keretekké. Ezután kattintson a Speciális gombra.

További beállítások nyílnak meg. Itt kell beállítani a Frame Rate-t. 12 képkocka van másodpercenként. A Looping jelölőnégyzet felelős a ciklikus animációért. Ennek köszönhetően a videót körben játsszák le. A Rétegsorrend: Alulról felfelé opció pedig alulról felfelé reprodukálja az illusztrátor rétegeket a panelen. Pontosan így építettük fel az animációnkat.

A kimenet egy flash videó az animációnkkal.

Most ezt látod egyszerű animáció az Adobe Illustratorban nem olyan nehéz megcsinálni, 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, amit a munkahelyemen ástam ki.

Ezenkívül az utóbbi időben a HTML5-öt és a CSS3-at egyre gyakrabban használják animációk készítésére. Ezt a kódot a modern böngészők támogatják, és nem igényel flash lejátszót.

Roman aka dacascas kifejezetten a blog számára

Iratkozzon fel hírlevelünkre, hogy ne maradjon le semmi újdonságról:

Van egy vagy két ikonja, amelyet animációval szeretne életre kelteni. hol kezdenéd? Tegyük fel, hogy van SVG fájlok, Illustrator CC és After Effects CC programokat, 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 alakzatrétegekké, és hogyan adhat hozzá mozgást. Végül beszéljünk az exportálásról és a renderelésről.

A munka végeredménye.

Most pedig térjünk rá a szórakoztató részre – a képek életre keltésének megtanulására.

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. Ezt 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ájlok importálása és rendezése az After Effects CC-ben

Most 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... Innen válassza ki az általunk készített Illustrator CC fájlt, majd kattintson 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 egy új kompozíciót fogunk látni. Kattintson duplán rá. Most látnunk kell az Illustrator CC rétegeket narancssárga ikonokkal a nevük bal oldalán.

Mielőtt elkezdenénk, ezeket a rétegeket át kell alakítanunk alakrétegekké. Mindegyiket ki kell jelölnünk a Ctrl+A/Command+A billentyűkombinációval, vagy manuálisan a Shift+Bal egérgombbal. Ezt követően 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 legyenek útban.

Konvertálja az Illustrator CC rétegeit alakzatrétegekké az After Effects CC-ben

Bár ez nem szükséges, fontos, hogy minden rétegnek megfelelő nevet és/vagy színkódot adjunk. Ez lehetővé teszi számunkra, hogy hatékonyabban dolgozzunk, mivel a kulcsfontosságú személyekre összpontosítunk. Az alábbi példában a címkék színei többé-kevésbé megegyeznek a megfelelő rétegek kitöltésével.

A formarétegek megfelelő nevekkel, színekkel, szöveggel és elhelyezéssel történő címkézése nagyon praktikus.

A paraméterek beállításához használjuk 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 Width, Height, Frame Rate és Duration menüpontot. Ehhez a projekthez 60 képkocka/másodperc sebességet 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 úgy kell csoportosítanunk, hogy azok mozgása szinkronban legyen a fő réteggel, amit 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 számomra, hogy a szülőréteg segítségével szabályozzam az egész autó helyzetét és forgását (kivéve a kerekeket).

Animáció készítése

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. Úgy kezdtem, hogy létrehoztam egy követ, egy autót és kerekeket. Akkor itt az ideje leküzdeni a legnagyobb akadályt – fára tenni az akciót. Miután ez megtörtént, áttértem a kisebb részekre, mint például a fogasléc és a kötelek.

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.

Ó, a hatalmas tolleszköz!

A csomagtartó viszonylag egyszerű feladat volt. Felszereltem az autó hátuljára, és horgonypontot tettem a bal alsó csúcsban. A Pick Whip segítségével hozzárendeltem a szülő törzsréteghez. 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ó pattanásának 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ő itt: .