Kuinka tehdä yksinkertainen animaatio Illustratorissa. Kuvitettu opetusohjelma Adobe Illustrator CS:ssä. Lataa ja liitä laajennus

Sinulla on yksi tai kaksi kuvaketta, jotka haluat herättää eloon animaatiolla. Mistä aloittaisit? Oletetaan, että sinulla on SVG-tiedostoja, Illustrator CC ja After Effects CC, mutta ratkaisu välttelee sinua.

Tässä artikkelissa aion osoittaa, kuinka voit helposti animoida SVG-tiedoston, mukaan lukien SVG-tiedoston valmistelu Illustratorissa ja sen tuominen After Effects CC:hen. Selitän myös kuinka voit muuntaa sen muototasoksi ja lisätä liikettä. Lopuksi puhutaan viennistä ja renderöimisestä.

Työn lopputulos.

Siirrytään nyt hauskaan osaan – opimme herättämään kuvat eloon.

SVG-tiedoston valmistelu Illustratorissa

Aloitetaan avaamalla SVG-tiedosto Adobe Illustrator CC:ssä. Aion animoida pienen auton kuvakkeen, joka on saatavilla ilmaiseksi Week Of Iconsista.

Tiedoston avaamisen jälkeen meidän on purettava kaikki objektit ja jaettava tasoiksi. Voit tehdä tämän manuaalisesti tai käyttää Vapauta tasoille (sekvenssi) nopeuttaaksesi prosessia. Ennen kuin tuomme tiedoston After Effectsiin, meidän on tallennettava se Illustrator-tiedostomuodossa.

Voimme purkaa objektien ryhmittelyn käyttämällä Release to Layers (Sequence) -toimintoa, jotta emme tuhlaa arvokasta aikaa. Tuo ja järjestä tiedosto After Effects CC:ssä

Nyt olet valmis tuomaan After Effects CC:hen. Lataa tuo tiedosto -valintaikkuna pikanäppäimellä Ctrl+I (Windows) tai Command+I (Mac) tai siirry kohtaan Tiedosto > Tuo > Tiedosto... Valitse sieltä valmistamamme Illustrator CC -tiedosto ja napsauta Tuo. . Näkyviin tulee pieni valintaikkuna, jossa on valitun tiedoston nimi. Valitse Sävellys avattavasta luettelosta nimeltä Import Kind.

Lisää nopea tapa tiedoston tuonti - kaksoisnapsauta sarakkeen sijaintia projektipaneelissa.

Aikajanapaneelissa näemme uuden sävellyksen. Kaksoisnapsauta sitä. Meidän pitäisi nyt nähdä Illustrator CC -tasot oranssilla kuvakkeella niiden nimen vasemmalla puolella.

Ennen kuin aloitamme, meidän on muutettava kaikki nämä tasot muototasoiksi. Meidän on valittava ne kaikki näppäinyhdistelmällä Ctrl+A/Command+A tai manuaalisesti näppäinyhdistelmällä Shift + Vasen hiiri. Napsauta sen jälkeen tasoa hiiren kakkospainikkeella ja valitse Luo > Luo muotoja vektoritasosta.

Nyt kun uudet tasot on valittu, vedä ne paneelin yläosaan Illustrator CC -tasojen yläpuolelle ja poista sitten Illustrator CC -tasot, jotta ne ovat poissa tieltä.

Muunna Illustrator CC -tasot muototasoiksi After Effects CC:ssä

Vaikka tämä ei ole välttämätöntä, on tärkeää, että annamme jokaiselle kerrokselle sopivan nimen ja/tai värikoodin. Näin voimme työskennellä tehokkaammin keskittyessämme avainhenkilöihin. Alla olevassa esimerkissä tarrojen värit vastaavat enemmän tai vähemmän vastaavien kerrosten täyttöä.

Muototasojen merkitseminen sopivilla nimillä, väreillä, tekstillä ja sijoittelulla on erittäin käytännöllistä.

Määritä parametrit pikanäppäimellä Ctrl+K/Command+K tai Sävellys > Sävellysasetukset... Sävellysasetuksista meidän on valittava Leveys, Korkeus, Kuvataajuus ja Kesto. Tätä projektia varten valitsin 60 kuvaa sekunnissa pitääkseni animaation sujuvana.

Päällä Tämä hetki Kaikki näyttää olevan valmiina, mutta vielä yksi asia on tehtävä. Meidän on ryhmitettävä tietyt tasot yhteen, jotta niiden liikkeet ovat synkronoituja pääkerroksen kanssa, jota voimme hallita. Tätä menetelmää kutsutaan vanhemmuudeksi.

Käytä Pick Whip -toimintoa määrittääksesi päätason useille tasoille.

Esimerkissämme olen määrittänyt vähemmän merkittäviä tasoja (lapsikerroksia), kuten Tuulilasi, ruumiinosat, puu ja köydet ensisijaiseen runkokerrokseen (emokerros). Tämä antoi minulle mahdollisuuden hallita koko auton (paitsi pyörät) asentoa ja pyörimistä ylätason avulla.

Animaation luominen

Halusin auton osuvan kiveen ja roikkuvan ilmassa hetken. Halusin myös puun liikkuvan ylös ja alas ja avaavan rungon. Aloitin luomalla kiven, auton ja pyörät. Sitten on aika voittaa suurin este - toiminnan laittaminen puuhun. Kun se oli tehty, siirryin pienempiin osiin, kuten telineeseen ja köysiin.

Animaatiota kuvaava luonnos

Ensimmäinen askel oli tehdä kallioelementti tai kerros, mutta sen sijaan, että menisin takaisin Illustrator CC:hen lisäämään uutta kerrosta, käytin vain Pen Toolia After Effects CC:ssä. Tämän ansiosta pystyin nopeasti suunnittelemaan pienen kiven.

Voi mahtava kynätyökalu!

Tavaratalo oli suhteellisen yksinkertainen tehtävä. Asensin sen auton takaosaan ja tein ankkuripisteen vasempaan alareunaan. Käyttämällä Pick Whipiä määritin sen päärunkotasolle. Toiseksi viimeinen askel oli antaa pyörimisvaikutus, mikä puolestaan ​​teki auton pomppimishetkestä realistisemman Bodymovin yhdessä Lottie-mobiilikirjaston kanssa.

P.S. voit löytää minun Illustrator tiedostot CC ja After Effects CC.

Kuvakesarja on ladattavissa ilmaiseksi osoitteessa .

Viime aikoina erilaiset SVG-grafiikan (Scalable Vector Graphics) animaatiot verkkosivustoilla ja sovelluksissa ovat tulleet erittäin suosituiksi. Tämä johtuu siitä, että kaikki uusimmat selaimet tukee jo tätä muotoa. Tässä on tietoa SVG-selaimen tuesta.

Tässä artikkelissa käsitellään yksinkertaisinta esimerkkiä SVG-vektorianimaatiosta, jossa käytetään kevyttä Jquery-laajennusta Lazy Line Painter.

Lähde

Tämän tehtävän suorittamiseksi ja täydelliseksi ymmärtämiseksi HTML:n, CSS:n ja Jqueryn perustiedot ovat toivottavia, mutta niitä ei vaadita, jos haluat vain animoida SVG:tä.) Aloitetaan!

