Ghid: cum să creați o animație SVG folosind After Effects CC. Cum să animați în Adobe Illustrator Exportând fișiere SWF din Illustrator

06.03.2022 Fier

Adobe Illustrator și After Effects
Import și animație simplă

Buna 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 întunecat; 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 mult PRINCIPAL 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ă. ÎnchidereAdobe Illustrator și deschideți After Effects.

Importați în After Effects
Fișier - Import - Fișier - selectați fișierul nostru salvat Ilustrator.
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 o compoziție , ca 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 Dupa efecte
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 Poziţie.
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 pentru un timp, apoi îl readuce la locul său.

Etapa finală

Productie
Trebuie să creați un produs finit din munca dvs.
Să mergem la meniu - 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.

Un GIF transparent în Adobe Illustrator este realizat după cum urmează. Accesați meniul Fișier > Salvare pentru Web și dispozitive (Alt+Ctrl+Shift+S). În fereastra care se deschide, în câmpul Format de fișier optimizat, trebuie mai întâi să accesați fila Marimea imaginii(Marimea imaginii). Faptul este că în mod implicit întreaga pagină este inclusă în fereastra de optimizare, iar acest lucru nu este de obicei necesar. Prin urmare, în fila Dimensiune imagine, debifați caseta Clip pe planșă(Decupați la dimensiunea paginii) și faceți clic pe butonul Aplicați.

Apoi selectați GIF din lista de selecție a formatului și bifați caseta de selectare Transparență.

După aceasta, vom determina ce culori vor fi transparente. Toate culorile prezente în imagine sunt conținute în filă Tabel de culori(Tabel de culori) și sunt afișate ca pătrate colorate. Selectați instrumentul din bara de instrumente din partea stângă a ferestrei Picura(pipetă).

Există două moduri de a defini culorile. Cea mai ușoară modalitate este de a specifica o culoare cu o picătură direct pe imagine - după aceasta, culoarea va fi evidențiată pe tabelul de culori cu o contur întunecat. Ei bine, dacă știți exact ce culoare ar trebui să fie transparentă, o puteți selecta direct pe tabelul de culori făcând clic pe pătratul colorat corespunzător. Atât în primul cât și în al doilea caz, dacă trebuie să selectați mai multe culori, trebuie să lucrați cu tasta Shift (sau Ctrl) apăsată. După alegerea unei culori, trebuie să instruiți programul să o facă transparentă. Pentru a face acest lucru, faceți clic pe pictograma Mapează culorile selectate la Transparent(Adăugați culorile selectate la transparență). În imagine, acest buton este încercuit, iar culoarea roșie este setată la transparent. O zonă transparentă va apărea în imagine, iar pătratul de pe tabelul de culori își va schimba aspectul - o parte din acesta va deveni un triunghi alb. Pentru a anula culoarea selectată, trebuie să o selectați în Tabelul de culori, apoi să faceți clic din nou pe pictograma Maps selected colors to Transparent.

Câteva cuvinte despre metoda de stabilire a transparenței. Meniul derulant este responsabil pentru aceasta Specificați algoritmul Dither pentru transparență, în rusă - Algoritm pentru simularea transparenței (Fig. de mai jos). Există patru opțiuni: Fără transparență Dither, Diffusion Transparency Dither, Pattern Transparency Dither și Noise Transparency Dither. În modul algoritm difuz, glisorul devine activ Cantitate(Valoare) vă permite să modificați valoarea difuziei. Ce să aplici în practică? În funcție de scop și imagine. Nu folosesc această opțiune și o las întotdeauna la valoarea implicită - No Transparency Dither.

Faceți clic pe Salvare - GIF-ul transparent este gata. Lucrarea a fost efectuată în Adobe Illustrator versiunea CS4 (v.14), dar toate acțiunile și comenzile rapide de la tastatură sunt relevante și pentru versiunea anterioară CS3 (v. 13).

Astăzi avem o lecție neobișnuită de Adobe Illustrator. Pentru că de data aceasta nu vom face o imagine statică, ci o animație reală. Imaginează-ți, se dovedește că poți desena și desene animate folosind Adobe Illustrator :)

Și pentru asta nu avem nevoie de nimic. Organizarea corectă a straturilor și exportul lucrării finale în format swf, unde fiecare strat este convertit într-un cadru de animație. În tutorialul de astăzi vom desena o animație cu numărătoare inversă în stilul unui film retro. Ieșirea ar trebui să fie un videoclip flash cu aceeași numărătoare inversă.

Primul lucru pe care trebuie să-l faceți este să desenați toate elementele necesare pentru animația viitoare. Pentru a face acest lucru, într-un document separat, am făcut două poziții ale unui cadru de film, un cerc pentru referință, care este tăiat în sectoare separate, o textură și o zgârietură verticală pentru a adăuga efectul antichității, precum și toate numerele și inscriptii.

Când toate părțile desenului nostru sunt gata, putem începe să creăm animația în sine. Pentru comoditate, este mai bine să faceți acest lucru într-un document nou. În acest caz, straturile noastre vor juca rolul de cadre de animație. Și în primul strat trebuie doar să copiați un cadru de film. Așezați-l în mijlocul zonei de lucru.

Acum creați un al doilea strat și copiați un cadru de film în el, în care găurile de-a lungul marginilor sunt făcute cu un offset. De asemenea, trebuie plasat în centru.

Din aceste două straturi puteți obține deja animație de film în mișcare. Dar mai târziu vom avea nevoie de mai multe straturi. Deci selectați primele două straturi, mergeți la opțiunile panoului și faceți o copie a straturilor.

Într-un mod similar, trebuie să acumulăm 12 straturi de cadre de film care definesc mișcarea acestuia.

Acum avem o grămadă de straturi și toate sunt vizibile. În sensul că straturile superioare le blochează pe cele inferioare, ceea ce nu este în întregime convenabil pentru lucru. Prin urmare, puteți dezactiva unele straturi făcând clic pe pictograma cu un ochi din stânga numelui stratului. Pentru a dezactiva sau a activa toate straturile simultan, țineți apăsată tasta Alt în timp ce faceți clic pe pictograma ochiului. Prin activarea și dezactivarea straturilor, puteți vedea exact ce se află într-un cadru specific al animației noastre viitoare. Și acum, pentru a adăuga o ușoară agitație la mișcarea filmului, trebuie să mișcăm cadrele rezultate ușor în direcții diferite. Pentru a face acest lucru, activați numai stratul cu care veți lucra în acest moment, apoi mutați cadrul cu câțiva pixeli în orice direcție.

Odată ce ați trecut prin toate straturile și ați adăugat o mică schimbare, puteți începe să creați animația cercului în mișcare. Pentru a face acest lucru, copiați cercul format din sectoare din document cu părțile de desene animate și plasați-l pe primul strat deasupra cadrului filmului.

Dacă deselectați cercul, acesta va arăta ca un singur întreg. Este exact ceea ce avem nevoie.

Dar, deoarece este format din sectoare individuale, puteți crea animații foarte rapid și ușor, schimbându-le culoarea. Pentru a face acest lucru, copiați acest cerc în al doilea strat și faceți primul sector mai ușor. Vă amintiți că filmul nostru se scutură pe măsură ce se mișcă, așa că nu este deloc necesar să plasați cercul exact în centrul cadrului. Poziționați-l după ochi.

Într-un mod similar, trebuie să copiați cercul în fiecare strat următor, în timp ce pictați un sector mai mult cu o culoare mai deschisă decât data anterioară. Împreună, aceste 12 straturi formează o animație a filmului care se mișcă cu un cerc de umplere.

În continuare, trebuie să adăugăm textură straturilor noastre. Porniți primul strat și copiați textura din fișierul original cu piesele de schimb acolo.

Apoi porniți straturile următoare unul câte unul și copiați aceeași textură acolo. Pentru a-l face să arate diferit în fiecare cadru, pur și simplu rotiți-l la 90 de grade. După cum probabil ați ghicit, trebuie să adăugăm textură tuturor celor 12 cadre.

Dacă v-ați săturat deja să copiați, atunci vă pot mulțumi - a mai rămas foarte puțin. Partea cea mai grea s-a terminat. Mai rămâne doar să adaugi zgârieturi verticale și cam atât. Pentru a face acest lucru, copiem din nou zgârietura originală și o plasăm într-un loc arbitrar în mai multe straturi. În cazul meu, zgârieturile apar doar în două straturi.

Acum că ciclul principal cu animație de film este gata, nu mai rămâne decât să adunăm numerele. Deoarece numărătoarea inversă merge de la 3 la 1 plus cuvântul Go!!!, avem nevoie de și mai multe straturi. Nu 12, ci până la 48. Pentru a face acest lucru, trebuie să faceți încă trei copii ale straturilor gata făcute cu animație de film.

