Cum să faci o animație simplă în Illustrator. Tutorial ilustrat despre Adobe Illustrator CS. Descărcați și conectați pluginul

Aveți una sau două pictograme pe care ați dori să le dați viață prin animație. De unde ai începe? Să presupunem că aveți fișiere SVG, Illustrator CC și After Effects CC, dar soluția vă scapă.

În acest articol, voi demonstra cum puteți anima cu ușurință un fișier SVG, inclusiv pregătirea fișierului SVG în Illustrator și importarea acestuia în After Effects CC. Voi explica, de asemenea, cum îl puteți converti în Straturi de formă și adăugați mișcare. În sfârșit, să vorbim despre export și randare.

Rezultatul final al lucrării.

Acum să trecem la partea distractivă - să învățăm cum să dai viață imaginilor.

Pregătirea unui fișier SVG în Illustrator

Să începem prin a deschide fișierul SVG în Adobe Illustrator CC. Voi anima o pictogramă de mașină mică, care este disponibilă gratuit pe Week Of Icons.

După deschiderea fișierului, trebuie să degrupăm și să împărțim toate obiectele în straturi. Puteți face acest lucru manual sau utilizați Eliberare în straturi (secvență) pentru a accelera procesul. Înainte de a importa fișierul în After Effects, trebuie să-l salvăm ca format de fișier Illustrator.

Putem degrupa obiecte folosind Release to Layers (Sequence) pentru a nu pierde timp prețios. Importați și organizați un fișier în After Effects CC

Acum sunteți gata să importați în After Effects CC. Să folosim comanda rapidă de la tastatură Ctrl+I (Windows) sau Command+I (Mac) pentru a încărca caseta de dialog Import File, sau mergeți la File > Import > File... De acolo, selectați fișierul Illustrator CC pe care l-am pregătit și faceți clic pe Import . Ar trebui să apară o mică casetă de dialog cu numele fișierului selectat. Selectați Compoziție din lista derulantă numită Import Kind.

Mai mult cale rapidă importarea unui fișier - faceți dublu clic pe locația coloanei din panoul de proiect.

În panoul Timeline vom vedea o nouă compoziție. Faceți dublu clic pe el. Ar trebui să vedem acum straturile Illustrator CC cu pictograme portocalii în stânga numelor lor.

Înainte de a începe, trebuie să convertim toate aceste straturi în Straturi de formă. Trebuie să le selectăm pe toate folosind Ctrl+A/Command+A sau manual folosind Shift + Left Mouse. După aceea, faceți clic dreapta pe strat și selectați Creare > Creare forme din stratul vectorial.

Acum că noile straturi sunt selectate, trageți-le în partea de sus a panoului deasupra straturilor Illustrator CC, apoi ștergeți straturile Illustrator CC, astfel încât acestea să fie în afara drumului.

Convertiți straturile Illustrator CC în straturi de formă în After Effects CC

Deși acest lucru nu este necesar, este important să dăm fiecărui strat un nume și/sau un cod de culoare adecvat. Acest lucru ne va permite să lucrăm mai eficient pe măsură ce ne concentrăm asupra personalului cheie. În exemplul de mai jos, culorile etichetelor se potrivesc mai mult sau mai puțin cu umplerea straturilor corespunzătoare.

Etichetarea straturilor de formă cu nume, culori, text și plasare adecvate este foarte practică.

Pentru a configura parametrii, utilizați comanda rapidă de la tastatură Ctrl+K/Command+K sau Compoziție > Setări compoziție... Din Setări compoziție, trebuie să selectăm Lățimea, Înălțimea, Frecvența cadrelor și Durata. Pentru acest proiect am ales 60 de cadre pe secundă pentru a menține animația netedă.

Pe acest moment Totul pare gata să meargă, dar mai este un lucru care trebuie făcut. Trebuie să grupăm anumite straturi împreună, astfel încât mișcările lor să fie sincronizate cu stratul principal, pe care îl putem controla. Această metodă se numește Parenting.

Utilizați Pick Whip pentru a atribui un strat părinte mai multor straturi.

În exemplul nostru, am atribuit straturi mai puțin semnificative (straturi copil), cum ar fi Parbriz, părți ale corpului, lemn și frânghii până la stratul primar al corpului (stratul părinte). Acest lucru mi-a permis să controlez poziția și rotația întregii mașini (cu excepția roților) folosind stratul părinte.

Crearea animației

Am vrut ca mașina să lovească o piatră și să rămână puțin în aer. De asemenea, am vrut ca copacul să se miște în sus și în jos și să deschidă trunchiul. Am început prin a crea o piatră, o mașină și roți. Atunci este timpul să depășim cel mai mare obstacol - să puneți acțiunea pe copac. Odată ce am făcut asta, am trecut la părțile mai mici, cum ar fi suportul și frânghiile.

Schiță care descrie animația

Primul pas a fost să creez un element sau un strat rock, dar în loc să mă întorc la Illustrator CC pentru a adăuga un alt strat, am folosit instrumentul Pen în After Effects CC. Acest lucru mi-a permis să proiectez rapid o piatră mică.

Oh, puternicul instrument Pen!

Portbagajul era o sarcină relativ simplă. L-am montat în spatele mașinii și am făcut un punct de ancorare în vârful din stânga jos. Folosind Pick Whip l-am atribuit stratului corpului părinte. Penultimul pas a fost acela de a da efectul de rotație, care la rândul său a făcut ca momentul în care mașina sări mai realist.Bodymovin în combinație cu biblioteca mobilă Lottie.

P.S. îl poți găsi pe al meu Fișiere Illustrator CC și After Effects CC.

Setul de pictograme este disponibil pentru descărcare gratuită pe .

Recent, diferite tipuri de animații de grafică SVG (Scalable Vector Graphics) pe site-uri web și aplicații au devenit foarte populare. Acest lucru se datorează faptului că totul cele mai recente browsere acceptă deja acest format. Iată informații despre compatibilitatea browserului pentru SVG.

Acest articol discută cel mai simplu exemplu de animație vectorială SVG folosind pluginul ușor Jquery Lazy Line Painter.

Sursă

Pentru a finaliza și a înțelege pe deplin această sarcină, cunoștințele de bază despre HTML, CSS, Jquery sunt de dorit, dar nu sunt necesare dacă doriți doar să animați SVG) Să începem!

Și aceștia sunt pașii pe care trebuie să-i urmăm:

Creați structura corectă a fișierelor

Descărcați și conectați pluginul

Desenați o imagine de contur cool în Adobe Illustrator

Convertiți imaginea noastră în Lazy Line Converter

Lipiți codul rezultat în main.js

Adăugați niște CSS după gust

1. Creați structura corectă a fișierelor
Serviciul Initializr ne va ajuta în acest sens, unde trebuie să selectăm parametrii ca în imaginea de mai jos.

• Clasic H5BP (HTML5 Boiler Plate)
• Fără șablon
• Doar HTML5 Shiv
• Minimizat
• Clasele IE
• Cadrul Chrome
• Apoi faceți clic pe Descărcați-l!

2. Descărcați și conectați pluginul

Deoarece initializr vine cu cea mai recentă bibliotecă Jquery, din arhiva pe care trebuie să o descărcam din depozitul proiectului Lazy Line Painter, trebuie să transferăm doar 2 fișiere în proiectul nostru. Primul este „jquery.lazylinepainter-1.1.min.js” (versiunea pluginului poate diferi) este situat în rădăcina folderului rezultat. Al doilea este example/js/vendor/raphael-min.js.

Am plasat aceste 2 fișiere în folderul js. Și le conectăm la index.html înainte de main.js, după cum urmează:

3. Desenați o imagine de contur cool în Adobe Illustrator

Desenați imaginea noastră de contur în Illustrator (cel mai simplu mod de a face acest lucru este cu Instrumentul Pen)

Este necesar ca contururile desenului nostru să nu se închidă pentru că pentru efectul nostru avem nevoie de un început și de un sfârșit

Nu ar trebui să existe umpleri

Dimensiunea maximă a fișierului – 1000×1000 px, 40 kb

Să decupăm limitele obiectului Obiect>Planuri de desen>Fit To Artboards Limite

Salvați în format SVG (setările standard de salvare sunt bune)

De exemplu, puteți folosi pictogramele din atașament.

4. Convertiți imaginea noastră în Lazy Line Converter
Doar trageți pictograma în fereastra din imaginea de mai jos.
Grosimea, culoarea conturului și viteza de animație pot fi modificate în codul propriu-zis, care va apărea după conversie!

5. Lipiți codul rezultat în main.js
Acum pur și simplu lipim codul rezultat într-un fișier main.js gol
Opțiuni:
strokeWidth — grosimea conturului
strokeColor — culoarea conturului
De asemenea, puteți modifica viteza de desenare a fiecărui vector prin modificarea valorilor parametrului durată (implicit 600)

6. Adăugați niște CSS după gust
Eliminarea unui paragraf din index.html

Salut Lume! Acesta este HTML5 Boilerplate.

Și în loc de acesta inserăm un bloc în care va avea loc animația noastră

apoi adăugăm niște CSS la fișierul main.css pentru a-l face să arate mai frumos:

Corp ( fundal:#F3B71C; ) #pictograme (poziție: fix; sus:50%; stânga:50%; margine: -300px 0 0 -400px; )

salvați toate fișierele.
Acum deschideți index.html într-un browser modern și bucurați-vă de efect.

P.S. la pornire mașină locală Este posibil să existe o întârziere la începutul animației pentru câteva secunde.

Salutare tuturor! Astăzi voi încerca să descriu posibilitățile programe Adobe Illustrator, comparându-l cu capacitățile Flash. Aceasta nu va fi o analiză globală a programului, ci mai degrabă o descriere a unor caracteristici interesante pe care le-am descoperit în acest program. Am adunat informații bucată cu bucată pe măsură ce le-am studiat pentru a posta totul într-o singură postare. Recunosc imediat că nu sunt un utilizator super-experimentat al Illustrator, l-am folosit doar pentru desen în ultimele șase luni (înainte de asta am desenat totul în Flash). Mulți oameni se plâng că ilustratorul este complex și nu întotdeauna intuitiv. Într-o oarecare măsură, sunt de acord că, după spălare, acest program este complex. Dar principalul lucru aici nu este să renunți, ci să continui să studiezi. Și după câteva săptămâni a apărut gândul, cum m-am descurcat fără el înainte!

Deci, ce mi-a plăcut la ilustrator și ce am găsit că nu era în flash?
1. Voi începe cu cel mai simplu, dar în același timp necesar. Încercați să aranjați obiectele într-un cerc în Flash. Anterior a existat un instrument Deco, dar a fost eliminat, aparent considerat inutil. Am decis că ar fi mai distractiv să o facem cu mâinile. Illustrator are această funcție: Effect – Distort&Transform – Transform.

Totul este rapid și simplu; valorile (distanța dintre obiecte, numărul de copii) le setăm noi înșine în setări.

2. Zig-zag

Un lucru și mai simplu, dar totuși util. S-ar părea un lucru mic, dar în Flash trebuie să desenezi de mână, în Illustrator este o chestiune de secunde.

3. Deformarea obiectelor (Warp)

Nu există așa ceva în Flash. În exemplul de mai jos, am arătat doar 2 moduri de a deforma forme simple (Efect – Warp – Arc/Fish). De fapt, sunt 15 dintre ei ultima versiune programe.

4. Rotunjirea automată a colțurilor (Round Corners)

O poți face manual: pe un obiect grafic, atunci când este selectat, în colț (în toate colțurile) apar un punct alb și un semn de linie rotunjită. Tragem cu mouse-ul si il ajustam dupa gustul tau.

Dar acest lucru se aplică doar formelor, cu o linie de creion o facem puțin diferit - aplicăm un efect de rotunjire (Efect – Stilizare – Colțuri rotunjite). La ieșire obținem același rezultat.

5. Aspru

Efectul se aplică formelor simple (Efect – Distort&Transform – Roughen). Ieșirea este ceva asemănător modelelor 3D low-poli. Cred că e tare :) Și, cel mai important, este foarte simplu.

6. Pucker&Bloat (Tragere și balonare)
Exemplu din imaginea de mai jos:

7. Extindere formular (Cale offset)

Flash are o funcție Expand Fill; nu funcționează deloc cu linii de creion, spre deosebire de Illustrator.

8. Pensule (Brush Art, Pattern Brush, Scatter Brush)
Priviți imaginea de mai jos cu exemple:

9.Brush de textura