Ja nämä ovat vaiheet, jotka meidän on noudatettava:

Luo oikea tiedostorakenne

Lataa ja liitä laajennus

Piirrä siisti ääriviivakuva Adobe Illustratorissa

Muunna kuvamme Lazy Line Converteriksi

Liitä tuloksena oleva koodi main.js-tiedostoon

Lisää CSS:ää maun mukaan

1. Luo oikea tiedostorakenne
Tässä auttaa meitä Initializr-palvelu, jossa meidän on valittava parametrit alla olevan kuvan mukaisesti.

• Classic H5BP (HTML5 Boiler Plate)
• Ei mallia
• Vain HTML5 Shiv
• Pienennetty
• IE luokat
• Chrome-kehys
• Napsauta sitten Lataa se!

2. Lataa ja liitä laajennus

Koska initializr sisältää uusimman Jquery-kirjaston, joka on ladattava arkistosta Lazy Line Painter -projektin arkistosta, meidän tarvitsee siirtää vain 2 tiedostoa projektiimme. Ensimmäinen on "jquery.lazylinepainter-1.1.min.js" (laajennuksen versio voi vaihdella), ja se sijaitsee tuloksena olevan kansion juuressa. Toinen on esimerkki/js/vendor/raphael-min.js.

Sijoitamme nämä 2 tiedostoa js-kansioon. Ja yhdistämme ne index.html-tiedostoomme ennen main.js:ää seuraavasti:

3. Piirrä viileä ääriviivakuva Adobe Illustratorissa

Piirrä ääriviivakuvamme Illustratorissa (helpein tapa tehdä tämä on kynätyökalulla)

On välttämätöntä, että piirustuksemme ääriviivat eivät sulkeudu, koska vaikutuksellemme tarvitsemme alun ja lopun

Täytteitä ei pitäisi olla

Tiedoston enimmäiskoko – 1000×1000 px, 40 kt

Tehdään rajaus objektin rajoihin Objekti>Artboards>Fit To Artboards Bounds

Tallenna SVG-muodossa (tavalliset tallennusasetukset ovat kunnossa)

Voit esimerkiksi käyttää liitteen kuvakkeita.

4. Muunna kuvamme Lazy Line Converteriksi
Vedä kuvakkeesi alla olevan kuvan ikkunaan.
Paksuutta, ääriviivan väriä ja animaation nopeutta voidaan muuttaa itse koodissa, joka tulee näkyviin muuntamisen jälkeen!

5. Liitä tuloksena oleva koodi main.js-tiedostoon
Nyt yksinkertaisesti liitämme tuloksena olevan koodin tyhjään main.js-tiedostoon
Vaihtoehdot:
strokeWidth — ääriviivan paksuus
strokeColor — ääriviivan väri
Voit myös muuttaa kunkin vektorin piirtonopeutta muuttamalla kestoparametrin arvoja (oletus 600)

6. Lisää CSS:ää maun mukaan
Kappaleen poistaminen index.html-tiedostosta

Hei maailma! Tämä on HTML5 Boilerplate.

Ja sen sijaan lisäämme lohkon, jossa animaatiomme tapahtuu

sitten lisäämme main.css-tiedostoon CSS:ää, jotta se näyttää kauniimmalta:

Runko ( tausta: #F3B71C; ) #kuvakkeet ( sijainti: kiinteä; ylhäällä: 50 %; vasen: 50 %; marginaali: -300px 0 0 -400px; )

tallenna kaikki tiedostot.
Avaa nyt vain index.html nykyaikaisella selaimella ja nauti tehosteesta.

P.S. käynnistyessään paikallinen kone Animaation alkamisessa voi olla useita sekunteja viive.

Hei kaikki! Tänään yritän kuvailla mahdollisuuksia Adoben ohjelmat Illustrator, vertaamalla sitä Flashin ominaisuuksiin. Tämä ei ole ohjelman globaali analyysi, vaan pikemminkin kuvaus mielenkiintoisista ominaisuuksista, jotka löysin tästä ohjelmasta. Keräsin tietoa pala palalta sitä tutkiessani, jotta kaikki voisi julkaista yhdessä postauksessa. Myönnän heti, että en ole kovin kokenut Illustratorin käyttäjä, olen käyttänyt sitä vain piirtämiseen viimeiset puoli vuotta (ennen sitä piirsin kaiken Flashilla). Monet ihmiset valittavat, että kuvittaja on monimutkainen eikä aina intuitiivinen. Olen jossain määrin samaa mieltä siitä, että huuhtelun jälkeen tämä ohjelma on monimutkainen. Mutta tärkeintä tässä ei ole luovuttaa, vaan jatkaa opiskelua. Ja parin viikon kuluttua herää ajatus, että kuinka olenkaan ennen pärjännyt ilman sitä!

Joten mistä pidin kuvittajassa, ja mistä huomasin, että se ei ollut salama?
1. Aloitan yksinkertaisimmasta, mutta samalla välttämättömästä. Yritä järjestää esineitä ympyrään Flashissa. Aiemmin oli Deco Tool, mutta se poistettiin ilmeisesti tarpeettomaksi. Päätimme, että olisi hauskempaa tehdä se käsin. Illustratorissa on tämä toiminto: Tehoste – Vääristää&muunnos – Muunna.

Kaikki on nopeaa ja yksinkertaista; asetamme arvot (objektien välinen etäisyys, kopioiden määrä) itse asetuksissa.

2. Siksak

Vielä yksinkertaisempi, mutta silti hyödyllinen asia. Tuntuu pieneltä, mutta Flashissa pitää piirtää käsin, Illustratorissa se on sekuntien kysymys.

3. Esineiden muodonmuutos (Warp)

Flashissa ei ole mitään tällaista. Alla olevassa esimerkissä näytin vain 2 tapaa muuttaa yksinkertaisia ​​muotoja (Effect – Warp – Arc/Fish). Itse asiassa niitä on 15 uusin versio ohjelmia.

4. Kulmien automaattinen pyöristys (pyöreät kulmat)

Voit tehdä sen manuaalisesti: graafisen objektin kulmaan (kaikkiin kulmiin) ilmestyy valittuna valkoinen piste ja pyöristetty viivamerkki. Vedämme hiirellä ja säädämme sitä makusi mukaan.

Mutta tämä koskee vain muotoja, lyijykynällä teemme sen hieman eri tavalla - käytämme pyöristystehostetta (Effect – Stylize – Round Corners). Poistuessa saamme saman tuloksen.

5. Karhenna

Tehostetta käytetään yksinkertaisiin muotoihin (Effect – Distort&Transform – Roughen). Tulos on jotain vähän poly-3D-malleja muistuttavaa. Minusta se on siistiä :) Ja mikä tärkeintä, se on hyvin yksinkertaista.

6. Pucker&Bloat (vetäminen ja turvotus)
Esimerkki alla olevassa kuvassa:

7. Lomakkeen laajennus (siirretty polku)

Flashissa on Expand Fill -toiminto; se ei toimi lainkaan kynäviivojen kanssa, toisin kuin Illustrator.

8. Harjat (Art Brush, Pattern Brush, Scatter Brush)
Katso alla olevaa kuvaa esimerkkien kanssa:

9. Tekstuurisivellin

