Vodič: kako kreirati SVG animaciju koristeći After Effects CC. Kako animirati u Adobe Illustratoru Izvoz SWF datoteka iz Illustratora

06.03.2022 Iron

Adobe Illustrator i After Effects
Uvoz i jednostavna animacija

Zdravo. Danas gledamo jednostavnu animaciju u After Effects.

Resursi: Adobe Illustrator CC
Adobe After Effects CC

Počnimo sa učenjem crtanjem u Illustratoru.

Hajde da crtamo
1) Nacrtajte žuti pravougaonik kao pozadinu

Slika 1 - Pravougaonik

2) Nacrtajte krug i ispunite ga gradijentom
Poradimo malo na krugu:
- izbrišite donju tačku na konturi, dobićemo 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;
- drugi pravougaonik je tamno siv
4) Nacrtajte trougao od zvjezdice postavljanjem broja zraka na 3

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

5) Nacrtajte mačku koristeći olovku i jednostavne oblike

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 je na posebnom sloju) ovako:

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

To je to, sada da sačuvamo.
Pogledajmo postavke čuvanja

Slika 6 – Sačuvaj

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

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

Slika 7 – Uvezi kao sastav

To je to, uvezeno.
Sada da vidimo šta imamo. Dvaput kliknite na kompoziciju , tako da se otvori i da vidimo slojeve (ako je sve urađeno kako treba, biće nekoliko slojeva). Dobili smo ovo, vidi sliku

Slika 8 – Otvorena kompozicija

A sada smo ovdje zbog animacije.

Animacija u After Effects
Postavite tačku rotacije na vrhu strelice pomoću alata Pan Behind Tool (prečica - Y). Samo uzimamo poen i pomeramo ga tamo gde je potrebno. Kao rezultat to će izgledati ovako..

Slika 9 – Alat za pomicanje i slojevi

To je to, sada idemo na slojeve za animaciju.
Trebat će nam sloj Arrow i Head_cat.
Počnimo sa strelicom.
Proširimo listu, pronađemo je i kliknemo na sat. Dakle, postavili smo prvu tačku na nula sekunde. Animacija će trajati ukupno 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.
Hajde da proširimo head_cat i pronađemo Pozicija.
Ovdje će biti 4 tačke.
Samo će posljednja koordinata biti promijenjena bez utjecaja na ostale.

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, uvlači mu glavu, zadržava se neko vrijeme u tom položaju, a zatim ga vraća na svoje mjesto.

Završna faza

Proizvodnja
Od svog rada morate stvoriti gotov proizvod.
Idemo na meni - Dodaj u red za renderiranje
Otvoriće 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 (samo ne zaboravite navesti putanju).
To je sve.

Prozirni GIF u Adobe Illustratoru je napravljen 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 je po defaultu cijela stranica uključena 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 na veličinu stranice) i kliknite na dugme Primijeni.

Zatim odaberite GIF sa liste za odabir formata i potvrdite 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 na traci sa alatkama na lijevoj strani prozora Kapaljka za oči(pipeta).

Postoje dva načina za definiranje boja. Najlakši način je da navedete boju pomoću kapaljke direktno na slici - nakon toga će boja biti istaknuta na tablici 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 kvadrat u boji. I u prvom i u drugom slučaju, ako trebate odabrati nekoliko boja, morate raditi s pritisnutim tipkom Shift (ili Ctrl). Nakon odabira boje, potrebno je dati instrukciju 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, morate je odabrati u tabeli boja, a zatim ponovo kliknuti na ikonu Mapira odabrane 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 (slika ispod). Postoje četiri izbora: Bez prozirnosti dither, Diffusion Transparency Dither, Pattern Transparency Dither i Noise Transparency Dither. U režimu difuznog algoritma, klizač postaje aktivan Iznos(Vrijednost) vam omogućava da promijenite vrijednost difuzije. Šta primijeniti u praksi? U zavisnosti od namjene i slike. Ne koristim ovu opciju i uvijek je ostavljam na zadanom - Bez Transparency Dither.

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

Danas imamo neobičnu lekciju o Adobe Illustratoru. Jer ovoga puta nećemo napraviti statičnu sliku, već pravu animaciju. Zamislite, ispostavilo se da možete crtati i crtaće koristeći Adobe Illustrator :)

A za ovo nam uopšte ne treba ništa. Pravilna organizacija slojeva i izvoz završnog rada u swf format, gdje se svaki sloj pretvara u okvir animacije. U današnjem tutorijalu nacrtat ćemo animaciju odbrojavanja u stilu retro filma. Izlaz bi trebao biti flash video sa istim odbrojavanjem.

Prvo što trebate učiniti je nacrtati sve potrebne elemente za buduću animaciju. Da bih to uradio, u zasebnom dokumentu napravio sam dva položaja okvira filma, krug za referencu, koji je izrezan na zasebne sektore, teksturu i vertikalnu ogrebotinu da dodam efekat antike, kao i sve brojeve i natpisi.

Kada su svi dijelovi našeg crtića spremni, možemo početi kreirati samu animaciju. Radi praktičnosti, bolje je to učiniti u novom dokumentu. U ovom slučaju, naši slojevi će igrati ulogu okvira animacije. I u prvom sloju samo trebate kopirati kadar filma. Postavite ga na sredinu svog radnog prostora.

Sada kreirajte drugi sloj i kopirajte okvir filma u njega, u kojem su rupe duž rubova napravljene sa pomakom. Takođe je potrebno postaviti u centar.