Illustrator are, de asemenea, multe pensule de textură, despre care am scris și cum au apărut versiune noua flash - . S-a observat că utilizarea pensulelor în Adobe Animate este teribil de lentă. Asta este:(

10. Nu sunt sigur dacă acesta este un truc adevărat, dar vreau să mă concentrez pe o pensulă cu numele amuzant Blob Brush. Situată în bara de instrumente, aceasta este o perie foarte plăcută de utilizat. Are o grămadă de setări, îmi place mai mult decât cea obișnuită. Este greu de explicat beneficiile sale în cuvinte, este mai bine să îl încerci o dată.

10.Split to Grid

Un alt lucru util este funcția Split to Grid (Object-Path-Split to Grid), care vă permite să tăiați forma în segmente egale. De ce ne amintește asta? Așa este - ferestre într-o clădire mare. Cred că este un lucru grozav să desenezi, de exemplu, peisaje de oraș;)

Încă unul unealtă folositoare, prezentat în illustrator, probabil încă de la prima sa lansare. Cu ajutorul acestuia puteți crea, de exemplu, texturi de lemn:

12. Mutare (dreapta – Transformare – Mutare)

Deplasează un obiect cu o distanță specificată. Dacă doriți, puteți crea imediat o copie care va fi plasată la distanța dorită de obiectul selectat pe orizontală/sau verticală. O versiune anterioară de Flash avea un plugin care a făcut-o această funcție. Din păcate, nu-i amintesc numele.

Illustrator este foarte convenabil pentru a crea modele fără sudură (Object-Pattern-Make). Îmi amintesc cât de furioasă am dezvoltat rafinamentul în flash odată cu crearea lui . În versiunea SS 2015 a Illustrator, totul este automat; o mulțime de setări vă vor ajuta să creați un model în zeci de variații, cu doar câteva elemente grafice la îndemână. În mai mult versiuni anterioare Toate programele trebuiau făcute manual, la fel ca în Flash până acum.

(Notă – modelul poate fi transformat într-un obiect editabil vectorial folosind funcția Object – Expand Appearance.

14. Mozaic obiect

Crearea unei palete de culori pe baza unei imagini existente. Importați imaginea care vă place în ilustrație (Open), apoi Object – Create Object Mosaic. În setări specificăm frecvența de împărțire în înălțime și lățime.

Și la ieșire obținem:

15.Amestec

Folosit pentru a crea degrade. Puteți crea tranziții pas cu pas, cum ar fi în imagine. Nu voi spune că îl folosesc des, dar poate fi util cuiva. Mi se pare că poate fi folosit pentru a crea imagini de fundal simple.

Instrumentul poate fi folosit și pentru a clona obiecte. Așezați două obiecte la distanță unul de celălalt și aplicați Opțiuni de amestecare, selectați numărul de pași (numărul de obiecte clonate).

16. Build Shape Tool. Un lucru foarte convenabil pentru lucrul cu primitivi. În flash, mi s-a părut, era mai puțin convenabil.

Țineți apăsat Alt și faceți clic pe segmentele selectate pentru a șterge segmentele. Dacă pur și simplu tragem mouse-ul peste mai multe zone selectate - conexiuni.

Add-on este un instrument care ajută la tăierea, conectarea automată etc. forme evidenţiate. În ceea ce mă privește, nu este foarte convenabil; folosesc adesea instrumentul Build Shape Tool.

(planșe de artă)

18.Custom Tool Panel

Capacitatea de a vă crea propria bară de instrumente, eliminând cele inutile și alegându-le numai pe cele pe care le utilizați.

În Flash, planurile de artă, și anume scenele (Scena 1,2,3..) sunt situate separat și trebuie să comutați între ele (Shift+F2). În Illustrator, toate pot fi plasate în fața ochilor tăi. Este convenabil când faci mai multe versiuni ale aceluiași desen, astfel încât toate opțiunile să fie în fața ochilor tăi pentru comparație.

19.Izometrici folosind stiluri grafice

Iar ultimul lucru este crearea izometriei fără a o folosi într-un clic (sau mai exact, în 3 clicuri, pentru că avem 3 fețe;) folosind stiluri grafice (Graphic Styles). Voi descrie cum se face asta data viitoare.

Ceea ce ilustratorul are în comun cu flash este capacitatea de a salva un obiect într-un simbol și, la fel de ușor, acest simbol poate fi transferat în flash (deschideți fișierul în flash.ai folosind Import – Import to stage).
Simbolul din Illustrator are aceleași proprietăți ca și în Flash.
Și în concluzie, voi scrie că în Illustrator, după părerea mea, este inferior flash-ului. Da, da, există așa ceva. Și acesta este instrumentul de umplere (Paint Bucket). Indiferent cât de mult încerc să mă obișnuiesc în Illa, este mai convenabil în Flash.
Dacă notele mele ți-au devenit utile sau dacă vrei să adaugi ceva propriu, bine ai venit în comentarii! Noroc tuturor;)

Optimizare grafică web

Informații grafice este transmis mult mai lent decât textul, iar timpul de încărcare a imaginilor este proporțional cu dimensiunea acestora fisiere grafice. Prin urmare, încărcarea rapidă a paginilor Web necesită o dimensiune mică de încorporat imagini grafice, care se realizează prin optimizarea lor. Optimizarea imaginii se referă la transformarea acesteia, asigurând o dimensiune minimă a fișierului, menținând în același timp calitatea imaginii cerută în acest caz, ceea ce se realizează în primul rând prin reducerea numărului de culori din imaginile grafice, folosind formate de fișiere comprimate și speciale și optimizarea parametrilor de compresie pentru imaginea individuală. fragmente.

Illustrator are încorporate instrumente de optimizare a imaginii care fac procesul de optimizare rapid și eficient cu o varietate de metode de previzualizare. Previzualizarea oferă o idee destul de precisă despre cum va arăta imaginea optimizată în timp real, ceea ce vă ajută să evaluați rezultatul optimizării și să selectați cu succes setările potrivite. Și puteți optimiza atât imaginile create direct în Illustrator, cât și altele, de exemplu, fotografiile care ar trebui să fie plasate pe un site Web.

Parametrii de optimizare sunt setați în fereastra Salvare pentru Web, apelată prin comanda cu același nume din meniul Fișier. Programul vă oferă să utilizați unul dintre cele patru moduri de previzualizare, dar două sunt cele mai potrivite pentru a evalua calitatea optimizării:

• 2-Up (două opțiuni) vizualizare simultană a imaginii originale și optimizate în conformitate cu setările specificate (Fig. 1);
• 4-Up (patru opțiuni) În acest mod, fereastra este împărțită în patru ferestre (Fig. 2) pentru a afișa imaginea originală și trei versiuni ale celei optimizate: prima versiune este creată pe baza valorilor de optimizare setate, iar celelalte două sunt variații ale setărilor actuale de optimizare.

Ambele moduri vă permit să economisiți timp semnificativ în găsirea celei mai bune opțiuni de optimizare, deoarece elimină nevoia de a salva imagini cu setări de optimizare diferite și compararea vizuală ulterioară a acestora. În plus, este posibil să se evalueze nu numai calitatea imaginii optimizate, ci și dimensiunea și timpul de încărcare a acesteia sub diferite opțiuni de conectare. Pentru comparație, cel mai convenabil mod este 4-Up (patru opțiuni), care vă permite să evaluați vizual efectul compresiei sau al reducerii paletei asupra calității imaginii și a dimensiunii acesteia și, în cele din urmă, să determinați cei mai buni parametri de optimizare.

Illustrator vă permite să optimizați grafica Web nu numai în formatele GIF, JPG, PNG-8 și PNG-24, ci și SWF și SVG. Imaginile indexate care au un număr mic de culori sunt salvate în format GIF. Formatul JPG este folosit pentru a salva imagini, fotografii și elemente grafice bogate în culori, cum ar fi umplerile cu degrade. Pentru imaginile full color cu zone transparente se folosește formatul PNG, care vă permite să salvați atât imagini indexate, cât și full color, în timp ce în format PNG-8 numărul maxim posibil de culori al imaginii optimizate este de 256, iar în formatul PNG-24 imaginea poate avea milioane de culori și de aceea arată format JPEG. Diferența dintre PNG-24 și JPEG este că metoda de compresie folosită pentru optimizarea imaginilor în format PNG-24 nu duce la pierderea calității, dar ca urmare dimensiunea fișierului crește. Formatele SVG și SWF combină elemente grafice, text și componente interactive și pot fi, de asemenea, optimizate.

Sa luam in considerare exemplu concret optimizarea imaginii. Să presupunem că un logo al site-ului web a fost dezvoltat în Illustrator (Fig. 3), salvat inițial în format AI. O încercare de a-l optimiza imediat pentru Web nu va duce la nimic bun, deoarece în acest caz imaginea va fi tăiată automat, ceea ce nu va ține cont de poziția adevărată a inscripției rezultate ca urmare a deformării (Fig. 4 și 5).

Prin urmare, să încercăm să exportăm sigla în format PSD cu comanda File=>Export (File=>Export) dimensiunea imaginii create va fi de 143 KB. Deschideți fișierul PSD rezultat și utilizați comanda File => Save for Web. Ținând cont de numărul limitat de culori implicate în imagine, în acest caz formatul GIF este optim, ale cărui setări specifice trebuie decise. Experimentând setările, vă puteți asigura că cea mai buna calitate oferă algoritmul de compresie implicit al programului, selectiv. În ceea ce privește netezirea, având în vedere prezența unui gradient de umplere, este mai bine să alegeți un algoritm cu generare de zgomot Zgomot (Fig. 6). Dimensiunea fișierului de optimizare rezultat va fi de 6.729 KB (Fig. 7), în timp ce se va păstra transparența fundalului, ceea ce este ușor de verificat prin salvarea imaginii în format GIF împreună cu fișierul HTML (Fig. 8). Ca rezultat, în acest exemplu, fișierele emblem.html și emblem.gif au fost obținute în folderul Primer1.

Butoane

Un element specific indispensabil al designului oricăror pagini Web sunt butoanele de control grafic. Este pur și simplu imposibil să-ți imaginezi o pagină fără ele. Desenul cu butoane a devenit astăzi un gen special, iar Illustrator vă permite să creați cele mai complicate opțiuni. De exemplu, butoanele concepute ca obiecte de plasă și/sau cu măști suprapuse arată mult mai impresionant decât cele obișnuite.

Luați în considerare opțiunea de a crea un buton rotund, convex în Illustrator. Desenați un obiect vectorial sub forma unui cerc umplut cu o culoare arbitrară (Fig. 9) și convertiți-l într-o plasă cu comanda Object => Create Gradient Mesh (Object => Create a gradient mesh), specificând patru rânduri și patru coloane, iar în lista Aspect, selectând opțiunea To Center Highlight egal cu 60 (Fig. 10). Selectați instrumentul Direct Selection și faceți clic în colțul din stânga sus al obiectului, selectând punctele de ancorare situate acolo (Fig. 11). Schimbați culoarea celulei corespunzătoare în alb selectând-o în paleta Swatches (Fig. 12).

Luați instrumentul Elipse, plasați marcatorul mouse-ului în centrul cercului creat anterior și, ținând apăsate tastele Alt și Shift, întindeți noul cerc peste cel vechi, astfel încât să fie cu 1-2 pixeli mai mare decât cel vechi pe toate laturi. Dați-i un chenar negru (Stroke) de 1-2 pixeli lățime și umpleți-l cu un gradient radial în direcția de la roșu la alb (Fig. 13). Trageți obiectul vectorial creat cu 1-2 pixeli la dreapta și în jos, apoi, fără a elimina selecția, faceți clic dreapta pe el și afară meniul contextual selectați Aranjare => Trimiteți înapoi. Rezultatul va fi un gol pentru butonul, prezentat în Fig. 14.

De regulă, pe orice pagină Web există mai multe butoane de același tip, care diferă, de exemplu, doar în direcția săgeților desenate pe ele, indicând direcția de mișcare în jurul site-ului. Să luăm în considerare cel mai simplu caz de a avea două butoane, dintre care unul, cu săgeată în jos, va însemna trecerea la pagina următoare, iar un buton cu săgeata sus va însemna trecerea la cea anterioară. Ca șablon de săgeată, să luăm un triunghi obișnuit, desenat cu instrumentul Poligon, vopsit în negru și, pentru un efect mai mare, proiectat și ca obiect de plasă. Mutați săgeata pe buton și ajustați poziția tuturor obiectelor unul față de celălalt folosind butoanele corespunzătoare din paleta Aliniere. Primul dintre butoanele rezultate este prezentat în Fig. 15. Să facem o copie a layer-ului cu butonul selectând comanda Duplicate Layer Layers, ca urmare vom obține două straturi identice. Apoi selectați săgeata de pe copia stratului și rotiți-o cu 180° selectând comanda Transformare=>Rotire Transformare=>Rotire din meniul contextual. Vom obține același buton ca în fig. 16. Vă rugăm să rețineți că este mult mai convenabil să stocați același tip de butoane pentru un proiect într-un fișier pe straturi diferite, ceea ce este demonstrat în acest caz.