Illustratorissa on myös monia tekstuurisiveltimiä, joista kirjoitin ja miten ne ilmestyivät uusi versio salama - . Huomattiin, että siveltimien käyttö Adobe Animatessa on hirveän hidasta. Se siitä:(

10. En ole varma, onko tämä todellinen temppu, mutta haluan keskittyä siveltimeen, jonka nimi on hauska Blob Brush. Tämä työkalupalkissa sijaitseva sivellin on erittäin mukava käyttää. Siinä on paljon asetuksia, pidän siitä enemmän kuin tavallisesta. Sen etuja on vaikea selittää sanoin, on parempi kokeilla sitä kerran.

10.Jaa ruudukkoon

Toinen hyödyllinen asia on Split to Grid (Object-Path-Split to Grid) -toiminto, jonka avulla voit leikata muodon yhtä suureksi osaksi. Mitä tämä muistuttaa meitä? Aivan oikein - ikkunat kerrostalossa. Minusta se on kiva juttu esimerkiksi kaupunkimaisemien piirtämiseen;)

Toinen hyödyllinen työkalu, esillä Illustratorissa luultavasti ensimmäisestä julkaisustaan ​​lähtien. Sen avulla voit luoda esimerkiksi puutekstuureja:

12. Siirrä (oikea - Muunna - Siirrä)

Siirtää kohteen tietyn etäisyyden verran. Halutessasi voit luoda välittömästi kopion, joka sijoitetaan halutulle etäisyydelle valitusta kohteesta vaaka-/tai pystysuunnassa. Flashin aikaisemmassa versiossa oli laajennus, joka onnistui tämä toiminto. Valitettavasti en muista sen nimeä.

Illustrator on erittäin kätevä saumattomien kuvioiden luomiseen (Object-Pattern-Make). Muistan kuinka raivoissani kehitin hienostuneisuutta salamakuvan luomisen myötä. Illustratorin SS 2015 -versiossa kaikki on automatisoitua; joukko asetuksia auttaa sinua luomaan kuvion kymmenissä muunnelmissa vain muutamalla graafisella elementillä. Enemmässä aikaisemmat versiot Kaikki ohjelmat piti tehdä manuaalisesti, kuten Flashissa tähänkin asti.

(Huomaa – kuviosta voidaan tehdä vektorimuotoinen objekti käyttämällä Object – Expand Appearance -toimintoa.

14. Objektimosaiikki

Väripaletin luominen olemassa olevan kuvan perusteella. Tuo haluamasi kuva kuvaan (Avaa) ja sitten Object – Create Object Mosaic. Asetuksissa määritämme korkeuden ja leveyden jaon tiheyden.

Ja ulostulossa saamme:

15. Sekoita

Käytetään gradienttien luomiseen. Voit luoda vaiheittaisia ​​siirtymiä, kuten kuvassa. En sano, että käytän sitä usein, mutta siitä voi olla hyötyä jollekin. Minusta näyttää siltä, ​​​​että sitä voidaan käyttää yksinkertaisten taustakuvien luomiseen.

Työkalua voidaan käyttää myös objektien kloonaamiseen. Aseta kaksi objektia etäälle toisistaan ​​ja käytä sekoitusasetuksia, valitse askelmäärä (kloonattujen objektien määrä).

16. Rakenna muototyökalu. Erittäin kätevä asia primitiivien kanssa työskentelemiseen. Salamakuvassa se näytti minusta vähemmän kätevältä.

Pidä Alt-näppäintä painettuna ja napsauta valittuja segmenttejä poistaaksesi segmentit. Jos yksinkertaisesti vedämme hiirtä useiden valittujen alueiden päälle - yhteydet.

Lisäosa on työkalu, joka auttaa automaattisesti leikkaamaan, yhdistämään jne. korostetut lomakkeet. Minulle se ei ole kovin kätevää; käytän usein Build Shape Tool -työkalua.

(taidetaulut)

18.Mukautettu työkalupaneeli

Mahdollisuus luoda oma työkalurivi, hylätä tarpeettomat ja valita vain ne, joita käytät.

Flashissa taulut eli kohtaukset (Scene 1,2,3..) sijaitsevat erikseen ja sinun on vaihdettava niiden välillä (Shift+F2). Illustratorissa ne kaikki voidaan asettaa silmiesi eteen. Se on kätevää, kun teet useita versioita samasta piirroksesta, jotta kaikki vaihtoehdot ovat silmiesi edessä vertailua varten.

19. Isometrics käyttäen graafisia tyylejä

Ja viimeinen asia on isometrian luominen käyttämättä sitä yhdellä napsautuksella (tai tarkemmin sanottuna kolmella napsautuksella, koska meillä on 3 puolta;) käyttämällä graafisia tyylejä (Graphic Styles). Seuraavalla kerralla kerron kuinka tämä tehdään.

Kuvittajalla on flashin kanssa yhteistä kyky tallentaa esine symboliksi, ja yhtä helposti tämä symboli voidaan siirtää flashiin (avaa tiedosto flash.ai:ssa käyttämällä Import – Import to stage -toimintoa).
Illustratorin symbolilla on samat ominaisuudet kuin Flashissa.
Ja lopuksi kirjoitan, että Illustratorissa se on mielestäni huonompi kuin flash. Kyllä, kyllä, sellainen on olemassa. Ja tämä on täyttötyökalu (Paint Bucket). Vaikka kuinka yritän tottua siihen Illalla, se on kätevämpää Flashissa.
Jos muistiinpanoistani on ollut sinulle hyötyä tai haluat lisätä jotain omaa, tervetuloa kommentteihin! Onnea kaikille;)

Verkkografiikan optimointi

Graafiset tiedot lähetetään paljon hitaammin kuin teksti, ja kuvien latausaika on verrannollinen niiden kokoon graafiset tiedostot. Siksi Web-sivujen nopea lataaminen vaatii pienen upotetun koon graafisia kuvia, joka saavutetaan niiden optimoinnilla. Kuvan optimointi tarkoittaa sen muuntamista, vähimmäistiedoston koon varmistamista säilyttäen tässä tapauksessa vaaditun kuvanlaadun, mikä saavutetaan ensisijaisesti vähentämällä graafisten kuvien värien määrää, käyttämällä pakattuja ja erityisiä tiedostomuotoja sekä optimoimalla pakkausparametrit yksittäisille kuville. fragmentteja.

Illustratorissa on sisäänrakennetut kuvanoptimointityökalut, jotka tekevät optimointiprosessista nopeaa ja tehokasta useilla esikatselumenetelmillä. Esikatselu antaa melko tarkan kuvan siitä, miltä optimoitu kuva tulee näyttämään reaaliajassa, mikä auttaa sinua arvioimaan optimoinnin tuloksen ja valitsemaan oikeat asetukset. Ja voit optimoida sekä suoraan Illustratorissa luodut kuvat että muut, esimerkiksi valokuvat, jotka on tarkoitus sijoittaa Web-sivustoon.

Optimointiparametrit asetetaan Tallenna verkkoon -ikkunassa, jota kutsutaan samannimisellä komennolla Tiedosto-valikosta. Ohjelma tarjoaa sinulle mahdollisuuden käyttää yhtä neljästä esikatselutilasta, mutta kaksi soveltuu parhaiten optimoinnin laadun arvioimiseen:

• 2-Up (kaksi vaihtoehtoa) alkuperäisen ja optimoidun kuvan samanaikainen katselu määritettyjen asetusten mukaisesti (kuva 1);
• 4-Up (neljä vaihtoehtoa) Tässä tilassa näkymä on jaettu neljään ikkunaan (kuva 2) näyttämään alkuperäinen kuva ja kolme versiota optimoidusta: ensimmäinen versio luodaan asetettujen optimointiarvojen perusteella, ja kaksi muuta ovat muunnelmia nykyisistä optimointiasetuksista.

Molempien tilojen avulla voit säästää huomattavasti aikaa parhaan optimointivaihtoehdon löytämisessä, koska ne poistavat tarpeen tallentaa kuvia erilaisilla optimointiasetuksilla ja niiden myöhempää visuaalista vertailua. Lisäksi on mahdollista arvioida optimoidun kuvan laadun lisäksi sen kokoa ja latausaikaa eri liitäntävaihtoehdoilla. Vertailun vuoksi kätevin tila on 4-Up (neljä vaihtoehtoa), jonka avulla voit visuaalisesti arvioida pakkaamisen tai paletin pienentämisen vaikutusta kuvan laatuun ja sen kokoon ja lopulta määrittää parhaat optimointiparametrit.

Illustratorin avulla voit optimoida verkkografiikkaa GIF-, JPG-, PNG-8- ja PNG-24-muotojen lisäksi myös SWF- ja SVG-muodoissa. Indeksoidut kuvat, joissa on pieni määrä värejä, tallennetaan GIF-muodossa. JPG-muotoa käytetään täysväristen ja harmaasävyisten kuvien, valokuvien ja värikkäiden grafiikoiden, kuten liukuvärityytteiden, tallentamiseen. Täysvärikuvissa, joissa on läpinäkyviä alueita, käytetään PNG-muotoa, jonka avulla voit tallentaa sekä indeksoituja että täysvärikuvia, kun taas PNG-8-muodossa optimoidun kuvan värien enimmäismäärä on 256, ja PNG-24-muodossa kuvassa voi olla miljoonia värejä, ja siksi se näyttää JPEG-muodossa. Ero PNG-24:n ja JPEG:n välillä on se, että PNG-24-muotoisten kuvien optimointiin käytetty pakkausmenetelmä ei johda laadun heikkenemiseen, vaan sen seurauksena tiedostokoko kasvaa. SVG- ja SWF-muodot yhdistävät grafiikan, tekstin ja interaktiiviset komponentit, ja ne voidaan myös optimoida.

Harkitsemme konkreettinen esimerkki kuvan optimointi. Oletetaan, että verkkosivuston logo kehitettiin Illustratorissa (kuva 3), joka on alun perin tallennettu AI-muodossa. Yritys optimoida se välittömästi verkkoa varten ei johda mihinkään hyvään, koska tässä tapauksessa kuva rajataan automaattisesti, mikä ei ota huomioon tuloksena olevan kirjoituksen todellista sijaintia muodonmuutoksen seurauksena (kuva 4 ja 5).

Yritetään siis viedä logo PSD-muotoon komennolla File=>Export (File=>Export) luodun kuvan koko on 143 KB. Avaa tuloksena oleva PSD-tiedosto ja käytä File=>Save for Web -komentoa. Kun otetaan huomioon kuvan rajoitettu määrä värejä, GIF-muoto on tässä tapauksessa optimaalinen, jonka erityiset asetukset on päätettävä. Kokeilemalla asetuksia voit varmistaa sen paras laatu antaa ohjelman oletuspakkausalgoritmin, Selective. Mitä tulee tasoitukseen, gradienttitäytön läsnäolon vuoksi on parempi valita algoritmi, jossa on kohinan synnyttämiskohina (kuva 6). Tuloksena olevan optimointitiedoston koko on 6,729 KB (kuva 7), mutta taustan läpinäkyvyys säilyy, mikä on helppo varmistaa tallentamalla kuva GIF-muotoon HTML-tiedoston mukana (kuva 8). Tämän seurauksena tässä esimerkissä tiedostot emblem.html ja emblem.gif hankittiin Primer1-kansioon.

Painikkeet

Välttämätön erityinen elementti minkä tahansa Web-sivun suunnittelussa ovat graafiset ohjauspainikkeet. On yksinkertaisesti mahdotonta kuvitella sivua ilman niitä. Painikkeiden piirtämisestä on tullut nykyään erityinen genre, ja Illustratorin avulla voit luoda monimutkaisimpia vaihtoehtoja. Esimerkiksi painikkeet, jotka on suunniteltu verkkoobjekteiksi ja/tai peittomaskeilla, näyttävät paljon vaikuttavammilta kuin tavalliset.

Harkitse vaihtoehtoa luoda pyöreä, kupera painike Illustratorissa. Piirrä vektoriobjekti mielivaltaisella värillä täytettynä ympyrän muotoon (kuva 9) ja muunna se verkkoon komennolla Object => Create Gradient Mesh (Object => Create a gradient mesh) määrittämällä neljä riviä ja neljä sarakkeita ja valitsemalla Ulkoasu-luettelosta vaihtoehdon To Center Highlight, joka vastaa 60 (kuva 10). Valitse Direct Selection -työkalu ja napsauta objektin vasenta yläkulmaa valitsemalla siellä sijaitsevat ankkuripisteet (kuva 11). Muuta vastaavan solun väri valkoiseksi valitsemalla se Swatches-paletista (kuva 12).

Ota Ellipsi-työkalu, aseta hiirimerkki aiemmin luodun ympyrän keskelle ja pidä Alt- ja Shift-näppäimiä painettuna ja venytä uusi ympyrä vanhan päälle niin, että se on 1-2 pikseliä suurempi kuin vanha. sivut. Anna sille 1-2 pikseliä leveä musta reunus (Stroke) ja täytä se säteittäisellä gradientilla punaisesta valkoiseen suuntaan (kuva 13). Vedä luotua vektoriobjektia 1-2 pikseliä oikealle ja alas, sitten poistamatta valintaa, napsauta sitä hiiren kakkospainikkeella ja ulos kontekstivalikko valitse Järjestä=>Lähetä takaisin. Tuloksena on tyhjä painike, joka näkyy kuvassa. 14.

Pääsääntöisesti millä tahansa Web-sivulla on useita samantyyppisiä painikkeita, jotka eroavat esimerkiksi vain niihin piirrettyjen nuolien suunnasta, jotka osoittavat liikkeen suunnan sivustolla. Tarkastellaan yksinkertaisinta tapausta, jossa on kaksi painiketta, joista toinen, alanuoli tarkoittaa siirtymistä seuraavalle sivulle ja painike, jossa on nuoli ylös, tarkoittaa siirtymistä edelliselle. Otetaan nuolimalliksi säännöllinen kolmio, joka on piirretty Polygon-työkalulla, maalattu mustaksi ja tehostamisen vuoksi suunniteltu myös verkkoobjektiksi. Siirrä nuoli painikkeen kohdalle ja säädä kaikkien objektien sijainti suhteessa toisiinsa käyttämällä vastaavia painikkeita Tasaa-paletissa. Ensimmäinen tuloksena olevista painikkeista on esitetty kuvassa. 15. Tehdään tasosta kopio painikkeella valitsemalla komento Duplicate Layer Layers, tuloksena saadaan kaksi identtistä kerrosta. Valitse sitten tason kopiossa oleva nuoli ja käännä sitä 180° valitsemalla pikavalikosta komennon Transform=>Rotate Transformation=>Rotate. Saamme saman painikkeen kuin kuvassa. 16. Huomaa, että on paljon kätevämpää tallentaa kaikki samantyyppiset painikkeet yhdelle projektille samaan tiedostoon eri tasoille, mikä näkyy tässä tapauksessa.

