Sada ćemo malo zakomplicirati zadatak - napravimo animirani Flash banner. Naravno, u ovom slučaju nije potrebno govoriti o punopravnoj Flash animaciji - za to postoje specijalizirani paketi. Ali također možete koristiti Illustrator za stvaranje jednostavnog, amaterskog videa.

U Adobe Illustratoru nema posebnih alata i alata sučelja, poput vremenske trake, tipičnih za programe za razvoj animacije. Ali postoji jedna suptilnost - slojevi se mogu koristiti kao okviri.

Napravite banner samo s tekstom.

1. Grupirajte simbole s naredbom Objekt › Grupa(Objekt › Grupa).
2. Sljedeći zadatak je napraviti konturne objekte od znakova fonta, inače ispravno formiranje slojeva neće funkcionirati. Da biste to učinili, odaberite grupu i odaberite Upišite › Napravite obrise(Font › Trag).
3. Nakon toga otvorite izbornik paleta Slojevi(Slojevi) klikom na gumb u obliku strelice na paleti (slika 8.11).

Riža. 8.11. Izbornik palete slojeva

Zanima nas naredba u ovom izborniku Pusti na sloj (slijed)(Pretvori u slojeve (uzastopno)) koji prevodi svaki pojedinačni objekt na novi sloj. Imajte na umu da prilikom primjene naredbe grupa mora biti odabrana skupina, a ne sloj Sloj 1.

Kako bi paleta trebala izgledati Slojevi(Slojevi) nakon izvršenja Pusti na sloj (slijed)(Pretvori u slojeve (uzastopno)), prikazano na sl. 8.12.

Riža. 8.12. Paleta slojeva nakon puštanja u sloj (slijed)

Time je priprema završena, možete uštedjeti koristeći Spremi za web(Spremi za web) u SWF. SWF je glavni grafički format baziran na Flash tehnologijama. Točnije bi bilo reći da se radi o Flash formatu (slika 8.13).

Vjerojatno su danas svi korisnici manje-više upoznati s Flashom. To je trenutno najčešći format animacije na Internetu i koristi se za izradu velike većine multimedijskih web stranica.

Naravno, čak ni desetina mogućnosti Flasha nije implementirana u Adobe Illustrator, jer program za to nije dizajniran. Međutim, u njemu možete napraviti ili statičnu sliku ili jednostavnu animaciju.

Riža. 8.13. Postavke optimizacije za SWF format

Postoje sljedeće postavke.

• Samo za čitanje(Samo čitanje). Ako potvrdite okvir, datoteka će biti zapisana na način da se više ne može otvoriti za uređivanje ni u jednom programu. To, s jedne strane, smanjuje veličinu datoteka, a s druge strane štiti vaša autorska prava.
• Postavka označena s 1. Parametar koji određuje vrstu spremanja - slika ili animacija.
• Ako odaberete opciju AI datoteka u SWF datoteku(Datoteka Illustrator u SWF datoteku), slika će biti spremljena kao statična slika točno kao ono što vidite na zaslonu kada radite u Illustratoru.
• Slojevi u SWF okvire(Slojevi u SWF okvire) omogućuje vam da animirate postojeće slojeve, koji će se prikazati kao okviri. Moramo odabrati ovu opciju.
• Kvaliteta krivulje(Kvaliteta krivulja). Točnost krivulja koje ponavljaju datoteku krivulja izvorne slike. Smanjenje ove postavke značajno smanjuje kvalitetu, posebno u području malih detalja, ali smanjuje veličinu datoteke. Za naš slučaj, optimalna vrijednost je "7".
• okvirna stopa(Kašnjenje kadra). Brzina kadrova i, kao rezultat, brzina animacije. Da bi učinak bio ispravan, ne postavite više od 4 sličice u sekundi.
• petlja(Ponoviti). Reproduciraj animaciju više puta. Prikladno za animacije gdje je važna petlja koja se ponavlja. Banner pripada ovoj vrsti.

Adobe Illustrator i After Effects
Uvoz i jednostavna animacija

Zdravo. Danas pregledavamo jednostavnu animaciju u After Effectsu.

Resursi: Adobe Illustrator CC
Adobe After Effects CC

Počnimo s crtanjem u Illustratoru.

