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

U Adobe Illustratoru nema posebnih alata i alata za interfejs, kao što je vremenska linija, koji su tipični za programe za razvoj animacije. Ali postoji jedna suptilnost - slojevi se mogu koristiti kao okviri.

Napravite baner samo sa tekstom.

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

Rice. 8.11. Meni palete slojeva

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

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

Rice. 8.12. Paleta slojeva nakon puštanja u sloj (sekvence)

Ovim je priprema završena, možete uštedjeti koristeći Sačuvaj za Web(Sačuvaj za Web) u SWF. SWF je glavni grafički format baziran na Flash tehnologijama. Tačnije bi bilo reći da je ovo Flash format (slika 8.13).

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

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

Rice. 8.13. Postavke optimizacije za SWF format

Postoje sljedeće postavke.

• Samo za čitanje(Samo čitanje). Ako označite polje, datoteka će biti zapisana na način da se više ne može otvoriti za uređivanje ni u jednom programu. Ovo, s jedne strane, smanjuje veličinu fajlova, a s druge strane štiti vaša autorska prava.
• Postavka označena sa 1. Parametar koji određuje tip snimanja - slika ili animacija.
• Ako odaberete opciju AI fajl u SWF fajl(Datoteka Illustrator u SWF datoteku), slika će biti sačuvana kao statična slika tačno kao ono što vidite na ekranu kada radite u Illustratoru.
• Slojevi u SWF okvire(Slojevi u SWF okvire) vam omogućava da animirate postojeće slojeve, koji će biti prikazani kao okviri. Moramo izabrati ovu opciju.
• Curve Quality(Kvalitet krivih). Preciznost krivulja koje ponavlja datoteku krivulja originalne 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".
• broj kadrova(Kašnjenje kadra). Brzina kadrova i, kao rezultat, brzina animacije. Da bi efekat bio ispravan, ne postavite više od 4 kadra u sekundi.
• petlja(ponoviti). Pustite animaciju više puta. Pogodno za animacije gdje je važna petlja koja se ponavlja. Baner pripada ovoj vrsti.

Adobe Illustrator i After Effects
Uvoz i jednostavna animacija

Zdravo. Danas recenziramo jednostavnu animaciju u After Effects.

Resursi: Adobe Illustrator CC
Adobe After Effects CC

Počnimo crtanjem u Illustratoru.

Crtamo
1) Nacrtajte žuti pravougaonik kao pozadinu

Slika 1 - Pravougaonik

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

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

3) Nacrtajte pravougaonik i napravite njegovu kopiju
- jedan sivi pravougaonik;
- još jedan tamno sivi pravougaonik
4) Nacrtajte trougao od zvjezdice postavljanjem broja zraka - 3

Slika 3 - 1) pravo svetlo; 2) pravo tamno; 3) trougao

5) Nacrtajte mačku olovkom i jednostavnim oblicima

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

A sada najviše MAIN momenat
Podijelimo slike u slojeve (ono što će biti animirano - na posebnom sloju) ovako:

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

Sve, sada štedimo.
Pogledajmo postavke spremanja

Slika 6 – Sačuvaj

A sada sledeća faza. ZatvoriAdobe Illustrator i otvorite After Effects.

Uvezi u After Effects
Datoteka - Uvoz - Datoteka - odaberite naš sačuvani fajl Ilustrator.
Odaberimo da uvezemo slojeve iz Illustratora, ako stavimo snimak, dobićemo sliku sa spojenim slojevima, ali ovo nam ne treba.

Slika 7 - Uvezi kao sastav