Iz ova dva sloja već možete dobiti animaciju filma u pokretu. Ali kasnije će nam trebati mnogo više slojeva. Dakle, odaberite prva dva sloja, idite na opcije panela i napravite kopiju slojeva.

Na sličan način trebamo akumulirati 12 slojeva filmskih kadrova koji definiraju njegovo kretanje.

Sada imamo čitavu gomilu slojeva i svi su vidljivi. U smislu da gornji slojevi blokiraju donje, što nije sasvim zgodno za rad. Stoga možete isključiti neke slojeve klikom na ikonu s okom lijevo od naziva sloja. Da biste isključili ili uključili sve slojeve odjednom, držite pritisnutu tipku Alt dok kliknete na ikonu oka. Uključivanjem i isključivanjem slojeva možete vidjeti tačno šta se nalazi u određenom okviru naše buduće animacije. A sada, da bismo dodali malo podrhtavanje kretanju filma, moramo malo pomjeriti rezultirajuće kadrove u različitim smjerovima. Da biste to učinili, uključite samo sloj s kojim ćete trenutno raditi, a zatim pomaknite okvir za nekoliko piksela u bilo kojem smjeru.

Kada prođete kroz sve slojeve i dodate malo pomaka, možete početi kreirati animaciju pokretnog kruga. Da biste to učinili, kopirajte krug koji se sastoji od sektora iz dokumenta s dijelovima crtanog filma i stavite ga na prvi sloj na okvir filma.

Ako poništite odabir kruga, on će izgledati kao jedna cjelina. To je upravo ono što nam treba.

Ali budući da se sastoji od pojedinačnih sektora, možete kreirati animaciju vrlo brzo i jednostavno promjenom njihove boje. Da biste to učinili, kopirajte ovaj krug u drugi sloj i učinite prvi sektor svjetlijim. Sjećate se da se naš film trese dok se kreće, tako da uopće nije potrebno postaviti krug tačno u centar kadra. Postavite na oko.

Na sličan način, morate kopirati krug u svaki sljedeći sloj, dok slikate jedan sektor više svjetlijom bojom nego prethodni put. Zajedno, ovih 12 slojeva čine animaciju filma koji se kreće s krugom punjenja.

Zatim moramo dodati teksturu našim slojevima. Uključite prvi sloj i kopirajte teksturu iz originalne datoteke sa rezervnim dijelovima.

Zatim uključite sljedeće slojeve jedan po jedan i kopirajte tu istu teksturu. Da bi izgledao drugačije u svakom kadru, jednostavno ga zarotirajte za 90 stepeni. Kao što ste možda pretpostavili, moramo dodati teksturu na svih 12 okvira.

Ako ste se već prilično umorili od kopiranja, onda vas mogu ugoditi - ostalo je jako malo. Najteži dio je gotov. Sve što je ostalo je dodati vertikalne ogrebotine i to je skoro to. Da bismo to učinili, ponovo kopiramo originalnu ogrebotinu i stavimo je na proizvoljno mjesto u nekoliko slojeva. U mom slučaju, ogrebotine se pojavljuju u samo dva sloja.

Sada kada je glavni ciklus sa filmskom animacijom spreman, ostaje samo da se zbroje brojevi. Pošto naše odbrojavanje ide od 3 do 1 plus riječ Go!!!, potrebno nam je još više slojeva. Ne 12, već čak 48. Da biste to učinili, trebate napraviti još tri kopije gotovih slojeva s filmskom animacijom.

A onda je sve jednostavno. Uključite prvi sloj i tamo stavite broj tri.

Zatim morate kopirati ovu figuru u sljedeće slojeve dok se animacija kruga ne završi. Kada dođete do sljedeće kopije slojeva, gdje će krug ponovo biti potpuno popunjen, morate staviti broj dva. Na isti način kopirajte broj jedan u željene slojeve. A kada dođete do završnih slojeva za natpis Go!!!, jednostavno obrišite krug prije nego što kopirate natpis na željeni sloj.

To je sve za animaciju. Ovdje je glavna stvar da se ne zbunite. Možete slojevima dati neka zgodna imena, ali sam bio malo lijen :) A takođe, kada završite posao, obavezno uključite sve slojeve klikom na ikonu oka.

U prozoru postavki izvoza, obavezno postavite Izvezi kao: AI slojeve na SWF okvire. Ova opcija pretvara Illustrator slojeve u okvire animacije. Zatim kliknite na dugme Napredno.

Dodatna podešavanja će se otvoriti. Ovdje trebate podesiti Frame Rate. Imam 12 sličica u sekundi. Polje za potvrdu Looping je odgovorno za cikličnu animaciju. Zahvaljujući tome, video će se puštati u krug. A opcija Layer Order: Bottom Up reproducira slojeve ilustratora odozdo prema gore na panelu. Upravo tako smo izgradili našu animaciju.

Izlaz je flash video sa našom animacijom.

Sada vidite da pravljenje jednostavne animacije u Adobe Illustratoru nije tako teško kao što se čini na prvi pogled.

Ali da biste kreirali dugačke video zapise ili interaktivne aplikacije, ipak je bolje koristiti Adobe Flash ili druge flash uređivače. Na primjer, napravio sam ovu mačku u starom Macromedia Flash-u koji sam iskopao iz svog rada.

Također, u posljednje vrijeme HTML5 i CSS3 se sve više koriste za kreiranje animacije. Ovaj kod podržavaju moderni pretraživači i ne zahtijeva korištenje flash playera.

Roman aka dacascas posebno za blog Notes od Microstock Illustrator