Crtamo
1) Nacrtajte žuti pravokutnik kao pozadinu

Slika 1 - Pravokutnik

2) Nacrtajte krug i ispunite ga gradijentom
Poradimo malo na krugu:
- uklonite donju točku na konturi, dobivamo luk;
- nacrtajte ravnu liniju, zatvarajući dno luka, dobivamo polukrug

Slika 2 - 1) nacrtati krug; 2) gradijent; 3) brisanje točke

3) Nacrtajte pravokutnik i napravite njegovu kopiju
- jedan sivi pravokutnik;
- još jedan tamno sivi pravokutnik
4) Nacrtajte trokut iz zvjezdice postavljanjem broja zraka - 3

Slika 3 - 1) pravo svjetlo; 2) pravocrtno tamno; 3) trokut

5) Nacrtajte mačku olovkom i jednostavnim oblicima

Slika 4 - 1) glava; 2) vrat; 3) tijelo; 4) noga; 5) rep

A sada najviše GLAVNI trenutak
Podijelimo slike u slojeve (ono što će biti animirano - na zasebnom sloju) ovako:

Slika 5 - sve slike (crvena oznaka važnih slojeva)

Sve, sada štedimo.
Pogledajmo postavke spremanja

Slika 6 - Spremi

A sada sljedeća faza. ZatvoritiAdobe Illustrator i otvorite After Effects.

Uvezi u After Effects
Datoteka - Uvoz - Datoteka - odaberite našu spremljenu datoteku Ilustrator.
Odaberimo uvoz slojeva iz Illustratora, ako stavimo snimke, dobit ćemo sliku sa spojenim slojevima, ali ovo nam ne treba.

Slika 7 - Uvezi kao sastav

Sve uvezeno.
Sad da vidimo što imamo. Dvaput kliknite na sastav , što bi se otvorilo i vidjeli bismo slojeve (ako je sve napravljeno kako treba, bit će nekoliko slojeva). Dobili smo ovo, pogledajte sliku

Slika 8 - Otvorena kompozicija

A sada ono zbog čega smo danas ovdje - Animacija.

Animacija u poslije učinci
Postavite središnju točku na strelicu na vrhu pomoću alata Pan Behind Tool (prečac - Y). Samo uzmite točku i pomaknite je kamo želite. Kao rezultat, to će izgledati ovako..

Slika 9 - Alat za pomicanje i slojevi

To je to, sada prijeđimo na slojeve za animaciju.
Trebamo sloj sa strelicama i Head_cat.
Počnimo sa strelicom.
Proširite popis, pronađite i kliknite na sat. Dakle, prvu točku stavljamo na nulu druge. Ukupno će animacija trajati 2 sekunde.
Dakle, ovo su postavke koje trebate napraviti (ukupno ćemo staviti 3 boda)

Drugi	0	1	2
	+66	- 70	+66

Ovako će to izgledati:

Slika 10 - Strelica za rotaciju

Sada animiramo mačku glavu.
Proširite head_cat i pronađite Položaj.
Bit će 4 boda.
Promijenit će samo posljednju koordinatu bez dodirivanja ostatka.

Drugi	0.1	0.17	1.12	2.0
Položaj	689.3	729.3	729.3	689.3

Pogledajmo sliku.

Slika 11 - Glava položaja

Dakle, princip animacije je bio ovakav. Strijela se njiše s jedne na drugu stranu, čim se približi mačiću, on uvlači glavu u sebe, zadržava se malo u tom položaju, a zatim ga vraća na svoje mjesto.

Završna faza

Proizvodnja
Od svog rada morate stvoriti gotov proizvod.
Idite na izbornik - Dodaj u red za renderiranje
Otvara se ploča Render i u izlaznom modulu (dva klika) odaberite izlazni format. Uzeo sam *.mov

Slika 12 - Render

Kliknite na gumb RENDER i dobit ćete rezultat (ne zaboravite navesti put).
To je sve.

Flash (SWF) format datoteke temelji se na vektorskoj grafici i namijenjen je skalabilnoj, kompaktnoj grafiki za web. Budući da se ovaj format datoteke temelji na vektorskoj grafici, objekt zadržava kvalitetu slike u bilo kojoj razlučivosti i idealan je za stvaranje okvira animacije. U Illustratoru možete stvoriti pojedinačne okvire animacije na slojevima, a zatim izvesti slojeve slike kao pojedinačne okvire za korištenje na web-mjestu. Također možete definirati simboli u datoteci Illustrator kako biste smanjili veličinu animacije. Kada se izveze, svaki je simbol definiran samo jednom u SWF datoteci.