Sve uvezeno.
Sada da vidimo šta imamo. Dvaput kliknite na kompoziciju , šta bi se otvorilo i vidjeli bismo slojeve (ako je sve urađeno 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 naknadni efekti
Postavite tačku okretanja na strelicu na njenom vrhu pomoću alata Pan Behind Tool (prečica - Y). Samo uzmite tačku i pomjerite je gdje želite. Kao rezultat, to će izgledati ovako..

Slika 9 – Alat za pomicanje i slojevi

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

Sekunda	0	1	2
	+66	- 70	+66

Ovako će to izgledati:

Slika 10 - Strelica za rotaciju

Sada animiramo glavu mačke.
Proširite head_cat i pronađite pozicija.
Bit će 4 boda.
Promijenit će samo posljednju koordinate bez dodirivanja ostatka.

Sekunda	0.1	0.17	1.12	2.0
pozicija	689.3	729.3	729.3	689.3

Pogledajmo sliku.

Slika 11 - Položaj glave

Dakle, princip animacije je bio ovakav. Strelica 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 meni - Dodaj u red za renderiranje
Otvara se panel Render i u izlaznom modulu (dva klika) izaberite izlazni format. Uzeo sam *.mov

Slika 12 - Render

Kliknite na dugme RENDER i dobijte rezultat (ne zaboravite navesti putanju).
To je sve.

Flash (SWF) format datoteke baziran je na vektorskoj grafici i namijenjen je skalabilnoj, kompaktnoj grafiki za web. Budući da je ovaj format datoteke zasnovan na vektorskoj grafici, objekt zadržava kvalitet slike u bilo kojoj rezoluciji i idealan je za kreiranje okvira animacije. U Illustratoru možete kreirati pojedinačne okvire animacije na slojevima, a zatim izvesti slojeve slike kao pojedinačne okvire za korištenje na web stranici. Također možete definirati simboli u Illustrator datoteci da smanjite veličinu animacije. Kada se izveze, svaki simbol je 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 rasporedu. Ova naredba nudi manje opcija slike od naredbe Izvoz (SWF), ali koristi najskorije korištene opcije komande Izvoz (pogledajte ).

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

Uz Device Central, možete vidjeti kako će Illustrator ilustracije izgledati u Flash Player-u na različitim ručnim uređajima.

Umetanje Illustrator grafike

Grafički objekat kreiran u Illustratoru može se brzo, lako i lako kopirati i zalijepiti u Flash aplikaciju.

Kada zalijepite Illustrator grafiku u Flash aplikaciju, sljedeći atributi se čuvaju.

Konture i oblici

• Debljina poteza

  Definicije gradijenata

  Tekst (uključujući OpenType fontove)

  Povezane slike

• Blend Modes

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

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

Illustrator formati boja koji nisu RGB (CMYK, sivi formati i prilagođeni formati) se pretvaraju pomoću Flasha u RGB. RGB boje se ubacuju na uobičajen način.

Kada uvezete ili zalijepite Illustrator ilustracije, možete koristiti različite opcije da sačuvate određene efekte (kao što je sjena teksta) kao Flash filtere.

Flash sprema Illustrator maske.

Izvezite SWF datoteke iz Illustrator-a

SWF datoteke izvezene iz Illustrator-a su istog kvaliteta i kompresije kao SWF datoteke izvezene iz Flash-a.

Kada izvozite, možete birati između niza unaprijed definiranih stilova za optimalan izlaz i specificirati kako želite koristiti više artboarda, kako se simboli, slojevi, tekst i maske pretvaraju. Na primjer, možete odabrati da izvezete Illustrator simbole kao filmove ili grafiku ili kreirate SWF simbole iz Illustrator slojeva.

Uvoz Illustrator datoteka u Flash aplikaciju

Da biste kreirali kompletan izgled u Illustratoru, a zatim ga uvezli u Flash u jednom koraku, možete sačuvati svoje umjetničko djelo u Illustrator izvornom (AI) formatu i uvesti ga s velikom vjernošću u Flash pomoću naredbi File > Import To Workspace. oblast" ili " Datoteka" > "Uvezi u biblioteku".

Ako Illustrator datoteka sadrži više grafičkih ploča, u dijaloškom okviru Flash Import odaberite montažnu ploču za uvoz i odredite postavke za svaki sloj u toj montažnoj ploči. Svi objekti u odabranoj montažnoj ploči se uvoze u Flash kao jedan sloj. Kada uvezete drugu montažnu ploču iz iste AI datoteke, objekti sa 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 ilustracije. Također, ako Illustrator datoteka 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 lako 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, hajde da pričamo o izvozu i renderovanju.

Krajnji rezultat rada.

A sada prijeđimo 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 fajla, potrebno je da razgrupišemo i odvojimo sve objekte u slojeve. Možete to učiniti ručno ili koristiti Prebaci na slojeve (sekvenca) da ubrzate proces. Prije nego što uvezemo datoteku u After Effects, moramo je sačuvati kao Illustrator format datoteke.

Možemo razgrupisati objekte koristeći 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 prečicu na tastaturi Ctrl+I (Windows) ili Command+I (Mac) za učitavanje dijaloškog okvira import file, ili idite na Fajl > Uvoz > Fajl… Na istom mjestu odaberite Illustrator CC datoteku koju smo pripremili i kliknite uvoz. Trebalo bi se pojaviti mali dijaloški okvir s imenom odabrane datoteke. Odaberite kompozicija sa padajuće liste pod nazivom Import Kind.

Brži način uvoza datoteke je dvostruki klik na lokaciju stupca u panelu projekta.

U panelu vremenske linije videćemo novu kompoziciju. Dvaput kliknemo na njega. Sada bismo trebali vidjeti Illustrator CC slojeve sa narandžastim ikonama lijevo od njihovih imena.

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

Sada kada su novi slojevi odabrani, prevucite ih na vrh panela 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 neophodno, važno je da svakom sloju damo odgovarajući naziv i/ili boju. To će nam omogućiti da radimo efikasnije jer se fokusiramo na ključne kadrove. U primjeru ispod, boje naljepnica se manje-više podudaraju sa ispunama njihovih odgovarajućih slojeva.

Označavanje slojeva oblika odgovarajućim imenima, bojama, oznakama i pozicijama je vrlo praktično.

Koristite prečicu na tastaturi da konfigurišete postavke Ctrl+K/Command+K ili Kompozicija > Postavke kompozicije… Iz postavki kompozicije trebamo odabrati širinu, visinu, brzinu kadrova i trajanje za širinu, visinu, brzinu kadrova i trajanje. Za ovaj projekat odabrao sam 60 fps kako bi animacija bila glatka.

U ovom trenutku, čini se da je sve spremno, ali postoji još jedna stvar koja treba da se uradi. Moramo grupisati određene slojeve zajedno tako da su njihovi pokreti sinkronizirani s glavnim slojem koji možemo kontrolirati. Ova metoda se zove roditeljstvo.

Koristite Pick Whip da dodelite roditeljski sloj više slojeva.

U našem primjeru, dodijelio sam manje značajne slojeve (slojevi djece) kao što su vjetrobran, dijelovi karoserije, drvo i užad primarnom sloju tijela (roditeljski sloj). Ovo mi je omogućilo da kontrolišem položaj i rotaciju celog automobila (isključujući točkove) koristeći roditeljski sloj.

Kreiranje animacije

Želeo sam da auto udari o kamen i da malo zavisi u vazduhu. Takođe sam želeo da se drvo pomera gore-dole i da otvori deblo. Počeo sam sa gradnjom kamena, automobila i točkova. Tada je došlo vrijeme da pređemo najveću prepreku – stavljanje akcije na drvo. Kada je to bilo urađeno, počeo sam raditi na malim detaljima kao što su stalak i užad.

Skica koja opisuje animaciju

Prvi korak je bio da napravim element stijene ili sloj, ali umjesto da se vratim na Illustrator CC da bih dodao 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. Ugradio sam ga na stražnji dio automobila i napravio sidrenu tačku u donjem lijevom tjemenu. Koristeći Pick Whip, dodijelio sam ga matičnom sloju tijela. Pretposljednji korak je bio davanje efekta rotacije, što je zauzvrat činilo moment odskakanja automobila realističnijim.Bodymovin u kombinaciji sa Lottie mobilnom bibliotekom.

P.S. možete pronaći moje Illustrator CC i After Effects CC datoteke.

Set ikona je dostupan za besplatno preuzimanje na .

Transparentni GIF u Adobe Illustratoru radi se na sljedeći način. Idite na meni File > Save for Web & Devices (Alt+Ctrl+Shift+S). U prozoru koji se otvori, u polju Optimizirani format datoteke, prvo morate otići na karticu veličina slike(veličina slike). Činjenica je da cijela stranica po defaultu ulazi u prozor za optimizaciju, a to obično nije potrebno. Stoga, na kartici Veličina slike poništite izbor u polju za potvrdu Isječak na Artboard(Izrežite stranicu tako da odgovara) i kliknite na dugme Primijeni.

Zatim na listi za odabir formata odaberite GIF i potvrdite okvir Transparentnost.

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

Boje se mogu definirati na dva načina. Najlakši način je da navedete boju kapaljkom direktno na slici - nakon toga će boja biti istaknuta na tabeli boja tamnim potezom. Pa, ako tačno znate koja boja treba da bude prozirna, možete je odabrati direktno na tabeli boja klikom na odgovarajući okvir u boji. I u prvom i drugom slučaju, ako trebate odabrati nekoliko boja, morate raditi s pritisnutim tipkom Shift (ili Ctrl). Nakon odabira boje, potrebno je da naložite programu da je učini transparentnom. Da biste to učinili, kliknite na ikonu Mapira odabrane boje u Transparent(Dodajte odabrane boje prozirnosti). Na slici je ovo dugme zaokruženo, a crvena boja je postavljena na prozirnu. Na slici će se pojaviti prozirna oblast, a kvadrat na tablici boja će promijeniti svoj izgled - dio će postati bijeli trokut. Da biste poništili odabranu boju, potrebno je da je odaberete u tabeli boja, a zatim ponovo kliknite na ikonu Mapira izabrane boje u prozirnu.

Nekoliko riječi o načinu postavljanja transparentnosti. Za to je odgovoran padajući meni. Odredite algoritam Transparency Dither, na ruskom - Algoritam za simulaciju transparentnosti (sl. ispod). Postoje četiri izbora: No Transparency Dither - nema algoritma, Diffusion Transparency Dither - difuzni algoritam, Pattern Transparency Dither - algoritam zasnovan na uzorcima i Noise Transparency Dither - algoritam zasnovan na šumu. U režimu difuznog algoritma, klizač postaje aktivan Iznos(Količina) koja vam omogućava da promijenite vrijednost difuzije. Šta primijeniti u praksi? U zavisnosti od namjene i slike. Ne koristim ovu opciju i uvijek ostavljam zadanu vrijednost - Bez prozirnosti.

Pritisnite Sačuvaj - transparentni GIF je spreman. Rad je obavljen u Adobe Illustrator verziji CS4 (v.14), ali sve radnje i prečice na tastaturi su relevantne za raniju verziju CS3 (v. 13).