Pretplatite se na naš newsletter kako ne biste propustili ništa novo:

Sada kreirajte drugi sloj i kopirajte okvir filma u njega, u kojem su rupe duž rubova napravljene sa pomakom. Takođe je potrebno postaviti u centar.

Iz ova dva sloja već možete dobiti animaciju filma u pokretu. Ali kasnije će nam trebati mnogo više slojeva. Dakle, odaberite prva dva sloja, idite na opcije panela i napravite kopiju slojeva.

Na sličan način trebamo akumulirati 12 slojeva filmskih kadrova koji definiraju njegovo kretanje.

Ako poništite odabir kruga, on će izgledati kao jedna cjelina. To je upravo ono što nam treba.

Zatim moramo dodati teksturu našim slojevima. Uključite prvi sloj i kopirajte teksturu iz originalne datoteke sa rezervnim dijelovima.

A onda je sve jednostavno. Uključite prvi sloj i tamo stavite broj tri.

U prozoru postavki izvoza, obavezno postavite Izvezi kao: AI slojeve na SWF okvire. Ova opcija pretvara Illustrator slojeve u okvire animacije. Zatim kliknite na dugme Napredno.

Izlaz je flash video sa našom animacijom.

Sada vidite da pravljenje jednostavne animacije u Adobe Illustratoru nije tako teško kao što se čini na prvi pogled.

Također, u posljednje vrijeme HTML5 i CSS3 se sve više koriste za kreiranje animacije. Ovaj kod podržavaju moderni pretraživači i ne zahtijeva korištenje flash playera.

Roman aka dacascas posebno za blog

Pretplatite se na naš newsletter kako ne biste propustili ništa novo:

Optimizacija web grafike

Grafičke informacije se prenose mnogo sporije od tekstualnih informacija, a vrijeme učitavanja slika je proporcionalno veličini njihovih grafičkih datoteka. Stoga je za brzo učitavanje web stranica potrebna mala veličina grafičkih slika koje su ugrađene u njih, što se postiže njihovom optimizacijom. Optimizacija slike se podrazumeva kao njena konverzija, obezbeđivanje minimalne veličine datoteke uz zadržavanje kvaliteta slike zahtevanog u ovom slučaju, što se postiže prvenstveno smanjenjem broja boja u grafičkim slikama, korišćenjem komprimovanih i posebnih formata datoteka, i optimizacijom parametara kompresije za pojedinačne fragmenti slike.

Illustrator ima ugrađene alate za optimizaciju slike koji proces optimizacije čine brzim i efikasnim uz razne metode pregleda. Pregled daje prilično točnu ideju o tome kako će optimizirana slika izgledati u stvarnom vremenu, što vam pomaže da procijenite rezultat optimizacije i uspješno odaberete prave postavke. I možete optimizirati kako slike kreirane direktno u Illustratoru, tako i druge, na primjer, fotografije koje bi trebale biti postavljene na web stranicu.

Parametri optimizacije se postavljaju u prozoru Sačuvaj za Web(Sačuvaj za Web), poziva se istoimenom komandom iz menija File(File). Program vam nudi korištenje jednog od četiri načina pregleda, ali dva su najprikladnija za procjenu kvaliteta optimizacije:

2-Up(dve opcije) istovremeno gledanje originalne i optimizovane slike u skladu sa navedenim postavkama (slika 1);
4-Up(četiri opcije) U ovom režimu, okvir za prikaz je podeljen na četiri prozora (slika 2) za prikaz originalne slike i tri verzije optimizovane: prva verzija se kreira na osnovu podešenih vrednosti optimizacije, a druge dve su varijacije trenutnih postavki optimizacije.

Oba režima vam omogućavaju da značajno uštedite vreme na pronalaženju najbolje opcije optimizacije, jer eliminišu potrebu za čuvanjem slika sa različitim postavkama optimizacije i njihovim naknadnim vizuelnim poređenjem. Osim toga, moguće je procijeniti ne samo kvalitetu optimizirane slike, već i njenu veličinu i vrijeme učitavanja pod različitim opcijama povezivanja. Poređenja radi, najpogodniji način rada je 4-Up (četiri opcije), koji vam omogućava da vizuelno procenite efekat kompresije ili smanjenja palete na kvalitet slike i njenu veličinu i na kraju odredite najbolje parametre optimizacije.

Illustrator vam omogućava da optimizirate web grafiku ne samo u GIF, JPG, PNG-8 i PNG-24 formatima, već iu SWF i SVG. Indeksirane slike koje imaju mali broj boja pohranjuju se u GIF formatu. JPG format se koristi za spremanje slika u punoj boji i sivih tonova, fotografija i grafike bogate bojama, kao što su gradijentne ispune. Za slike u punoj boji sa prozirnim područjima koristi se PNG format koji vam omogućava da pohranite i indeksirane i slike u punoj boji, dok je u PNG-8 formatu maksimalni mogući broj boja optimizirane slike 256, a u u formatu PNG-24 slika može imati milione boja, pa je stoga slična JPEG formatu. Razlika između PNG-24 i JPEG-a je u tome što metoda kompresije koja se koristi za optimizaciju slika u PNG-24 formatu ne dovodi do gubitka kvalitete, ali kao rezultat se povećava veličina datoteke. SVG i SWF formati kombinuju grafiku, tekst i interaktivne komponente i takođe se mogu optimizovati.