Acum trebuie să salvați versiunile optimizate ale fiecărui buton. Mai întâi faceți stratul inferior invizibil, în acest caz, butonul de pe stratul superior va fi păstrat. Selectați comanda Fișier => Salvare pentru Web, configurați parametrii de optimizare a butoanelor, de exemplu, așa cum se arată în Fig. 17, faceți clic pe butonul Salvare și introduceți un nume de fișier. Butonul salvat în cele din urmă este prezentat în Fig. 18. Acum întoarceți vizibilitatea la stratul de jos, faceți stratul superior invizibil și salvați al doilea buton în același mod, dându-i un alt nume. Rezultatul este prezentat în Fig. 19.

Acum tot ce rămâne este să vă asigurați că butoanele arată destul de acceptabil pe pagina Web și să le plasați pe o pagină personalizată (Fig. 20). Ca urmare, în acest exemplu, fișierul Primer2.html și două imagini grafice au fost obținute în folderul imagini (dosarul Primer2).

Dacă doriți, este ușor să transformați un buton într-o felie în timpul procesului de optimizare. În acest caz, după selectarea comenzii File=>Save for Web (File=>Save for Web) și setarea parametrilor de optimizare, ar trebui să selectați instrumentul Slice Select din paleta de instrumente și să faceți dublu clic pe imagine, care în cele din urmă va se transformă automat într-o felie cu numărul de serie 1 (Fig. 21). Făcând dublu clic din nou, se va deschide fereastra Slice Options, în care va trebui să specificați un link și, opțional, să schimbați numele feliei (Figura 22), apoi să salvați imaginea optimizată. Rezultatul în acest caz va fi fișierele Primer3.html (Fig. 23) și Primer3.gif (dosarul Primer3).

Elemente interactive

O modalitate de a aduce o pagină la viață este introducerea elementelor de design care o schimbă aspect(sau stare) în funcție de comportamentul mouse-ului sau, mai rar, în eventualitatea oricăror alte situații: scalare, derulare, încărcare, erori etc.

Dintre astfel de elemente, cele mai cunoscute sunt rollover-urile (din engleza roll over roll over, turn over) elemente care isi schimba aspectul sub influenta mouse-ului. Exemple de rulări tipice sunt butoanele animate. Rollover-urile sunt adesea folosite la crearea altor elemente de navigare pe site. În realitate, orice rulare nu este una, ci mai multe (până la patru) imagini, fiecare dintre acestea corespunzând unui anumit eveniment. Principalele evenimente sunt considerate a fi următoarele: Normal stare normală, treceți cursorul mouse-ului peste un element și apăsați în jos butonul stâng al mouse-ului când treceți cursorul peste acesta. Teoretic, pot fi implicate evenimente precum Click, eliberarea butonului stâng al mouse-ului după clic, Sus după eliberarea butonului, Out când părăsești zona activă. Cu toate acestea, în practică, ele sunt adesea limitate la schimbarea elementului doar pentru primele trei sau chiar două evenimente.

Rollovers clasice

În sensul clasic, un rollover este o serie de imagini grafice în format GIF și codul HTML corespunzător, datorită căruia, în funcție de comportamentul mouse-ului, o imagine o înlocuiește pe alta în fereastra browserului.

Illustrator nu este destinat să creeze direct rulouri în sensul clasic, dar poate ajuta la dezvoltarea elementelor inițiale pentru acestea. Ideea în acest caz este de a crea un strat cu imaginea corespunzătoare primului eveniment. Apoi faceți o copie a stratului și transformați imaginea pentru a se potrivi cu al doilea eveniment și așa mai departe. Imaginea multistrat rezultată este exportată într-un fișier PSD cu straturile păstrate, pe baza căruia se creează un rollover în programul Image Ready. Avantajul utilizării programului Illustrator, ca în multe alte cazuri, este o serie de caracteristici interesante care nu sunt disponibile în alte software, combinat cu comoditatea transformării graficelor vectoriale.

Să încercăm să creăm un rollover sub forma unei inscripții care își schimbă culoarea în funcție de comportamentul mouse-ului. Deschideți Illustrator și creați o formă sub forma unui dreptunghi rotunjit umplut cu negru (Fig. 24), faceți o copie a acesteia și plasați-o într-o parte liberă a ecranului. Convertiți prima copie a dreptunghiului într-un obiect mesh cu o evidențiere în centru (comanda Object=>Create Gradient Mesh Object=>Create Gradient Mesh), specificând patru rânduri și zece coloane (Fig. 25). Activați a doua copie a dreptunghiului și setați-o la o umplere cu gradient aproximativ așa cum se arată în Fig. 26. Suprapuneți obiectul gradient deasupra celui din plasă, reduceți opacitatea obiectului gradient la aproximativ 80% și dimensiunea cu aproximativ 1 pixel pentru a simula în cele din urmă efectul unei denivelări. Și apoi imprimați inscripția deasupra obiectelor. În forma sa originală, lăsați-l să aibă o culoare albă, care va corespunde stării Normale (Fig. 27), iar apoi, când starea de rulare se schimbă, culoarea inscripției se va schimba, de exemplu, în verde când marcatorul mouse-ului este plasat peste el (starea Peste) și devine albastru când butonul mouse-ului este apăsat (starea Jos).

Acordați atenție paletei Straturi, în această etapă, există un singur strat în ea. Faceți două copii ale acestui strat folosind comanda Duplicare strat din meniul paletei Straturi, vor fi trei straturi în paletă (Fig. 28). Apoi, în prima copie a stratului schimbați culoarea inscripției în verde, iar în a doua copie în albastru (Fig. 29). Ca urmare, se va obține spațiul liber necesar pentru răsturnare.

Exportați imaginea creată în format PSD, păstrând straturile, folosind comanda File=>Export și selectând modelul de culoare RGB (Fig. 30). Deschideți fișierul PSD creat în programul ImageReady (Fig. 31 și 32). Creați cadre bazate pe straturi selectând comanda Creați cadre din straturi din meniul paletei Animație. Fereastra Animație va arăta ca în Fig. 33. În acest caz, o singură stare Normală va fi creată inițial în paleta Rollovers.

Apoi, în fereastra Animație, selectați cadrul corespunzător stării induse, iar stratul Layer 1 Copy va fi selectat automat în paleta Straturi (Fig. 34). Accesați paleta Rollovers și faceți clic pe butonul Create Rollover State (Creare Rollover State) fig. 35, ceea ce va face ca starea Over State să apară în paleta Rollovers (Fig. 36). Creați o stare Down în același mod. Activați starea Normală în paleta Rollovers și ștergeți toate cadrele din paleta Animație, cu excepția celui care ar trebui să corespundă stării Normale. Ca rezultat, pentru fiecare stare de rulare va exista un singur cadru în paleta Animație (Fig. 37, 38 și 39).

Orez. 38. Vizualizarea imaginii, fereastra Animație și paletele Straturi și Rollovers pentru starea Over State

Verificați rezultatul făcând clic pe butonul Previzualizare în browser implicit din bara de instrumente și accesând fereastra browserului (Figura 40). După aceea, salvați fișierul folosind comanda File => Save Optimized și specificând opțiunea HTML și Imagini (*.html). Ca urmare, în acest exemplu, fișierul Primer4.html și o serie de imagini grafice au fost obținute în folderul imagini.

Orez. 40. Fereastra browser cu element Rollover

Rollovers SVG

Formatul SVG (Scalable Vector Graphics) din ce în ce mai popular Grafică vectorială), creat pe baza standardului XML, vă permite, de asemenea, să primiți o varietate de elemente interactive, în special rollovers, dar în practică acest lucru este implementat complet diferit. Este de remarcat faptul că crearea rollover-urilor SVG interactive, spre deosebire de cele clasice, când codul HTML corespunzător este generat complet automat, necesită cunoașterea limbajului JavaScript și înțelegerea principiilor de bază ale programării orientate pe obiecte.

Pentru a lucra cu obiecte SVG există o paletă specială SVG Interactivity, care poate fi deschisă cu ușurință folosind comanda Window => SVG Interactivity (Window => SVG interactivitat) fig. 41.

Să luăm în considerare această opțiune pentru a crea un rollover folosind exemplul unui buton interactiv, culoarea inscripției pe care se va schimba de la negru la albastru atunci când treceți mouse-ul și din nou transformată în negru când mouse-ul părăsește zona activă.

Creați un buton dreptunghiular cu margini rotunjite și selectați o umplere cu gradient adecvată pentru acesta, de exemplu, așa cum se arată în Fig. 42. Reglați transparența butonului din paleta Transparență.În acest exemplu, valoarea Opacității este setată la 50%. Faceți o copie a butonului, umpleți-l cu verde închis (Figura 43), apoi convertiți-l într-un obiect mesh cu comanda Object => Create Gradient Mesh, specificând patru rânduri și zece coloane, iar în lista Aspect (View) selectând opțiunea To Center și setând valoarea Highlight la 100. Reduceți opacitatea stratului cu obiectul plasă la aproximativ 40% (Fig. 44). Așezați un obiect plasă peste unul cu gradient, iar butonul va fi asemănător cu cel prezentat în Fig. 45.

Orez. 44. Transformă o copie a unui buton într-un obiect plasă

Completați butonul cu inscripția dorită și ajustați-i poziția folosind butoanele corespunzătoare din paleta Aliniere. Imaginea rezultată va conține un strat cu trei obiecte suprapuse unul peste altul (Fig. 46). Evenimentele programate vor fi legate de un obiect text, așa că, pentru comoditate, schimbați numele acestuia în Text făcând dublu clic pe obiect și introducând un nou nume. În mod similar, schimbați numele stratului din Stratul 1 în Strat (Fig. 47).

Procesarea evenimentelor implică utilizarea procedurilor JavaScript, deci trebuie să includeți un fișier care să descrie aceste proceduri. Se numește Events.js și este salvat pe disc în folderul Sample Files\Sample Art\SVG\SVG când instalați Adobe Illustrator. Pentru a conecta fișierul Events.js, utilizați comanda JavaScript Files SVG Interactivity (Fig. 48). Apoi, trebuie să faceți clic pe butonul Adăugare și să găsiți fișierul dorit pe hard disk. Când numele său apare în câmpul URL (Figura 49), faceți clic pe butonul Efectuat.

Orez. 48. Selectarea comenzii JavaScript Files

Apoi, trebuie să definiți un răspuns la evenimentele mouse-ului pentru obiectul Text. Selectați obiectul Text, în câmpul Eveniment al paletei de interactivitate SVG, selectați evenimentul onmouseover elemColor(evt, "Text", "#3333FF"), aceasta va însemna că atunci când mouse-ul este peste obiectul Text, culoarea acestuia se va schimba în albastru (Fig. 50). Pentru ca culoarea textului să se schimbe în negru după ce mouse-ul părăsește zona activă, va trebui să creați un alt eveniment onmouseout, selectați-l în câmpul Eveniment al paletei de interactivitate SVG. Apoi, în linia de acțiune introduceți textul elemColor(evt, "Text", "#000000"), aceasta va reveni la culoarea neagră (Figura 51).

Orez. 51. Aspectul final al paletei de interactivitate SVG pentru obiectul Text

Salvați rularea creată ca fișier SVG cu comanda File=>Save as (File=>File type format SVG, apoi setați opțiunile de salvare a fișierului SVG așa cum se arată în Fig. 52. După salvare, veți primi doar unul un singur fișier cu extensia SVG, și nu două, ca în cazul unui rollover clasic, în acest caz a fost primit fișierul Primer5.svg (dosarul Primer5).Totuși, pentru ca rollover-ul să funcționeze cu adevărat, trebuie să copiați suplimentar. fișierul Events.js din descrierea procedurilor JavaScript. După aceasta, puteți verifica funcționalitatea rollover-ului, rezultatul va arăta ca în Fig. 53.

Animație SVG

Formatul SVG poate fi folosit și pentru a transmite animație. Să încercăm să creăm un element animat simplu (în acest caz va fi informații despre companie), care va apărea pe ecran atunci când treceți mouse-ul peste obiectul grafic corespunzător și va dispărea când scoateți mouse-ul din elementul interactiv.

Să creăm aproximativ următoarea serie de obiecte grafice și text, așa cum se arată în Fig. 54. Să redenumim toate obiectele create într-un mod convenabil făcând clic secvenţial pe numele următorului obiect din paleta Straturi şi introducând nume dorit(Fig. 55). Vă rugăm să rețineți că cele evidențiate în Fig. 56 de obiecte Text1, Text2, Text3 și Path1 vor fi întotdeauna vizibile, iar toate celelalte numai când treceți mouse-ul peste obiectul Text1.

Orez. 54. Vedere originală a imaginii

Includeți fișierul Events.js care descrie procedurile JavaScript utilizând comanda Fișiere JavaScript din paleta de interactivitate SVG, făcând clic pe butonul Adăugare, arătând spre fișierul dorit de pe hard disk și făcând clic pe butonul Efectuat.

Definiți un răspuns la evenimentele mouse-ului pentru obiectul Text1. Selectați obiectul Text, în câmpul Eveniment al paletei SVG Interactivity, selectați evenimentul onmouseover și în linia de mai jos introduceți textul elemShow(evt, "Text4"); elemShow(evt, „Calea2”) . Ca rezultat, când mouse-ul este peste obiectul Text1, obiectele Text4 și Path2 vor deveni vizibile. Vă rugăm să rețineți că, dacă trebuie efectuate mai multe acțiuni atunci când are loc un eveniment, acestea trebuie specificate folosind semnul „;”. Apoi efectuați o operație similară pentru evenimentul onmouseout, introducând textul pentru acesta, ceea ce va însemna ascunderea obiectelor (Fig. 57).

Salvați rezultatul ca fișier SVG utilizând comanda Fișier => Salvare ca, specificând numele fișierului, selectând formatul SVG în câmpul Tip fișier și apoi setând opțiunile pentru salvarea fișierului SVG în conformitate cu Fig. 58. După salvare, va fi primit fișierul Primer6.svg (dosarul Primer6). Nu uitați să copiați fișierul Events.js în folderul cu acest fișier. Dacă după aceasta alergi coz acest fișier, apoi veți vedea rezultatul prezentat în Fig. 59. Acesta este aproape ceea ce ai nevoie. Singurul lucru care nu a fost inclus în planurile noastre a fost aspectul inițial al obiectelor Text 4 și Path 2 la încărcare. Pentru a scăpa de acest neajuns, selectați ambele date obiect simultan și creați o acțiune pentru ele elemHide(evt, "Text4"); elemHide(evt, "Path2") la evenimentul onload (Fig. 60). Salvați din nou fișierul și asigurați-vă că obiectele Text4 și Path2 sunt acum vizibile numai atunci când treceți cu mouse-ul peste obiectul Text1.

Animație GIF

Orice pagină Web este de neconceput fără animație Web, inclusiv gif-uri animate. Una dintre opțiunile de creare a acestora este utilizarea aplicației Adobe ImageReady, care permite, printre altele, crearea de animație din straturi. În acest caz, imaginea multistrat în sine poate fi pregătită în diferite aplicații, inclusiv Adobe Illustrator.

Este foarte ușor să creezi o animație bazată pe elemente din paleta Simboluri, deschisă cu comanda Window=>Simboluri, sau dintr-una dintre bibliotecile de simboluri care pot fi deschise folosind comanda Window=>Symbol Libraries. ).

De exemplu, vom încerca să creștem dimensiunea oricărui obiect simbol; etapele cheie ale procesului de creștere a obiectului trebuie stabilite pe straturi separate. Mai întâi, așezați pur și simplu obiectele simbol unul deasupra celuilalt și apoi creșteți dimensiunea fiecărui obiect ulterior, de exemplu așa cum se arată în Fig. 61. Ca rezultat, un strat cu multe obiecte va fi creat în paleta Straturi (Fig. 62). Dacă exportați direct această imagine în format PSD, nu va da nimic, deoarece există un singur strat și, desigur, atunci când deschideți fișierul PSD în programul ImageReady, va exista și un singur strat. Prin urmare, mai întâi trebuie să plasați obiecte pe diferite straturi. Acest lucru se poate face căi diferite Cel mai simplu mod este să selectați mai întâi Stratul 1 din paleta Straturi și să utilizați comanda Eliberare la strat. Rezultatul va fi că fiecare dintre obiecte va fi mutat în propriul strat, dar toate vor fi imbricate în Layer 1. Prin urmare, va trebui apoi să trageți manual toate straturile imbricate în partea de sus a paletei Straturi, astfel încât acestea să fie deasupra stratului Layer 1, apoi pur și simplu ștergeți stratul Layer 1 acum gol (Fig. 63). Exportați imaginea în format PSD folosind comanda File => Export cu setări ca în Fig. 64.

Încărcați fișierul PSD creat în programul ImageReady (Fig. 65 și 66). Deschideți meniul paletei Animație Creați cadre din straturi. Ca urmare, vor fi create cinci cadre, fiecare dintre ele va corespunde propriului strat, iar fereastra paletei Animație va arăta ca în Fig. 67.

După aceasta, setați durata fiecăruia dintre cadrele create în acest caz, durata pentru toate cadrele este setată la 0,2 s. Și apoi salvați animația cu optimizare folosind comanda File=>Save Optimized (File=>Save with optimization). Rezultatul rezultat poate să semene cu Fig. 68.

Este și mai convenabil să obțineți spații libere care pot fi apoi convertite cu ușurință în animație în ImageReady pentru a utiliza funcțiile Live Blends din Illustrator. Această utilizare combinată a Illustrator și ImageReady accelerează semnificativ procesul de creare a animațiilor GIF.

De exemplu, desenați două obiecte multicolore arbitrare și apoi conectați-le cu o legătură de amestec cu parametrii corespunzători (Fig. 69). Este imposibil să utilizați acest fișier direct pentru a crea animație, deoarece imaginea este pe un singur strat (Fig. 70). Prin urmare, va trebui mai întâi să plasați fiecare element al obiectului amestec pe un strat separat. Pentru a face acest lucru, în fereastra Straturi, selectați linia, activați meniul paletei făcând clic pe săgeata neagră din colțul din dreapta sus și selectați comanda Release to Layers Sequence (Fig. 71). Țineți apăsată tasta Shift, selectați straturile create și plasați-le deasupra stratului Layer 1, apoi ștergeți stratul Layer 1 în sine, mutându-l în coșul de gunoi, ca rezultat, paleta de straturi va lua aceeași formă ca în Fig. 72.

