Hvordan lage en enkel animasjon i Illustrator. Illustrert opplæring i Adobe Illustrator CS. Last ned og koble til plugin
Du har ett eller to ikoner som du ønsker å bringe til live med animasjon. Hvor ville du begynne? La oss si at du har SVG-filer, Illustrator CC og After Effects CC-programmer, men løsningen unngår deg.
I denne artikkelen skal jeg demonstrere hvordan du enkelt kan animere en SVG-fil, inkludert å forberede SVG-filen i Illustrator og importere den til After Effects CC. Jeg vil også forklare hvordan du kan konvertere den til Shape Layers og legge til bevegelse. Til slutt, la oss snakke om eksport og gjengivelse.
Det endelige resultatet av arbeidet.
La oss nå komme til den morsomme delen - å lære å bringe bilder til live.
Forberede en SVG-fil i IllustratorLa oss starte med å åpne SVG-filen din i Adobe Illustrator CC. Jeg skal animere et lite bilikon som er tilgjengelig gratis på Week Of Icons.
Etter å ha åpnet filen, må vi fjerne grupperingen og dele alle objektene i lag. Du kan gjøre dette manuelt eller bruke Slipp til lag (sekvens) for å fremskynde prosessen. Før vi importerer filen til After Effects, må vi lagre den som et Illustrator-filformat.
Vi kan dele opp objekter ved å bruke Release to Layers (Sequence) for ikke å kaste bort dyrebar tid. Importer og organiser en fil i After Effects CC Nå er du klar til å importere til After Effects CC. La oss bruke hurtigtasten Ctrl+I (Windows) eller Kommando+I (Mac) for å laste inn dialogboksen Importer fil, eller gå til Fil > Importer > Fil... Derfra velger du Illustrator CC-filen vi har forberedt og klikker Importer. . En liten dialogboks skal vises med navnet på den valgte filen. Velg Komposisjon fra rullegardinlisten som heter Import Type.
Mer rask måte importere en fil - dobbeltklikk på kolonneplasseringen i prosjektpanelet. I tidslinjepanelet vil vi se en ny komposisjon. Dobbeltklikk på den. Vi skal nå se Illustrator CC-lagene med oransje ikoner til venstre for navnene deres.
Før vi begynner, må vi konvertere alle disse lagene til Shape Layers. Vi må velge dem alle ved å bruke Ctrl+A/Command+A, eller manuelt ved å bruke Shift + Venstre mus. Etter det, høyreklikk på laget og velg Opprett > Lag former fra vektorlag.
Nå som de nye lagene er valgt, drar du dem til toppen av panelet over Illustrator CC-lagene, og sletter deretter Illustrator CC-lagene slik at de er ute av veien.
Konverter Illustrator CC-lag til formlag i After Effects CC Selv om dette ikke er nødvendig, er det viktig at vi gir hvert lag et passende navn og/eller fargekode det. Dette vil tillate oss å jobbe mer effektivt når vi fokuserer på nøkkelpersonell. I eksemplet nedenfor samsvarer fargene på etikettene mer eller mindre med fyllingen av de tilsvarende lagene.
Merking av formlag med passende navn, farger, tekst og plassering er veldig praktisk. For å konfigurere parametrene, bruk hurtigtasten Ctrl+K/Kommando+K eller Komposisjon > Komposisjonsinnstillinger... Fra Komposisjonsinnstillinger må vi velge Bredde, Høyde, Bildehastighet og Varighet. For dette prosjektet valgte jeg 60 bilder per sekund for å holde animasjonen jevn.
På dette øyeblikket Alt virker klart til å gå, men det er en ting til som må gjøres. Vi må gruppere visse lag sammen slik at bevegelsene deres er synkronisert med hovedlaget, som vi kan kontrollere. Denne metoden kalles Parenting.
Bruk Pick Whip for å tilordne et overordnet lag til flere lag. I vårt eksempel har jeg tildelt mindre signifikante lag (underlag) som f.eks Frontrute, kroppsdeler, tre og tau til det primære kroppslaget (overordnet lag). Dette tillot meg å kontrollere posisjonen og rotasjonen til hele bilen (unntatt hjulene) ved hjelp av foreldrelaget.
Opprette animasjonJeg ville at bilen skulle treffe en stein og henge litt i luften. Jeg ville også at treet skulle bevege seg opp og ned og åpne stammen. Jeg startet med å lage en stein, en bil og hjul. Da er det på tide å overvinne det største hinderet – å sette handlingen på treet. Når det var gjort, gikk jeg videre til de mindre delene som stativ og tau.
Skisse som beskriver animasjonen Det første trinnet var å lage et steinelement eller lag, men i stedet for å gå tilbake til Illustrator CC for å legge til et lag til, brukte jeg bare pennverktøyet i After Effects CC. Dette gjorde at jeg raskt kunne designe en liten stein.
Å, det mektige pennverktøyet! Bagasjerommet var en relativt enkel oppgave. Jeg monterte den bak på bilen og laget et ankerpunkt nederst til venstre. Ved å bruke Pick Whip tildelte jeg den til det overordnede kroppslaget. Det nest siste trinnet var å gi effekten av rotasjon, som igjen gjorde øyeblikket bilen spretter mer realistisk.Bodymovin i kombinasjon med Lottie mobilbibliotek.
P.S. du kan finne mine Illustrator CC- og After Effects CC-filer.
Ikonsettet er tilgjengelig for nedlasting gratis på .
Nylig har ulike typer animasjoner av SVG-grafikk (Scalable Vector Graphics) på nettsteder og applikasjoner blitt veldig populære. Dette skyldes det faktum at alt nyeste nettlesere støtter allerede dette formatet. Her er informasjon om nettleserstøtte for SVG.
Denne artikkelen diskuterer det enkleste eksemplet på en SVG-vektoranimasjon som bruker den lette Jquery-pluginen Lazy Line Painter.
KildeFor å fullføre og fullt ut forstå denne oppgaven, er grunnleggende kunnskap om HTML, CSS, Jquery ønskelig, men ikke nødvendig hvis du bare vil animere SVG) La oss komme i gang!
Og dette er trinnene vi må følge:
1. Lag riktig filstruktur
Initializr-tjenesten vil hjelpe oss med dette, hvor vi må velge parametere som på bildet nedenfor.
- Classic H5BP (HTML5 Boiler Plate)
- Ingen mal
- Bare HTML5 Shiv
- Forminsket
- IE-klasser
- Chrome Frame
- Klikk deretter på Last ned!
2. Last ned og koble til plugin-en
Siden initializr kommer med det nyeste Jquery-biblioteket, fra arkivet som vi må laste ned fra Lazy Line Painter-prosjektet, trenger vi bare å overføre 2 filer til prosjektet vårt. Den første er 'jquery.lazylinepainter-1.1.min.js' (plugin-versjonen kan variere) den ligger i roten til den resulterende mappen. Den andre er example/js/vendor/raphael-min.js.
Vi plasserer disse 2 filene i js-mappen. Og vi kobler dem til index.html før main.js som følger:
3. Tegn et kult konturbilde i Adobe Illustrator
Du kan for eksempel bruke ikonene i vedlegget.
4. Konverter bildet vårt til Lazy Line Converter
Bare dra ikonet inn i vinduet på bildet nedenfor.
Tykkelsen, fargen på omrisset og animasjonshastigheten kan endres i selve koden, som vises etter konvertering!
5. Lim inn den resulterende koden i main.js
Nå limer vi ganske enkelt inn den resulterende koden i en tom main.js-fil
Alternativer:
strokeWidth — konturtykkelse
strokeColor — konturfarge
Du kan også endre tegnehastigheten til hver vektor ved å endre verdiene til varighetsparameteren (standard 600)
6. Legg til litt CSS etter smak
Fjerne et avsnitt fra index.html
Hei Verden! Dette er HTML5 Boilerplate.
Og i stedet for det setter vi inn en blokk der animasjonen vår skal finne sted
så legger vi til litt CSS i main.css-filen for å få den til å se penere ut:
Brødtekst ( bakgrunn:#F3B71C; ) #ikoner (posisjon: fast; topp:50%; venstre:50%; margin: -300px 0 0 -400px; )
lagre alle filer.
Nå er det bare å åpne index.html i en moderne nettleser og nyte effekten.
P.S. når du starter på lokal maskin Det kan være en forsinkelse i starten av animasjonen i flere sekunder.
Hei alle sammen! I dag skal jeg prøve å beskrive mulighetene Adobe-programmer Illustrator, sammenligner det med funksjonene til Flash. Dette vil ikke være en global analyse av programmet, men snarere en beskrivelse av noen interessante funksjoner som jeg oppdaget i dette programmet. Jeg samlet informasjon bit for bit etter hvert som jeg studerte den for å legge ut alt i ett innlegg. Jeg innrømmer med en gang at jeg ikke er en supererfaren bruker av Illustrator, jeg har bare brukt den til å tegne de siste seks månedene (før det tegnet jeg alt i Flash). Mange klager over at illustratøren er kompleks og ikke alltid intuitiv. Til en viss grad er jeg enig i at etter flush dette programmet er komplekst. Men det viktigste her er ikke å gi opp, men å fortsette å studere. Og etter et par uker dukker tanken opp, hvordan klarte jeg meg uten før!
Så, hva likte jeg med illustratøren, og hva fant jeg som ikke var i flash?
1. Jeg starter med det enkleste, men samtidig nødvendige. Prøv å ordne objekter i en sirkel i Flash. Tidligere var det et Deco Tool, men det ble fjernet, tilsynelatende ansett som unødvendig. Vi bestemte oss for at det ville være morsommere å gjøre det med hender. Illustrator har denne funksjonen: Effekt – Forvreng og transformer – Transformer.
Alt er raskt og enkelt; vi setter verdiene (avstand mellom objekter, antall kopier) selv i innstillingene.
2. Sikk-sakk
En enda enklere, men ikke desto mindre nyttig ting. Det virker som en liten ting, men i Flash må du tegne for hånd, i Illustrator er det et spørsmål om sekunder.
3. Deformasjon av objekter (Warp)
Det er ingenting som dette i Flash. I eksemplet nedenfor viste jeg bare 2 måter å deformere enkle former (Effekt – Warp – Arc/Fish). Faktisk er det 15 av dem siste versjon programmer.
4. Automatisk avrunding av hjørner (Round Corners)
Du kan gjøre det manuelt: på et grafisk objekt, når det er valgt, vises en hvit prikk og et avrundet linjetegn i hjørnet (i alle hjørner). Vi drar med musen og justerer den etter din smak.
Men dette gjelder kun former, med en blyantlinje gjør vi det litt annerledes - vi legger på en avrundingseffekt (Effekt – Stylize – Round Corners). Ved utgangen får vi samme resultat.
5. Ru
Effekten brukes på enkle former (Effect – Distort&Transform – Roughen). Utgangen er noe som ligner lavpoly 3D-modeller. Jeg synes det er kult :) Og viktigst av alt, det er veldig enkelt.
6. Pucker & Bloat (trekk og oppblåsthet)
Eksempel på bildet nedenfor:
7. Skjemautvidelse (forskyvningsbane)
Flash har en Expand Fill-funksjon; den fungerer ikke med blyantlinjer i det hele tatt, i motsetning til Illustrator.
8. Børster (kunstbørste, mønsterbørste, strøbørste)
Se på bildet nedenfor med eksempler:
9. Teksturbørste
Illustrator har også mange teksturbørster, som jeg skrev om og hvordan de dukket opp i ny verson blits - . Det ble lagt merke til at bruk av børster i Adobe Animate er fryktelig tregt. Det er det:(
10. Jeg er ikke sikker på om dette er et skikkelig triks, men jeg vil fokusere på en børste med det morsomme navnet Blob Brush. Ligger i verktøylinjen, er dette en veldig fin børste å bruke. Den har en haug med innstillinger, jeg liker den mer enn den vanlige. Det er vanskelig å forklare fordelene med ord, det er bedre å prøve det en gang.
10. Del opp til rutenett
En annen nyttig ting er funksjonen Split to Grid (Object-Path-Split to Grid) som lar deg kutte formen i like segmenter. Hva minner dette oss om? Det stemmer – vinduer i et høyhus. Jeg synes det er en kul ting å tegne for eksempel bylandskap;)
En annen nyttig verktøy, omtalt i illustrator sannsynligvis siden den første utgivelsen. Med dens hjelp kan du for eksempel lage treteksturer:
12. Flytt (høyre – Transformer – Flytt)
Forskyver et objekt med en spesifisert avstand. Om ønskelig kan du umiddelbart lage en kopi som vil bli plassert i ønsket avstand fra det valgte objektet horisontalt/eller vertikalt. En tidligere versjon av Flash hadde en plugin som gjorde det denne funksjonen. Dessverre husker jeg ikke navnet.
Illustrator er veldig praktisk for å lage sømløse mønstre (Object-Pattern-Make). Jeg husker hvor rasende jeg utviklet raffinement i flash med opprettelsen av . I SS 2015-versjonen av Illustrator er alt automatisert; en haug med innstillinger vil hjelpe deg med å lage et mønster i dusinvis av varianter, med bare noen få grafiske elementer for hånden. I mer tidligere versjoner Alle programmer måtte gjøres manuelt, akkurat som i Flash til nå.
(Merk – mønsteret kan gjøres til et vektorredigerbart objekt ved å bruke funksjonen Objekt – Utvid utseende.
14. Objektmosaikk
Lage en fargepalett basert på et eksisterende bilde. Importer bildet du liker til illustrasjonen (Åpne), deretter Objekt – Lag objektmosaikk. I innstillingene spesifiserer vi frekvensen for deling i høyde og bredde.
Og ved utgangen får vi:
15.Blend
Brukes til å lage gradienter. Du kan lage trinnvise overganger, slik som på bildet. Jeg vil ikke si at jeg bruker det ofte, men det kan være nyttig for noen. Det virker for meg som det kan brukes til å lage enkle bakgrunnsbilder.
Verktøyet kan også brukes til å klone objekter. Plasser to objekter i avstand fra hverandre og bruk blandingsalternativer, velg antall trinn (antall klonede objekter).
16. Bygg formverktøy. En veldig praktisk ting for å jobbe med primitiver. I flash, virket det for meg, det var mindre praktisk.
Hold nede Alt og klikk på de valgte segmentene for å slette segmentene. Hvis vi bare drar musen over flere utvalgte områder - forbindelser.
Add-on er et verktøy som hjelper til automatisk å kutte, koble til osv. uthevede skjemaer. For meg er det ikke veldig praktisk; Jeg bruker ofte Build Shape Tool.
(kunsttavler)
18. Tilpasset verktøypanel
Muligheten til å lage din egen verktøylinje, forkaste unødvendige, og velge bare de du bruker.
I Flash er tegnebrett, nemlig scener (Scene 1,2,3..) plassert separat og du må bytte mellom dem (Shift+F2). I Illustrator kan de alle plasseres foran øynene dine. Det er praktisk når du lager flere versjoner av samme tegning, slik at alle alternativene er foran øynene dine for sammenligning.
19. Isometrisk bruk av grafiske stiler
Og den siste tingen er å lage isometri uten å bruke den i 1 klikk (eller mer presist, i 3 klikk, fordi vi har 3 sider;) ved å bruke grafiske stiler (Graphic Styles). Jeg skal beskrive hvordan dette gjøres neste gang.
Felles for illustratøren med flash er muligheten til å lagre et objekt til et symbol, og like enkelt kan dette symbolet overføres til flash (åpne filen i flash.ai ved å bruke Import – Import to stage).
Symbolet i Illustrator har de samme egenskapene som i Flash.
Og avslutningsvis vil jeg skrive at i Illustrator, etter min mening, er det dårligere enn flash. Ja, ja, det er noe slikt. Og dette er påfyllingsverktøyet (Paint Bucket). Uansett hvor hardt jeg prøver å bli vant til det i Illa, er det mer praktisk i Flash.
Hvis notatene mine har blitt nyttige for deg eller hvis du vil legge til noe eget, velkommen i kommentarene! Lykke til alle sammen;)
Optimalisering av webgrafikk
Grafisk informasjon overføres mye langsommere enn tekst, og innlastingstiden for bilder er proporsjonal med størrelsen grafiske filer. Derfor krever rask lasting av websider en liten størrelse innebygd grafiske bilder, som oppnås gjennom deres optimalisering. Bildeoptimalisering forstås som konverteringen, som sikrer en minimumsfilstørrelse samtidig som bildekvaliteten som kreves i dette tilfellet opprettholdes, som oppnås først og fremst ved å redusere antall farger i grafiske bilder, bruke komprimerte og spesielle filformater, og optimalisere komprimeringsparametere for individuelle bildefragmenter.
Illustrator har innebygde bildeoptimaliseringsverktøy som gjør optimaliseringsprosessen rask og effektiv med en rekke forhåndsvisningsmetoder. Forhåndsvisningen gir en ganske nøyaktig ide om hvordan det optimaliserte bildet vil se ut i sanntid, noe som hjelper deg med å evaluere optimaliseringsresultatet og velge riktige innstillinger. Og du kan optimere både bilder som er opprettet direkte i Illustrator, og andre, for eksempel fotografier som skal plasseres på et nettsted.
Optimaliseringsparametere angis i vinduet Lagre for web, kalt opp av kommandoen med samme navn fra Fil-menyen. Programmet tilbyr deg å bruke en av fire forhåndsvisningsmoduser, men to er best egnet for å vurdere kvaliteten på optimalisering:
- 2-opp (to alternativer) samtidig visning av originalen og det optimaliserte bildet i samsvar med de spesifiserte innstillingene (fig. 1);
- 4-opp (fire alternativer) I denne modusen er visningsporten delt inn i fire vinduer (fig. 2) for å vise det originale bildet og tre versjoner av det optimaliserte: den første versjonen opprettes basert på de angitte optimaliseringsverdiene, og to andre er varianter av de gjeldende optimaliseringsinnstillingene.
Begge modusene lar deg spare tid betydelig på å finne det beste optimaliseringsalternativet, da de eliminerer behovet for å lagre bilder med forskjellige optimaliseringsinnstillinger og deres påfølgende visuelle sammenligning. I tillegg er det mulig å evaluere ikke bare kvaliteten på det optimaliserte bildet, men også størrelsen og lastetiden under forskjellige tilkoblingsalternativer. Til sammenligning er den mest praktiske modusen 4-Up (fire alternativer), som lar deg visuelt evaluere effekten av komprimering eller palettreduksjon på bildekvaliteten og størrelsen og til slutt bestemme de beste optimaliseringsparametrene.
Illustrator lar deg optimere webgrafikk i ikke bare GIF-, JPG-, PNG-8 og PNG-24-formater, men også SWF og SVG. Indekserte bilder som har et lite antall farger, lagres i GIF-format. JPG-formatet brukes til å lagre fullfarge- og gråtonebilder, fotografier og fargerik grafikk, for eksempel gradientfyll. For fullfargebilder med gjennomsiktige områder brukes PNG-formatet, som lar deg lagre både indekserte og fullfargebilder, mens i PNG-8-formatet er maksimalt mulig antall farger på det optimaliserte bildet 256, og i PNG-24-formatet kan bildet ha millioner av farger, og det er derfor han ser ut som JPEG-format. Forskjellen mellom PNG-24 og JPEG er at komprimeringsmetoden som brukes for å optimalisere bilder i PNG-24-formatet ikke fører til tap av kvalitet, men som et resultat øker filstørrelsen. SVG- og SWF-formatene kombinerer grafikk, tekst og interaktive komponenter og kan også optimaliseres.
La oss vurdere spesifikt eksempel bildeoptimalisering. La oss si at en nettsidelogo ble utviklet i Illustrator (fig. 3), opprinnelig lagret i AI-format. Et forsøk på å optimalisere det umiddelbart for nettet vil ikke føre til noe bra, siden i dette tilfellet vil bildet automatisk beskjæres, noe som ikke vil ta hensyn til den sanne plasseringen av den resulterende inskripsjonen som et resultat av deformasjon (fig. 4 og 5).
Derfor, la oss prøve å eksportere logoen til PSD-format med kommandoen Fil=>Eksporter (Fil=>Eksporter) størrelsen på det opprettede bildet vil være 143 KB. Åpne den resulterende PSD-filen og bruk kommandoen Fil=>Lagre for web. Med tanke på det begrensede antallet farger som er involvert i bildet, er GIF-formatet optimalt i dette tilfellet, og de spesifikke innstillingene må bestemmes. Ved å eksperimentere med innstillingene kan du være sikker på det beste kvalitet gir programmets standard komprimeringsalgoritme, Selektiv. Når det gjelder utjevning, gitt tilstedeværelsen av en gradientfylling, er det bedre å velge en algoritme med støygenerering Støy (fig. 6). Størrelsen på den resulterende optimaliseringsfilen vil være 6.729 KB (fig. 7), mens gjennomsiktigheten av bakgrunnen vil bli bevart, noe som er lett å verifisere ved å lagre bildet i GIF-format sammen med HTML-filen (fig. 8). Som et resultat, i dette eksemplet, ble filene emblem.html og emblem.gif hentet i Primer1-mappen.
Et uunnværlig spesifikt element i utformingen av alle websider er grafiske kontrollknapper. Det er rett og slett umulig å forestille seg en side uten dem. Knappetegning har blitt en spesiell sjanger i dag, og Illustrator lar deg lage de mest intrikate alternativene. For eksempel ser knapper utformet som mesh-objekter og/eller med overleggsmasker mye mer imponerende ut enn vanlige.
Vurder muligheten for å lage en rund, konveks knapp i Illustrator. Tegn et vektorobjekt i form av en sirkel fylt med en vilkårlig farge (fig. 9) og konverter det til en maske med kommandoen Object => Create Gradient Mesh (Object => Create a gradient mesh), spesifiser fire rader og fire kolonner, og i Utseende-listen velger du alternativet To Center Highlight lik 60 (fig. 10). Velg Direct Selection-verktøyet og klikk i øvre venstre hjørne av objektet, velg ankerpunktene som ligger der (fig. 11). Endre fargen på den tilsvarende cellen til hvit ved å velge den i fargeprøvepaletten (fig. 12).
Ta Ellipse-verktøyet, plasser musemarkøren i midten av sirkelen som ble opprettet før, og hold nede Alt- og Shift-tastene og strekk den nye sirkelen over den gamle slik at den er 1-2 piksler større enn den gamle på alle. sider. Gi den en svart kant (Stroke) 1-2 piksler bred og fyll den med en radiell gradient i retningen fra rød til hvit (fig. 13). Dra det opprettede vektorobjektet 1-2 piksler til høyre og ned, og høyreklikk på det og ut uten å fjerne valget kontekstmenyen velg Ordne=>Send til baksiden. Resultatet vil være blank for knappen, vist i fig. 14.
Som regel er det på en hvilken som helst nettside flere knapper av samme type, som for eksempel bare er forskjellige i retningen til pilene som er tegnet på dem, og indikerer bevegelsesretningen rundt nettstedet. La oss vurdere det enkleste tilfellet med å ha to knapper, hvorav den ene, med en pil ned, vil bety å flytte til neste side, og en knapp med en pil opp vil bety å flytte til den forrige. Som en pilmal, la oss ta en vanlig trekant, tegnet med polygonverktøyet, malt svart og, for større effekt, også utformet som et nettobjekt. Flytt pilen til knappen og juster posisjonen til alle objekter i forhold til hverandre ved å bruke de tilsvarende knappene i Juster-paletten. Den første av de resulterende knappene er vist i fig. 15. La oss lage en kopi av laget med knappen ved å velge kommandoen Duplicate Layer Layers, som et resultat vil vi få to identiske lag. Velg deretter pilen på kopien av laget og roter det 180° ved å velge kommandoen Transform=>Roter transformasjon=>Roter fra kontekstmenyen. Vi vil få den samme knappen som vist i fig. 16. Vær oppmerksom på at det er mye mer praktisk å lagre alle den samme typen knapper for ett prosjekt i én fil på forskjellige lag, noe som er demonstrert i dette tilfellet.
Nå må du lagre de optimaliserte versjonene av hver knapp. Først gjør det nederste laget usynlig i dette tilfellet vil knappen på det øverste laget bli bevart. Velg kommandoen Fil=>Lagre for web, konfigurer knappoptimaliseringsparametrene, for eksempel som vist i fig. 17, klikk på Lagre-knappen og skriv inn et filnavn. Den endelig lagrede knappen er vist i fig. 18. Returner nå synligheten til det nederste laget, gjør det øverste laget usynlig og lagre den andre knappen på samme måte, og gir den et annet navn. Resultatet er vist i fig. 19.
Nå gjenstår det bare å sørge for at knappene ser ganske akseptable ut på nettsiden og plassere dem på en egendefinert side (fig. 20). Som et resultat, i dette eksemplet, ble filen Primer2.html og to grafiske bilder hentet i bilder-mappen (Primer2-mappen).
Om ønskelig er det enkelt å gjøre om en knapp til en skive under optimaliseringsprosessen. I dette tilfellet, etter å ha valgt kommandoen Fil=>Lagre for web (Fil=>Lagre for web) og angitt optimaliseringsparameterne, bør du velge Slice Select-verktøyet fra verktøypaletten og dobbeltklikke på bildet, som til slutt vil automatisk bli til en skive med serienummer 1 (fig. 21). Hvis du dobbeltklikker på nytt, åpnes vinduet Slice Options, der du må spesifisere en lenke og eventuelt endre navnet på skiven (Figur 22), og deretter lagre det optimaliserte bildet. Resultatet i dette tilfellet vil være filene Primer3.html (Fig. 23) og Primer3.gif (Primer3-mappen).
En måte å bringe en side til live er å introdusere designelementer som endrer den utseende(eller tilstand) avhengig av oppførselen til musen eller, sjeldnere, i tilfelle andre situasjoner: skalering, rulling, lasting, feil, etc.
Blant slike elementer er de mest kjente rollovers (fra engelske roll over roll over, turn over) elementer som endrer utseende under påvirkning av musen. Eksempler på typiske rollovers er animerte knapper. Overrullinger brukes ofte når du oppretter andre nettstedsnavigasjonselementer. I virkeligheten er enhver rollover ikke ett, men flere (opptil fire) bilder, som hver tilsvarer en spesifikk hendelse. Hovedhendelsene anses å være følgende: Normal normal tilstand, Hold musepekeren over et element og ned trykk på venstre museknapp når du holder markøren over det. Teoretisk sett kan hendelser som Klikk på å slippe venstre museknapp etter å ha klikket, Opp etter å slippe knappen, Ut når du forlater den aktive sonen. Men i praksis er de ofte begrenset til å endre elementet bare for de tre eller til og med to første hendelsene.
Klassiske rolloversI klassisk forstand er en rollover en serie med grafiske bilder i GIF-format og den tilhørende HTML-koden, takket være hvilken, avhengig av musens oppførsel, ett bilde erstatter et annet i nettleservinduet.
Illustrator er ikke ment for direkte å lage rollovers i klassisk forstand, men det kan hjelpe med å utvikle de første elementene for dem. Ideen i dette tilfellet er å lage et lag med bildet som tilsvarer den første hendelsen. Lag deretter en kopi av laget og transformer bildet til å matche den andre hendelsen, og så videre. Det resulterende flerlagsbildet eksporteres til en PSD-fil med lagene bevart, på grunnlag av dette opprettes en rollover i Image Ready-programmet. Fordelen med å bruke Illustrator-programmet, som i mange andre tilfeller, er en rekke interessante funksjoner som ikke er tilgjengelige i andre programvare, kombinert med bekvemmeligheten av å transformere vektorgrafikk.
La oss prøve å lage en rollover i form av en inskripsjon som endrer farge avhengig av musens oppførsel. Åpne Illustrator og lag en form i form av et avrundet rektangel fylt med svart (fig. 24), lag en kopi av den og plasser den i en ledig del av skjermen. Konverter den første kopien av rektangelet til et maskeobjekt med en fremheving i midten (kommando Object=>Create Gradient Mesh Object=>Create Gradient Mesh), spesifiser fire rader og ti kolonner (fig. 25). Aktiver den andre kopien av rektangelet og sett den til en gradientfylling omtrent som vist i fig. 26. Legg gradientobjektet på toppen av mesh-objektet, reduser opasiteten til gradientobjektet til ca. 80 %, og størrelsen med ca. 1 piksel for til slutt å simulere effekten av en bump. Og skriv deretter ut inskripsjonen på toppen av gjenstandene. I sin opprinnelige form, la den ha en hvit farge, som vil tilsvare normaltilstanden (fig. 27), og når rulletilstanden endres, vil fargen på inskripsjonen endres, for eksempel til grønn når musemarkøren holdes over den (Over-tilstand) og til blå når museknappen trykkes (Ned-tilstand).
Vær oppmerksom på Lag-paletten på dette stadiet er det bare ett enkelt lag i den. Lag to kopier av dette laget ved å bruke kommandoen Duplicate Layer fra Layers palettmenyen, det vil være tre lag i paletten (fig. 28). Deretter i den første kopien av laget endres fargen på inskripsjonen til grønn, og i den andre kopien til blå (fig. 29). Som et resultat vil den nødvendige blanken for overrullingen oppnås.
Eksporter det opprettede bildet til PSD-format, bevar lagene, bruk File=>Export-kommandoen og velg RGB-fargemodellen (fig. 30). Åpne den opprettede PSD-filen i ImageReady-programmet (fig. 31 og 32). Lag rammer basert på lag ved å velge Lag rammer fra lag-kommandoen fra animasjonspalettmenyen. Animasjonsvinduet vil se ut som i fig. 33. I dette tilfellet vil en enkelt Normal-tilstand i utgangspunktet bli opprettet i Rollovers-paletten.
Velg deretter rammen som tilsvarer den induserte tilstanden i animasjonsvinduet, og Lag 1-kopilaget vil automatisk bli valgt i Lag-paletten (fig. 34). Gå til Rollovers-paletten og klikk på knappen Create Rollover-tilstand (Opprett en rollover-tilstand) fig. 35, som vil føre til at Over State-tilstanden vises i Rollover-paletten (fig. 36). Opprett en Down State på samme måte. Aktiver Normal-tilstanden i Rollover-paletten og slett alle frames i Animation-paletten bortsett fra den som skal tilsvare Normal-tilstanden. Som et resultat vil det for hver rollover-tilstand bare være én ramme i animasjonspaletten (fig. 37, 38 og 39).
Ris. 38. Visning av bildet, animasjonsvinduet og palettene Layers and Rollovers for staten Over State
Sjekk resultatet ved å klikke på Forhåndsvisning i standardnettleser-knappen på verktøylinjen og gå til nettleservinduet (Figur 40). Deretter lagrer du filen ved å bruke File=>Save Optimized-kommandoen og spesifiserer HTML og bilder (*.html). Som et resultat, i dette eksemplet, ble filen Primer4.html og en serie med grafiske bilder hentet i bildermappen.
Ris. 40. Nettleservindu med Rollover-element
SVG-veltningerDet stadig mer populære SVG-formatet (Scalable Vector Graphics). Vektorgrafikk), opprettet basert på XML-standarden, lar deg også motta en rekke interaktive elementer, spesielt rollovers, men i praksis implementeres dette helt annerledes. Det er verdt å merke seg at å lage interaktive SVG-rollovers, i motsetning til klassiske, når den tilsvarende HTML-koden genereres helt automatisk, krever kunnskap om JavaScript-språket og en forståelse av de grunnleggende prinsippene for objektorientert programmering.
For å jobbe med SVG-objekter er det en spesiell palett SVG Interactivity, som enkelt kan åpnes ved å bruke kommandoen Vindu => SVG-interaktivitet (Vindu => SVG-interaktivitet) fig. 41.
La oss vurdere dette alternativet for å lage en overrulling ved å bruke eksemplet på en interaktiv knapp, fargen på inskripsjonen vil endres fra svart til blå når du svever med musen og igjen forvandles til svart når musen forlater den aktive sonen.
Lag en rektangulær knapp med avrundede kanter og velg en passende gradientfylling for den, for eksempel som vist i fig. 42. Juster gjennomsiktigheten til knappen i paletten Transparence. I dette eksemplet er Opacity-verdien satt til 50 %. Lag en kopi av knappen, fyll den med mørkegrønn (Figur 43), og konverter den deretter til et maskeobjekt med kommandoen Object => Create Gradient Mesh, spesifiser fire rader og ti kolonner, og i Utseendelisten (View) ved å velge alternativet To Centre og sette Highlight-verdien til 100. Reduser opasiteten til laget med maskeobjektet til ca. 40 % (fig. 44). Plasser et nettobjekt på toppen av en gradient, og knappen vil ligne den som er vist i fig. 45.
Ris. 44. Gjør en kopi av en knapp til et nettobjekt
Fullfør knappen med den tiltenkte inskripsjonen og juster posisjonen ved å bruke de tilsvarende knappene i Juster-paletten. Det resulterende bildet vil inneholde ett lag med tre objekter lagt over hverandre (fig. 46). Planlagte hendelser vil være i forhold til et tekstobjekt, så for enkelhets skyld kan du endre navnet til Tekst ved å dobbeltklikke på objektet og skrive inn et nytt navn. På samme måte endrer du lagnavnet fra Layer 1 til Layer (fig. 47).
Hendelsesbehandling involverer bruk av JavaScript-prosedyrer, så du må inkludere en fil som beskriver disse prosedyrene. Den heter Events.js og lagres på disk i mappen Sample Files\Sample Art\SVG\SVG når du installerer Adobe Illustrator. For å koble til Events.js-filen, bruk JavaScript Files SVG Interactivity-kommandoen (fig. 48). Deretter må du klikke på Legg til-knappen og finne ønsket fil på harddisken. Når navnet hans vises i URL-feltet (Figur 49), klikker du på Ferdig-knappen.
Ris. 48. Velge kommandoen JavaScript-filer
Deretter må du definere et svar på musehendelser for tekstobjektet. Velg tekstobjektet, i hendelsesfeltet i SVG-interaktivitetspaletten, velg hendelsen på musen over elemColor(evt, "Tekst", "#3333FF") dette vil bety at når musen er over tekstobjektet, vil fargen endres til blå (fig. 50). For at tekstfargen skal endres til svart etter at musen forlater det aktive området, må du opprette en annen onmouseout-hendelse, velg den i hendelsesfeltet i SVG Interaktivitet-paletten. Skriv deretter inn teksten elemColor(evt, "Text", "#000000") i handlingslinjen, dette vil returnere fargen til svart (Figur 51).
Ris. 51. Endelig utseende på SVG-interaktivitetspaletten for tekstobjektet
Lagre den opprettede rolloveren som en SVG-fil med kommandoen Fil=>Lagre som (Fil=>Filtype SVG-format, og angi deretter alternativene for å lagre SVG-filen som vist i Fig. 52. Etter lagring vil du motta bare én enkelt fil med filtypen SVG, og ikke to, som i tilfellet med en klassisk rollover, i dette tilfellet ble filen Primer5.svg (Primer5-mappen) mottatt. Men for at rolloveren virkelig skal fungere, må du i tillegg kopiere Events.js-filen fra beskrivelse av JavaScript-prosedyrer. Etter dette kan du sjekke funksjonaliteten til overrullingen, resultatet vil se ut som vist i fig. 53.
SVG-formatet kan også brukes til å formidle animasjon. La oss prøve å lage et enkelt animert element (i dette tilfellet vil det være informasjon om selskapet), som vises på skjermen når du holder musen over det tilsvarende grafiske objektet og forsvinner når du fjerner musen fra det interaktive elementet.
La oss lage omtrent følgende serie med grafikk- og tekstobjekter, som vist i fig. 54. La oss gi nytt navn til alle opprettede objekter på en praktisk måte ved å sekvensielt klikke på navnet til neste objekt i lagpaletten og gå inn ønsket navn(Fig. 55). Vær oppmerksom på at de som er uthevet i fig. 56 objekter Text1, Text2, Text3 og Path1 vil alltid være synlige, og alle andre kun når du holder musepekeren over Tekst1-objektet.
Ris. 54. Originalvisning av bildet
Inkluder Events.js-filen som beskriver JavaScript-prosedyrene ved å bruke JavaScript-filer-kommandoen fra SVG-interaktivitetspaletten, klikk på Legg til-knappen, pek på ønsket fil på harddisken og klikk på Ferdig-knappen.
Definer et svar på musehendelser for Text1-objektet. Velg tekstobjektet, i hendelsesfeltet i SVG Interaktivitet-paletten, velg hendelsen ved museovergang og på linjen under skriv inn teksten elemShow(evt, "Text4"); elemShow(evt, "Path2") . Som et resultat, når musen er over Text1-objektet, vil Text4- og Path2-objektene bli synlige. Vær oppmerksom på at hvis flere handlinger må utføres når en hendelse inntreffer, må de spesifiseres med ";"-tegnet. Utfør deretter en lignende operasjon for onmouseout-hendelsen, skriv inn teksten for den, som vil bety å skjule objekter (fig. 57).
Lagre resultatet som en SVG-fil ved å bruke kommandoen Fil=>Lagre som, spesifiser filnavnet, velg SVG-formatet i Filtype-feltet, og angi deretter alternativene for å lagre SVG-filen i samsvar med fig. 58. Etter lagring vil Primer6.svg-filen mottas (Primer6-mappen). Ikke glem å kopiere Events.js-filen til mappen med denne filen. Hvis du etter dette kjører coz denne filen, så vil du se resultatet vist i fig. 59. Dette er nesten det du trenger. Det eneste som ikke var inkludert i planene våre var det første utseendet til tekst 4 og bane 2-objekter ved lasting. For å bli kvitt denne mangelen, velg begge objektdataene samtidig og lag en handling for dem elemHide(evt, "Text4"); elemHide(evt, "Path2") ved onload-hendelsen (fig. 60). Lagre filen igjen og sørg for at Text4- og Path2-objektene nå bare er synlige når du holder markøren over Text1-objektet.
Enhver webside er utenkelig uten nettanimasjon, inkludert animerte gif-er. Et av alternativene for å lage dem er å bruke Adobe ImageReady-applikasjonen, som blant annet lar deg lage animasjon fra lag. I dette tilfellet kan selve flerlagsbildet forberedes i forskjellige applikasjoner, inkludert Adobe Illustrator.
Det er veldig enkelt å lage en animasjon basert på elementer fra symbolpaletten, åpnet med kommandoen Window=>Symbols, eller fra et av symbolbibliotekene som kan åpnes ved å bruke Window=>Symbol Libraries-kommandoen. ).
For eksempel vil vi prøve å øke størrelsen på et symbolobjekt; nøkkelstadiene i prosessen med å øke objektet må settes på separate lag. Først plasserer du symbolobjektene over hverandre, og øk deretter størrelsen på hvert påfølgende objekt, for eksempel som vist i fig. 61. Som et resultat vil ett lag med mange objekter bli opprettet i Lag-paletten (fig. 62). Hvis du direkte eksporterer dette bildet til PSD-format, vil det ikke gi noe, siden det bare er ett lag, og naturlig nok, når du åpner PSD-filen i ImageReady-programmet, vil det også bare være ett lag. Derfor må du først plassere objekter på forskjellige lag. Dette kan gjøres forskjellige måter Den enkleste måten er først å velge lag 1 i lagpaletten og bruke Slipp til lag-kommandoen. Resultatet vil være at hvert av objektene flyttes til sitt eget lag, men de vil alle bli nestet i lag 1. Derfor må du manuelt dra alle de nestede lagene til toppen av Layers-paletten slik at de er over Layer 1-laget, og deretter slette det nå tomme Layer 1-laget (fig. 63). Eksporter bildet til PSD-format ved å bruke kommandoen File=>Export med innstillinger som i fig. 64.
Last inn den opprettede PSD-filen i ImageReady-programmet (fig. 65 og 66). Åpne palettmenyen Animasjon Lag rammer fra lag. Som et resultat vil fem rammer bli opprettet, som hver tilsvarer sitt eget lag, og animasjonspalettvinduet vil se ut som i fig. 67.
Etter dette, angi varigheten for hver av de opprettede rammene i dette tilfellet, varigheten for alle rammer er satt til 0,2 s. Og lagre deretter animasjonen med optimalisering ved å bruke kommandoen Fil=>Lagre optimalisert (Fil=>Lagre med optimalisering). Det resulterende resultatet kan ligne fig. 68.
Det er enda mer praktisk å skaffe blanks som deretter enkelt kan konverteres til animasjon i ImageReady for å bruke Live Blends-funksjonene til Illustrator. Denne kombinerte bruken av Illustrator og ImageReady fremskynder prosessen med å lage GIF-animasjoner betydelig.
Tegn for eksempel to vilkårlige flerfargede objekter, og koble dem deretter med en blandingskobling med de riktige parameterne (fig. 69). Det er umulig å bruke denne filen direkte til å lage animasjoner, siden bildet er på et enkelt lag (fig. 70). Derfor må du først plassere hvert element i blandingsobjektet på et eget lag. For å gjøre dette, i lagvinduet, velg linjen, aktiver palettmenyen ved å klikke på den svarte pilen i øvre høyre hjørne, og velg kommandoen Frigjør til lagsekvens (fig. 71). Hold nede Shift-tasten, velg de opprettede lagene og plasser dem over Layer 1-laget, og slett selve Layer 1-laget, flytt det til papirkurven som et resultat, vil lagpaletten ha samme form som i fig. 72.
Ris. 70. Opprinnelige tilstand Lag vinduer
Eksporter den opprettede filen til PSD-format ved hjelp av kommandoen File=>Export. Åpne den opprettede PSD-filen i ImageReady-programmet (fig. 73). Vær oppmerksom på at alle lag som er opprettet i Illustrator vil vises i lagvinduet (fig. 74), og i animasjonsvinduet vil det foreløpig bare være én ramme.
Aktiver animasjonspalettmenyen ved å klikke på den svarte pilen i øvre høyre hjørne av paletten og velg kommandoen Lag rammer fra lag. Som et resultat, i dette eksemplet, vil fem rammer opprettes, og animasjonspalettvinduet vil ta skjema i henhold til fig. 75. Velg alle frames mens du holder nede Shift-tasten og still inn riktig bildevarighet i dette eksemplet, samme tid på 0,2 s tas for hver frame. Lagre deretter filen med optimalisering ved å bruke kommandoen Fil=>Lagre optimalisert (Fil=>Lagre med optimalisering), og sett alternativet Kun bilder (*.gif) i Filtype-listen. Animasjonen vil ligne fig. 76.
Det som ser mye mer interessant ut er ikke bevegelsen, men den jevne størrelsen på blandingsobjekter. Du kan for eksempel bruke den allerede opprettede blandingsovergangen. I dette tilfellet, etter å ha opprettet separate lag for hvert blandingsovergangselement, plasserer du alle objektene oppå hverandre ved å bruke knappene Horisontal senter og vertikal senter på paletten Juster (fig. 77).
Eksporter den opprettede filen til PSD-format (Fil=>Eksporter fil=>Eksporter) og åpne den opprettede PSD-filen i ImageReady-programmet (fig. 78). Lag animasjonsrammer basert på lag (Lag rammer fra lag Lag rammer fra lag) og velg en passende varighet for dem (fig. 79). Og så, for å gjøre animasjonen mer effektiv, kopier de eksisterende rammene, men i omvendt rekkefølge slik at bildet først øker og deretter reduseres, og så videre i en sirkel (fig. 80). Lagre deretter optimaliseringsfilen (Fil=>Lagre optimalisert fil=>Lagre med optimalisering). Den resulterende animasjonen er vist i fig. 81.
Ris. 80. Status for animasjonsvinduet etter duplisering av rammer
Ris. 81. Ferdig animasjon
Importer og enkel animasjon Hei. I dag ser vi på enkel animasjon i After Effects.
Ressurser: Adobe Illustrator CC
Adobe After Effects CC
La oss begynne å lære ved å tegne i Illustrator.
La oss tegne
1) Tegn et gult rektangel som bakgrunn
Figur 1 - Rektangel
2) Tegn en sirkel og fyll den med en gradient
La oss jobbe litt med sirkelen:
- slett bunnpunktet på konturen, vi får en bue;
- tegne en rett linje, lukke bunnen av buen, vi får en halvsirkel
Figur 2 - 1) tegne sirkel; 2) gradient; 3) slett punkt
3) Tegn et rektangel og lag en kopi av det
- ett grått rektangel;
- et annet rektangel er mørkegrå
4) Tegn en trekant fra en stjerne ved å sette antall stråler til 3
Figur 3 - 1) rett lys; 2) rekt mørkt; 3) trekant
5) Tegn en katt med penn og enkle former 
Figur 4 - 1) hode; 2) nakke; 3) kropp; 4) ben; 5) hale
Og nå det VIKTIGSTE øyeblikket
La oss fordele bildene i lag (det som vil bli animert er på et eget lag) slik: 
Figur 5 - alle bilder (rødt merke viktige lag)
Det er det, la oss nå spare.
La oss se på lagringsinnstillingene
Figur 6 - Lagre
Og nå neste etappe. Lukk Adobe Illustrator og åpne After Effects.
Importer til After Effects
Fil - Importer - Fil - velg vår lagrede Illustrator-fil.
La oss velge å importere lag fra Illustrator; hvis vi legger inn opptak, får vi et bilde med sammenslåtte lag, men det trenger vi ikke.
Figur 7 - Importer som sammensetning
Det er det, importert.
La oss nå se hva vi har. Dobbeltklikk på komposisjonen slik at den åpnes og vi ser lagene (hvis alt er gjort riktig, vil det være flere lag). Vi skjønner dette, se figur
Figur 8 - Åpen komposisjon
Og nå er det vi er her for i dag animasjon.
Animasjon i After Effects
Still inn rotasjonspunktet øverst på pilen ved hjelp av Pan Behind Tool (snarvei - Y). Vi tar bare et poeng og flytter det dit det trengs. Som et resultat vil det se slik ut.. 
Figur 9 - Panoreringsverktøy og lag
Det er det, la oss nå gå videre til lagene for animasjon.
Vi trenger et Arrow and Head_cat-lag.
La oss starte med pil.
La oss utvide listen, finne den og klikke på klokken. Så vi satte det første punktet til null sekund. Animasjonen vil vare i 2 sekunder totalt.
Så dette er innstillingene du må gjøre (vi setter 3 poeng totalt):
| Sekund | 0 | 1 | 2 |
| +66 | - 70 | +66 |
Figur 10 - Rotasjonspil
La oss nå animere kattens hode.
La oss utvide head_cat og finne Position .
Det vil være 4 prikker her.
Bare den siste koordinaten vil bli endret uten å påvirke de andre.
| Sekund | 0.1 | 0.17 | 1.12 | 2.0 |
| Posisjon | 689.3 | 729.3 | 729.3 | 689.3 |
Figur 11 - Plasser hodet
Så, animasjonsprinsippet var slik. Pilen svinger fra side til side, så snart den nærmer seg kattungen, trekker den hodet inn, dveler i denne posisjonen en stund, og returnerer den deretter til sin plass.
Den siste fasen
Produksjon
Du må lage et ferdig produkt fra arbeidet ditt.
Gå til menyen - Legg til i gjengivelseskø
Render-panelet åpnes og i Output Module (to klikk) velger du utdataformatet. Jeg tok *.mov
Figur 12 - Render
Klikk på RENDER-knappen og få resultatet (bare ikke glem å spesifisere banen).
Det er alt.