Și apoi totul este simplu. Porniți primul strat și puneți numărul trei acolo.

Apoi trebuie să copiați această figură în straturile următoare până când animația cercului se termină. Când ajungeți la următoarea copie a straturilor, unde cercul va fi din nou complet completat, trebuie să puneți numărul doi. În același mod, copiați numărul unu în straturile dorite. Și când ajungeți la straturile finale pentru inscripția Go!!!, pur și simplu ștergeți cercul înainte de a copia inscripția în stratul dorit.

Asta e tot pentru animație. Principalul lucru aici este să nu fii confuz. Puteți da straturilor niște nume convenabile, dar am fost cam leneș :) Și, de asemenea, când vă terminați munca, asigurați-vă că reactivați toate straturile făcând clic pe pictograma ochiului.

În fereastra de setări de export, asigurați-vă că setați Export ca: straturi AI la cadre SWF. Această opțiune este cea care transformă straturile Illustrator în cadre de animație. Apoi, faceți clic pe butonul Avansat.

Se vor deschide setări suplimentare. Aici trebuie să setați Frame Rate. Am 12 cadre pe secundă. Caseta de selectare Looping este responsabilă pentru animația ciclică. Datorită acestuia, videoclipul va fi redat în cerc. Iar opțiunea Layer Order: De jos în sus reproduce straturi de ilustrator de jos în sus în panou. Exact așa ne-am construit animația.

Ieșirea este un video flash cu animația noastră.

Acum vedeți că realizarea de animații simple în Adobe Illustrator nu este atât de dificilă pe cât pare la prima vedere.

Dar pentru a crea videoclipuri lungi sau aplicații interactive, este totuși mai bine să utilizați Adobe Flash sau alte editori flash. De exemplu, am făcut această pisică într-un Macromedia Flash vechi pe care l-am dezgropat din munca mea.

De asemenea, recent HTML5 și CSS3 sunt din ce în ce mai folosite pentru a crea animații. Acest cod este acceptat de browserele moderne și nu necesită utilizarea unui player flash.

Roman aka dacascasîn special pentru blogul Note de la un Microstock Illustrator

Abonează-te la newsletter-ul nostru pentru a nu pierde nimic nou:

Acum creați un al doilea strat și copiați un cadru de film în el, în care găurile de-a lungul marginilor sunt făcute cu un offset. De asemenea, trebuie plasat în centru.

Într-un mod similar, trebuie să acumulăm 12 straturi de cadre de film care definesc mișcarea acestuia.

Dacă deselectați cercul, acesta va arăta ca un singur întreg. Este exact ceea ce avem nevoie.

În continuare, trebuie să adăugăm textură straturilor noastre. Porniți primul strat și copiați textura din fișierul original cu piesele de schimb acolo.

Și apoi totul este simplu. Porniți primul strat și puneți numărul trei acolo.

Ieșirea este un video flash cu animația noastră.

Acum vedeți că realizarea de animații simple în Adobe Illustrator nu este atât de dificilă pe cât pare la prima vedere.

De asemenea, recent HTML5 și CSS3 sunt din ce în ce mai folosite pentru a crea animații. Acest cod este acceptat de browserele moderne și nu necesită utilizarea unui player flash.

Roman aka dacascas mai ales pentru blog

Abonează-te la newsletter-ul nostru pentru a nu pierde nimic nou:

Optimizare grafică web