Pogledajmo konkretan primjer optimizacije slike. Recimo da je logotip web stranice razvijen u Illustratoru (slika 3), prvobitno sačuvan u AI formatu. Pokušaj da se odmah optimizira za web neće dovesti do ničega dobrog, jer će u tom slučaju slika biti automatski izrezana, što neće uzeti u obzir pravi položaj rezultirajućeg natpisa kao rezultat deformacije (slika 4 i 5).

Stoga, pokušajmo da izvezemo logo u PSD format pomoću naredbe Datoteka=>Izvoz(File=>Export) Veličina kreirane slike će biti 143 KB. Otvorite rezultirajuću PSD datoteku i koristite naredbu Datoteka=>Sačuvaj za Web(Datoteka=>Sačuvaj za Web). Uzimajući u obzir ograničen broj boja uključenih u sliku, u ovom slučaju je optimalan GIF format, za čije specifične postavke treba odlučiti. Eksperimentiranjem s postavkama možete se uvjeriti da najbolji kvalitet proizvodi zadani algoritam kompresije odabran od strane programa Selektivno(Selektivno). Što se tiče anti-aliasinga, s obzirom na prisutnost gradijenta ispune, bolje je odabrati algoritam s generiranjem šuma Buka(Sl. 6). Veličina rezultirajuće datoteke za optimizaciju iznosiće 6,729 KB (slika 7), dok će transparentnost pozadine biti očuvana, što je lako provjeriti snimanjem slike u GIF formatu zajedno sa HTML datotekom (slika 8). Kao rezultat toga, u ovom primjeru, datoteke emblem.html i emblem.gif su dobijene u folderu Primer1.

Dugmad

Neizostavan specifični element dizajna bilo koje web stranice su dugmad za grafičke kontrole. Jednostavno je nemoguće zamisliti stranicu bez njih. Crtanje dugmadi danas je postalo poseban žanr, a Illustrator vam omogućava da kreirate najsloženije opcije. Na primjer, dugmad dizajnirana kao mrežasti objekti i/ili sa maskama za prekrivanje izgledaju mnogo impresivnije od običnih.

Razmislite o mogućnosti kreiranja okruglog, konveksnog dugmeta u Illustratoru. Nacrtajte vektorski objekat u obliku kruga ispunjenog proizvoljnom bojom (slika 9) i konvertujte ga u mrežu pomoću naredbe Object=>Kreiraj Gradient Mesh(Object=>Create Gradient Mesh) navođenjem četiri reda i četiri kolone i na listi Izgled(Prikaži) odabirom opcije Do centra Istaknite(Highlight) jednako 60 (slika 10). Odaberite alat Direktan odabir i kliknite u gornjem levom uglu objekta, birajući tačke sidrišta koje se tamo nalaze (slika 11). Promijenite boju odgovarajuće ćelije u bijelu odabirom na paleti Swatchevi(Sl. 12).

Uzmi alat Elipsa(Elipsa), stavite marker miša u centar prethodno kreiranog kruga i, držeći pritisnute tipke, Alt I Shift, razvucite novi krug preko starog tako da bude veći od starog za 1-2 piksela sa svih strana. Dajte mu crni okvir ( Moždani udar) širine 1-2 piksela i ispunite ga radijalnim gradijentom u smjeru od crvene prema bijeloj (slika 13). Prevucite kreirani vektorski objekat 1-2 piksela udesno i dole, a zatim, bez uklanjanja selekcije, kliknite desnim tasterom miša na njega i izaberite komandu iz kontekstnog menija Raspored=>Pošalji nazad(Uredi=>Pošalji nazad). Rezultat će biti prazno za dugme, prikazano na Sl. 14.

U pravilu, na bilo kojoj web stranici postoji nekoliko gumba istog tipa, koji se razlikuju, na primjer, samo u smjeru strelica nacrtanih na njima, što ukazuje na smjer kretanja po web mjestu. Razmotrimo najjednostavniji slučaj dva dugmeta, od kojih će jedno, sa strelicom nadole, značiti prelazak na sledeću stranicu, a dugme sa strelicom nagore značiti prelazak na prethodnu. Kao prazan dio strelice, uzmite pravilan trokut nacrtan alatom Poligon(Polygon) zasjenjen crnom bojom i također dizajniran kao mrežasti objekt za dodatni efekat. Pomaknite strelicu na dugme i podesite položaj svih objekata jedan u odnosu na drugi pomoću odgovarajućih dugmadi na paleti Poravnajte(Poravnanje). Prvo od rezultirajućih dugmadi prikazano je na Sl. 15. Napravimo kopiju sloja sa dugmetom odabirom komande Duplikat sloja Slojevi, kao rezultat dobijamo dva identična sloja. Zatim odaberite strelicu na kopiji sloja i zarotirajte je za 180° odabirom naredbe iz kontekstnog izbornika Transform=>Rotiraj Transformacija=>Rotacija. Dobićemo isto dugme kao što je prikazano na sl. 16. Imajte na umu da je mnogo zgodnije pohraniti sve iste tipove dugmadi za jedan projekat u jednu datoteku na različitim slojevima, što je prikazano u ovom slučaju.

Sada morate da sačuvate optimizovane verzije svakog dugmeta. Prvo učinite donji sloj nevidljivim, u tom slučaju će gumb na gornjem sloju biti sačuvan. Odaberite tim Datoteka=>Sačuvaj za Web(File=>Save for Web), konfigurišite parametre optimizacije dugmeta, na primer, kao što je prikazano na Sl. 17, kliknite na dugme Sačuvaj(Sačuvaj) i unesite naziv datoteke. Konačno sačuvano dugme je prikazano na Sl. 18. Sada vratite vidljivost donjem sloju, učinite gornji sloj nevidljivim i sačuvajte drugo dugme na isti način, dajući mu drugačije ime. Rezultat je prikazan na sl. 19.

