Cum se face animație în Illustrator. Sfaturi și trucuri în Adobe Illustrator: Trucuri în Illustrator. Abilitatea de a crea grafice în Illustrator (comparativ cu Adobe Flash). Pregătirea fișierului SVG în Illustrator

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, paginile Web cu încărcare rapidă necesită o dimensiune mică încorporată în ele. imagini grafice, care se realizează prin optimizarea acestora. Optimizarea imaginii este înțeleasă ca transformarea acesteia care asigură dimensiunea minimă a fișierului, menținând în același timp calitatea necesară a imaginii în acest caz, care se realizează în primul rând prin reducerea numărului de culori din imaginile grafice, utilizarea formatelor de fișiere comprimate și speciale și optimizarea setărilor de compresie pentru fiecare persoană. fragmente de imagine.

Illustrator are încorporate instrumente de optimizare a imaginii care oferă un proces de optimizare rapid și eficient printr-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 ajută la evaluarea rezultatului optimizării și la alegerea setărilor potrivite. Și puteți optimiza atât imaginile create direct în Illustrator, cât și altele, cum ar fi fotografiile pe care intenționați să le puneți 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 oferă să utilizați unul dintre cele patru moduri de previzualizare, dar două sunt cele mai bune pentru a evalua calitatea optimizării:

• 2-Sunt(două opțiuni) vizualizarea simultană a originalului și a imaginii optimizate în conformitate cu setările specificate (Fig. 1);
• 4-Sus(patru opțiuni) În acest mod, zona de vizualizare 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 opțiuni pentru setările 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 apoi de a le compara vizual. În plus, este posibil să se evalueze nu numai calitatea imaginii optimizate, ci și dimensiunea și timpul de descărcare pentru 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 impactul compresiei sau al reducerii paletei asupra calității și dimensiunii imaginii ș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 în SWF și SVG. Imaginile indexate care au un număr mic de culori sunt salvate în format GIF. Pentru a salva imagini color și în tonuri de gri, fotografii și elemente grafice bogate în culori, cum ar fi umplerile cu gradient, se folosește formatul JPG. 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 PNG-8 numărul maxim posibil de culori al unei imagini optimizate este de 256, iar în PNG- 24 imaginea poate avea milioane de culori și, prin urmare, arată ca format jpeg. Diferența dintre PNG-24 și JPEG este că metoda de compresie folosită pentru optimizarea imaginilor PNG-24 nu duce la pierderea calității, dar crește dimensiunea fișierului. Formatele SVG și SWF combină elemente grafice, text și interactive și pot fi, de asemenea, optimizate.

Considera exemplu concret optimizarea imaginii. Să presupunem că în programul Illustrator a fost dezvoltată o emblemă de site (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 obținute ca urmare a deformării (Fig. 4 și 5).

Prin urmare, să încercăm să exportăm emblema în format PSD cu comanda Fișier => Export(Fișier => Export) Dimensiunea imaginii generate 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). Având în vedere numărul limitat de culori implicate în imagine, în acest caz, formatul GIF este optim, cu setările specifice cărora trebuie să le decideți. Experimentând setările, puteți vedea asta cea mai buna calitate oferă algoritmul de compresie implicit al programului selectiv(Selectiv). În ceea ce privește netezirea, atunci, 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 transparența fundalului va fi păstrată, ceea ce este ușor de verificat prin salvarea imaginii 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 de design indispensabil al oricărei pagini Web sunt butoanele de control grafic. Este pur și simplu imposibil să-ți imaginezi o pagină fără ele. Desenarea butoanelor 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 grilă și (sau) cu măști arată mult mai eficiente decât cele obișnuite.