Naredba za izvoz (SWF)

Pruža najveću kontrolu nad animacijom i kompresijom bitova.

Pruža veću kontrolu nad mješavinom SWF i bitmap formata u fragmentiranom izgledu. Ova naredba nudi manje opcija slike od naredbe Izvoz (SWF), ali koristi najskorije korištene opcije naredbe Izvoz (pogledajte ).

Imajte na umu sljedeće smjernice kada pripremate objekt za spremanje kao SWF.

Uz Device Central možete vidjeti kako će Illustrator umjetnička djela izgledati u Flash Playeru na raznim ručnim uređajima.

Umetanje grafike Illustrator

Grafički objekt stvoren u Illustratoru može se brzo, jednostavno i jednostavno kopirati i zalijepiti u Flash aplikaciju.

Kada zalijepite Illustrator grafiku u Flash aplikaciju, sljedeći atributi ostaju sačuvani.

Konture i oblici

• Debljina poteza

  Definicije gradijenata

  Tekst (uključujući OpenType fontove)

  Povezane slike

• Načini miješanja

Osim toga, Illustrator i Flash podržavaju sljedeće značajke prilikom lijepljenja grafike.

Odabir cijelih slojeva najviše razine u umjetničkom djelu Illustrator i njihovo lijepljenje u Flash čuva slojeve i njihova svojstva (vidljivost i blokiranje).

Illustrator formati boja koji nisu RGB (CMYK, sivi tonovi i prilagođeni formati) Flash pretvara u RGB. RGB boje su umetnute na uobičajen način.

Kada uvezete ili zalijepite Illustrator ilustracije, možete koristiti različite opcije za spremanje određenih efekata (kao što je sjena teksta) kao Flash filtere.

Flash sprema Illustrator maske.

Izvezite SWF datoteke iz Illustratora

SWF datoteke izvezene iz Illustratora iste su kvalitete i kompresije kao SWF datoteke izvezene iz Flasha.

Kada izvozite, možete birati između niza unaprijed definiranih stilova za optimalan izlaz i odrediti kako želite koristiti više umjetničkih ploča, kako se simboli, slojevi, tekst i maske pretvaraju. Na primjer, možete odabrati izvoz Illustrator simbola kao filmove ili grafike i stvaranje SWF simbola iz Illustratorovih slojeva.

Uvoz Illustrator datoteka u Flash aplikaciju

Da biste stvorili potpuni izgled u Illustratoru, a zatim ga uvezli u Flash u jednom koraku, možete spremiti svoje umjetničko djelo u izvornom (AI) formatu Illustratora i uvesti ga s visokom vjernošću u Flash pomoću naredbi File > Import To Workspace. područje" ili " Datoteka" > "Uvezi u biblioteku".

Ako datoteka Illustratora sadrži više montažnih ploča, u dijaloškom okviru Flash Import odaberite montažnu ploču za uvoz i navedite postavke za svaki sloj u toj montažnoj ploči. Svi objekti u odabranoj montažnoj ploči uvoze se u Flash kao jedan sloj. Kada uvezete drugu montažnu ploču iz iste AI datoteke, objekti s te ploče se uvoze u Flash kao novi sloj.

Kada uvezete Illustrator ilustracije kao AI, EPS ili PDF datoteke, Flash zadržava iste atribute kao kada zalijepite Illustrator umjetnički rad. Također, ako datoteka Illustrator koju uvozite sadrži slojeve, možete ih uvesti na jedan od sljedećih metoda.

Pretvorite Illustrator slojeve u Flash slojeve.

Pretvorite Illustrator slojeve u Flash okvire.

Pretvorite sve Illustrator slojeve u jedan Flash sloj.

Imate jednu ili dvije ikone koje biste željeli oživjeti animacijom. Gdje biste počeli? Recimo da imate SVG datoteke, Illustrator CC i After Effects CC, ali rješenje vam izmiče.