Nyt sinun on tallennettava kunkin painikkeen optimoidut versiot. Tee ensin alimmasta kerroksesta näkymätön, tässä tapauksessa yläkerroksen painike säilyy. Valitse File=>Save for Web -komento, määritä painikkeen optimointiparametrit esimerkiksi kuvan 1 mukaisesti. 17, napsauta Tallenna-painiketta ja anna tiedostonimi. Lopulta tallennettu painike näkyy kuvassa. 18. Palauta nyt näkyvyys alimmalle tasolle, tee ylätasosta näkymätön ja tallenna toinen painike samalla tavalla antamalla sille eri nimi. Tulos näkyy kuvassa. 19.

Nyt ei jää muuta kuin varmistaa, että painikkeet näyttävät melko hyväksyttäviltä verkkosivulla ja sijoittaa ne mukautetulle sivulle (kuva 20). Tämän seurauksena tässä esimerkissä tiedosto Primer2.html ja kaksi graafista kuvaa saatiin kuvakansioon (Primer2-kansio).

Haluttaessa painike on helppo muuttaa siivuksi optimointiprosessin aikana. Tässä tapauksessa, kun olet valinnut komennon File=>Save for Web (File=>Save for Web) ja asettanut optimointiparametrit, sinun tulee valita työkalupaletista Slice Select -työkalu ja kaksoisnapsauttaa kuvaa, joka lopulta muuttuvat automaattisesti viipaleeksi, jonka sarjanumero on 1 (kuva 21). Kaksoisnapsauttaminen uudelleen avaa Slice Options -ikkunan, jossa sinun on määritettävä linkki ja valinnaisesti muutettava osion nimi (Kuva 22) ja sitten tallennettava optimoitu kuva. Tuloksena on tässä tapauksessa tiedostot Primer3.html (kuva 23) ja Primer3.gif (Primer3-kansio).

Interaktiivisia elementtejä

Yksi tapa herättää sivu eloon on esitellä suunnitteluelementtejä, jotka muuttavat sivua ulkomuoto(tai tila) riippuen hiiren käyttäytymisestä tai harvemmin muissa tilanteissa: skaalaus, vieritys, lataus, virheet jne.

Tällaisista elementeistä tunnetuimpia ovat rollover-elementit (englannin kielestä roll over roll over, turn over) elementit, jotka muuttavat ulkonäköä hiiren vaikutuksesta. Esimerkkejä tyypillisistä rollovereista ovat animoidut painikkeet. Rolloveria käytetään usein luotaessa muita verkkosivuston navigointielementtejä. Todellisuudessa mikä tahansa rollover ei ole yksi, vaan useita (enintään neljä) kuvaa, joista jokainen vastaa tiettyä tapahtumaa. Tärkeimmät tapahtumat katsotaan seuraaviksi: Normaalit normaali tila, Hiiren osoittimen siirtäminen elementin päälle ja hiiren vasemman painikkeen painaminen alas, kun osoitin viedään sen päälle. Teoriassa mukana voivat olla tapahtumat, kuten hiiren vasemman painikkeen vapauttaminen napsautuksen jälkeen, ylös painikkeen vapauttamisen jälkeen, ulos poistuttaessa aktiiviselta alueelta. Käytännössä ne kuitenkin usein rajoittuvat elementin vaihtamiseen vain kolmen tai jopa kahden ensimmäisen tapahtuman osalta.

Klassiset rolloverit

Klassisessa mielessä rollover on sarja graafisia kuvia GIF-muodossa ja vastaava HTML-koodi, jonka ansiosta selainikkunassa hiiren käyttäytymisestä riippuen yksi kuva korvaa toisen.

Illustratoria ei ole tarkoitettu suoraan luomaan rollovereita perinteisessä mielessä, mutta se voi auttaa niiden alkuelementtien kehittämisessä. Ajatuksena tässä tapauksessa on luoda kerros, jossa on ensimmäistä tapahtumaa vastaava kuva. Tee sitten kopio tasosta ja muunna kuva vastaamaan toista tapahtumaa ja niin edelleen. Tuloksena oleva monikerroksinen kuva viedään PSD-tiedostoon kerrokset säilyneinä, joiden perusteella Image Ready -ohjelmassa luodaan rollover. Illustrator-ohjelman käytön etuna, kuten monissa muissa tapauksissa, on useita sen mielenkiintoisia ominaisuuksia, joita ei ole saatavilla muissa ohjelmisto yhdistettynä vektorigrafiikan muuntamisen mukavuuteen.

Yritetään luoda rollover merkinnän muodossa, joka muuttaa väriä hiiren käyttäytymisen mukaan. Avaa Illustrator ja luo kuvio pyöreän suorakulmion muodossa, joka on täytetty mustalla (kuva 24), tee siitä kopio ja aseta se näytön vapaaseen osaan. Muunna suorakulmion ensimmäinen kopio mesh-objektiksi, jonka keskellä on korostus (komento Object=>Create Gradient Mesh Object=>Create Gradient Mesh), määrittämällä neljä riviä ja kymmenen saraketta (kuva 25). Aktivoi suorakulmion toinen kopio ja aseta se gradienttitäyttöön suunnilleen kuvan 1 mukaisesti. 26. Aseta gradienttiobjekti mesh-objektin päälle, pienennä gradienttiobjektin peittävyyttä noin 80 %:iin ja kokoa noin 1 pikselillä simuloidaksesi lopulta kolauksen vaikutusta. Ja tulosta sitten kirjoitus esineiden päälle. Olkoon sen alkuperäisessä muodossaan valkoinen väri, joka vastaa normaalitilaa (kuva 27), ja sitten kun rollover-tila muuttuu, merkinnän väri muuttuu esimerkiksi vihreäksi, kun hiiren merkki on sen päällä (Over state) ja muuttuu siniseksi, kun hiiren painiketta painetaan (alastila).

Kiinnitä huomiota Layers-palettiin, tässä vaiheessa siinä on vain yksi kerros. Tee tästä tasosta kaksi kopiota Tasot-palettivalikon Kopioi taso -komennolla; paletissa on kolme tasoa (kuva 28). Muuta sitten kerroksen ensimmäisessä kopiossa tekstin väri vihreäksi ja toisessa kopiossa siniseksi (kuva 29). Tämän seurauksena saadaan kaatumiseen tarvittava aihio.

Vie luotu kuva PSD-muotoon säilyttäen tasot käyttämällä File=>Export-komentoa ja valitsemalla RGB-värimallin (kuva 30). Avaa luotu PSD-tiedosto ImageReady-ohjelmassa (kuvat 31 ja 32). Luo tasoihin perustuvia kehyksiä valitsemalla Animaatiopaletin valikosta Tee kehyksiä tasoista -komennon. Animaatio-ikkuna näyttää samalta kuin kuvassa. 33. Tässä tapauksessa Rollovers-palettiin luodaan aluksi yksi normaalitila.

Valitse sitten Animaatio-ikkunassa indusoitua tilaa vastaava kehys, jolloin Layer 1 Copy -taso valitaan automaattisesti Tasot-paletissa (kuva 34). Siirry Rollovers-palettiin ja napsauta Create Rollover State -painiketta (Create a rollover state) kuva. 35, mikä aiheuttaa Over State -tilan ilmestymisen Rollovers-palettiin (kuva 36). Luo Down State samalla tavalla. Aktivoi Normaali-tila Rollovers-paletissa ja poista kaikki kehykset Animaatio-paletista paitsi se, jonka pitäisi vastata normaalitilaa. Tämän seurauksena animaatiopaletissa on vain yksi kehys jokaista kierrätystilaa kohden (kuvat 37, 38 ja 39).

Riisi. 38. Näkymä kuvasta, Animaatio-ikkunasta ja Tasot- ja Rollovers-paleteista Over State -tilassa

Tarkista tulos napsauttamalla työkalupalkin Esikatselu oletusselaimessa -painiketta ja siirtymällä selainikkunaan (Kuva 40). Tallenna sen jälkeen tiedosto komennolla File=>Save Optimized ja määritä HTML ja kuvat (*.html) -vaihtoehto. Tuloksena tässä esimerkissä tiedosto Primer4.html ja sarja graafisia kuvia saatiin kuvakansioon.

Riisi. 40. Selainikkuna Rollover-elementillä

SVG-kierrätykset

Yhä suositumpi SVG (Scalable Vector Graphics) -muoto Vektorigrafiikka), joka on luotu XML-standardin perusteella, mahdollistaa myös monenlaisten interaktiivisten elementtien vastaanottamisen, erityisesti rolloverin, mutta käytännössä tämä toteutetaan täysin eri tavalla. On syytä huomata, että vuorovaikutteisten SVG-rullien luominen, toisin kuin perinteiset, kun vastaava HTML-koodi luodaan täysin automaattisesti, vaatii JavaScript-kielen tuntemusta ja olioohjelmoinnin perusperiaatteiden ymmärtämistä.

SVG-objektien kanssa työskentelyä varten on olemassa erityinen paletti SVG Interactivity, joka voidaan avata helposti komennolla Window => SVG Interactivity (Ikkuna => SVG-vuorovaikutus) kuva. 41.

Harkitse tätä vaihtoehtoa käännöksen luomiseksi käyttämällä esimerkkiä interaktiivisesta painikkeesta, jonka merkinnän väri muuttuu mustasta siniseksi, kun hiirtä liikutetaan, ja muuttuu jälleen mustaksi, kun hiiri poistuu aktiiviselta alueelta.

Luo suorakaiteen muotoinen painike pyöristetyillä reunoilla ja valitse sille sopiva gradienttitäyttö, esimerkiksi kuvan 1 mukaisesti. 42. Säädä painikkeen läpinäkyvyyttä Transparence-paletissa. Tässä esimerkissä Opacity-arvoksi on asetettu 50 %. Tee painikkeesta kopio, täytä se tummanvihreällä (Kuva 43) ja muunna se mesh-objektiksi komennolla Object => Create Gradient Mesh, määrittämällä neljä riviä ja kymmenen saraketta, ja Ulkoasu-luettelossa (View) valitsemalla To Center -vaihtoehdon ja asettamalla Highlight-arvoksi 100. Vähennä verkkoobjektin sisältävän kerroksen peittävyyttä noin 40 %:iin (kuva 44). Aseta verkkoobjekti gradientin päälle, jolloin painike muistuttaa kuvassa 1 esitettyä. 45.

Riisi. 44. Muuta painikkeen kopio verkkoobjektiksi

Täydennä painike tarkoitetulla tekstillä ja säädä sen asentoa vastaavilla Align-paletin painikkeilla. Tuloksena oleva kuva sisältää yhden kerroksen, jossa on kolme objektia päällekkäin (kuva 46). Ajoitetut tapahtumat ovat suhteessa tekstiobjektiin, joten vaihda sen nimeksi Teksti kaksoisnapsauttamalla objektia ja kirjoittamalla uusi nimi. Samoin muuta tason nimi Tasosta 1 Tasoksi (Kuva 47).

Tapahtumien käsittelyyn kuuluu JavaScript-toimintojen käyttö, joten sinun on liitettävä tiedosto, joka kuvaa näitä toimenpiteitä. Sitä kutsutaan nimellä Events.js ja se tallennetaan levylle Sample Files\Sample Art\SVG\SVG-kansioon, kun asennat Adobe Illustratorin. Yhdistä Events.js-tiedosto JavaScript Files SVG Interactivity -komennolla (kuva 48). Seuraavaksi sinun on napsautettava Lisää-painiketta ja löydettävä haluamasi tiedosto kiintolevyltäsi. Kun hänen nimensä näkyy URL-kentässä (Kuva 49), napsauta Valmis-painiketta.

Riisi. 48. JavaScript Files -komennon valitseminen

Seuraavaksi sinun on määritettävä teksti-objektille vastaus hiiren tapahtumiin. Valitse Teksti-objekti, SVG-vuorovaikutteisuuspaletin Tapahtuma-kentässä, valitse tapahtuma hiiren päällä elementColor(evt, "Teksti", "#3333FF") tämä tarkoittaa, että kun hiiri on Teksti-objektin päällä, sen väri muuttuu sininen (kuva 50). Jotta tekstin väri muuttuisi mustaksi hiiren poistuttua aktiiviselta alueelta, sinun on luotava toinen onmouseout-tapahtuma ja valittava se SVG-vuorovaikutteisuuspaletin Tapahtuma-kentässä. Kirjoita sitten toimintoriville teksti elemColor(evt, "Teksti", "#000000") tämä palauttaa värin mustaksi (Kuva 51).

Riisi. 51. Teksti-objektin SVG-vuorovaikutteisuuspaletin lopullinen ulkoasu

Tallenna luotu rollover SVG-tiedostona komennolla File=>Save as (Tiedosto=>Tiedostotyyppi SVG-muoto, ja aseta sitten SVG-tiedoston tallennusasetukset kuvan 52 mukaisesti. Tallennuksen jälkeen saat vain yhden yksi tiedosto, jonka tunniste on SVG, eikä kaksi, kuten perinteisen rolloverin tapauksessa, tässä tapauksessa vastaanotettiin tiedosto Primer5.svg (Primer5-kansio), mutta jotta rollover todella toimisi, sinun on lisäksi kopioitava Events.js-tiedosto JavaScript-toimintojen kuvauksesta. Tämän jälkeen voit tarkistaa rullan toimivuuden, jolloin tulos näyttää kuvan 53 mukaiselta.

SVG-animaatio

SVG-muotoa voidaan käyttää myös animaation välittämiseen. Yritetään luoda yksinkertainen animoitu elementti (tässä tapauksessa se on tietoa yrityksestä), joka ilmestyy näytölle kun viet hiiren vastaavan graafisen objektin päälle ja katoaa, kun poistat hiiren interaktiivisesta elementistä.

Luodaan suunnilleen seuraava sarja graafisia ja tekstiobjekteja, kuten kuvassa 10 näkyy. 54. Nimetään kaikki luodut objektit uudelleen kätevällä tavalla napsauttamalla peräkkäin seuraavan objektin nimeä Tasot-paletissa ja kirjoittamalla toivottu nimi(Kuva 55). Huomaa, että ne, jotka on korostettu kuvassa. 56 objektia Teksti1, Teksti2, Teksti3 ja Polku1 ovat aina näkyvissä ja kaikki muut vain, kun viet hiiren osoittimen Teksti1-objektin päälle.

Riisi. 54. Kuvan alkuperäinen näkymä

Sisällytä JavaScript-toimenpiteitä kuvaava Events.js-tiedosto käyttämällä JavaScript-tiedostot-komentoa SVG-vuorovaikutteisuuspaletista, napsauttamalla Lisää-painiketta, osoittamalla haluamaasi tiedostoa kiintolevylläsi ja napsauttamalla Valmis-painiketta.

Määritä teksti1-objektin vastaus hiiren tapahtumiin. Valitse Teksti-objekti, valitse SVG-vuorovaikutteisuuspaletin Tapahtuma-kentässä onmouseover-tapahtuma ja kirjoita alla olevalle riville teksti elemShow(evt, "Teksti4"); elemShow(evt, "Polku2") . Tämän seurauksena, kun hiiri on Text1-objektin päällä, Text4- ja Path2-objektit tulevat näkyviin. Huomaa, että jos tapahtuman sattuessa on suoritettava useita toimintoja, ne on määritettävä ";"-merkillä. Suorita sitten samanlainen toimenpide onmouseout-tapahtumalle syöttämällä sen teksti, mikä tarkoittaa objektien piilottamista (kuva 57).

Tallenna tulos SVG-tiedostona komennolla File=>Save as, määrittämällä tiedoston nimi, valitsemalla Tiedostotyyppi-kentästä SVG-muodon ja määrittämällä sitten SVG-tiedoston tallennusasetukset kuvan 1 mukaisesti. 58. Tallennuksen jälkeen Primer6.svg-tiedosto vastaanotetaan (Primer6-kansio). Muista kopioida Events.js-tiedosto kansioon, jossa tämä tiedosto on. Jos tämän jälkeen juoksee coz Tämä tiedosto, niin näet kuvassa näkyvän tuloksen. 59. Tämä on melkein mitä tarvitset. Ainoa asia, joka ei sisältynyt suunnitelmiimme, oli Teksti 4 ja Polku 2 -objektien ensimmäinen ulkoasu latauksen yhteydessä. Päästäksesi eroon tästä puutteesta, valitse molemmat objektitiedot kerralla ja luo niille toiminto elemHide(evt, "Teksti4"); elemHide(evt, "Path2") lataustapahtumassa (kuva 60). Tallenna tiedosto uudelleen ja varmista, että Text4- ja Path2-objektit ovat nyt näkyvissä vain, kun viet hiiren osoittimen Text1-objektin päälle.

GIF-animaatio

Mitään Web-sivua ei voida ajatella ilman verkkoanimaatiota, mukaan lukien animoidut gifit. Yksi vaihtoehto niiden luomiseen on käyttää Adobe ImageReady -sovellusta, joka mahdollistaa muun muassa animaation luomisen tasoista. Tässä tapauksessa itse monikerroksinen kuva voidaan valmistaa eri sovelluksissa, mukaan lukien Adobe Illustrator.

Animaatio on erittäin helppoa luoda elementtien perusteella Symbolit-paletista, joka avataan komennolla Window=>Symbols, tai jostakin symbolikirjastosta, joka voidaan avata komennolla Window=>Symbol Libraries. ).

Yritämme esimerkiksi kasvattaa minkä tahansa symboliobjektin kokoa; objektin kasvattamisprosessin avainvaiheet on asetettava erillisille tasoille. Ensin yksinkertaisesti aseta symboliobjektit päällekkäin ja lisää sitten jokaisen seuraavan objektin kokoa, esimerkiksi kuvan 1 mukaisesti. 61. Tämän seurauksena Tasot-palettiin luodaan yksi kerros, jossa on useita objekteja (kuva 62). Jos viet tämän kuvan suoraan PSD-muotoon, se ei anna mitään, koska kerroksia on vain yksi, ja luonnollisesti, kun avaat PSD-tiedoston ImageReady-ohjelmassa, siinä on myös vain yksi kerros. Siksi sinun on ensin asetettava esineitä eri tasoille. Tämä voidaan tehdä eri tavoilla Helpoin tapa on valita ensin Layer 1 Layers-paletista ja käyttää Release to Layer -komentoa. Tuloksena on, että jokainen objekteista siirretään omalle tasolleen, mutta ne kaikki ovat sisäkkäisiä tasossa 1. Siksi sinun on sitten vedettävä manuaalisesti kaikki sisäkkäiset tasot Tasot-paletin yläosaan niin, että ne ovat Layer 1 -tason yläpuolella, ja sitten yksinkertaisesti poistettava nyt tyhjä Taso 1 -taso (kuva 63). Vie kuva PSD-muotoon File=>Export-komennolla kuvan 1 mukaisilla asetuksilla. 64.

Lataa luotu PSD-tiedosto ImageReady-ohjelmaan (kuvat 65 ja 66). Avaa Animaatio Make Frames From Layers -palettivalikko. Tämän seurauksena luodaan viisi kehystä, joista jokainen vastaa omaa kerrostansa, ja Animaatiopaletti-ikkuna näyttää samalta kuin kuvassa 1. 67.

Aseta tämän jälkeen jokaisen luodun kehyksen kesto, tässä tapauksessa kaikkien kehysten kesto on 0,2 s. Ja sitten tallenna animaatio optimoinnin kanssa komennolla File=>Save Optimized (Tiedosto=>Tallenna optimoinnin kanssa). Tuloksena oleva tulos saattaa muistuttaa kuviota. 68.

On vielä kätevämpää hankkia aihioita, jotka voidaan sitten helposti muuntaa animaatioiksi ImageReadyssä käyttääksesi Illustratorin Live Blends -toimintoja. Tämä Illustratorin ja ImageReadyn yhdistetty käyttö nopeuttaa merkittävästi GIF-animaatioiden luomista.

Piirrä esimerkiksi kaksi mielivaltaista moniväristä objektia ja yhdistä ne sitten sekoituslinkillä sopivilla parametreilla (kuva 69). Tätä tiedostoa ei voi käyttää suoraan animaation luomiseen, koska kuva on yhdellä kerroksella (kuva 70). Siksi sinun on ensin asetettava sekoitusobjektin jokainen elementti erilliselle tasolle. Tee tämä valitsemalla Layers-ikkunassa rivi, aktivoimalla palettivalikko napsauttamalla sen oikeassa yläkulmassa olevaa mustaa nuolta ja valitsemalla Release to Layers Sequence -komento (kuva 71). Pidä Shift-näppäintä painettuna, valitse luodut tasot ja aseta ne Layer 1 -kerroksen yläpuolelle ja poista sitten itse Layer 1 -taso siirtämällä se roskakoriin, jolloin tasopaletti saa saman muodon kuin kuvassa 1. 72.

Riisi. 70. Alkutila Tasot ikkunat

Vie luotu tiedosto PSD-muotoon File=>Export-komennolla. Avaa luotu PSD-tiedosto ImageReady-ohjelmassa (kuva 73). Huomaa, että kaikki Illustratorissa luodut tasot näkyvät Tasot-ikkunassa (kuva 74), ja Animaatio-ikkunassa on toistaiseksi vain yksi kehys.

Aktivoi Animaatio-palettivalikko napsauttamalla paletin oikeassa yläkulmassa olevaa mustaa nuolta ja valitsemalla Make Frames From Layers -komento. Tämän seurauksena tässä esimerkissä luodaan viisi kehystä ja Animaatiopaletti-ikkuna ottaa kuvion mukainen muoto. 75. Valitse kaikki kehykset pitämällä Shift-näppäintä painettuna ja aseta sopiva kehyksen kesto tässä esimerkissä. Sama aika 0,2 s otetaan jokaisesta ruudusta. Tallenna sitten tiedosto optimoituna komennolla Tiedosto=>Tallenna optimoitu (Tiedosto=>Tallenna optimoinnin kanssa) asettamalla Tiedostotyyppi-luettelosta vaihtoehdoksi Vain kuvat (*.gif). Animaatio muistuttaa kuvaa. 76.

Paljon mielenkiintoisemmalta ei näytä liike, vaan sekoitusobjektien tasainen koon muuttaminen. Voit esimerkiksi käyttää jo luotua sekoitussiirtymää. Tässä tapauksessa, kun olet luonut erilliset tasot kullekin sekoitussiirtymäelementille, aseta kaikki objektit päällekkäin Tasaa-paletin Horisontal Align Center- ja Vertical Align Center -painikkeilla (kuva 77).

Vie luotu tiedosto PSD-muotoon (File=>Export File=>Export) ja avaa luotu PSD-tiedosto ImageReady-ohjelmassa (kuva 78). Luo tasoihin perustuvia animaatiokehyksiä (Make Frames From Layers Create frames from layers) ja valitse niille sopiva kesto (kuva 79). Ja sitten animaation tehostamiseksi kopioi olemassa olevat kehykset, mutta päinvastaisessa järjestyksessä niin, että kuva ensin kasvaa ja sitten pienenee ja niin edelleen ympyrässä (kuva 80). Tallenna sitten optimointitiedosto (Tiedosto=>Tallenna optimoitu tiedosto=>Tallenna optimoinnin kanssa). Tuloksena oleva animaatio on esitetty kuvassa. 81.

Riisi. 80. Animaatio-ikkunan tila kehysten kopioinnin jälkeen

Riisi. 81. Animaatio valmis

Adobe Illustrator ja After Effects
Tuonti ja yksinkertainen animaatio Hei. Tänään tarkastelemme yksinkertaista animaatiota After Effectsissä.

Resurssit: Adobe Illustrator CC
Adobe After Effects CC

Aloitetaan oppiminen piirtämällä Illustratorissa.

Piirretään
1) Piirrä keltainen suorakulmio taustaksi

Kuva 1 - Suorakaide

2) Piirrä ympyrä ja täytä se gradientilla
Työstetään vähän ympyrää:
- poista ääriviivan alapiste, saamme kaaren;
- piirrä suora viiva sulkemalla kaaren alaosan, saamme puoliympyrän

Kuva 2 - 1) piirrä ympyrä; 2) gradientti; 3) poista piste

3) Piirrä suorakulmio ja tee siitä kopio
- yksi harmaa suorakulmio;
- toinen suorakulmio on tummanharmaa
4) Piirrä kolmio tähdestä asettamalla säteiden lukumääräksi 3

kuva 3 - 1) suora valo; 2) suora tumma; 3) kolmio

5) Piirrä kissa kynällä ja yksinkertaisilla kuvioilla

kuvio 4 - 1) pää; 2) niska; 3) runko; 4) jalka; 5) häntä

Ja nyt TÄRKEIN hetki
Jaetaan kuvat kerroksiin (mikä animoidaan on erillisellä tasolla) näin:

Kuva 5 - kaikki kuvat (punainen merkitse tärkeät tasot)

Siinä se, nyt säästetään.
Katsotaanpa tallennusasetuksia

Kuva 6 - Tallenna

Ja nyt seuraava vaihe. Sulje Adobe Illustrator ja avaa After Effects.

Tuo After Effectsiin
Tiedosto - Tuo - Tiedosto - valitse tallennettu Illustrator-tiedosto.
Valitaan tasojen tuonti Illustratorista; jos laitamme materiaalia, saamme kuvan yhdistetyillä tasoilla, mutta emme tarvitse sitä.

Kuva 7 - Tuo kokoonpanona

Siinä se, tuotu.
Katsotaan nyt mitä meillä on. Kaksoisnapsauta koostumusta, jotta se avautuu ja näemme kerrokset (jos kaikki on tehty oikein, kerroksia on useita). Ymmärrämme tämän, katso kuva

Kuva 8 - Avoin kokoonpano

Ja nyt olemme täällä tänään animaatiota varten.

Animaatio After Effectsissä
Aseta pyörimispiste nuolen yläosassa Pan Behind Tool -työkalulla (pikakuvake - Y). Otamme vain pisteen ja siirrämme sen tarvittaessa. Tuloksena se näyttää tältä..

Kuva 9 - Panorointityökalu ja tasot

Siinä kaikki, siirrytään nyt animaation tasoihin.
Tarvitsemme Arrow- ja Head_cat-kerroksen.
Aloitetaan nuolella.
Laajenna listaa, etsi se ja napsauta kelloa. Joten asetamme ensimmäisen pisteen nollaan sekuntiin. Animaatio kestää yhteensä 2 sekuntia.
Joten, sinun on tehtävä seuraavat asetukset (annamme yhteensä 3 pistettä):

Toinen	0	1	2
	+66	- 70	+66

Tältä se näyttää:

Kuva 10 - Pyörimisnuoli

Nyt animoidaan kissan pää.
Laajenna head_cat ja etsi sijainti .
Tässä tulee olemaan 4 pistettä.
Vain viimeinen koordinaatti muutetaan vaikuttamatta muihin.

Toinen	0.1	0.17	1.12	2.0
asema	689.3	729.3	729.3	689.3

Katsotaanpa kuvaa.

Kuva 11 - Aseta pää

Eli animaation periaate oli tällainen. Nuoli heiluu puolelta toiselle, heti kun se lähestyy kissanpentua, se vetää päänsä sisään, viipyy tässä asennossa jonkin aikaa ja palauttaa sen sitten paikoilleen.

Viimeinen vaihe

Tuotanto
Sinun on luotava työstäsi valmis tuote.
Siirry valikkoon - Lisää renderöintijonoon
Renderöi-paneeli avautuu ja Output Module (kahdella napsautuksella) valitse tulostusmuoto. Otin *.mov

Kuva 12 - Renderöi

Napsauta RENDER-painiketta ja saat tuloksen (älä unohda määrittää polkua).
Siinä kaikki.