Sada ostaje samo da se uverite da dugmad izgledaju sasvim prihvatljivo na Web stranici i da ih postavite na prilagođenu stranicu (slika 20). Kao rezultat toga, u ovom primjeru, datoteka Primer2.html i dvije grafičke slike su dobijene u folderu slika (fascikla Primer2).

Ako želite, lako je pretvoriti dugme u isečak tokom procesa optimizacije. U ovom slučaju, nakon odabira naredbe Datoteka=>Sačuvaj za Web(File=>Save for Web) i podešavanje parametara optimizacije treba izabrati iz palete alata Slice Select(Odabir kriške) i dvaput kliknite na sliku, koja će se na kraju automatski pretvoriti u krišku sa serijskim brojem 1 (Sl. 21). Ponovnim dvostrukim klikom otvorit će se prozor. Slice Options(Slice Options), u kojem ćete morati navesti vezu i po želji promijeniti naziv slice-a (slika 22), a zatim sačuvati optimiziranu sliku. Rezultat će u ovom slučaju biti datoteke Primer3.html (slika 23) i Primer3.gif (fascikla Primer3).

Interaktivni elementi

Jedan od načina da oživite stranicu je uvođenje elemenata dizajna koji mijenjaju svoj izgled (ili stanje) ovisno o ponašanju miša ili, rjeđe, kada se dogodi neka druga situacija: skaliranje, pomicanje, učitavanje, greške itd.

Među takvim elementima najpoznatiji su rollovers (od engleskog roll over roll over, prevrnuti) elementi koji mijenjaju izgled pod utjecajem miša. Primjeri tipičnih prevrtanja su animirana dugmad. Rollovers se često koriste prilikom kreiranja drugih elemenata za navigaciju web stranice. U stvarnosti, svako prevrtanje nije jedna, već nekoliko (do četiri) slike, od kojih svaka odgovara određenom događaju. Glavni događaji se smatraju sledećim: Normalno normalno stanje, Prelazak kursora miša preko elementa i Dole pritiskanje levog tastera miša kada se kursor pomera preko njega. Teoretski, događaji kao što su Klik otpuštanje levog dugmeta miša nakon klika, Gore nakon otpuštanja dugmeta, Izlaz prilikom napuštanja aktivne zone mogu biti uključeni. Međutim, u praksi su često ograničeni na promjenu elementa samo za prva tri ili čak dva događaja.

Klasična prevrtanja

U klasičnom smislu, rollover je niz grafičkih slika u GIF formatu i odgovarajućeg HTML koda, zahvaljujući kojem, ovisno o ponašanju miša, jedna slika zamjenjuje drugu u prozoru pretraživača.

Illustrator nije namijenjen direktnom kreiranju prevrtanja u klasičnom smislu, ali može pomoći u razvoju početnih elemenata za njih. Ideja u ovom slučaju je kreiranje sloja sa slikom koja odgovara prvom događaju. Zatim napravite kopiju sloja i transformirajte sliku da odgovara drugom događaju i tako dalje. Rezultirajuća višeslojna slika se eksportuje u PSD datoteku sa očuvanim slojevima, na osnovu čega se kreira rollover u programu Image Ready. Prednost korištenja Illustrator-a, kao iu mnogim drugim slučajevima, je niz njegovih zanimljivih karakteristika koje nisu dostupne u drugim softverima, zajedno sa pogodnošću transformacije vektorske grafike.

Pokušajmo napraviti prevrtanje u obliku natpisa koji mijenja boju ovisno o ponašanju miša. Otvorite Illustrator i kreirajte oblik u obliku zaobljenog pravougaonika ispunjenog crnom bojom (slika 24), napravite njegovu kopiju i postavite je u slobodan dio ekrana. Pretvorite prvu kopiju pravougaonika u mrežasti objekat sa istaknutim u sredini (komanda Object=>Kreiraj Gradient Mesh Objekat => Kreiraj mrežu gradijenta), navodeći četiri reda i deset kolona (slika 25). Aktivirajte drugu kopiju pravougaonika i postavite je na gradijentnu ispunu otprilike kao što je prikazano na Sl. 26. Prekrijte gradijent objekat na vrh mreže, smanjite neprozirnost gradijent objekta na oko 80%, a veličinu za oko 1 piksel da biste na kraju simulirali efekat neravnine. I onda odštampajte natpis na vrhu objekata. U svom izvornom obliku, neka ima bijelu boju, koja će odgovarati Normalnom stanju (Sl. 27), a onda kada se promijeni stanje prevrtanja, boja natpisa će se promijeniti, na primjer, u zelenu kada marker miša lebdi iznad njega (preko stanja) i postaje plava kada se pritisne tipka miša (stanje dolje).

Obratite pažnju na paletu Slojevi u ovoj fazi postoji samo jedan sloj u njemu. Napravite dvije kopije ovog sloja koristeći naredbu Duplikat sloja(Duplicate Layer) iz menija palete Slojevi, paleta će imati tri sloja (slika 28). Zatim u prvoj kopiji sloja promijenite boju natpisa u zelenu, a u drugoj kopiji u plavu (Sl. 29). Kao rezultat toga, dobit će se potrebno prazno mjesto za prevrtanje.

Izvezite kreiranu sliku u PSD format uz očuvanje slojeva pomoću naredbe Datoteka=>Izvoz(File=>Export) i odabirom RGB modela boja (slika 30). Otvorite kreiranu PSD datoteku u programu ImageReady (sl. 31 i 32). Kreirajte okvire na osnovu slojeva odabirom naredbe Napravite okvire od slojeva(Kreirajte okvire iz slojeva) iz menija palete Animacija. Prozor animacije će izgledati kao na sl. 33. Istovremeno u paleti Prevrtanja U početku će se stvoriti jedno normalno stanje.

Zatim u prozoru Animacija odaberite okvir koji odgovara induciranom stanju, dok je u paleti Slojevi sloj će biti automatski odabran Kopija sloja 1(Sl. 34). Idi na paletu Prevrtanja i kliknite na dugme Kreirajte stanje preokretanja(Kreirajte stanje prevrtanja) sl. 35, što će rezultirati uslovom Over State u paleti Prevrtanja(Sl. 36). Kreirajte državu na isti način Down State. Aktiviraj stanje Normalno u paleti Prevrtanja i izbrišite u paleti Animacija svi okviri osim onog koji mora odgovarati stanju Normalno. Kao rezultat, za svako stanje prevrtanja u paleti Animacija postojaće samo jedan okvir (sl. 37, 38 i 39).

Rice. 38. Pogled na sliku, prozor animacije i palete slojeva i okretanja za stanje preko stanja

Provjerite rezultat klikom na dugme Pregled u zadanom pretraživaču(Pregled pregledača) na traci sa alatkama i odlazak u prozor pretraživača (Sl. 40). Nakon toga, sačuvajte datoteku pomoću naredbe Datoteka=>Optimizirano spremanje(File=>Save with optimization) i specificiranjem opcije HTML i slike (*.html). Kao rezultat toga, u ovom primjeru, datoteka Primer4.html i niz grafičkih slika su dobijeni u folderu slika.

Rice. 40. Prozor pretraživača sa Rollover elementom

SVG rollovers

Sve popularniji SVG (Scalable Vector Graphics) format, kreiran na osnovu XML standarda, takođe vam omogućava da dobijete razne interaktivne elemente, posebno rollovers, ali u praksi se to implementira potpuno drugačije. Vrijedi napomenuti da kreiranje interaktivnih SVG rollovera, za razliku od klasičnih, kada se odgovarajući HTML kod generiše potpuno automatski, zahtijeva poznavanje jezika JavaScript i razumijevanje osnovnih principa objektno orijentisanog programiranja.

Posebna paleta je dizajnirana za rad sa SVG objektima SVG interaktivnost, koji se lako može otvoriti pomoću naredbe Prozor=>SVG interaktivnost(Prozor=>SVG interaktivnost) sl. 41.

Razmotrimo ovu opciju za kreiranje prevrtanja na primjeru interaktivnog gumba, boja natpisa na kojem će se promijeniti iz crne u plavu kada pređete mišem i ponovo se pretvoriti u crnu kada miš napusti aktivnu zonu.

Napravite pravougaoni gumb sa zaobljenim rubovima i odaberite odgovarajuću gradijentnu ispunu za njega, na primjer kao što je prikazano na sl. 42. Podesite prozirnost dugmeta u paleti Transparentnost(Transparentnost) u ovom primjeru vrijednost parametra Opacity(Neprozirnost) je postavljena na 50%. Napravite kopiju dugmeta, popunite ga tamnozelenom (Slika 43), a zatim ga konvertujte u mrežasti objekat pomoću naredbe Object=>Kreiraj Gradient Mesh(Object=>Create Gradient Mesh) navođenjem četiri reda i deset stupaca i na listi Izgled(Prikaži) odabirom opcije Do centra(Prema centru) i postavljanje vrijednosti Istaknite(Highlight) jednako 100. Smanjite neprozirnost sloja sa mrežastim objektom na oko 40% (slika 44). Postavite mrežasti objekat na gradijentni objekat i dugme će ličiti na onaj prikazan na Sl. 45.

Rice. 44. Pretvorite kopiju dugmeta u mrežasti objekat

Dopunite dugme predviđenim natpisom i podesite njegov položaj pomoću odgovarajućih dugmadi na paleti Poravnajte(Poravnanje). Rezultirajuća slika će sadržavati jedan sloj sa tri objekta postavljena jedan na drugi (slika 46). Planirani događaji će se odnositi na tekstualni objekat, pa radi praktičnosti promijenite njegovo ime u Tekst dvostrukim klikom na objekt i unosom novog imena. Slično promijenite naziv sloja iz Od sloja 1 do sloja(Sl. 47).

Obrada događaja uključuje korištenje JavaScript procedura, tako da morate uključiti datoteku koja opisuje ove procedure. Zove se Events.js i čuva se na disku u fascikli Sample Files\Sample Art\SVG\SVG kada instalirate Adobe Illustrator. Da biste uključili datoteku Events.js, koristite naredbu JavaScript datoteke SVG interaktivnost(Sl. 48). Zatim morate kliknuti na dugme Dodati(Dodaj) i pronađite željenu datoteku na tvrdom disku. Kada se njegovo ime pojavi u polju URL(Sl. 49), kliknite na dugme Gotovo(Izači).

Rice. 48. Odabir komande JavaScript datoteke

Nakon toga, trebali biste definirati reakciju na događaje miša za objekt Tekst. Odaberite objekt Tekst u polju Događaj(Događaj) palete SVG interaktivnost odaberite događaj onmouseover elemColor(evt, "Text", "#3333FF") to će značiti da kada je miš iznad objekta Tekst njegova boja će se promijeniti u plavu (Sl. 50). Da bi se boja teksta promijenila u crnu nakon što miš napusti aktivno područje, morat ćete kreirati još jedan događaj onmouseout izaberite ga u polju Događaj(Događaj) palete SVG interaktivnost. Zatim u traku sa radnjama unesite tekst elemColor(evt, "Tekst", "#000000") to će uzrokovati da se boja vrati u crnu (Sl. 51).