U ovom članku ću vam pokazati kako jednostavno animirati SVG datoteku, uključujući pripremu SVG datoteke u Illustratoru i uvoz u After Effects CC. Također ću objasniti kako ga možete pretvoriti u slojeve oblika i dodati kretanje. I na kraju, razgovarajmo o izvozu i renderiranju.

Krajnji rezultat rada.

Prijeđimo sada na najzanimljiviji dio - naučite kako animirati slike.

Priprema SVG datoteke u Illustratoru

Počnimo otvaranjem vaše SVG datoteke u Adobe Illustrator CC. Animirat ću ikonu malog automobila koja je dostupna besplatno na Week Of Icons.

Nakon otvaranja datoteke, moramo razgrupirati i razdvojiti sve objekte u slojeve. Možete to učiniti ručno ili koristiti Otpuštanje u slojeve (sekvenca) kako bi se proces ubrzao. Prije nego što uvezemo datoteku u After Effects, moramo je spremiti kao format datoteke Illustrator.

Objekte možemo razgrupirati pomoću Release to Layers (Sequence) kako ne bismo gubili dragocjeno vrijeme.

Uvoz i organiziranje datoteke u After Effects CC

Sada ste spremni za uvoz u After Effects CC. Koristimo tipkovnički prečac Ctrl+I (Windows) ili Command+I (Mac) za učitavanje dijaloškog okvira uvoz datoteke, ili idite na Datoteka > Uvoz > Datoteka… Na istom mjestu odaberite Illustrator CC datoteku koju smo pripremili i kliknite uvoz. Trebao bi se pojaviti mali dijaloški okvir s nazivom odabrane datoteke. Odaberi sastav s padajućeg popisa pod nazivom Vrsta uvoza.

Brži način uvoza datoteke je dvostruki klik na mjesto stupca na ploči projekta.

Na ploči s vremenskom trakom vidjet ćemo novu kompoziciju. Dvaput kliknemo na njega. Sada bismo trebali vidjeti Illustrator CC slojeve s narančastim ikonama lijevo od njihovih imena.

Prije nego što krenemo s poslom, moramo sve te slojeve pretvoriti u oblik slojeva. Moramo ih sve odabrati sa Ctrl+A/Command+A, ili ručno pomoću Shift + lijevi miš. Nakon toga kliknite desnim klikom na sloj i odaberite Kreiraj > Kreiraj oblike iz vektorskog sloja.

Sada kada su novi slojevi odabrani, povucite ih na vrh ploče iznad Illustrator CC slojeva, a zatim izbrišite Illustrator CC slojeve kako vam ne bi smetali.

Pretvaranje Illustrator CC slojeva u slojeve oblika u After Effects CC

Iako nije potrebno, važno je da svakom sloju damo odgovarajući naziv i/ili boju. To će nam omogućiti učinkovitiji rad jer se usredotočimo na ključne kadrove. U primjeru ispod, boje naljepnica više ili manje odgovaraju ispunama njihovih odgovarajućih slojeva.

Označavanje slojeva oblika odgovarajućim nazivima, bojama, oznakama i položajima vrlo je praktično.

Koristite tipkovnički prečac za konfiguriranje postavki Ctrl+K/Command+K ili Sastav > Postavke kompozicije... U postavkama kompozicije moramo odabrati širinu, visinu, brzinu kadrova i trajanje za širinu, visinu, brzinu kadrova i trajanje. Za ovaj projekt odabrao sam 60 fps kako bi animacija bila glatka.

U ovom trenutku, čini se da je sve spremno za početak, ali postoji još jedna stvar koju treba učiniti. Moramo grupirati određene slojeve zajedno kako bi njihovi pokreti bili sinkronizirani s glavnim slojem koji možemo kontrolirati. Ova metoda se zove roditeljstvo.

Koristite Pick Whip za dodjelu nadređenog sloja više slojeva.

U našem primjeru dodijelio sam manje značajne slojeve (slojevi djece) kao što su vjetrobran, dijelovi tijela, drvo i užad primarnom sloju tijela (roditeljski sloj). To mi je omogućilo kontrolu položaja i rotacije cijelog automobila (isključujući kotače) koristeći roditeljski sloj.

Kreiranje animacije

Htio sam da auto udari o kamen i malo visi u zraku. Također sam želio da se drvo pomiče gore-dolje i otvara deblo. Počeo sam s gradnjom kamena, auta i kotača. Tada je došlo vrijeme da se prijeđe najveća prepreka – stavljanje akcije na stablo. Kada je to bilo učinjeno, počeo sam raditi na malim detaljima kao što su stalak i užad.

Skica koja opisuje animaciju

Prvi korak je bio napraviti element stijene ili sloj, ali umjesto da se vratim na Illustrator CC da dodam još jedan sloj, samo sam koristio alat Pen Tool u After Effects CC. To mi je omogućilo da brzo dizajniram mali kamen.

Oh, moćni alat za olovke!

Prtljažnik je bio relativno jednostavan zadatak. Postavio sam ga na stražnji dio automobila i napravio sidrišnu točku u donjem lijevom vrhu. Koristeći Pick Whip , dodijelio sam ga matičnom sloju tijela. Pretposljednji korak bio je dati efekt rotacije, što je zauzvrat činilo moment odskakanja automobila realističnijim.Bodymovin u kombinaciji s mobilnom knjižnicom Lottie.

p.s. možete pronaći moje Illustrator CC i After Effects CC datoteke.

Skup ikona dostupan je za besplatno preuzimanje na .

Transparentni GIF u Adobe Illustratoru radi se na sljedeći način. Idite na izbornik Datoteka > Spremi za web i uređaje (Alt+Ctrl+Shift+S). U prozoru koji se otvori, u polju Optimizirani format datoteke, prvo morate prijeći na karticu veličina slike(veličina slike). Činjenica je da cijela stranica prema zadanim postavkama ulazi u prozor za optimizaciju, a to obično nije potrebno. Stoga na kartici Veličina slike poništite potvrdni okvir Isječak na Artboard(Obrežite stranicu kako bi odgovarala) i kliknite gumb Primijeni.

Zatim na popisu za odabir formata odaberite GIF i označite potvrdni okvir Transparentnost.

Nakon toga ćemo odrediti koje će boje biti prozirne. Sve boje prisutne na slici nalaze se na kartici tablica boja(Tabela boja) i prikazani su kao kvadrati u boji. Odaberite alat s alatne trake na lijevoj strani prozora kapaljka za oči(pipeta).

Boje se mogu definirati na dva načina. Najlakši način je odrediti boju kapaljkom izravno na slici - nakon toga će boja biti istaknuta na tablici boja tamnim potezom. Pa, ako točno znate koja boja treba biti prozirna, možete je odabrati izravno na tablici boja klikom na odgovarajući okvir u boji. I u prvom i drugom slučaju, ako trebate odabrati nekoliko boja, morate raditi s pritisnutom tipkom Shift (ili Ctrl). Nakon što odaberete boju, trebate dati instrukciju programu da bude prozirna. Da biste to učinili, kliknite na ikonu Preslikava odabrane boje na Transparent(Dodajte odabrane boje prozirnosti). Na slici je ovaj gumb zaokružen, a crvena boja postavljena je na prozirnu. Na slici će se pojaviti prozirno područje, a kvadrat na tablici boja će promijeniti svoj izgled - dio će postati bijeli trokut. Da biste poništili odabranu boju, trebate je odabrati u tablici boja, a zatim ponovno kliknuti ikonu Mapira odabrane boje u Transparent.

Nekoliko riječi o načinu postavljanja transparentnosti. Za to je odgovoran padajući izbornik. Odredite algoritam Transparency Dither, na ruskom - Algoritam za simulaciju transparentnosti (sl. ispod). Postoje četiri izbora: No Transparency Dither - bez algoritma, Diffusion Transparency Dither - difuzni algoritam, Pattern Transparency Dither - algoritam temeljen na uzorcima i Noise Transparency Dither - algoritam koji se temelji na buci. U načinu difuznog algoritma, klizač postaje aktivan Iznos(Količina) koja vam omogućuje promjenu vrijednosti difuzije. Što primijeniti u praksi? Ovisno o namjeni i slici. Ne koristim ovu opciju i uvijek ostavljam zadanu - No Transparency Dither.

Pritisnite Spremi - transparentni GIF je spreman. Rad je obavljen u Adobe Illustrator verziji CS4 (v.14), ali sve radnje i tipkovnički prečaci su relevantni za raniju verziju CS3 (v. 13).