Sfaturi și trucuri în Adobe Illustrator: Trucuri în Illustrator. Posibilitatea de a crea grafice în Illustrator (comparativ cu Adobe Flash). Crearea de animații în Illustrator Cum se face animație gif în Illustrator
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.
Să desenăm
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 conform compozitiei, astfel incat sa se deschida si sa vedem straturile (daca totul este facut 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 utilizând instrumentul Pana în spate ( tasta de 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):
| Doilea | 0 | 1 | 2 |
| +66 | - 70 | +66 |
Figura 10 - Săgeată de rotație
Acum haideți să animam capul pisicii.
Să extindem head_cat și să găsim Position .
Vor fi 4 puncte aici.
Doar ultima coordonată va fi modificată fără a le afecta pe celelalte.
| Doilea | 0.1 | 0.17 | 1.12 | 2.0 |
| Poziţie | 689.3 | 729.3 | 729.3 | 689.3 |
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.
Aveți una sau două pictograme pe care ați dori să le dați viață prin animație. De unde ai începe? Să zicem că ai 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 IllustratorSă î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ă acel clic clic dreapta mouse-ul peste strat și selectați Creare > Creare forme din stratul vectorial.
Acum că noile straturi sunt selectate, trageți-le pe partea de sus panouri deasupra straturilor Illustrator CC, apoi eliminaț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 cadre 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 în 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 copii), cum ar fi parbrizul, părțile caroseriei, lemnul și frânghiile stratului 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țieiAm 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 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, ceea ce a făcut ca momentul în care mașina sări mai realist în combinație cu biblioteca mobilă Lottie.
P.S.
puteți găsi fișierele mele Illustrator CC și After Effects CC.
Setul de pictograme este disponibil pentru descărcare gratuită pe . Astăzi avem ceva neobișnuit Lecția Adobe Ilustrator. Pentru că de data aceasta nu vom face o imagine statică, ci o animație reală. Imaginează-ți, se dovedește cu folosind Adobe
Ilustratorul poate desena și desene animate :)
Ș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 de 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ă.
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 când 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ă tremurare 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 încă un sector 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.
Apoi, 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 noastră 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 va 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 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 totuși mai bine să utilizați Adobe Flash sau alte editori flash. De exemplu, am făcut această pisică într-un vechi Macromedia Flash, pe care l-am dezgropat la munca mea.
Asemenea în ultima vreme 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 special pentru blog
Abonează-te la newsletter-ul nostru pentru a nu pierde nimic nou:
Format Fișier flash(SWF) se bazează pe grafica vectorialași este proiectat pentru grafică scalabilă, compactă pentru Internet. Deoarece acest format de fișier se bazează pe grafică vectorială, obiectul menține calitatea imaginii la orice rezoluție și este ideal pentru crearea cadrelor de animație. În Illustrator, puteți crea cadre de animație individuale pe straturi și apoi puteți exporta straturile de imagine ca cadre individuale pentru a fi utilizate pe site-ul dvs. web. De asemenea, puteți defini simboluriîn fișierul Illustrator pentru a reduce dimensiunea animației. La export, fiecare simbol este definit o singură dată în fișierul SWF.
Comanda de export (SWF)
Oferă cel mai mare control asupra animației și compresiei de biți.
Oferă mai mult control asupra combinației de formate SWF și bitmap într-un aspect fragmentat. Această comandă oferă mai puține opțiuni de imagine decât comanda Export (SWF), dar folosește ultimele opțiuni de comandă Export utilizate (vezi ).
Când pregătiți un obiect pentru salvare în format SWF, țineți cont de următoarele instrucțiuni.
Folosind aplicația Device Central, puteți vedea cum va arăta o grafică Illustrator în aplicație Flash Player pe diverse dispozitive portabile.
Inserarea unui grafic Obiect ilustrator
Creat în Aplicație Illustrator un grafic poate fi rapid, ușor și ușor copiat și lipit într-o aplicație Flash.
Când inserați o imagine Illustrator într-o aplicație Flash, următoarele atribute sunt păstrate.
Grosimea cursei
Definițiile gradients
Text (inclusiv fonturi OpenType)
Imagini înrudite
Moduri de amestecare
Contururi și forme
În plus, Illustrator și Flash acceptă următoarele opțiuni atunci când inserați o imagine.
Când selectați straturi într-o imagine Illustrator nivel superiorîn întregime și lipindu-le într-o aplicație Flash, straturile și proprietățile lor (vizibilitate și blocare) sunt păstrate.
Formatele de culoare Illustrator, altele decât RGB (CMYK, tonuri de gri și formate personalizate) sunt convertite de Flash în format RGB. Culori RGB introdus în mod obișnuit.
Când importați sau inserați o imagine Illustrator, puteți utiliza diferite opțiuni pentru a salva anumite efecte (cum ar fi umbrele textului) ca filtre Flash.
Flash păstrează măștile Illustrator.
Exportați fișiere SWF din Illustrator
Fișierele SWF exportate din Illustrator se potrivesc cu calitatea și raportul de compresie ale fișierelor SWF exportate din Flash.
Când exportați, puteți alege dintr-o varietate de stiluri predefinite pentru rezultate optime și puteți specifica modul în care doriți să utilizați mai multe planșe și cum doriți să transformați simboluri, straturi, text și măști. De exemplu, puteți alege să exportați simboluri Illustrator ca filme sau grafice sau să creați simboluri SWF din straturi Illustrator.
Importarea fișierelor Illustrator într-o aplicație Flash
Pentru a crea un aspect complet în Illustrator și apoi a-l importa în Flash într-un singur pas, puteți salva ilustrația în formatul nativ (AI) al Illustrator și o puteți importa cu precizie în Flash folosind comenzile Fișier > Import în Workbench" sau "Fișier". " > "Import în bibliotecă".
Dacă fișierul dvs. Illustrator conține mai multe planșe, selectați planșa de importat în caseta de dialog Import Flash și specificați setările pentru fiecare strat din acel plan de desen. Toate obiectele din tabloul de desen selectat sunt importate în Program flash ca un singur strat. Când importați o altă planșă din același fișier AI, obiectele din acea planșă sunt importate în Flash ca un nou strat.
Când importați ilustrații Illustrator ca AI, EPS sau aplicație PDF Flash păstrează aceleași atribute ca atunci când este lipit obiecte grafice Ilustrator. În plus, dacă fișierul Illustrator pe care îl importați conține straturi, le puteți importa folosind una dintre următoarele metode.
Convertiți straturile Illustrator în straturi Flash.
Convertiți straturile Illustrator în cadre Flash.
Convertiți toate straturile Illustrator într-un singur strat Flash.
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 Animați vectori SVG folosind ușor Plugin 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:
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.
Aceste 2 fișiere sunt plasate î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
De exemplu, puteți utiliza 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 doar lipiți codul rezultat în dosar gol main.js
Parametri:
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ăugați 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. Când rulați pe o mașină locală, începerea animației poate fi întârziată cu câteva secunde.