Informațiile grafice sunt transferate mult mai lent decât informațiile text, iar timpul de încărcare a imaginilor este proporțional cu dimensiunea fișierelor lor grafice. Prin urmare, încărcarea rapidă a paginilor Web necesită o dimensiune redusă a imaginilor grafice încorporate în acestea, ceea ce se realizează prin optimizarea acestora. 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 setati in fereastra Salvați pentru web(Salvare pentru Web), apelat prin comanda cu același nume din meniu Fişier(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-Sunt(două opțiuni) vizualizarea simultană a imaginii originale și optimizată în conformitate cu setările specificate (Fig. 1);
4-Sus(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 curente 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 lor vizuală ulterioară. Î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, prin urmare, este similară cu formatul 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.

Să ne uităm la un exemplu specific de optimizare a 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 logo-ul în format PSD cu comanda Fișier => Export(Fișier => Export) Dimensiunea imaginii create va fi de 143 KB. Deschideți fișierul PSD rezultat și utilizați comanda Fișier => Salvare pentru web(Fișier => Salvare pentru 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 bună calitate este produsă de algoritmul de compresie implicit selectat de program Selectiv(Selectiv). În ceea ce privește anti-aliasing, 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ă folosind comanda Obiect => Creați o plasă de gradient(Obiect => Creare Gradient Mesh) prin specificarea a patru rânduri și patru coloane și în listă Aspect(Vizualizare) selectând opțiunea Spre Centru A evidentia(Evidențiere) egal cu 60 (Fig. 10). Selectați un instrument Selectie directaș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 paletă Mostre(Fig. 12).

Luați unealta Elipsă(Elipse), plasați marcatorul mouse-ului în centrul cercului creat anterior și, în timp ce țineți apăsate tastele, AltȘi Schimb, întindeți noul cerc peste cel vechi, astfel încât să fie mai mare decât cel vechi cu 1-2 pixeli pe toate părțile. Dă-i un chenar negru ( Accident vascular cerebral) 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 selectați comanda din meniul contextual Aranjare => Trimitere înapoi(Aranja => Trimite î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 o săgeată goală, luați un triunghi obișnuit desenat cu un instrument Poligon(Poligon) umbrit în negru și, de asemenea, proiectat ca obiect plasă pentru un efect suplimentar. Mutați săgeata la buton și ajustați poziția tuturor obiectelor unul față de celălalt folosind butoanele din paletă corespunzătoare Alinia(Aliniere). Primul dintre butoanele rezultate este prezentat în Fig. 15. Să facem o copie a stratului cu butonul selectând comanda Strat duplicat Straturi, ca rezultat obținem două straturi identice. Apoi selectați săgeata de pe copia stratului și rotiți-o la 180° selectând comanda din meniul contextual Transform => Rotire Transformare => Rotire. 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 o echipă Fișier => Salvare pentru web(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 Salvați(Salvați) ș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 (dosar Primer 2).

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 Fișier => Salvare pentru web(Fișier => Salvare pentru Web) și setarea parametrilor de optimizare ar trebui să fie selectate din paleta de instrumente Selectare felie(Slice select) și faceți dublu clic pe imagine, care în cele din urmă se va transforma automat într-o felie cu numărul de serie 1 (Fig. 21). Făcând dublu clic din nou, se va deschide fereastra. Opțiuni pentru felii(Slice Options), în care va trebui să specificați un link și, dacă doriți, să schimbați numele feliei (Fig. 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 da viață unei pagini este introducerea elementelor de design care își schimbă aspectul (sau starea) în funcție de comportamentul mouse-ului sau, mai rar, atunci când apare o altă situație: 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. Evenimentele principale sunt considerate a fi următoarele: stare normală normală, trecerea cursorului mouse-ului peste un element și apăsarea în jos a butonului stâng al mouse-ului când treceți cursorul peste el. 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 Illustrator, ca în multe alte cazuri, este o serie de caracteristici interesante care nu sunt disponibile în alte software-uri, împreună 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 plasă cu o evidențiere în centru (comandă Obiect => Creați o plasă de gradient 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-o să aibă o culoare albă, care va corespunde stării Normale (Fig. 27), iar apoi, atunci 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 el. Faceți două copii ale acestui strat folosind comanda Strat duplicat(Strat duplicat) din meniul paletei Straturi, paleta va avea trei straturi (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 în același timp straturile folosind comanda Fișier => Export(Fișier => Export) și selectarea modelului 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 Faceți cadre din straturi(Creează cadre din straturi) din meniul paletei Animaţie. Fereastra Animație va arăta ca în Fig. 33. În același timp în paletă Răsturnare Inițial, va fi creată o singură stare Normală.

Apoi în fereastră Animaţie selectați cadrul corespunzător stării induse, în timp ce vă aflați în paletă Straturi stratul va fi selectat automat Stratul 1 Copiere(Fig. 34). Mergeți la paletă Răsturnareși faceți clic pe butonul Creați starea Rollover(Creează o stare de rulare) fig. 35, care va avea ca rezultat starea Peste statîn paletă Răsturnare(Fig. 36). Creați o stare în același mod Stare de jos. Activați starea Normalîn paletă Răsturnareși ștergeți din paletă Animaţie toate cadrele cu excepția celui care trebuie să se potrivească cu starea Normal. Ca rezultat, pentru fiecare stare de rulare din paletă Animaţie va exista un singur cadru (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(Browser Preview) pe bara de instrumente și accesând fereastra browserului (Fig. 40). După aceea, salvați fișierul folosind comanda Fișier => Salvare optimizat(Fișier => Salvare cu optimizare) și specificarea opțiunii HTML și imagini (*.html). Drept urmare, în acest exemplu, în folderul imagini au fost obținute fișierul Primer4.html și o serie de imagini grafice.

Orez. 40. Fereastra browser cu element Rollover

Rollovers SVG

Formatul SVG (Scalable Vector Graphics) din ce în ce mai popular, creat pe baza standardului XML, vă permite, de asemenea, să obțineț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.

O paletă specială este concepută pentru lucrul cu obiecte SVG Interactivitate SVG, care poate fi deschis cu ușurință folosind comanda Fereastra => Interactivitate SVG(Fereastra => interactivitate SVG) 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 paletă Transparenţă(Transparență) în acest exemplu valoarea parametrului Opacitate(Opacitatea) este setată la 50%. Faceți o copie a butonului, completați-l cu verde închis (Figura 43), apoi convertiți-l într-un obiect plasă cu comanda Obiect => Creați o plasă de gradient(Obiect=>Creare Gradient Mesh) prin specificarea a patru rânduri și zece coloane, iar în listă Aspect(Vizualizare) selectând opțiunea Spre Centru(Spre centru) și setarea valorii A evidentia(Evidențiați) egal cu 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 poziția acestuia folosind butoanele din paletă corespunzătoare Alinia(Aliniere). Imaginea rezultată va conține un strat cu trei obiecte suprapuse unul peste altul (Fig. 46). Evenimentele programate se vor referi la obiectul text, așa că pentru comoditate, schimbați-i numele în Text făcând dublu clic pe obiect și introducând un nou nume. În mod similar, schimbați numele stratului de la Layer 1 to Layer(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 include fișierul Events.js, utilizați comanda Fișiere JavaScript Interactivitate SVG(Fig. 48). Apoi trebuie să faceți clic pe butonul Adăuga(Adăugați) și găsiți fișierul dorit pe hard disk. Când numele lui apare în câmp URL(Fig. 49), faceți clic pe butonul Terminat(Ieși).

Orez. 48. Selectarea comenzii JavaScript Files

După aceasta, ar trebui să definiți reacția la evenimentele mouse-ului pentru obiect Text. Selectați obiectul Text din câmp Eveniment palete (eveniment). Interactivitate SVG selectați evenimentul onmouseover elemColor(evt, „Text”, „#3333FF”) aceasta va însemna că atunci când mouse-ul este peste un obiect Text culoarea sa 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âmp Eveniment palete (eveniment). Interactivitate SVG. Apoi, în bara de acțiuni, introduceți textul elemColor(evt, „Text”, „#000000”) aceasta va face ca culoarea să revină la negru (Fig. 51).

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

Salvați rularea creată ca fișier SVG cu comanda Fișier => Salvare ca(Fișier => Tip fișier format SVG, apoi setați opțiunile pentru salvarea fișierului SVG, așa cum se arată în Fig. 52. După salvare, veți primi 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); Cu toate acestea, pentru ca transferul să funcționeze cu adevărat, trebuie să copiați suplimentar fișierul Events.js cu o descriere a procedurilor JavaScript în folderul cu fișierul SVG. După aceasta, puteți verifica funcționalitatea rulării, rezultatul va arăta așa cum se arată î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 paletă Straturişi introducerea numelui dorit (Fig. 55). Vă rugăm să rețineți că cele evidențiate în Fig. 56 de obiecte Text1, Text2, Text3Și Calea 1 vor fi întotdeauna vizibile, iar toate celelalte numai atunci când treceți mouse-ul peste obiect Text1.

Orez. 54. Vedere originală a imaginii

Includeți fișierul Events.js cu o descriere a procedurilor JavaScript folosind comanda Fișiere JavaScript(fișiere JavaScript) din paletă Interactivitate SVG prin apasarea butonului Adăuga(Adăugați) specificând fișierul dorit de pe hard disk și făcând clic pe butonul Terminat(Ieși).

Definiți răspunsul la evenimentele mouse-ului pentru un obiect Text1. Selectați un obiect Text, în câmp Eveniment palete (eveniment). Interactivitate SVG selectați evenimentul onmouseover iar în rândul de mai jos introduceți textul elemShow(evt, „Text4”); elemShow(evt, „Calea2”). Ca rezultat, atunci când mouse-ul este peste un obiect Text1 obiectele vor deveni vizibile Text4Și Calea 2. 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țiune similară pentru eveniment onmouseout, introducând textul pentru acesta, ceea ce va însemna ascunderea obiectelor (Fig. 57).

Salvați rezultatul ca fișier SVG cu comanda Fișier => Salvare ca(File=>Save As), specificând numele fișierului, selectând în câmp Tip fișier SVG, apoi setați 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ă apoi rulați fișierul creat, 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 cale 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, „Calea2”) la eveniment onload(Fig. 60). Salvați din nou fișierul și asigurați-vă că obiectele sunt acum Text4Și Calea 2 vizibil numai când treceți mouse-ul peste obiect 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 animație pe baza elementelor din paletă Simboluri(Simboluri) deschise prin comandă Fereastra => Simboluri(Fereastră=>Simboluri) sau dintr-una dintre bibliotecile de simboluri care pot fi deschise folosind comanda Window => Biblioteci de simboluri(Fereastră => Biblioteci de simboluri).

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. În sfârșit în paletă Straturi va fi creat un strat cu multe obiecte (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, trebuie mai întâi să plasați obiecte pe diferite straturi. Acest lucru se poate face în diferite moduri; cel mai simplu este să selectați mai întâi stratul Stratul 1în paleta Straturi și utilizați comanda Eliberare în strat(Eliberați în straturi). Rezultatul va fi că fiecare dintre obiecte va fi mutat în propriul strat, dar toate vor fi imbricate în strat. Stratul 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. Stratul 1, și apoi stratul care a devenit gol Stratul 1 pur și simplu îndepărtați (Fig. 63). Exportați imaginea în format PSD folosind comanda Fișier => Export(Fișier => 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ţieFaceți cadre din straturi(Creați cadre din straturi). Ca rezultat, vor fi create cinci cadre, fiecare dintre ele va corespunde propriului strat și ferestrei 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 Fișier => Salvare optimizat(Fișier => Salvare cu optimizare). Rezultatul rezultat poate să semene cu Fig. 68.

Este și mai convenabil să obțineți spații libere, care pot fi apoi ușor convertite în animație în ImageReady, pentru a utiliza funcțiile Amestecuri vii Programe ilustratoare. 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 fereastră Straturi evidențiați linia , activați meniul paletei făcând clic pe săgeata neagră din colțul din dreapta sus și selectați comanda Eliberare la Straturi Secvență(Transformați secvențial în straturi) (Fig. 71). În timp ce țineți apăsată tasta Schimb, selectați straturile create și plasați-le deasupra stratului Stratul 1și apoi ștergeți stratul în sine Stratul 1, mutându-l în coșul de gunoi, ca rezultat, paleta de straturi va lua aceeași formă ca în Fig. 72.

Orez. 70. Starea inițială a ferestrei Straturi

Exportați fișierul creat în format PSD cu comanda Fișier => Export(Fișier => 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) și în fereastra Animaţie Deocamdată va fi un singur cadru.

Activați meniul paletei Animaţie făcând clic pe săgeata neagră din colțul din dreapta sus al paletei și selectând Faceți cadre din straturi(Creați cadre din straturi) Ca rezultat, în acest exemplu, vor fi create cinci cadre și fereastra paletei Animaţie va lua forma conform fig. 75. Selectați toate cadrele în timp ce țineți apăsată tasta Schimb, și setați durata corespunzătoare a cadrului în acest exemplu, se ia același timp de 0,2 s pentru fiecare cadru. Apoi salvați fișierul de optimizare cu comanda Fișier => Salvare optimizat(Fișier => Salvare cu optimizare), setare în listă Tip fișier opțiune Numai imagini (*.gif). 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ă(Aliniați cu centrul orizontal) și Centru de aliniere verticală(Aliniați în raport cu centrul vertical) palete Alinia(Fig. 77).

Exportați fișierul creat în format PSD ( Fișier => Export File => Export) și deschideți fișierul PSD creat în programul ImageReady (Fig. 78). Creați cadre de animație bazate pe straturi ( Faceți cadre din straturi Creați cadre din straturi) ș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 ( Fișier => Salvare optimizat Fișier => Salvare cu optimizare). Animația rezultată este prezentată în Fig. 81.