Rice. 51. Konačni izgled SVG palete interaktivnosti za objekt Tekst

Sačuvajte kreirani rollover kao SVG datoteku pomoću naredbe Datoteka=>Sačuvaj kao(Datoteka=> Vrsta datoteke formatu SVG, a zatim postavljanje opcija za čuvanje SVG datoteke kao što je prikazano na Sl. 52. Nakon snimanja dobićete samo jedan fajl sa ekstenzijom SVG, a ne dva, kao u slučaju klasičnog rollover-a, u ovom slučaju je primljena datoteka Primer5.svg (Primer5 folder). Međutim, da bi rollover zaista funkcionisao, morate dodatno kopirati datoteku Events.js sa opisom JavaScript procedura u fasciklu sa SVG datotekom. Nakon toga možete provjeriti funkcionalnost prevrtanja; rezultat će izgledati kao što je prikazano na Sl. 53.

SVG animacija

SVG format se takođe može koristiti za prenošenje animacije. Pokušajmo napraviti jednostavan animirani element (u ovom slučaju to će biti informacija o kompaniji), koji će se pojaviti na ekranu kada pređete mišem preko odgovarajućeg grafičkog objekta i nestati kada uklonite miša iz interaktivnog elementa.

Kreirajmo otprilike sljedeću seriju grafičkih i tekstualnih objekata, kao što je prikazano na Sl. 54. Preimenujmo sve kreirane objekte na zgodan način uzastopnim klikom na naziv sljedećeg objekta u paleti Slojevi i unošenje željenog naziva (Sl. 55). Imajte na umu da oni istaknuti na sl. 56 objekata Tekst1, Tekst2, Tekst3 I Put1 uvijek će biti vidljivo, a svi ostali samo kada pređete mišem preko objekta Tekst1.

Rice. 54. Originalni pogled na sliku

Uključite datoteku Events.js sa opisom JavaScript procedura koristeći naredbu JavaScript datoteke(JavaScript datoteke) iz palete SVG interaktivnost pritiskom na dugme Dodati(Dodaj) navođenjem željene datoteke na tvrdom disku i klikom na dugme Gotovo(Izači).

Definirajte odgovor na događaje miša za objekt Tekst1. Odaberite objekat Tekst, na terenu Događaj(Događaj) palete SVG interaktivnost odaberite događaj onmouseover i u red ispod unesite tekst elemShow(evt, "Tekst4"); elemShow(evt, "Put2"). Kao rezultat, kada je miš iznad objekta Tekst1 objekti će postati vidljivi Tekst 4 I Put 2. Imajte na umu da ako se nekoliko radnji mora izvršiti kada se događaj dogodi, one moraju biti navedene pomoću znaka “;”. Zatim izvršite sličnu operaciju za događaj onmouseout, unošenjem teksta za njega, što će značiti sakrivanje objekata (Sl. 57).

Sačuvajte rezultat kao SVG datoteku pomoću naredbe Datoteka=>Sačuvaj kao(Datoteka=>Sačuvaj kao), navodeći naziv datoteke, birajući u polju Vrsta datoteke SVG formatu, a zatim postavljanje opcija za čuvanje SVG datoteke u skladu sa sl. 58. Nakon pohranjivanja, datoteka Primer6.svg će biti primljena (Primer6 folder). Ne zaboravite kopirati datoteku Events.js u fasciklu sa ovom datotekom. Ako zatim pokrenete kreiranu datoteku, vidjet ćete rezultat prikazan na Sl. 59. Ovo je skoro ono što vam treba. Jedina stvar koja nije bila uključena u naše planove je prvobitni izgled objekata Tekst 4 i Put 2 prilikom utovara. Da biste se riješili ovog nedostatka, odaberite oba podatka objekta odjednom i kreirajte akciju za njih elemHide(evt, "Tekst4"); elemHide(evt, "Path2") po događaju onload(Sl. 60). Ponovo sačuvajte datoteku i uvjerite se da su objekti sada Tekst 4 I Put 2 vidljivo samo kada pređete mišem preko objekta Tekst1.

GIF animacija

Bilo koja web stranica je nezamisliva bez web animacije, uključujući animirane gifove. Jedna od opcija za njihovo kreiranje je korištenje Adobe ImageReady aplikacije, koja između ostalog omogućava kreiranje animacije iz slojeva. U ovom slučaju, sama višeslojna slika može se pripremiti u različitim aplikacijama, uključujući Adobe Illustrator.

Vrlo je lako kreirati animaciju zasnovanu na elementima iz palete Simboli(Simboli) otvara naredba Prozor=>Simboli(Prozor=>Simboli) ili iz jedne od biblioteka simbola koja se može otvoriti pomoću naredbe Prozor=>Biblioteke simbola(Prozor=>Biblioteke simbola).

Na primjer, pokušat ćemo povećati veličinu bilo kojeg objekta simbola; ključne faze procesa povećanja objekta moraju biti postavljene na odvojenim slojevima. Prvo jednostavno postavite objekte simbola jedan iznad drugog, a zatim povećajte veličinu svakog sljedećeg objekta, na primjer kao što je prikazano na sl. 61. Konačno u paleti Slojevi kreiraće se jedan sloj sa više objekata (slika 62). Ako ovu sliku direktno izvezete u PSD format, to neće dati ništa, jer postoji samo jedan sloj, a naravno, kada otvorite PSD datoteku u programu ImageReady, postojaće i samo jedan sloj. Stoga prvo morate postaviti objekte na različite slojeve. To se može učiniti na različite načine; najlakši način je prvo odabrati sloj Sloj 1 u paleti slojeva i koristite naredbu Otpustite na sloj(Otpustite u slojeve). Rezultat će biti da će svaki od objekata biti premješten u svoj vlastiti sloj, ali će svi biti ugniježđeni u sloju Sloj 1. Stoga ćete morati ručno prevući sve ugniježđene slojeve na vrh palete slojeva tako da budu iznad sloja Sloj 1, a zatim sloj koji je postao prazan Sloj 1 jednostavno uklonite (Sl. 63). Izvezite sliku u PSD format koristeći naredbu Datoteka=>Izvoz(File=>Export) sa postavkama kao na sl. 64.

Učitajte kreiranu PSD datoteku u program ImageReady (sl. 65 i 66). Otvorite meni palete AnimacijaNapravite okvire od slojeva(Kreirajte okvire od slojeva). Kao rezultat, biće kreirano pet okvira, od kojih će svaki odgovarati svom sloju i prozoru palete Animacijaće izgledati kao na sl. 67.

Nakon toga podesite trajanje svakog od kreiranih okvira u ovom slučaju, trajanje za sve okvire je postavljeno na 0,2 s. A zatim sačuvajte animaciju sa optimizacijom pomoću naredbe Datoteka=>Optimizirano spremanje(Datoteka=>Sačuvaj uz optimizaciju). Rezultirajući rezultat može ličiti na sl. 68.

Još je zgodnije dobiti praznine, koje se onda lako mogu pretvoriti u animaciju u ImageReadyju, da biste koristili funkcije Live Blends Illustrator programi. Ova kombinovana upotreba Illustrator i ImageReady značajno ubrzava proces kreiranja GIF animacija.

Na primjer, nacrtajte dva proizvoljna raznobojna objekta, a zatim ih povežite spojnom vezom s odgovarajućim parametrima (Sl. 69). Nemoguće je koristiti ovu datoteku direktno za kreiranje animacije, jer je slika na jednom sloju (Sl. 70). Stoga ćete prvo morati postaviti svaki element blend objekta na poseban sloj. Da biste to učinili u prozoru Slojevi označite liniju , aktivirajte meni palete klikom na crnu strelicu u njegovom gornjem desnom uglu i odaberite naredbu Pustite u sekvencu slojeva(Pretvorite u slojeve uzastopno) (Sl. 71). Dok držite pritisnut taster Shift, odaberite kreirane slojeve i postavite ih iznad sloja Sloj 1 a zatim izbrišite sam sloj Sloj 1, premještajući ga u kantu za otpatke, paleta slojeva će poprimiti isti oblik kao na Sl. 72.

Rice. 70. Početno stanje prozora slojeva

Izvezite kreiranu datoteku u PSD format pomoću naredbe Datoteka=>Izvoz(Datoteka=>Izvoz). Otvorite kreiranu PSD datoteku u programu ImageReady (Sl. 73). Imajte na umu da će se svi slojevi kreirani u Illustratoru pojaviti u prozoru slojeva (Sl. 74) iu prozoru Animacija Za sada će biti samo jedan okvir.

Aktivirajte meni paleta Animacija klikom na crnu strelicu u gornjem desnom uglu palete i odabirom Napravite okvire od slojeva(Kreirajte okvire iz slojeva) Kao rezultat, u ovom primjeru će biti kreirano pet okvira, a prozor palete Animacija poprimiće oblik u skladu sa sl. 75. Odaberite sve okvire dok držite pritisnut taster Shift, i postavite odgovarajuće trajanje okvira u ovom primjeru, isto vrijeme od 0,2 s se uzima za svaki okvir. Zatim sačuvajte datoteku za optimizaciju pomoću naredbe Datoteka=>Optimizirano spremanje(File=>Save with optimization), postavljanje na listi Vrsta datoteke opcija Samo slike (*.gif). Animacija će ličiti na sl. 76.

Ono što izgleda mnogo zanimljivije nije kretanje, već glatka promjena veličine blend objekata. Na primjer, možete koristiti već kreirani prijelaz blende. U ovom slučaju, nakon kreiranja zasebnih slojeva za svaki element prijelaza blende, postavite sve objekte jedan na drugi pomoću dugmadi Horizontal Align Center(Poravnajte s horizontalnim centrom) i Vertical Align Center(Poravnajte u odnosu na vertikalni centar) palete Poravnajte(Sl. 77).

Izvezite kreiranu datoteku u PSD format ( Datoteka=>Izvoz File => Export) i otvorite kreiranu PSD datoteku u programu ImageReady (Sl. 78). Kreirajte okvire animacije na osnovu slojeva ( Napravite okvire od slojeva Kreirajte okvire od slojeva) i odaberite odgovarajuće trajanje za njih (Sl. 79). A zatim, da bi animacija bila efikasnija, kopirajte postojeće okvire, ali obrnutim redoslijedom tako da se slika prvo povećava, a zatim smanjuje, i tako u krug (Sl. 80). Zatim spremite datoteku za optimizaciju ( Datoteka=>Optimizirano spremanje File=>Sačuvaj uz optimizaciju). Rezultirajuća animacija je prikazana na Sl. 81.