Orez. 70. Stare initiala Straturi ferestre

Exportați fișierul creat în format PSD folosind comanda File => Export. Deschideți fișierul PSD creat în programul ImageReady (Fig. 73). Vă rugăm să rețineți că toate straturile create în Illustrator vor apărea în fereastra straturi (Fig. 74), iar în fereastra Animație va exista un singur cadru deocamdată.

Activați meniul paletei Animație făcând clic pe săgeata neagră din colțul din dreapta sus al paletei și selectați comanda Creați cadre din straturi. Ca rezultat, în acest exemplu, vor fi create cinci cadre, iar fereastra paletei Animație va prelua forma conform fig. 75. Selectați toate cadrele în timp ce țineți apăsată tasta Shift și setați durata corespunzătoare a cadrului în acest exemplu, se ia același timp de 0,2 s pentru fiecare cadru. Salvați apoi fișierul cu optimizare folosind comanda File=>Save Optimized (File=>Save with optimization), setând opțiunea Numai imagini (*.gif) în lista Tip fișier. Animația va semăna cu Fig. 76.

Ceea ce pare mult mai interesant nu este mișcarea, ci redimensionarea lină a obiectelor amestecate. De exemplu, puteți utiliza tranziția de amestec deja creată. În acest caz, după ce ați creat straturi separate pentru fiecare element de tranziție de amestec, plasați toate obiectele unul peste altul folosind butoanele Centru de aliniere orizontală și Centru de aliniere verticală ale paletei Aliniere (Fig. 77) .

Exportați fișierul creat în format PSD (File=>Export File=>Export) și deschideți fișierul PSD creat în programul ImageReady (Fig. 78). Creați cadre de animație bazate pe straturi (Make Frames From Layers Create frames from layers) și selectați o durată potrivită pentru acestea (Fig. 79). Și apoi, pentru a face animația mai eficientă, copiați cadrele existente, dar în ordine inversă, astfel încât imaginea să crească mai întâi și apoi să descrească, și așa mai departe într-un cerc (Fig. 80). Apoi salvați fișierul de optimizare (File=>Save Optimized File=>Salvați cu optimizare). Animația rezultată este prezentată în Fig. 81.

Orez. 80. Starea ferestrei Animație după duplicarea cadrelor

Orez. 81. Animație terminată

Adobe Illustrator și After Effects
Import și animație simplă Bună ziua. Astăzi ne uităm la animația simplă în After Effects.

Resurse: Adobe Illustrator CC
Adobe After Effects CC

Să începem să învățăm desenând în Illustrator.

Hai sa desenam
1) Desenați un dreptunghi galben ca fundal

Figura 1 - Dreptunghi

2) Desenați un cerc și umpleți-l cu un gradient
Să lucrăm puțin la cerc:
- ștergeți punctul de jos de pe contur, obținem un arc;
- trageți o linie dreaptă, închizând partea de jos a arcului, obținem un semicerc

Figura 2 - 1) desenați cerc; 2) gradient; 3) ștergeți punctul

3) Desenați un dreptunghi și faceți o copie a acestuia
- un dreptunghi gri;
- un alt dreptunghi este gri închis
4) Desenați un triunghi dintr-un asterisc setând numărul de raze la 3

Figura 3 - 1) lumina recta; 2) rect întuneric; 3) triunghi

5) Desenați o pisică folosind Pen și forme simple

Figura 4 - 1) cap; 2) gât; 3) corp; 4) picior; 5) coada

Și acum cel mai IMPORTANT moment
Să distribuim imaginile în straturi (ceea ce va fi animat este pe un strat separat) astfel:

Figura 5 - toate pozele (marcaj roșu straturi importante)

Gata, acum hai sa economisim.
Să ne uităm la setările de salvare

Figura 6 - Salvare

Și acum următoarea etapă. Închideți Adobe Illustrator și deschideți After Effects.

Importați în After Effects
Fișier - Import - Fișier - selectați fișierul nostru Illustrator salvat.
Să alegem să importam straturi din Illustrator; dacă punem filmări, vom obține o imagine cu straturi îmbinate, dar nu avem nevoie de asta.

Figura 7 - Import ca compoziție

Asta e, importat.
Acum să vedem ce avem. Faceți dublu clic pe compoziție astfel încât să se deschidă și să vedem straturile (dacă totul este făcut corect, vor fi mai multe straturi). Primim asta, vezi figura

Figura 8 - Compoziție deschisă

Și acum ceea ce suntem aici pentru astăzi este animație.

Animație în After Effects
Setați punctul de rotație în partea de sus a săgeții folosind instrumentul Pan Behind (comandă rapidă - Y). Luăm doar un punct și îl mutăm acolo unde este nevoie. Ca rezultat va arata asa...

Figura 9 - Instrumentul Pan și Straturi

Gata, acum să trecem la straturile pentru animație.
Vom avea nevoie de un strat Arrow și Head_cat.
Să începem cu săgeata.
Să extindem lista, să o găsim și să facem clic pe ceas. Deci am stabilit primul punct la zero secundă. Animația va dura 2 secunde în total.
Deci, acestea sunt setările pe care trebuie să le faceți (vom pune 3 puncte în total):

Al doilea	0	1	2
	+66	- 70	+66

Iată cum va arăta:

Figura 10 - Săgeată de rotație

Acum haideți să animam capul pisicii.
Să extindem head_cat și să găsim Position .
Aici vor fi 4 puncte.
Doar ultima coordonată va fi modificată fără a le afecta pe celelalte.

Al doilea	0.1	0.17	1.12	2.0
Poziţie	689.3	729.3	729.3	689.3

Să ne uităm la poză.

Figura 11 - Poziționați capul

Deci, principiul animației a fost așa. Săgeata se leagănă dintr-o parte în alta, de îndată ce se apropie de pisoi, își trage capul înăuntru, stă în această poziție un timp, apoi o readuce la locul său.

Etapa finală

Productie
Trebuie să creați un produs finit din munca dvs.
Accesați meniul - Adăugați la coada de randare
Se va deschide panoul Render și în Modulul de ieșire (două clicuri) selectați formatul de ieșire. am luat *.mov

Figura 12 - Redare

Faceți clic pe butonul RENDER și obțineți rezultatul (nu uitați să specificați calea).
Asta e tot.