Luați în considerare opțiunea de a crea un buton rotund ridicat în Illustrator. Desenați un obiect vectorial umplut cu o culoare arbitrară sub forma unui cerc (Fig. 9) și convertiți-l într-o grilă 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 o opțiune Spre Centru a evidentia(Iluminare de fundal) la 60 (Figura 10). Alegeț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 un instrument Elipsă(Elipse), setați marcatorul mouse-ului în centrul cercului creat înainte și, în timp ce țineți apăsate tastele altȘi Schimb, întindeți noul cerc deasupra celui vechi, astfel încât să fie mai mare decât cel vechi cu 1-2 pixeli pe toate părțile. Fă-l un chenar negru Accident vascular cerebral) 1-2 px lățime și umpleți-l cu un gradient radial de la roșu la alb (Figura 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 din meniul contextual selectați o echipă Aranjați => Trimiteți înapoi(Organizați => Trimiteți înapoi). Ca rezultat, obținem 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, care indică direcția de deplasare în jurul site-ului. Luați în considerare cel mai simplu caz de a avea două butoane, dintre care unul, cu o săgeată în jos, înseamnă trecerea la pagina următoare, iar butonul cu o săgeată în sus la cea anterioară. Ca un gol pentru săgeată, să luăm un triunghi obișnuit desenat cu instrumentul Poligon(Poligon) umplut cu negru și, de asemenea, stilat ca obiect plasă pentru un efect mai mare. 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 primite este prezentat în fig. 15. Faceți o copie a stratului cu butonul selectând comanda Strat duplicat Straturi, ca urmare, obținem două straturi identice. Apoi selectați săgeata de pe copia stratului și rotiți-o cu 180° selectând comanda din meniul contextual Transform => Rotire Transformare => Rotire. Primim același buton ca în fig. 16. Vă rugăm să rețineți că este mult mai convenabil să stocați toate butoanele de același tip ale unui proiect într-un fișier pe straturi diferite, ceea ce este demonstrat în acest caz.

Acum trebuie să salvați opțiunile optimizate pentru fiecare dintre butoane. Faceți mai întâi stratul de jos invizibil, în acest caz butonul de pe stratul superior va fi păstrat. Alege o echipă Fișier => Salvare pentru web(File => Save for 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 ca rezultat este prezentat în Fig. 18. Acum faceți vizibil 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 mai rămâne este să vă asigurați că butoanele arată bine pe pagina Web și să le plasați pe o pagină personalizată (Figura 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ă se dorește, în timpul procesului de optimizare, butonul poate fi ușor transformat într-o felie. În acest caz, după alegerea comenzii Fișier => Salvare pentru web(Fișier => Salvare pentru Web) și setările de optimizare ar trebui să fie selectate din instrumentul din paleta de instrumente Selectare felie(Slice select) și faceți dublu clic pe imagine, care 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 condimenta o pagină este introducerea elementelor de design care le schimbă aspect(sau stare) în funcție de comportamentul mouse-ului sau, mai rar, în cazul oricăror alte situații: zoom, scrolling, încărcare, erori etc.

Dintre aceste elemente, cele mai cunoscute sunt rollover-urile (din engleza roll over to roll, roll over) elemente care își schimbă aspectul sub influența mouse-ului. Butoanele animate sunt exemple de rulări tipice. Rollover-urile sunt adesea folosite la crearea altor elemente de navigare pe site. De fapt, 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 element și apăsați în jos butonul stâng al mouse-ului când treceți 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ă, se limitează mai des 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 conceput pentru a crea 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 o imagine 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 stratificată rezultată este exportată într-un fișier PSD cu straturi 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 altele. instrumente software, î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 negru rotunjit și umplut (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 grilă 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 umplere cu gradient, similar cu cel prezentat în fig. 26. Suprapuneți obiectul gradient deasupra rețelei, reduceți opacitatea obiectului gradient la aproximativ 80% și dimensiunea obiectului gradient la aproximativ 1 pixel pentru a simula un efect de umflare în final. Și apoi peste obiecte imprimați inscripția. În forma sa originală, lăsați-l să aibă o culoare albă care să corespundă 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 markerul mouse-ului este plasat peste el (starea Peste) și la albastru când butonul mouse-ului este apăsat (starea Jos).

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

Exportați imaginea creată în format PSD cu straturi păstrate folosind comanda Fișier => Export(Fișier => Export) și selectarea modelului de culoare RGB (Fig. 30). Deschideți fișierul PSD generat în ImageReady (Figurile 31 și 32). Creați cadre bazate pe straturi alegâ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 hovered, în timp ce vă aflați în paletă Straturi stratul este selectat automat Stratul 1 Copiere(Fig. 34). Mergeți la paletă Răsturnareși faceți clic pe butonul Creați starea de rulare(Creează starea de rulare) fig. 35, care va face să apară statul Peste statîn paletă Răsturnare(Fig. 36). Creați statul î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 ar trebui să se potrivească cu starea Normal. Ca rezultat, pentru fiecare stare de rulare din paletă animaţie va fi 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(Previzualizare browser) pe bara de instrumente și accesând fereastra browserului (Figura 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, s-au obținut fișierul Primer4.html și o serie de imagini grafice din folderul imagini.

Orez. 40. Fereastra browser cu element Rollover

Rollovers SVG

Formatul SVG din ce în ce mai popular (Scalable Vector Graphics scalable Grafică vectorială), creat pe baza standardului XML, vă permite, de asemenea, să obțineți o varietate de elemente interactive, în special rollovers, doar că, în practică, acest lucru este implementat într-un mod complet diferit. Este de remarcat faptul că crearea de rollover-uri interactive SVG, 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 a funcționa cu obiecte SVG. Interactivitate SVG, care este ușor de deschis cu comanda Fereastră => Interactivitate SVG(Fereastră=>interactivitate SVG) fig. 41.

Să luăm în considerare această variantă de a crea un rollover folosind exemplul unui buton interactiv, culoarea etichetei pe care se va schimba de la negru la albastru atunci când mouse-ul este trecut cu mouse-ul și se va întoarce la negru când mouse-ul iese din zona activă.

Creați un buton dreptunghiular cu margini rotunjite și alegeți o umplere cu gradient potrivită 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 (Fig. 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 o opțiune Spre Centru(Spre centru) și setarea valorii a evidentia(Evidențiați) la 100. Reduceți opacitatea stratului de obiecte plasă la aproximativ 40% (Figura 44). Așezați obiectul plasă deasupra obiectului gradient, iar butonul va arăta ca cel prezentat în Fig. 45.

Orez. 44. Transformarea unei copii a unui buton într-un obiect grilă

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 un obiect 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, așa că trebuie să includeți un fișier cu o descriere a acestor proceduri. Se numește Events.js și este salvat pe disc în folderul Sample Files\Sample Art\SVG\SVG când este instalat software-ul Adobe Ilustrator. Pentru a include fișierul Events.js, utilizați comanda Fișiere JavaScript Interactivitate SVG(Fig. 48). Apoi, trebuie să apăsați 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ă aceea, ar trebui să definiți reacția la evenimentele mouse-ului pentru obiect Text. Selectați obiectul Text, în câmp eveniment palete (eveniment). Interactivitate SVG selectați un eveniment onmouseover elemColor(evt, „Text”, „#3333FF”) aceasta va însemna că atunci când mouse-ul este peste 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ă, trebuie să creați încă un eveniment onmouseout selectați-l în câmp eveniment palete (eveniment). Interactivitate SVG. Apoi, în linia de acțiune introduceți textul elemColor(evt, „Text”, „#000000”) aceasta va reveni negru (Fig. 51).

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

Salvați rularea generată 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, se va obține un singur fișier cu extensia SVG și nu două, ca în cazul rollover-ului clasic, în acest caz s-a obținut 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 descrierea procedurilor JavaScript în folderul cu fișierul SVG. După aceea, puteți verifica performanța 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 de animație simplu (în acest caz, va fi informații despre companie), care va apărea pe ecran atunci când mouse-ul este plasat peste obiectul grafic corespunzător și va dispărea când mouse-ul este scos din elementul interactiv.

Să creăm aproximativ o astfel de serie de obiecte grafice și text, așa cum se arată în Fig. 54. Redenumiți toate obiectele create într-un mod convenabil făcând clic succesiv pe numele următorului obiect din paletă Straturiși introducerea nume dorit(Fig. 55). Rețineți că evidențiat în fig. 56 articole Text1, Text2, Text3Și Calea 1 vor fi întotdeauna vizibile și toate celelalte numai atunci când treci cu mouse-ul peste obiect Text1.

Orez. 54. Vedere originală a imaginii

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

Definiți un răspuns la evenimentul mouse-ului pentru un obiect Text1. Selectați obiectul Text, în câmp eveniment palete (eveniment). Interactivitate SVG selectați un eveniment onmouseover iar în rândul de mai jos introduceți textul elemShow(evt, „Text4”); elemShow(evt, „Calea2”). Ca rezultat, când mouse-ul este peste 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 prin semnul „;”. Apoi faceți același lucru 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(Fișier=>Salvează ca), 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, se va obține fișierul Primer6.svg (dosarul Primer6). Nu uitați să copiați fișierul Events.js în folderul cu acest fișier. Dacă după aceea alergi coz fisierul dat, 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 obiecte 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. O modalitate de a le crea este să utilizați aplicația Adobe ImageReady, care, printre altele, vă permite să creați animație din straturi. În același timp, imaginea multistrat în sine poate fi pregătită în diverse aplicații, inclusiv Adobe Illustrator.

Este foarte ușor să creezi o 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, să încercăm să creștem dimensiunea oricărui simbol-obiect, 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 urmare, în paletă Straturi va fi creat un strat cu multe obiecte (Fig. 62). Dacă exportați direct această imagine în format PSD, atunci acest lucru nu va funcționa, deoarece există un singur strat și, desigur, atunci când deschideți fișierul PSD în 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 Stratul 1în paleta Straturi și utilizați comanda Eliberare în strat(Eliberare în straturi). Rezultatul va fi mutarea fiecărui obiect î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, iar apoi stratul gol Stratul 1 ușor de îndepărtat (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 stratului său și ferestrei paletei animaţie va arăta ca în fig. 67.

După aceea, setați durata fiecăruia dintre cadrele create în acest caz, durata tuturor cadrelor este setată la 0,2 s. Și apoi salvați animația optimizată cu comanda Fișier => Salvare optimizat(Fișier => Salvare cu optimizare). Rezultatul obţinut poate să semene cu Fig. 68.

Este și mai convenabil să utilizați funcțiile Amestecuri vii Software ilustrator. 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 amestecați-le cu parametrii corespunzători (Fig. 69). Este imposibil să utilizați acest fișier direct pentru a crea o animație, deoarece imaginea este situată 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 alegeți comanda Eliberare la Straturi Secvență(Transformați secvențial în straturi) (Fig. 71). Ținând apăsată o tastă Schimb, selectați straturile create și plasați-le deasupra stratului Stratul 1, apoi ștergeți stratul însuși Stratul 1, mutându-l în coșul de gunoi ca urmare, paleta de straturi va lua aceeași formă ca în fig. 72.

Orez. 70. Stare initiala Fereastra Straturi

Exportați fișierul creat în format PSD cu comanda Fișier => Export(Fișier => Export). Deschideți fișierul PSD creat în ImageReady (Fig. 73). Vă rugăm să rețineți că toate straturile create în programul Illustrator vor apărea în fereastra straturi (Fig. 74) și în fereastra animaţie 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 alegeți comanda Faceți cadre din straturi(Creați cadre din straturi) în final, în acest exemplu, vor fi create cinci cadre și fereastra paletei animaţie va lua forma conform fig. 75. Selectați toate cadrele ținând apăsată tasta Schimb, și setați o durată adecvată a cadrului în acest exemplu, se ia același timp de 0,2 s pentru fiecare dintre cadre. Apoi salvați fișierul cu comanda de optimizare Fișier => Salvare optimizat(Fișier => Salvare cu optimizare) din listă Tip fișier opțiune Numai imagini (*.gif). Animația va semăna cu Fig. 76.

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 al tranziției de amestec, plasați toate obiectele unul peste altul folosind butoanele Centru de aliniere orizontală(Alinierea față de centrul orizontal) și Centru de aliniere verticală palete (Aliniere centrală verticală). 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 alegeți durata 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.

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

Orez. 81. Animație terminată

Salutare tuturor! Astăzi voi încerca să fac o descriere a caracteristicilor programului Adobe Illustrator, comparându-l cu capacitățile fluxului. Aceasta nu va fi o analiză globală a programului osos, ci mai degrabă o descriere a unora dintre cipurile 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 le pune pe toate într-o singură postare. Trebuie să recunosc imediat că nu sunt un utilizator de ilustratori super-experimentat, doar că în ultimele șase luni îl folosesc la desen (înainte de asta am desenat totul în flash). Mulți se plâng că ilustratorul este complex, nu întotdeauna intuitiv. Într-o oarecare măsură, sunt de acord că, după flash, acest program este dificil. Dar principalul lucru aici nu este să renunți, ci să continui să studiezi. Și după câteva săptămâni, apare gândul, cum m-am descurcat fără el înainte!

Deci, ce mi-a plăcut la ilustrator și ceea ce am găsit pentru mine care nu este î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 fulger. Anterior a fost Instrument de decor, dar a fost eliminat, aparent considerat inutil. Am decis că ar fi mai distractiv să o facem manual. Illustrator are această caracteristică: Efect - Distorsionare și transformare - Transformare.

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

2. Zigzag

Lucru și mai simplu, dar totuși util. S-ar părea un fleac, dar în flash trebuie să desenezi cu mâna, î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 deformare a formelor simple (Efect - Warp - Arc / Pește). De fapt, sunt 15. ultima versiune programe.

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

Se poate face manual: pe un obiect grafic, atunci când este selectat într-un colț (în toate colțurile), apar un punct alb și un semn de linie rotunjită. Trageți mouse-ul, ajustați după gustul dvs.

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

5. Aspru

Efectul se aplică formelor simple ( Efect-Distorsionare și transformare-Aspre). Ca rezultat, obținem ceva asemănător modelelor 3D low-poli. Cred că e tare :) Și cel mai important - foarte simplu.

6 Pucker&Bloat(Trageți și umflați)
Un exemplu în imaginea de mai jos:

7. Extensie formular (Cale offset)

În bliț există o funcție Expand Fill (extensie de umplere), nu funcționează deloc cu linii de creion, spre deosebire de illustrator.

8. Pensule (Brush Art, Pattern Brush, Scatter Brush)
Vezi imaginea de mai jos pentru exemple:

9. Pensule pentru textura (perii pentru textura)

Există, de asemenea, multe pensule de textură în illustrator 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, dar vreau să mă concentrez pe o pensulă cu un nume amuzant blobPerie. Situată pe bara de instrumente, o perie foarte frumoasă de folosit. Are o grămadă de setări, îmi place mai mult decât de obicei. Este greu de explicat beneficiile sale în cuvinte, este mai bine să îl încerci o dată.

10.Split to Grid

O altă caracteristică utilă este funcția Split to Grid (Object-Path-Split to Grid), care vă permite să tăiați formularul în segmente egale. De ce ne amintește asta? Așa este - ferestre într-o clădire mare. În ceea ce mă privește, o chestie mișto pentru desen, de exemplu, peisaje urbane;)

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

12. Mutare (dreapta - Transformare - Mutare)

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

Este foarte convenabil să creați modele fără sudură în illustrator ( Obiect-Pattern-Make). Îmi amintesc cum am excelat frenetic în flash cu crearea lui . În versiunea ilustratoare a CC 2015, totul este automat, o grămadă 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 versiunile anterioare ale programului, totul trebuia făcut manual, ca până acum în flash.

(Notă - modelul poate fi transformat într-un obiect vector editabil folosind funcția de analiză ( Obiect-Extindeți Aspectul).

14. Mozaic obiect (Mozaic)

Creați o paletă de culori bazată pe o imagine existentă. Importați imaginea care vă place în ilustrație (Deschidere), apoi Obiect - Creați mozaic obiect. Î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. Amestecare (amestecare)

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

Instrumentul poate fi folosit și pentru a clona obiecte. Așezăm două obiecte la distanță unul de celălalt și aplicăm Blend Options, selectăm numărul de pași (numărul de obiecte clonate).

16. Build Shape Tool. Un lucru foarte util pentru lucrul cu primitivi. Într-o clipă, așa cum mi s-a părut, este mai puțin convenabil.

Ținând apăsat Alt și făcând clic pe segmentele selectate - ștergeți segmentele. Dacă pur și simplu tragem mouse-ul peste mai multe zone selectate - conexiuni.

Adăugare - un instrument care ajută la tăierea, conectarea automată etc. formele selectate. În ceea ce mă privește, nu este foarte convenabil, îl folosesc mai des Construiformăinstrument.

(planșe de artă)

18.Custom Tool Panel

Posibilitatea de a crea propria bară de instrumente, eliminând cele inutile și de a le selecta numai pe cele pe care le utilizați.

În flash, panouri de artă, și anume scene ( Scena 1,2,3..) sunt situate separat și trebuie să comutați între ele (Shift + F2). În ilustrator, toate pot fi poziționate î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. Izometric cu stiluri grafice

Și ultimul lucru este crearea izometriei fără a folosi 1 clic (sau mai bine zis, 3 clicuri, pentru că avem 3 laturi;) folosind stiluri grafice ( Stiluri grafice). Cum se face asta, voi scrie data viitoare.

Ceea ce ilustratorul are în comun cu flash este capacitatea de a salva un obiect într-un simbol (simbol) și acest simbol poate fi, de asemenea, transferat în flash fără probleme (deschideți un fișier .ai în flash, prin Import - Import în etapă).
Simbolul din ilustrator are aceleași proprietăți ca și în flash.
Și în cele din urmă, voi scrie ceea ce în ilustrator, după părerea mea, este inferior flash-ului. Da, da, și există. Și acesta este instrumentul de umplere ( galeata de vopsea). Oricât m-aș strădui să mă obișnuiesc în illa, este mai convenabil în flash.
Dacă notele mele au devenit utile pentru tine sau dacă vrei să adaugi ceva pe cont propriu - bine ai venit în comentarii! Noroc tuturor;)

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 descrie cel mai simplu exemplu de animare a unui vector 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 necesare dacă doriți doar să animați SVG) Să începem!

Și deci pașii pe care trebuie să-i urmăm:

1. Creați structura corectă a fișierelor
2. Descărcați și conectați pluginul
3. Desenați o linie artistică cool în Adobe Illustrator
4. Convertiți imaginea noastră în Lazy Line Converter
5. Lipiți codul rezultat în main.js
6. 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ă selectați parametrii ca în imaginea de mai jos.

• Clasic H5BP (HTML5 Boiler Plate)
• Fără șablon
• Doar HTML5 Shiv
• minificat
• .IE Clasuri
• Cadru cromat
• 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 de proiect Lazy Line Painter, trebuie transferate doar 2 fișiere în proiectul nostru. Primul este „jquery.lazylinepainter-1.1.min.js” (versiunea de plugin poate diferi) este situat în rădăcina folderului rezultat. Al doilea este example/js/vendor/raphael-min.js.

Aceste 2 fișiere sunt plasate în folderul js. Și le includem în index.html înainte de main.js astfel:

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

1. Desenați imaginea noastră de contur în Illustrator (cel mai simplu mod de a face acest lucru este cu Instrumentul Pen)
2. 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
3. Nu ar trebui să aibă umpluturi
4. Dimensiunea maximă a fișierului este de 1000×1000 px, 40 kb
5. Să decupăm la marginile obiectului Obiect>Planuri de desen>Fit To Artboards Bounds
6. Salvați ca 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 și plasați pictograma în caseta de mai jos.
Grosimea, culoarea conturului și viteza de animație pot fi modificate chiar în codul care va apărea după conversie!

5. Lipiți codul rezultat în main.js
Acum doar lipiți 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 valorii parametrului durată (implicit 600)

6. Adăugați niște CSS după gust
Eliminați paragraful 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ăugați niște CSS la fișierul main.css pentru un aspect 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. când rulează mai departe mașină locală este posibil să întârziați începerea animației cu câteva secunde.

Astăzi nu avem obișnuit Lecția Adobe Ilustrator. Pentru că de data aceasta nu vom face o imagine statică, ci o animație reală. Imaginează-ți că se dovedește ajutor de la Adobe Ilustratorul poate desena și desene animate :)

Și nu avem nevoie de nimic pentru asta. Organizarea competentă 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 de numărătoare inversă în stil retro film. Ieșirea ar trebui să fie un film flash cu aceeași numărătoare inversă.

Primul lucru de făcut este să desenați toate elementele necesare pentru animația viitoare. Pentru a face acest lucru, am realizat două poziții ale cadrelor de film într-un document separat, 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 inscripțiile.

Când toate părțile desenului nostru sunt gata, puteți începe să creați animația în sine. Pentru comoditate, acest lucru se face cel mai bine într-un document nou. În acest caz, straturile vor juca rolul de cadre de animație. Și în primul strat, trebuie doar să copiați cadrul filmului. Poziționați-l în mijlocul zonei de lucru.

Acum creați un al doilea strat și copiați cadrul de film în el, în care găurile de la margini sunt făcute cu o schimbare. De asemenea, trebuie să fie centrat.

Din aceste două straturi, puteți obține deja animația unui film în mișcare. Dar mai târziu vom avea nevoie de mult mai multe straturi. Așadar, 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 cu 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 foarte convenabil pentru lucru. Prin urmare, puteți dezactiva unele straturi făcând clic pe pictograma ochiului 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. Pornind și dezactivând straturile, puteți vedea exact ce se află într-un anumit cadru al animației noastre viitoare. Și acum, pentru a adăuga o ușoară mișcare mișcării filmului, trebuie să mișcăm ușor cadrele primite în direcții diferite. Pentru a face acest lucru, activați numai stratul cu care veți lucra acest moment, apoi mutați cadrul cu câțiva pixeli pe fiecare parte.

După 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 documentul pieselor de desene animate și plasați-l pe primul strat deasupra cadrului filmului.

Dacă eliminați selecția din cerc, atunci aceasta va arăta ca un singur întreg. Este exact ceea ce avem nevoie.

Dar, deoarece este format din sectoare separate, este posibil, prin schimbarea culorii acestora, să se creeze animație foarte rapid și ușor. 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 se scutură în timpul mișcării, așa că nu este necesar să puneți cercul exact în centrul cadrului. Așezați-l pe ochi.

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

Apoi, trebuie să adăugăm textură straturilor noastre. Porniți primul strat și copiați textura din fișierul sursă cu piese de schimb acolo.

Apoi porniți pe rând următoarele straturi și copiați aceeași textură acolo. Pentru a-l face să arate diferit pe fiecare cadru, 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. Rămâne să adăugați zgârieturi verticale și aproape totul. Pentru a face acest lucru, din nou, copiați zgârietura originală și puneți-o într-un loc arbitrar în mai multe straturi. În cazul meu, zgârieturile apar în doar două straturi.

Acum că ciclul principal cu animația filmului este gata, rămâne de adăugat numerele. Deoarece numărăm 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 umplut, 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 eticheta Go!!!, pur și simplu ștergeți cercul înainte de a copia eticheta pe stratul dorit.

Asta e tot cu animația. Principalul lucru aici este să nu fii confuz. Puteți da straturilor câteva nume convenabile, dar am fost oarecum prea leneș :) Și totuși, când ați terminat, 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 ciclul animației. Datorită ei, videoclipul va fi redat în cerc. Și opțiunea Layer Order: Bottom Up redă straturile ilustratorului de jos în sus în panou. Exact așa ne-am construit animația.

Ca rezultat, obținem un film flash cu animația noastră.

Acum vedeți că realizarea unei 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 mai bine de folosit Adobe Flash sau alte editori flash. De exemplu, am făcut această pisică într-un vechi Macromedia Flash pe care l-am dezgropat la serviciu.

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: