Kako narediti animacijo v Illustratorju. Nasveti in triki v Adobe illustratorju: Triki v Illustratorju. Možnost ustvarjanja grafike v Illustratorju (v primerjavi z Adobe Flash). Priprava datoteke SVG v Illustratorju
Optimizacija spletne grafike
Grafične informacije se prenaša veliko počasneje kot besedilo, čas nalaganja slik pa je sorazmeren z njihovo velikostjo grafične datoteke. Zato hitro nalaganje spletnih strani zahteva majhno velikost vdelanega grafične podobe, kar dosežemo z njihovo optimizacijo. Optimizacija slike se nanaša na njeno preoblikovanje, zagotavljanje minimalne velikosti datoteke ob ohranjanju v tem primeru zahtevane kakovosti slike, kar dosežemo predvsem z zmanjšanjem števila barv v grafičnih slikah, uporabo stisnjenih in posebnih formatov datotek ter optimizacijo parametrov stiskanja za posamezno sliko. fragmenti.
Illustrator ima vgrajena orodja za optimizacijo slike, s katerimi je postopek optimizacije hiter in učinkovit z različnimi metodami predogleda. Predogled daje dokaj natančno predstavo o tem, kako bo videti optimizirana slika v realnem času, kar vam pomaga oceniti rezultat optimizacije in uspešno izbrati prave nastavitve. Optimizirate lahko tako slike, ustvarjene neposredno v Illustratorju, kot druge, na primer fotografije, ki naj bi bile postavljene na spletno mesto.
Optimizacijske parametre nastavimo v oknu Shrani za splet, ki ga prikličemo z istoimenskim ukazom iz menija Datoteka. Program vam ponuja uporabo enega od štirih načinov predogleda, vendar sta dva najbolj primerna za oceno kakovosti optimizacije:
- 2-Up (dve možnosti) hkratni ogled izvirne in optimizirane slike v skladu z določenimi nastavitvami (slika 1);
- 4-Up (štiri možnosti) V tem načinu je vidno okno razdeljeno na štiri okna (slika 2) za prikaz izvirne slike in treh različic optimizirane: prva različica je ustvarjena na podlagi nastavljenih vrednosti optimizacije, druga dva sta različici trenutnih nastavitev optimizacije.
Oba načina vam omogočata, da znatno prihranite čas pri iskanju najboljše možnosti optimizacije, saj odpravljata potrebo po shranjevanju slik z različnimi nastavitvami optimizacije in njihovi poznejši vizualni primerjavi. Poleg tega je mogoče oceniti ne samo kakovost optimizirane slike, temveč tudi njeno velikost in čas nalaganja pri različnih možnostih povezave. Za primerjavo, najprimernejši način je 4-Up (štiri možnosti), ki vam omogoča vizualno oceno učinka stiskanja ali zmanjšanja palete na kakovost slike in njeno velikost ter na koncu določite najboljše parametre optimizacije.
Illustrator vam omogoča optimizacijo spletne grafike ne le v formatih GIF, JPG, PNG-8 in PNG-24, ampak tudi v formatih SWF in SVG. Indeksirane slike z majhnim številom barv so shranjene v formatu GIF. Format JPG se uporablja za shranjevanje barvnih in sivinskih slik, fotografij in barvno bogate grafike, kot so gradientna polnila. Za polnobarvne slike s prosojnimi območji se uporablja format PNG, ki omogoča shranjevanje tako indeksiranih kot polnobarvnih slik, medtem ko je v formatu PNG-8 največje možno število barv optimizirane slike 256, v formatu PNG-24 ima lahko slika na milijone barv in zato izgleda tako format JPEG. Razlika med PNG-24 in JPEG je v tem, da metoda stiskanja, ki se uporablja za optimizacijo slik v formatu PNG-24, ne povzroči izgube kakovosti, ampak se posledično poveča velikost datoteke. Formata SVG in SWF združujeta grafiko, besedilo in interaktivne komponente in ju je mogoče tudi optimizirati.
Razmislimo konkreten primer optimizacija slike. Recimo, da je bil logotip spletne strani razvit v Illustratorju (slika 3), sprva shranjen v formatu AI. Poskus takojšnje optimizacije za splet ne bo vodil do nič dobrega, saj bo v tem primeru slika samodejno obrezana, kar ne bo upoštevalo pravega položaja nastalega napisa zaradi deformacije (sl. 4 in 5).
Zato poskusimo izvoziti logotip v format PSD z ukazom File=>Export (Datoteka=>Export) velikost ustvarjene slike bo 143 KB. Odprite nastalo datoteko PSD in uporabite ukaz Datoteka=>Shrani za splet. Glede na omejeno število barv, vključenih v sliko, je v tem primeru optimalen format GIF, katerega posebne nastavitve je treba določiti. Z eksperimentiranjem z nastavitvami se lahko prepričate o tem najboljša kakovost daje privzeti algoritem stiskanja programa, Selective. Kar zadeva glajenje, je glede na prisotnost gradientnega polnila bolje izbrati algoritem s hrupom, ki ustvarja hrup (slika 6). Velikost dobljene optimizacijske datoteke bo 6,729 KB (slika 7), ohranjena pa bo prosojnost ozadja, kar je enostavno preveriti tako, da skupaj s datoteko HTML shranite sliko v formatu GIF (slika 8). Posledično sta bili v tem primeru v mapi Primer1 pridobljeni datoteki emblem.html in emblem.gif.
Nepogrešljiv poseben element oblikovanja katere koli spletne strani so grafični kontrolni gumbi. Enostavno si je nemogoče predstavljati stran brez njih. Risanje gumbov je danes postalo poseben žanr, Illustrator pa vam omogoča ustvarjanje najbolj zapletenih možnosti. Gumbi, zasnovani kot mrežasti predmeti in/ali s prekrivnimi maskami, so na primer videti veliko bolj impresivni kot običajni.
Razmislite o možnosti ustvarjanja okroglega, konveksnega gumba v Illustratorju. Narišite vektorski objekt v obliki kroga, zapolnjenega s poljubno barvo (slika 9) in ga pretvorite v mrežo z ukazom Object => Create Gradient Mesh (Object => Create a gradient mesh), pri čemer določite štiri vrstice in štiri in na seznamu Videz izberite možnost To Center Highlight enako 60 (slika 10). Izberite orodje za neposredno izbiro in kliknite v zgornji levi kot predmeta ter izberite sidrne točke, ki se nahajajo tam (slika 11). Spremenite barvo ustrezne celice v belo, tako da jo izberete v paleti Swatches (slika 12).
Vzemite orodje Ellipse, postavite oznako miške na sredino prej ustvarjenega kroga in s tipkama Alt in Shift raztegnite nov krog čez starega, tako da je 1-2 piksli večji od starega na vseh straneh. Dajte mu črno obrobo (Stroke) širine 1-2 slikovnih pik in jo napolnite z radialnim prelivom v smeri od rdeče proti beli (slika 13). Povlecite ustvarjeni vektorski predmet za 1-2 slikovnih piki v desno in navzdol, nato pa, ne da bi odstranili izbor, z desno tipko miške kliknite nanj in ven kontekstni meni izberite Razporedi=>Pošlji nazaj. Rezultat bo prazen gumb, prikazan na sl. 14.
Praviloma je na kateri koli spletni strani več gumbov iste vrste, ki se razlikujejo na primer samo v smeri puščic, ki so narisane na njih, kar označuje smer gibanja po spletnem mestu. Oglejmo si najpreprostejši primer dveh gumbov, od katerih bo eden s puščico navzdol pomenil pomik na naslednjo stran, gumb s puščico navzgor pa pomik na prejšnjo stran. Kot predlogo puščice vzemimo navaden trikotnik, narisan z orodjem Polygon, pobarvan s črno barvo in za večji učinek zasnovan tudi kot mrežast objekt. Premaknite puščico na gumb in prilagodite položaj vseh predmetov glede na drugega z ustreznimi gumbi v paleti Poravnaj. Prvi od nastalih gumbov je prikazan na sl. 15. Naredimo kopijo plasti z gumbom z izbiro ukaza Duplicate Layer Layers, kot rezultat bomo dobili dve enaki plasti. Nato izberite puščico na kopiji sloja in jo zavrtite za 180° z izbiro ukaza Transform=>Rotate Transformation=>Rotate iz kontekstnega menija. Dobili bomo enak gumb, kot je prikazano na sl. 16. Upoštevajte, da je veliko bolj priročno shraniti vse gumbe iste vrste za en projekt v eno datoteko na različnih slojih, kar je prikazano v tem primeru.
Zdaj morate shraniti optimizirane različice vsakega gumba. Najprej naredite spodnjo plast nevidno; v tem primeru bo gumb na zgornji plasti ohranjen. Izberite ukaz File=>Shrani za splet, konfigurirajte parametre optimizacije gumba, na primer, kot je prikazano na sl. 17 kliknite gumb Shrani in vnesite ime datoteke. Končno shranjen gumb je prikazan na sl. 18. Zdaj vrnite vidnost spodnji plasti, naredite zgornjo plast nevidno in na enak način shranite drugi gumb ter mu dajte drugo ime. Rezultat je prikazan na sl. 19.
Sedaj ostane le še, da se prepričamo, da so gumbi videti povsem sprejemljivo na spletni strani, in jih postavimo na stran po meri (slika 20). Posledično smo v tem primeru dobili datoteko Primer2.html in dve grafični podobi v mapi s slikami (mapa Primer2).
Po želji lahko gumb med procesom optimizacije preprosto spremenite v rezino. V tem primeru morate po izbiri ukaza Datoteka=>Shrani za splet (File=>Shrani za splet) in nastavitvi optimizacijskih parametrov v orodni paleti izbrati orodje Slice Select in dvoklikniti na sliko, ki bo na koncu samodejno spremeni v rezino z zaporedno številko 1 (slika 21). S ponovnim dvojnim klikom se odpre okno Možnosti rezine, v katerem morate določiti povezavo in po želji spremeniti ime rezine (Slika 22), nato pa shraniti optimizirano sliko. Rezultat bosta v tem primeru datoteki Primer3.html (slika 23) in Primer3.gif (mapa Primer3).
Eden od načinov za oživitev strani je uvedba elementov oblikovanja, ki jo spremenijo videz(ali stanja) glede na obnašanje miške ali, redkeje, v primeru kakršnih koli drugih situacij: skaliranje, drsenje, nalaganje, napake itd.
Med takšnimi elementi so najbolj znani rolloverji (iz angleščine roll over prevračanje, obračanje) elementi, ki spreminjajo videz pod vplivom miške. Primeri tipičnih prevračanj so animirani gumbi. Premiki se pogosto uporabljajo pri ustvarjanju drugih navigacijskih elementov spletnega mesta. V resnici vsako prevračanje ni ena, ampak več (do štiri) slik, od katerih vsaka ustreza določenemu dogodku. Glavni dogodki se štejejo za naslednje: Normalno normalno stanje, Nad premikanjem kazalca miške nad elementom in pritiskom na levi gumb miške navzdol, ko premikate kazalec nad njim. Teoretično so lahko vpleteni dogodki, kot so Klik, sprostitev levega gumba miške po kliku, Gor po sprostitvi gumba, Izhod, ko zapustite aktivno območje. Vendar se v praksi pogosto omejijo na spremembo elementa le za prve tri ali celo dva dogodka.
Klasična prevračanjaV klasičnem smislu je prevrnitev niz grafičnih slik v formatu GIF in pripadajoče kode HTML, zahvaljujoč kateri, odvisno od obnašanja miške, ena slika zamenja drugo v oknu brskalnika.
Illustrator ni namenjen neposrednemu ustvarjanju rolloverjev v klasičnem smislu, lahko pa pomaga pri razvoju začetnih elementov zanje. Ideja v tem primeru je ustvariti plast s sliko, ki ustreza prvemu dogodku. Nato naredite kopijo plasti in preoblikujte sliko, da bo ustrezala drugemu dogodku itd. Nastala večslojna slika se izvozi v PSD datoteko z ohranjenimi plastmi, na podlagi katerih se v programu Image Ready ustvari rollover. Prednost uporabe programa Illustrator, tako kot v mnogih drugih primerih, so številne njegove zanimive funkcije, ki niso na voljo v drugih programsko opremo, v kombinaciji s priročnostjo preoblikovanja vektorske grafike.
Poskusimo ustvariti prevračanje v obliki napisa, ki spreminja barvo glede na obnašanje miške. Odprite Illustrator in ustvarite obliko v obliki zaobljenega pravokotnika, zapolnjenega s črno (slika 24), naredite njeno kopijo in jo postavite na prosti del zaslona. Pretvorite prvo kopijo pravokotnika v mrežni objekt z osvetlitvijo v sredini (ukaz Object=>Create Gradient Mesh Object=>Create Gradient Mesh), pri čemer določite štiri vrstice in deset stolpcev (slika 25). Aktivirajte drugo kopijo pravokotnika in jo nastavite na gradientno polnjenje približno tako, kot je prikazano na sl. 26. Prekrijte gradientni objekt na mrežastem, zmanjšajte motnost gradientnega predmeta na približno 80 % in velikost za približno 1 piksel, da na koncu simulirate učinek izbokline. In nato natisnite napis na vrhu predmetov. V prvotni obliki naj ima belo barvo, ki bo ustrezala normalnemu stanju (slika 27), nato pa, ko se stanje prevračanja spremeni, se bo barva napisa spremenila, na primer v zeleno, ko miškin marker se premakne nadnjo (stanje nad) in postane modra, ko pritisnete gumb miške (stanje dol).
Bodite pozorni na paleto plasti, saj je na tej stopnji samo ena plast. Naredite dve kopiji te plasti z ukazom Duplicate Layer iz menija palete Layers; v paleti bodo tri plasti (slika 28). Nato v prvi kopiji sloja spremenite barvo napisa v zeleno, v drugi kopiji pa v modro (slika 29). Posledično bo pridobljena potrebna praznina za prevračanje.
Ustvarjeno sliko izvozite v format PSD, pri čemer ohranite plasti, z ukazom Datoteka=>Izvozi in izberite barvni model RGB (slika 30). Ustvarjeno datoteko PSD odprite v programu ImageReady (sliki 31 in 32). Ustvarite okvirje na podlagi plasti tako, da v meniju palete Animacija izberete ukaz Make Frames From Layers. Okno za animacijo bo videti kot na sl. 33. V tem primeru bo v paleti Rollovers sprva ustvarjeno eno samo normalno stanje.
Nato v oknu Animation izberite okvir, ki ustreza induciranemu stanju, in sloj Layer 1 Copy bo samodejno izbran v paleti Layers (slika 34). Pojdite na paleto Prevračanja in kliknite gumb Ustvari stanje prevračanja (Ustvari stanje prevračanja) sl. 35, zaradi česar se bo stanje Over State pojavilo v paleti Prevračanja (slika 36). Na enak način ustvarite Down State. Aktivirajte stanje Normal v paleti Rollovers in izbrišite vse okvirje v paleti Animation razen tistega, ki bi moral ustrezati stanju Normal. Posledično bo za vsako stanje prevračanja samo en okvir v paleti Animacija (sl. 37, 38 in 39).
riž. 38. Pogled na sliko, okno Animation in paleti Sloji in Prevračanja za stanje Over State
Preverite rezultat tako, da v orodni vrstici kliknete gumb Predogled v privzetem brskalniku in odprete okno brskalnika (slika 40). Po tem shranite datoteko z ukazom Datoteka=>Shrani optimizirano in določite možnost HTML in slike (*.html). Posledično je bila v tem primeru v mapi s slikami pridobljena datoteka Primer4.html in niz grafičnih slik.
riž. 40. Okno brskalnika z elementom Rollover
Prevračanje SVGVedno bolj priljubljen format SVG (Scalable Vector Graphics). Vektorska grafika), ustvarjen na podlagi standarda XML, omogoča tudi sprejem različnih interaktivnih elementov, zlasti prevračanja, vendar je v praksi to izvedeno povsem drugače. Omeniti velja, da ustvarjanje interaktivnih SVG rolloverjev, za razliko od klasičnih, ko se ustrezna koda HTML generira popolnoma samodejno, zahteva poznavanje jezika JavaScript in razumevanje osnovnih principov objektno orientiranega programiranja.
Za delo s predmeti SVG obstaja posebna paleta SVG Interactivity, ki jo je mogoče preprosto odpreti z ukazom Window => SVG Interactivity (Okno => SVG Interactivity) sl. 41.
Razmislimo o tej možnosti za ustvarjanje prevračanja na primeru interaktivnega gumba, katerega barva napisa se bo spremenila iz črne v modro, ko premaknete miško in se ponovno spremeni v črno, ko miška zapusti aktivno območje.
Ustvarite pravokoten gumb z zaobljenimi robovi in izberite ustrezno gradientno polnilo zanj, na primer, kot je prikazano na sl. 42. Prilagodite prosojnost gumba v paleti Transparence.V tem primeru je vrednost motnosti nastavljena na 50 %. Naredite kopijo gumba, jo napolnite s temno zeleno (slika 43) in jo nato pretvorite v mrežni objekt z ukazom Object => Create Gradient Mesh, pri čemer določite štiri vrstice in deset stolpcev ter na seznamu Videz (Pogled) tako da izberete možnost To Center in nastavite vrednost Highlight na 100. Zmanjšajte motnost plasti z mrežnim objektom na približno 40% (slika 44). Postavite mrežasti predmet na prelivnega in gumb bo podoben tistemu, prikazanemu na sl. 45.
riž. 44. Spremenite kopijo gumba v mrežni objekt
Dopolnite gumb s predvidenim napisom in prilagodite njegov položaj z ustreznimi gumbi v paleti Poravnaj. Nastala slika bo vsebovala eno plast s tremi predmeti, postavljenimi drug na drugega (slika 46). Načrtovani dogodki bodo povezani z besedilnim predmetom, zato ga zaradi priročnosti spremenite v Besedilo, tako da dvokliknete predmet in vnesete novo ime. Podobno spremenite ime plasti iz Layer 1 v Layer (slika 47).
Obdelava dogodkov vključuje uporabo postopkov JavaScript, zato morate vključiti datoteko, ki opisuje te postopke. Imenuje se Events.js in se ob namestitvi shrani na disk v mapo Sample Files\Sample Art\SVG\SVG Adobe programi Ilustrator. Za povezavo datoteke Events.js uporabite ukaz JavaScript Files SVG Interactivity (slika 48). Nato morate klikniti gumb Dodaj in poiskati želeno datoteko na trdem disku. Ko se njegovo ime pojavi v polju URL (slika 49), kliknite gumb Končano.
riž. 48. Izbira ukaza za datoteke JavaScript
Nato morate za objekt Besedilo definirati odziv na dogodke miške. Izberite predmet Besedilo, v polju Dogodek na paleti Interaktivnost SVG izberite dogodek onmouseover elemColor(evt, "Besedilo", "#3333FF"), to bo pomenilo, da ko je miška nad predmetom Besedilo, se bo njegova barva spremenila v modra (slika 50). Če želite, da se barva besedila spremeni v črno, ko miška zapusti aktivno območje, boste morali ustvariti drug dogodek onmouseout, izberite ga v polju Dogodek na paleti Interaktivnost SVG. Nato v akcijsko vrstico vnesite besedilo elemColor(evt, "Text", "#000000"), kar bo vrnilo barvo v črno (slika 51).
riž. 51. Končni videz palete SVG Interactivity za objekt Text
Ustvarjen rollover shranite kot datoteko SVG z ukazom Datoteka=>Shrani kot (Datoteka=>Tip datoteke SVG format, nato pa nastavite možnosti za shranjevanje datoteke SVG, kot je prikazano na sliki 52. Po shranjevanju prejmete samo eno ena datoteka s končnico SVG in ne dve, kot pri klasičnem prevračanju, v tem primeru je bila prejeta datoteka Primer5.svg (mapa Primer5), da pa bo prevračanje res delovalo, morate dodatno kopirati datoteko Events.js iz opisa postopkov JavaScript. Po tem lahko preverite delovanje prevračanja - rezultat bo videti, kot je prikazano na sliki 53.
Format SVG se lahko uporablja tudi za prenos animacije. Poskusimo ustvariti preprost animirani element (v tem primeru bo to informacija o podjetju), ki se bo prikazal na zaslonu, ko se z miško pomaknete nad ustrezen grafični objekt in izgine, ko miško umaknete z interaktivnega elementa.
Ustvarimo približno naslednjo serijo grafičnih in besedilnih objektov, kot je prikazano na sl. 54. Preimenujmo vse ustvarjene predmete na priročen način tako, da zaporedno kliknemo ime naslednjega predmeta v paleti plasti in vnesemo želeno ime(Slika 55). Upoštevajte, da so tisti, ki so označeni na sl. 56 objektov Text1, Text2, Text3 in Path1 bo vedno vidnih, vsi ostali pa le, ko z miško premaknete nad objekt Text1.
riž. 54. Izvirni pogled na sliko
Vključite datoteko Events.js, ki opisuje postopke JavaScript, tako da uporabite ukaz Datoteke JavaScript iz palete Interaktivnost SVG, kliknete gumb Dodaj, pokažete na želeno datoteko na trdem disku in kliknete gumb Končano.
Določite odziv na dogodke miške za objekt Text1. Izberite objekt Text, v polju Event palete SVG Interactivity izberite dogodek onmouseover in v spodnjo vrstico vnesite besedilo elemShow(evt, "Text4"); elemShow(evt, "Pot2") . Posledično, ko je miška nad objektom Text1, postaneta vidna objekta Text4 in Path2. Upoštevajte, da če je treba ob dogodku izvesti več dejanj, jih je treba določiti z znakom »;«. Nato izvedite podobno operacijo za dogodek onmouseout in vnesite besedilo zanj, kar bo pomenilo skrivanje predmetov (slika 57).
Rezultat shranite kot datoteko SVG z ukazom Datoteka=>Shrani kot, določite ime datoteke, izberite format SVG v polju Vrsta datoteke in nato nastavite možnosti za shranjevanje datoteke SVG v skladu s sl. 58. Po shranjevanju bo prejeta datoteka Primer6.svg (mapa Primer6). Ne pozabite kopirati datoteke Events.js v mapo s to datoteko. Če po tem zaženete coz ta datoteka, potem boste videli rezultat, prikazan na sl. 59. To je skoraj tisto, kar potrebujete. Edina stvar, ki ni bila vključena v naše načrte, je bil začetni videz objektov Text 4 in Path 2 ob nalaganju. Če se želite znebiti te pomanjkljivosti, izberite oba podatka objekta hkrati in ustvarite dejanje zanju elemHide(evt, "Text4"); elemHide(evt, "Path2") pri dogodku onload (slika 60). Znova shranite datoteko in se prepričajte, da sta objekta Text4 in Path2 zdaj vidna le, ko miškin kazalec premaknete nad objekt Text1.
Vsaka spletna stran si je nepredstavljiva brez spletne animacije, vključno z animiranimi gifi. Ena od možnosti za njihovo izdelavo je uporaba aplikacije Adobe ImageReady, ki med drugim omogoča ustvarjanje animacije iz slojev. V tem primeru je večplastno sliko mogoče pripraviti v različnih aplikacijah, vključno z Adobe Illustrator.
Zelo enostavno je ustvariti animacijo na podlagi elementov iz palete Symbols, ki se odpre z ukazom Window=>Symbols, ali iz ene od knjižnic simbolov, ki jih lahko odprete z ukazom Window=>Symbol Libraries. ).
Na primer, poskusili bomo povečati velikost katerega koli simbolnega predmeta, ključne stopnje procesa povečanja predmeta pa morajo biti nastavljene na ločenih slojih. Najprej preprosto postavite simbole enega nad drugega in nato povečajte velikost vsakega naslednjega predmeta, na primer kot je prikazano na sl. 61. Posledično bo v paleti plasti ustvarjena ena plast z veliko predmeti (slika 62). Če to sliko neposredno izvozite v format PSD, ne bo dalo ničesar, saj je samo ena plast in seveda, ko odprete datoteko PSD v programu ImageReady, bo tudi samo ena plast. Zato morate najprej postaviti predmete na različne plasti. To se lahko naredi različne poti Najlažji način je, da najprej izberete Layer 1 v paleti Layers in uporabite ukaz Release to Layer. Rezultat bo, da bo vsak od predmetov premaknjen na svojo plast, vendar bodo vsi ugnezdeni v plast 1. Zato boste morali nato ročno povleči vse ugnezdene plasti na vrh palete plasti, tako da bodo nad plastjo 1. plasti, nato pa preprosto izbrisati zdaj prazno plast 1. plasti (slika 63). Izvozite sliko v format PSD z ukazom Datoteka=>Izvozi z nastavitvami kot na sl. 64.
Ustvarjeno datoteko PSD naložimo v program ImageReady (sliki 65 in 66). Odprite meni palete Animation Make Frames From Layers. Posledično bo ustvarjenih pet okvirjev, od katerih bo vsak ustrezal svoji plasti, okno palete animacije pa bo videti kot na sliki 2. 67.
Po tem nastavite trajanje vsakega od ustvarjenih okvirjev, v tem primeru je trajanje za vse okvirje nastavljeno na 0,2 s. In nato shranite animacijo z optimizacijo z ukazom Datoteka=>Shrani optimizirano (Datoteka=>Shrani z optimizacijo). Dobljeni rezultat je lahko podoben sl. 68.
Še bolj priročno je pridobiti praznine, ki jih je mogoče enostavno pretvoriti v animacijo v programu ImageReady za uporabo funkcij Live Blends v Illustratorju. Ta kombinirana uporaba Illustratorja in ImageReadyja znatno pospeši proces ustvarjanja animacij GIF.
Na primer, narišite dva poljubna večbarvna predmeta in ju nato povežite z mešalno povezavo z ustreznimi parametri (slika 69). Nemogoče je neposredno uporabiti to datoteko za ustvarjanje animacije, saj je slika na enem sloju (slika 70). Zato boste morali vsak element predmeta mešanja najprej postaviti na ločeno plast. To naredimo tako, da v oknu Sloji označimo vrstico, aktiviramo meni palete s klikom na črno puščico v njenem zgornjem desnem kotu in izberemo ukaz Sprosti v zaporedje plasti (slika 71). Držite tipko Shift, izberite ustvarjene plasti in jih postavite nad plast Layer 1, nato pa izbrišite samo plast Layer 1 in jo posledično premaknite v koš, paleta plasti bo imela enako obliko kot na sliki. 72.
riž. 70. Začetno stanje Sloji okna
Ustvarjeno datoteko izvozite v format PSD z ukazom File=>Export. Odprite ustvarjeno datoteko PSD v programu ImageReady (slika 73). Upoštevajte, da bodo vsi sloji, ustvarjeni v Illustratorju, prikazani v oknu slojev (slika 74), v oknu Animacija pa bo za zdaj samo en okvir.
Aktivirajte meni palete Animacija s klikom na črno puščico v zgornjem desnem kotu palete in izberite ukaz Make Frames From Layers.Posledično bo v tem primeru ustvarjenih pet okvirjev in okno palete Animacija bo prevzelo oblika v skladu s sl. 75. Izberite vse sličice, medtem ko držite tipko Shift in nastavite ustrezno trajanje sličice. V tem primeru je za vsako sličico vzet enak čas 0,2 s. Nato datoteko z optimizacijo shranite z ukazom Datoteka=>Shrani optimizirano (Datoteka=>Shrani z optimizacijo), na seznamu Vrsta datoteke nastavite možnost Samo slike (*.gif). Animacija bo podobna sl. 76.
Kar je videti veliko bolj zanimivo, ni gibanje, ampak gladko spreminjanje velikosti mešanih predmetov. Na primer, lahko uporabite že ustvarjen prehod mešanja. V tem primeru, potem ko ustvarite ločene plasti za vsak prehodni element mešanja, postavite vse predmete enega na drugega z gumboma Vodoravno sredinsko poravnavo in Navpično sredinsko poravnavo na paleti Poravnaj (slika 77).
Ustvarjeno datoteko izvozimo v format PSD (File=>Export File=>Export) in odpremo ustvarjeno datoteko PSD v programu ImageReady (slika 78). Ustvarite okvirje animacije na osnovi slojev (Make Frames From Layers Create frames from layers) in jim izberite ustrezno trajanje (slika 79). In nato, da bo animacija učinkovitejša, kopirajte obstoječe okvirje, vendar v obratnem vrstnem redu, tako da se slika najprej poveča in nato zmanjša in tako naprej v krogu (slika 80). Nato shranite optimizacijsko datoteko (File=>Save Optimized File=>Save with optimization). Nastala animacija je prikazana na sl. 81.
riž. 80. Stanje okna animacije po podvajanju sličic
riž. 81. Končana animacija
Pozdravljeni vsi skupaj! Danes bom poskušal opisati zmožnosti programa Adobe Illustrator in ga primerjati z zmožnostmi Flasha. To ne bo globalna analiza programa, temveč opis nekaterih zanimivih funkcij, ki sem jih odkril v tem programu. Podatke sem zbiral po delih, ko sem jih preučeval, da bi vse objavil v enem prispevku. Takoj priznam, da nisem super izkušen uporabnik Illustratorja, zadnjega pol leta ga uporabljam le za risanje (pred tem sem vse risal v Flashu). Veliko ljudi se pritožuje, da je ilustrator zapleten in ni vedno intuitiven. Do neke mere se strinjam, da je po splakovanju ta program zapleten. Toda tukaj je glavna stvar ne obupati, ampak nadaljevati študij. In po nekaj tednih se pojavi misel, kako sem prej brez tega!
Torej, kaj mi je bilo všeč pri ilustratorju in kaj se mi je zdelo, kar ni v flashu?
1. Začel bom z najpreprostejšim, a hkrati potrebnim. Poskusite v Flashu razporediti predmete v krog. Prej je obstajalo orodje Deco, vendar je bilo odstranjeno, očitno se je zdelo nepotrebno. Odločili smo se, da bi bilo bolj zabavno to narediti z rokami. Illustrator ima to funkcijo: Effect – Distort&Transform – Transform.
Vse je hitro in preprosto, vrednosti (razdalja med objekti, število kopij) nastavimo sami v nastavitvah.
2. Cik-cak
Še enostavnejša, a vseeno uporabna stvar. Zdi se kot majhna stvar, toda v Flashu morate risati ročno, v Illustratorju je to nekaj sekund.
3. Deformacija predmetov (Warp)
V Flashu ni nič takega. V spodnjem primeru sem pokazal samo 2 načina za deformiranje preprostih oblik (Effect – Warp – Arc/Fish). Pravzaprav jih je 15 Najnovejša različica programi.
4. Samodejno zaokroževanje vogalov (Round Corners)
To lahko storite ročno: na grafičnem objektu se ob izbiri v kotu (v vseh kotih) prikažeta bela pika in znak zaobljene črte. Povlečemo z miško in prilagodimo po vašem okusu.
A to velja le za oblike, s črto s svinčnikom to naredimo nekoliko drugače - uporabimo učinek zaokroževanja (Effect – Stylize – Round Corners). Na izhodu dobimo enak rezultat.
5. Ogrobite
Učinek se uporablja za preproste oblike (Effect – Distort&Transform – Roughen). Rezultat je nekaj, kar spominja na modele 3D z nizkimi poli. Mislim, da je kul :) In kar je najpomembneje, je zelo preprosto.
6. Pucker&Bloat (vlečenje in napihnjenost)
Primer na spodnji sliki:
7. Razširitev obrazca (Offset Path)
Flash ima funkcijo Expand Fill; za razliko od Illustratorja sploh ne deluje s črtami svinčnika.
8. Čopiči (umetniški čopič, čopič za vzorce, razpršeni čopič)
Oglejte si spodnjo sliko s primeri:
9. Čopič za teksturo
Illustrator vsebuje tudi veliko teksturnih čopičev, o katerih sem pisal in kako so se pojavili nova različica bliskavica -. Opaziti je bilo, da je uporaba čopičev v programu Adobe Animate strašno počasna. to je to :(
10. Nisem prepričan, ali je to pravi trik, vendar se želim osredotočiti na čopič s smešnim imenom Blob Brush. Ta čopič, ki se nahaja v orodni vrstici, je zelo prijeten za uporabo. Ima kup nastavitev, meni je bolj všeč kot navaden. Težko je razložiti njegove prednosti z besedami, bolje je enkrat poskusiti.
10.Razdeli v mrežo
Druga uporabna stvar je funkcija Split to Grid (Object-Path-Split to Grid), ki vam omogoča, da obliko razrežete na enake segmente. Na kaj nas to spominja? Tako je - okna v stolpnici. Mislim, da je to kul stvar za risanje na primer mestnih pokrajin;)
Še en uporabno orodje, predstavljen v ilustratorju verjetno od prve izdaje. Z njegovo pomočjo lahko ustvarite na primer teksture lesa:
12. Premakni (desno – Preoblikovanje – Premakni)
Premakne predmet za določeno razdaljo. Po želji lahko takoj ustvarite kopijo, ki bo postavljena na želeni razdalji od izbranega objekta vodoravno/ali navpično. Prejšnja različica Flasha je imela vtičnik, ki je to storil to funkcijo. Na žalost se ne spomnim njenega imena.
Illustrator je zelo priročen za ustvarjanje brezšivnih vzorcev (Object-Pattern-Make). Spomnim se, kako besno sem bliskovito razvijal prefinjenost z ustvarjanjem . V različici Illustratorja SS 2015 je vse avtomatizirano; kopica nastavitev vam bo pomagala ustvariti vzorec v desetinah različic z le nekaj grafičnimi elementi pri roki. V več prejšnje različice Vse programe je bilo treba narediti ročno, tako kot do sedaj v Flashu.
(Opomba – vzorec lahko spremenite v vektorski predmet, ki ga je mogoče urejati, s funkcijo Predmet – Razširi videz.
14. Predmetni mozaik
Ustvarjanje barvne palete na podlagi obstoječe slike. Uvozite sliko, ki vam je všeč, v ilustracijo (Odpri), nato Predmet – Ustvari Mozaik predmeta. V nastavitvah določimo pogostost delitve po višini in širini.
In na izhodu dobimo:
15. Mešaj
Uporablja se za ustvarjanje gradientov. Ustvarite lahko prehode po korakih, kot je na sliki. Ne bom rekel, da ga uporabljam pogosto, vendar bo morda komu koristil. Zdi se mi, da se lahko uporablja za ustvarjanje preprostih slik za ozadje.
Orodje se lahko uporablja tudi za kloniranje predmetov. Postavite dva predmeta na razdaljo drug od drugega in uporabite možnosti mešanja, izberite število korakov (število kloniranih predmetov).
16. Orodje za oblikovanje oblike. Zelo priročna stvar za delo s primitivi. V bliskavici se mi je zdelo manj priročno.
Držite Alt in kliknite na izbrane segmente, da jih izbrišete. Če z miško preprosto povlečemo čez več izbranih območij – povezave.
Add-on je orodje, ki pomaga samodejno rezati, povezovati itd. poudarjene oblike. Kar se mene tiče, ni zelo priročno; pogosto uporabljam orodje Build Shape Tool.
(umetne plošče)
18.Orodna plošča po meri
Možnost ustvarjanja lastne orodne vrstice, pri čemer zavržete nepotrebne in izberete samo tiste, ki jih uporabljate.
V Flashu se umetniške plošče, in sicer scene (Scene 1,2,3..), nahajajo ločeno in morate preklapljati med njimi (Shift+F2). V Illustratorju si lahko vse postavite pred oči. Primerno je, ko naredite več različic iste risbe, tako da so vse možnosti pred vašimi očmi za primerjavo.
19. Izometrija z uporabo grafičnih slogov
In zadnja stvar je ustvarjanje izometrije brez uporabe v 1 kliku (ali natančneje v 3 klikih, ker imamo 3 strani;) z uporabo grafičnih slogov (Graphic Styles). Naslednjič bom opisal, kako se to naredi.
Kar ima ilustrator skupnega s flashom, je možnost shranjevanja predmeta v simbol, prav tako enostavno pa je mogoče ta simbol prenesti v flash (odprite datoteko v flash.ai z ukazom Import – Import to stage).
Simbol v Illustratorju ima enake lastnosti kot v Flashu.
In na koncu bom napisal, da je v Illustratorju po mojem mnenju slabši od flasha. Ja, ja, nekaj takega obstaja. In to je orodje za polnjenje (Paint Bucket). Ne glede na to, kako težko se poskušam navaditi na Illo, je bolj priročno v Flashu.
Če so vam moji zapiski postali koristni ali če želite dodati kaj svojega, dobrodošli v komentarjih! Srečno vsem ;)
V zadnjem času so postale zelo priljubljene različne vrste animacij SVG (Scalable Vector Graphics) grafike na spletnih mestih in v aplikacijah. To je posledica dejstva, da vse najnovejši brskalnikiže podpira ta format. Tukaj so informacije o podpori brskalnika za SVG.
Ta članek obravnava najpreprostejši primer vektorske animacije SVG z uporabo lahkega vtičnika Jquery Lazy Line Painter.
VirZa dokončanje in popolno razumevanje te naloge je zaželeno osnovno znanje HTML, CSS, Jquery, ni pa obvezno, če želite samo animirati SVG) Začnimo!
In to so koraki, ki jih moramo upoštevati:
1. Ustvarite pravilno strukturo datoteke
Pri tem nam bo pomagala storitev Initializr, kjer moramo izbrati parametre kot na spodnji sliki.
- Classic H5BP (HTML5 Boiler Plate)
- Brez predloge
- Samo HTML5 Shiv
- Pomanjšano
- Razredi IE
- Chrome okvir
- Nato kliknite Prenesi!
2. Prenesite in povežite vtičnik
Ker initializr prihaja z najnovejšo knjižnico Jquery, iz arhiva, ki ga moramo prenesti iz repozitorija projekta Lazy Line Painter, moramo v naš projekt prenesti le 2 datoteki. Prvi je 'jquery.lazylinepainter-1.1.min.js' (različica vtičnika se lahko razlikuje) nahaja se v korenu nastale mape. Drugi je example/js/vendor/raphael-min.js.
Ti 2 datoteki postavimo v mapo js. In jih povežemo z našim index.html pred main.js, kot sledi:
3. V programu Adobe Illustrator narišite čudovit obris
Uporabite lahko na primer ikone v priponki.
4. Pretvorite našo sliko v Lazy Line Converter
Samo povlecite svojo ikono v okno na spodnji sliki.
Debelino, barvo obrisa in hitrost animacije lahko spremenite v sami kodi, ki se prikaže po pretvorbi!
5. Dobljeno kodo prilepite v main.js
Sedaj preprosto prilepimo nastalo kodo v prazno datoteko main.js
Opcije:
strokeWidth — debelina obrisa
strokeColor — barva obrisa
Hitrost risanja vsakega vektorja lahko spremenite tudi tako, da spremenite vrednosti parametra trajanja (privzeto 600)
6. Dodajte nekaj CSS po okusu
Odstranjevanje odstavka iz index.html
Pozdravljen, svet! To je HTML5 Boilerplate.
In namesto njega vstavimo blok, v katerem bo potekala naša animacija
nato dodamo nekaj CSS v datoteko main.css, da bo videti lepše:
Telo (ozadje:#F3B71C;) #ikone (položaj: fiksno; zgoraj:50%; levo:50%; rob: -300px 0 0 -400px;)
shrani vse datoteke.
Zdaj samo odprite index.html v sodobnem brskalniku in uživajte v učinku.
P.S. ob zagonu lokalni stroj Lahko pride do večsekundne zakasnitve začetka animacije.
Danes imamo nekaj nenavadnega Adobe lekcija Ilustrator. Ker tokrat ne bomo naredili statične slike, ampak pravo animacijo. Predstavljajte si, izkaže se z z uporabo programa Adobe Ilustrator zna tudi risat risanke :)
In za to ne potrebujemo popolnoma ničesar. Pravilna organizacija slojev in izvoz končnega dela v swf format, kjer se vsak sloj pretvori v okvir animacije. V današnji vadnici bomo narisali animacijo z odštevanjem v slogu retro filma. Rezultat bi moral biti flash video z enakim odštevanjem.
Prva stvar, ki jo morate storiti, je narisati vse potrebne elemente za prihodnjo animacijo. Da bi to naredil, sem v ločenem dokumentu naredil dva položaja filmskega okvirja, krog za referenco, ki je razrezan na ločene sektorje, teksturo in navpično prasko, da dodam učinek antike, pa tudi vse številke in napisi.
Ko so vsi deli naše risanke pripravljeni, se lahko lotimo ustvarjanja same animacije. Zaradi udobja je bolje, da to storite v novem dokumentu. V tem primeru bodo naše plasti igrale vlogo okvirjev animacije. In v prvi plasti morate samo kopirati okvir filma. Postavite ga na sredino delovnega prostora.
Zdaj ustvarite drugo plast in vanjo kopirajte okvir filma, v katerem so luknje vzdolž robov narejene z zamikom. Prav tako ga je treba postaviti v središče.
Iz teh dveh plasti že lahko dobite animacijo premikajočega se filma. Kasneje pa bomo potrebovali veliko več plasti. Torej izberite prvi dve plasti, pojdite na možnosti plošče in naredite kopijo plasti.
Na podoben način moramo zbrati 12 plasti filmskih okvirjev, ki določajo njegovo gibanje.
Zdaj imamo cel kup plasti in vsi so vidni. V smislu, da zgornje plasti blokirajo spodnje, kar ni povsem priročno za delo. Zato lahko nekatere plasti izklopite s klikom na ikono z očesom levo od imena plasti. Če želite izklopiti ali vklopiti vse plasti hkrati, držite tipko Alt in kliknite ikono očesa. Z vklopom in izklopom slojev lahko natančno vidite, kaj se nahaja v določenem okvirju naše prihodnje animacije. In zdaj, da bi gibanju filma dodali rahlo tresenje, moramo nastale okvirje nekoliko premakniti v različne smeri. Če želite to narediti, vklopite samo plast, s katero boste delali. ta trenutek in nato premaknite okvir za nekaj slikovnih pik v katero koli smer.
Ko pregledate vse plasti in dodate majhen premik, lahko začnete ustvarjati animacijo premikajočega se kroga. Če želite to narediti, kopirajte krog, sestavljen iz sektorjev, iz dokumenta z deli risanke in ga postavite na prvo plast na vrhu filmskega okvirja.
Če prekličete izbiro kroga, bo videti kot ena celota. Točno to potrebujemo.
Ker pa je sestavljen iz posameznih sektorjev, lahko animacijo ustvarite zelo hitro in enostavno, tako da spremenite njihovo barvo. Če želite to narediti, kopirajte ta krog na drugo plast in naredite prvi sektor svetlejši. Saj se spomnite, da se naš film med premikanjem trese, zato kroga sploh ni treba postaviti točno na sredino kadra. Postavite ga na oko.
Na podoben način morate kopirati krog v vsako naslednjo plast, pri tem pa pobarvati en sektor več s svetlejšo barvo kot prejšnjič. Skupaj teh 12 plasti tvori animacijo filma, ki se premika s polnilnim krogom.
Nato moramo našim slojem dodati teksturo. Vklopite prvo plast in tam kopirajte teksturo iz izvirne datoteke z rezervnimi deli.
Nato eno za drugo vklopite naslednje plasti in tja kopirajte isto teksturo. Če želite, da bo v vsakem okvirju videti drugače, ga preprosto obrnite za 90 stopinj. Kot ste morda uganili, moramo dodati teksturo vsem 12 okvirjem.
Če ste že precej utrujeni od kopiranja, potem vas lahko zadovoljim - ostalo je zelo malo. Najtežji del je mimo. Ostane le še navpične praske in to je skoraj to. Za to ponovno kopiramo originalno prasko in jo postavimo na poljubno mesto v več plasteh. Pri meni se praske pojavijo le v dveh slojih.
Zdaj, ko je glavni cikel s filmsko animacijo pripravljen, ostane le še seštevanje številk. Ker gre naše odštevanje od 3 do 1 in beseda Go!!!, potrebujemo še več plasti. Ne 12, ampak kar 48. Če želite to narediti, morate narediti še tri kopije že pripravljenih slojev s filmsko animacijo.
In potem je vse preprosto. Vklopite prvo plast in tam postavite številko tri.
Nato morate to sliko kopirati v naslednje plasti, dokler se animacija kroga ne konča. Ko pridete do naslednje kopije plasti, kjer bo krog spet popolnoma zapolnjen, morate postaviti številko dve. Na enak način kopirajte številko ena na želene plasti. In ko pridete do zadnjih plasti za napis Go!!!, preprosto izbrišite krog, preden napis kopirate na želeno plast.
To je vse za animacijo. Glavna stvar tukaj je, da se ne zmedete. Slojem lahko daste nekaj priročnih imen, vendar sem bil nekako len :) In tudi, ko končate z delom, ne pozabite ponovno vklopiti vseh slojev s klikom na ikono očesa.
V oknu z nastavitvami izvoza nastavite Izvozi kot: plasti AI v okvirje SWF. Ta možnost spremeni sloje Illustratorja v okvirje animacije. Nato kliknite gumb Napredno.
Odprejo se dodatne nastavitve. Tukaj morate nastaviti Frame Rate. Imam 12 sličic na sekundo. Potrditveno polje Looping je odgovorno za ciklično animacijo. Zahvaljujoč temu se bo video predvajal v krogu. In možnost Vrstni red plasti: od spodaj navzgor reproducira plasti ilustratorja od spodaj navzgor na plošči. Točno tako smo zgradili našo animacijo.
Rezultat je flash video z našo animacijo.
Zdaj vidite, da ustvarjanje preprostih animacij v Adobe Illustratorju ni tako težko, kot se zdi na prvi pogled.
Toda za ustvarjanje dolgih videov oz interaktivne aplikaciješe bolje za uporabo Adobe Flash ali drugi urejevalniki flash. Na primer, to mačko sem naredil v starem Macromedia Flash, ki sem ga izkopal v službi.
Prav tako se v zadnjem času HTML5 in CSS3 vedno bolj uporabljata za ustvarjanje animacij. To kodo podpirajo sodobni brskalniki in ne zahteva uporabe predvajalnika flash.
Roman aka dacascas posebej za blog
Naročite se na naše novice, da ne zamudite ničesar novega:
