Un GIF transparent în Adobe Illustrator se face după cum urmează. Accesați Fișier> Salvează 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ă, implicit, întreaga pagină se încadrează în fereastra de optimizare, iar acest lucru nu este de obicei necesar. Prin urmare, în fila Dimensiune imagine, debifați caseta de selectare Clip pe planșă(Decupați la dimensiunea paginii) și faceți clic pe butonul Aplicați.
Apoi, în lista de selecție a formatului, selectați GIF și bifați caseta de selectare Transparență.
După aceea vom defini 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ă aceea, culoarea va fi evidențiată în 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. Și în primul și al doilea caz, dacă trebuie să selectați mai multe culori, trebuie să lucrați cu tasta Shift (sau Ctrl) apăsată. După ce ați ales o culoare, trebuie să instruiți programul să o facă transparentă. Pentru a face acest lucru, trebuie să faceți clic pe pictogramă Mapează culorile selectate la Transparent(Adăugați culorile selectate la transparență). În ilustrație, acest buton este încercuit și roșu este selectat ca transparent. O zonă transparentă va apărea pe 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 și apoi să faceți din nou clic pe pictograma Hărți culorile selectate la Transparent.
Câteva cuvinte despre modul 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). Pot fi făcute patru opțiuni: Nu Transparency Dither, fără algoritm, Diffusion Transparency Dither, algoritm difuz, Pattern Transparency Dither, algoritm bazat pe model și Noise Transparency Dither, algoritm bazat pe zgomot. În modul algoritm difuz, glisorul devine activ Cantitate(cantitate) care vă permite să modificați valoarea difuziei. Ce să pun î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 transparent gata. Lucrarea a fost realizată în Adobe Illustrator versiunea CS4 (v. 14), dar toate acțiunile și comenzile rapide de la tastatură sunt relevante pentru versiunea anterioară a CS3 (v. 13).
Astăzi nu suntem chiar obișnuiți Tutorial Adobe Ilustrator. Pentru că de data aceasta nu vom face o imagine statică, ci o animație reală. Imaginează-ți se dovedește cu cu Adobe De asemenea, puteți desena desene animate în Illustrator :)
Ș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 film retro. Ieșirea ar trebui să fie un video flash cu această 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, într-un document separat, am realizat două poziții ale unui cadru de film, un cerc de referință, care a fost 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 benzii de film. Așezați-l în mijlocul zonei de lucru.
Acum creați un al doilea strat și copiați în el banda de film, în care găurile de-a lungul marginilor sunt compensate. 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 avem nevoie de mult mai multe straturi. Deci selectați primele două straturi, mergeți la opțiunile panoului și faceți o copie a straturilor.
De asemenea, trebuie să acumulăm 12 straturi de filme ale filmului.
Acum avem o grămadă de straturi și toate sunt vizibile. În sensul că straturile superioare le obstrucționează pe cele inferioare, ceea ce nu este foarte 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. 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 un ușor tremur mișcării filmului, trebuie să mișcăm cadrele rezultate ușor în direcții diferite. Pentru a face acest lucru, includeți numai stratul cu care veți lucra acest momentși apoi deplasați cadrul cu câțiva pixeli pe fiecare parte.
După ce ați trecut prin toate straturile și ați adăugat o ușoară schimbare, puteți începe să creați o animație a unui cerc în mișcare. Pentru a face acest lucru, copiați cercul, format din sectoare, din documentul cu părțile de desene animate și plasați-l pe primul strat peste cadrul benzii de film.
Dacă deselectați cercul, acesta va arăta ca un singur întreg. Este exact ceea ce avem nevoie.
Dar, deoarece constă din sectoare separate, 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ă în timpul mișcării, așa că nu este deloc necesar să puneți cercul exact în centrul cadrului. Așezați-l peste 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ă. Luate împreună, aceste 12 straturi formează un film tween cu un cerc de umplere.
În continuare, trebuie să adăugăm textură straturilor noastre. Porniți primul strat și copiați textura acolo din fișierul original cu piese de schimb.
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ă te-ai săturat deja să copiezi, atunci te 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 plasați-o într-un loc arbitrar în mai multe straturi. În cazul meu, zgârieturile apar doar în două straturi.
Acum că bucla principală cu animația filmului este gata, rămâne să adăugați numerele. Deoarece numărăm invers de la 3 la 1 plus cuvântul Go !!!, avem nevoie de și mai multe straturi. Nu 12, ci 48. Pentru a face acest lucru, trebuie să faceți încă trei copii ale straturilor gata făcute cu animația filmului.
Și apoi totul este simplu. Porniți primul strat și puneți numărul trei acolo.
Apoi trebuie să copiați acest număr î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 complet din nou umplut, trebuie să puneți deja numărul doi. În același mod, copiați numărul unu în straturile dorite. Și când ajungeți la straturile finale pentru legenda Go !!!, ștergeți doar cercul înainte de a copia legenda în stratul dorit.
Asta e tot cu animația. Principalul lucru aici este să nu fii confuz. Poți să dai straturilor niște nume convenabile, dar am fost oarecum prea leneș :) Și totuși, când termini de lucru, asigură-te că ai reactivat toate straturile făcând clic pe pictograma ochiului.
În fereastra cu setările de export, asigurați-vă că setați Export ca: straturi AI la cadre SWF. Această opțiune este cea care transformă straturile de ilustrator în cadre de animație. Apoi faceți clic pe butonul Avansat.
Se va deschide setari aditionale... Aici trebuie să setați rata de cadre Frame Rate. Am 12 cadre pe secundă. Caseta de selectare Looping este responsabilă pentru bucla de animație. Datorită ei, videoclipul va fi redat în cerc. Iar opțiunea Layer Order: Bottom Up reproduce straturile ilustratorului de jos în sus în panou. Exact așa ne-am construit animația.
La ieșire, obținem un video flash cu animația noastră.
Acum puteți vedea 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 la serviciu.
De asemenea, recent, HTML5 și CSS3 au fost din ce în ce mai folosite pentru a crea animații. Acest cod este acceptat de browserele moderne și nu necesită un player flash.
Roman aka dacascas special pentru blogul Note ale unui ilustrator de microstock
Abonează-te la newsletter-ul nostru pentru a nu pierde nimic nou:
Bună ziua tuturor! Astăzi voi încerca să descriu capacitățile programului Adobe ilustrator comparându-l cu capacitățile fluxului. Aceasta nu va fi o analiză globală a programului prin oase, ci mai degrabă o descriere a unor cipuri interesante pe care le-am descoperit în acest program. Am adunat informațiile bucată cu bucată pe măsură ce le-am studiat, pentru a pune totul într-o singură postare. Trebuie să recunosc imediat că nu sunt un utilizator super-experimentat al ilustratorului, l-am folosit doar la desen în ultimele șase luni (înainte de asta am pictat totul în flash). Mulți oameni se plâng că ilustratorul este complicat, nu întotdeauna intuitiv intuitiv. Într-o oarecare măsură, sunt de acord că, după spălare, 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 aș putea să mă descurc fără el înainte!
Deci, ce mi-a plăcut la ilustrator și ce am găsit pentru mine care nu este în Flash.
1. Voi începe cu cele mai simple, dar în același timp necesare. Încercați să aranjați într-o clipită obiectele într-un cerc. A fost anterior Instrument de decor, dar a fost eliminat, aparent considerat inutil. Am decis că este mai distractiv să o facem cu pixuri. Illustrator are această funcție: Efect - Distorsionare și transformare - Transformare.
Totul este rapid și simplu, valorile (distanța dintre obiecte, numărul de copii) sunt stabilite de noi înșine în setări.
2. Zig-zag
Lucru și mai simplu, dar totuși util. S-ar părea un fleac, dar într-o clipită trebuie să desenezi de mână, într-un ilustrator este o chestiune de secunde.
3. Deformarea obiectelor (Warp)
Nu există nimic ca asta într-o clipită. În exemplul de mai jos am arătat doar 2 modalități de a deforma forme simple (Efect - Warp - Arc / Pește). De fapt, există 15 dintre ele în cea mai recentă versiune a programului.
4. Rotunjirea automată a colțurilor (Round Corners)
O poți face manual: pe un obiect grafic, atunci când este selectat, în colț (la toți ochii) apar un punct alb și un simbol de linie rotunjită. Tragem cu mouse-ul, ne ajustam dupa gustul dumneavoastra.
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 (îngroșare)
Efectul se aplică la forme simple (Efect - Distorsionare și transformare - Aspru). La ieșire, obținem ceva care seamănă cu un model 3D low-poli. După părerea mea, cool :) Și cel mai important - foarte simplu.
6. Pucker & Bloat(Tragere și balonare)
Un exemplu în imaginea de mai jos:
7. Extinderea formularului (Cale offset)
Flash are o funcție Expand Fill; nu funcționează deloc cu linii de creion, spre deosebire de ilustrator.
8. Pensule (Brush Art, Pattern Brush, Scatter Brush)
Vezi poza de mai jos cu exemple:
9.Brush de textura
Illustrator are, de asemenea, o mulțime de pensule de textură despre care am scris și cum au apărut versiune nouaînroșire -. S-a observat că utilizarea pensulelor în Adobe Animate este extrem de lentă. Asta e:(
10. Nu sunt sigur dacă acesta este un truc simplu, dar vreau să mă concentrez pe o pensulă cu un nume amuzant. blobPerie... Situată în cutia 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 în cuvinte despre beneficiile sale, este mai bine să îl încerci o dată.
10.Split to Grid
De asemenea, este utilă funcția Split to Grid (Object-Path-Split to Grid), care vă permite să tăiați o formă în segmente egale. De ce ne amintește asta? Așa este - ferestrele sunt într-o clădire mare. În ceea ce mă privește, un lucru mișto pentru desen, de exemplu, peisaje urbane;)
Încă una unealtă folositoare prezentat în Illustrator, probabil de la prima sa lansare. Poate fi folosit pentru a crea, de exemplu, texturi de lemn:
12. Mutare (dreapta - Transformare - Mutare)
Deplasarea unui obiect la o distanță specificată. Dacă doriți, puteți crea imediat o copie, care va fi plasată la distanța dorită de obiectul selectat pe orizontală/sau verticală. O versiune anterioară de Flash avea un plugin care a făcut-o această funcție... Din păcate, nu-i amintesc numele.
Este foarte convenabil să creați modele fără sudură în Illustrator ( Obiect-Pattern-Make). Îmi amintesc cum eram frenetic de sofisticat în fulgerarea creației. În versiunea ilustrator a CC 2015, totul este automatizat, o grămadă de setări vor ajuta la modelarea unui model în zeci de variații, având doar câteva elemente grafice la îndemână. În mai mult versiuni timpurii toate programele trebuiau făcute manual, ca până acum în flash.
(Notă - un model poate fi transformat într-un obiect editabil vectorial folosind funcția de analiză ( Obiect - Extindeți aspectul).
14. Mozaic obiect
Crearea unei palete de culori pe baza unei imagini existente. Importăm imaginea care ne place în ill (Open), 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.Amestec
Folosit pentru a crea degrade. Puteți crea tranziții pas cu pas, ca, de exemplu, în imagine. Nu voi spune că îl folosesc des, dar poate fi util pentru cineva. Cred că poate fi folosit pentru a crea imagini simple de fundal.
De asemenea, instrumentul poate fi folosit pentru a clona obiecte. Așezați două obiecte la distanță unul de celălalt și aplicați Opțiuni de amestecare, alegeți numărul de pași (numărul de obiecte clonate).
16. Instrument Build Shape Tool. Un lucru foarte util pentru lucrul cu primitivi. Într-o clipă, mi s-a părut mai puțin convenabil.
Ținând apăsat Alt și făcând clic pe segmentele selectate - ștergeți segmentele. Dacă doar glisăm mouse-ul peste mai multe zone selectate - conexiuni.
Add-on-ul este un instrument care ajută la tăierea, unirea automată etc. forme evidenţiate. În ceea ce mă privește, nu este foarte convenabil, îl folosesc mai des ConstruiFormăInstrument.
(planșe de artă)
18.Custom Tool Panel
Abilitatea de a vă 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 Illustrator, le puteți plasa pe toate în fața ochilor. 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 izometrie folosind Stiluri grafice
Iar ultima este să creăm izometrie fără a o folosi într-un clic (sau mai exact, în 3 clicuri, pentru că avem 3 fețe;) folosind stiluri grafice ( Stiluri grafice). Cum se face asta, voi semna data viitoare.
Illustrator are în comun cu flash - capacitatea de a salva un obiect într-un simbol și, la fel de ușor, acest simbol poate fi transferat într-un flash (deschideți un fișier .ai în flash, prin Import - Import în etapă).
Un simbol în Illustrator are aceleași proprietăți ca în Flash.
Și până la urmă voi scrie că în ilustrator, după părerea mea, este inferior blitz-ului. Da, da, și există așa ceva. Și acesta este instrumentul de umplere ( Galeata de vopsea). Indiferent cum încerc să mă obișnuiesc cu ea în bolnav, este mai convenabil în flash.
Dacă notele mele ți-au devenit utile sau dacă vrei să adaugi ceva de la tine - bine ai venit în comentarii! Noroc tuturor;)
Optimizarea graficelor 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. De aceea încărcare rapidă Paginile web presupun o dimensiune mică de grafică încorporată, care se realizează prin optimizarea lor. Optimizarea imaginii este înțeleasă ca transformarea acesteia, care asigură dimensiunea minimă a fișierului, păstrând în același timp cea necesară în acest caz calitatea imaginii, 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 fragmente individuale de imagini.
Illustrator are încorporate instrumente de optimizare a imaginii care, datorită metode diferite previzualizați implementarea rapidă și eficientă a procesului de optimizare. previzualizare 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 selectarea cu succes a setărilor necesare. Și puteți optimiza atât imaginile create direct în Illustrator, cât și altele, de exemplu, fotografiile care ar trebui să fie postate 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ă utilizarea unuia dintre cele patru moduri de previzualizare, dar două sunt cele mai potrivite pentru evaluarea calității optimizării:
- 2-Sus(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 variante ale setărilor actuale de optimizare.
Ambele moduri pot economisi timp în mod semnificativ la căutare varianta mai buna optimizare, deoarece elimină nevoia de a salva imagini din setări diferite optimizarea ș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 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 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 optimizare.
Illustrator vă permite să optimizați grafica web în formate nu numai GIF, JPG, PNG-8 și PNG-24, ci și în SWF și SVG. Imagini indexate având o cantitate mică de culorile sunt salvate în format GIF. Pentru a salva imagini color și în tonuri de gri - fotografii și grafice bogate în culori, cum ar fi umplerile cu degrade - utilizați format JPG... Pentru imagini pline color cu zone transparente, aplicați format 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 ale unei imagini optimizate este de 256, în timp ce în format PNG-24 o imagine poate avea milioane de culori și, prin urmare, este similar cu formatul JPEG. PNG-24 diferă de JPEG prin faptul că metoda de compresie utilizată 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.
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 decupată automat, ceea ce nu va ține cont de poziția adevărată a inscripției rezultată din deformare (Fig. 4 și 5) .
Prin urmare, să încercăm să exportăm logo-ul către format PSD echipă 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, cu setările specifice cărora trebuie să le decideți. Experimentând setările, vă puteți asigura că cea mai buna calitate oferă algoritmul de compresie implicit al programului 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 Kbytes (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 de neînlocuit al designului oricăror pagini Web sunt controalele grafice - butoanele. 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 suprapuse arată mult mai impresionant decât cele obișnuite.
Să luăm în considerare opțiunea de a crea un buton rotund convex în Illustrator. Desenați un obiect vectorial în formă de cerc umplut cu orice culoare (Figura 9) și convertiți-l într-o plasă folosind comanda Obiect => Creați o plasă de gradient(Obiect => Create Gradient Mesh) prin specificarea a patru rânduri și patru coloane, iar în listă Aspect(Vizualizare) prin alegerea unei opțiuni Spre Centru Pune in evidenta(Iluminare de fundal) egală cu 60 (Fig. 10). Selectați un instrument Selectie directași faceți clic în stânga colțul de sus obiect, evidențiind punctele nod 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), poziționați marcatorul mouse-ului în centrul cercului creat înainte de aceasta și, în timp ce țineți apăsate tastele Altși Schimb, întindeți noul cerc peste cel vechi astfel încât să fie cu 1-2 pixeli mai mare decât cel vechi pe toate părțile. Fă-i un chenar negru ( Accident vascular cerebral) 1-2 pixeli lățime și umpleți 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 alege echipa Aranjează => Trimite înapoi(Aranjare => Trimite înapoi). Ca rezultat, obțineți un spațiu liber pentru butonul, prezentat în Fig. paisprezece.
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 prin site. Luați în considerare cel mai simplu caz de a avea două butoane, dintre care unul, cu o săgeată în jos, va însemna trecerea la pagina următoare, iar butonul săgeată în sus la cel precedent. Ca o săgeată goală, luați 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 corespunzătoare din paletă Alinia(Aliniere). Primul dintre butoanele obținute este prezentat în Fig. 15. Faceți o copie a stratului de butoane selectând comanda Strat duplicat Straturi, - ca rezultat, obținem două straturi identice. Apoi, pe copia stratului, selectați săgeata și rotiți-o cu 180 ° selectând comanda Transformare => Rotire- Transformare => Rotație. 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 versiunile optimizate ale fiecărui buton. Mai întâi faceți stratul inferior invizibil - în acest caz butonul de pe stratul superior va fi salvat. Selectați o echipă Fișier => Salvare pentru Web(Fișier => Salvare pentru Web), configurați opțiunile 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 numele fișierului. Butonul salvat ca rezultat este prezentat în Fig. 18. Acum întoarceți vizibilitatea stratului inferior și faceți-l pe cel superior invizibil și, în același mod, salvați al doilea buton, 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ă bine pe pagina Web și să le plasați pe o pagină personalizată (Figura 20). Ca rezultat, în acest exemplu, fișierul Primer2.html și două imagini grafice în folderul imagini (folder 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 setarea parametrilor de optimizare, selectați instrumentul din paleta de instrumente Selectare felie(Selectați o felie) ș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 pe mouse se va deschide fereastra Opțiuni pentru felii(Opțiuni de felie), în care va trebui să specificați o legătură ș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 aduce o pagină la viață este introducerea elementelor de design care le schimbă aspect(sau stare) în funcție de comportamentul mouse-ului sau, mai rar, în eventualitatea oricăror alte situații: scalare, derulare, încărcare, erori etc.
Dintre astfel de elemente, cele mai cunoscute sunt rollovers (din engleza roll over - to roll, turn over) - elemente care își schimbă aspectul sub influența unui mouse. Butoanele animate sunt exemple de rulări tipice. Rollover-urile sunt adesea folosite pentru a crea alte elemente de navigare ale unui site web. De fapt, 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 următoarele: Normal - stare normală, Peste - trecerea cursorului mouse-ului peste un element și Jos - apăsarea butonului stâng al mouse-ului când cursorul trece peste acesta. Teoretic, pot fi implicate evenimente precum Click - eliberarea butonului stâng al mouse-ului după apăsare, Sus - după eliberarea butonului, Out - la părăsirea zonei active. 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, rollover-ul este o serie de imagini 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 clasice, dar vă poate ajuta să proiectați elementele 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 etc. Imaginea multistrat rezultată este exportată într-un fișier PSD cu straturi păstrate, pe baza căruia se creează rollover-ul î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ă de dreptunghi rotunjită, umplută cu negru (Figura 24), faceți o copie a acesteia și poziționați-o într-o zonă 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) prin specificarea a patru rânduri și zece coloane (Figura 25). Activați a doua copie a dreptunghiului și ajustați umplerea cu gradient pentru el aproximativ așa cum se arată în Fig. 26. Amestecați obiectul gradient peste plasă, reduceți Opacitatea obiectului gradient la aproximativ 80% și dimensiunea acestuia cu aproximativ 1 pixel pentru a imita efectul de denivelare. Și apoi tastați textul peste obiecte. În forma sa originală, lăsați-o să aibă o culoare albă, care va corespunde stării Normale (Fig. 27), apoi, atunci când starea de rulare se schimbă, culoarea legendei se va schimba, de exemplu, în verde - când cursorul mouse-ului trece peste el (starea Peste) și 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, - vor fi trei straturi în paletă (fig. 28). Apoi, în prima copie a stratului, schimbați culoarea legendei în verde, iar în a doua - în albastru (Fig. 29). Ca rezultat, veți obține spațiul liber necesar pentru răsturnare.
Exportați imaginea creată în format PSD păstrând straturi folosind comanda Fișier => Export(Fișier => Export) și alegerea modelului de culoare RGB (Fig. 30). Deschideți fișierul PSD creat în ImageReady (Fig. 31 și 32). Creați cadre din straturi alegând comanda Faceți cadre din straturi(Creați 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 de hover, î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 Rollover(Creează starea de rulare) - fig. 35, ceea ce va duce la apariția afecțiunii Peste stareî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ă corespundă stării Normal... Ca rezultat, pentru fiecare stare de rulare din paletă Animaţie va fi un singur cadru (fig. 37, 38 si 39).
Orez. 38. Vizualizarea imaginii, ferestrele 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 navigând la fereastra browserului (Figura 40). După aceea, salvați fișierul folosind comanda Fișier => Salvare optimizat(Fișier => Salvare optimizat) și specificarea unei opțiuni HTML și imagini (* .html)... Drept urmare, în acest exemplu, am primit fișierul Primer4.html și o serie de imagini grafice în folderul imagini.
Orez. 40. Fereastra browser cu element Rollover
Rollovers SVG
Popularitatea tot mai mare a formatului SVG (Scalable Vector Graphics - grafică vectorială scalabilă), creat pe baza standardului XML, vă permite, de asemenea, să primiți o varietate de elemente interactive, în special rollovers, doar că în practică este implementat 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.
Există o paletă specială pentru lucrul cu obiecte SVG. Interactivitate SVG, care este ușor de deschis folosind comanda Fereastra => Interactivitate SVG(Fereastra => Interactivitate SVG) - fig. 41.
Considera această opțiune crearea unui rollover folosind exemplul unui buton interactiv, culoarea legendei pe care se va schimba de la negru la albastru atunci când mouse-ul trece peste și din nou convertită î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 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(Opacitate) setată la 50%. Duplicați butonul, umpleți-l cu o culoare verde închis (fig. 43), apoi convertiți-l într-un obiect plasă cu comanda Obiect => Creați o plasă de gradient(Obiect => Create Gradient Mesh) prin specificarea a patru rânduri și zece coloane, iar în listă Aspect(Vizualizare) prin alegerea unei opțiuni Spre Centru(Centru) și setarea valorii Pune in evidenta(Evidențiați) egal cu 100. Reduceți opacitatea stratului obiect plasă cu aproximativ 40% (fig. 44). Așezați obiectul plasă deasupra gradientului, iar butonul va fi asemănător cu cel prezentat în Fig. 45.
Orez. 44. Transformarea unei copii a unui buton într-un obiect plasă
Completați butonul cu legenda dorită și ajustați-i poziția folosind butoanele corespunzătoare din paletă Alinia(Aliniere). Imaginea rezultată va conține un strat cu trei obiecte suprapuse (Figura 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. Schimbați numele stratului în același mod de la Layer 1 to Layer(fig. 47).
Gestionarea evenimentelor presupune 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 în timpul instalării programe Adobe Ilustrator. Pentru a conecta 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 din cont).
Orez. 48. Alegerea 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 evenimentul onmouseover elemColor (evt, „Text”, „# 3333FF”)- asta va însemna că atunci când mouse-ul este peste obiect Text culoarea sa se schimbă î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 linia de acțiune introduceți textul elemColor (evt, „Text”, „# 000000”)- aceasta va reveni negru (fig. 51).
Orez. 51. Vederea finală a paletei de interactivitate SVG pentru obiectul Text
Salvați rularea creată ca fișier SVG cu comanda Fișier => Salvați ca(Fișier => Tip fișier format SVG, și apoi configurarea opțiunilor 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 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 dacă rularea funcționează - rezultatul va arăta ca cel prezentat în Fig. 53.
Animație SVG
Formatul SVG poate fi folosit și pentru a transmite animație. Să încercăm să creăm cel mai simplu element de animație (î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 mouse-ul este scos din elementul interactiv.
Să creăm o serie de obiecte grafice și text precum cel prezentat în Fig. 54. Redenumiți mod convenabil toate obiectele create 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, și toate celelalte - numai când treceți mouse-ul peste obiect Text1.
Orez. 54. Vedere originală a imaginii
Includeți fișierul Events.js cu descrierea procedurilor JavaScript folosind comanda Fișiere JavaScript (Fișiere JavaScript) din paletă Interactivitate SVG prin apasarea 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 din cont).
Definiți o reacție la evenimentele mouse-ului pentru un obiect Text1... Selectați obiectul 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 obiect Text1 obiectele vor deveni vizibile Text4și Calea 2... Vă rugăm să rețineți că, dacă urmează să fie efectuate mai multe acțiuni atunci când are loc un eveniment, atunci acestea trebuie specificate prin semnul „;”. Apoi efectuați o operație similară asupra evenimentului onmouseout prin introducerea de text pentru acesta, ceea ce va însemna ascunderea obiectelor (Fig. 57).
Salvați rezultatul ca fișier SVG cu comanda Fișier => Salvați ca(Fișier => Salvare ca) specificând numele fișierului selectând în câmp Tip fișier SVG și apoi configurarea opțiunilor pentru salvarea fișierului SVG, așa cum se arată în Fig. 58. După salvare, veți obține fișierul Primer6.svg (dosarul Primer6). Nu uitați să copiați fișierul Events.js în folderul cu acest fișier. Daca dupa aceea alergi cos acest fișier, apoi veți vedea rezultatul prezentat în Fig. 59. Acesta este aproape ceea ce ai nevoie. Singurul lucru care nu a fost inclus în planurile noastre a fost aspectul inițial al obiectelor Text 4 și cale 2 la portbagaj. Pentru a scăpa de acest dezavantaj, 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 un 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, printre altele, vă permite să creați animații 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 Fereastra => Biblioteci de simboluri(Fereastră => Biblioteci de simboluri).
De exemplu, vom încerca să creștem dimensiunea oricărui obiect simbol; etapele cheie ale procesului de mărire a obiectului trebuie stabilite pe straturi separate. Mai întâi, așezați pur și simplu obiectele simbol una peste alta și apoi măriți dimensiunea fiecărui obiect următor, 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 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 mod este să selectați mai întâi stratul. Stratul 1în paleta Straturi și utilizați comanda Eliberați în strat(Eliberare în straturi). Rezultatul va fi mișcarea fiecărui obiect în propriul strat, dar toate vor fi imbricate în strat. Stratul 1... Prin urmare, atunci va trebui 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 gol Stratul 1 doar scoateț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 ImageReady (Figurile 65 și 66). Deschideți meniul paletei AnimaţieFaceți cadre din straturi(Creați cadre din straturi). Ca urmare, vor fi create cinci cadre, fiecare dintre ele va corespunde propriului strat și ferestrei paletei Animaţie va lua forma 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 optimizat). Rezultatul poate să semene cu Fig. 68.
Este și mai convenabil să obțineți spații libere, care sunt ușor de transformat în animație în ImageReady, utilizați funcțiile Amestecuri vii Software ilustrator. Această utilizare combinată a Illustrator și ImageReady accelerează dramatic procesul de creare a 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 animație, deoarece imaginea este pe un singur strat (Fig. 70). Prin urmare, mai întâi trebuie să plasați fiecare element al obiectului amestec pe un strat separat. Pentru asta în fereastră Straturi evidențiați linia
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 va fi un singur cadru până acum.
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) - 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, pentru fiecare dintre cadre, este luat același timp de 0,2 s. Apoi salvați fișierul optimizat cu comanda Fișier => Salvare optimizat(Fișier => Salvare optimizat) prin setarea în 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 de tranziție de amestec, plasați toate obiectele unul peste altul folosind butoanele Alinierea orizontală la centru(Alinierea centrului orizontal) și Centrul de aliniere verticală paleta (Aliniere la centru 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 ( 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 optimizat ( 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ă
Formatul de fișier Flash (SWF) se bazează pe grafica vectorialași este proiectat pentru grafică scalabilă și compactă pentru web. Deoarece acest format de fișier se bazează pe grafică vectorială, obiectul păstrează calitatea imaginii la orice rezoluție și este ideal pentru crearea cadrelor de animație. În Illustrator, puteți crea cadre de animație separate pe straturi, apoi puteți exporta straturile de imagine ca cadre separate 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. Când exportați, 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 cele mai recente opțiuni de comandă Export utilizate (vezi).
Țineți cont de următoarele instrucțiuni atunci când pregătiți un obiect pentru salvare în format SWF.
Folosind Device Central, puteți vedea cum va arăta ilustrația Illustrator în aplicație. Flash Player pe diverse dispozitive portabile.
Se inserează ilustrația Illustrator
Lucrările de artă create în Illustrator pot fi copiate și lipite în Flash rapid, ușor și ușor.
Următoarele atribute sunt păstrate atunci când lipiți arta Illustrator în Flash.
Grosimea liniei
Definiţia gradients
Text (inclusiv fonturi OpenType)
Imagini înrudite
Moduri de amestecare
Contururi și forme
În plus, Illustrator și Flash acceptă următoarele atunci când inserați lucrări de artă.
Când selectați straturi în ilustrația Illustrator nivel superior iar inserarea lor în Flash păstrează straturile și proprietățile lor (vizibilitate și blocare).
Formatele de culoare non-RGB ale Illustrator (CMYK, tonuri de gri și formate personalizate) sunt convertite în RGB prin Flash. Culorile RGB sunt lipite în mod obișnuit.
Când importați sau lipiți ilustrații Illustrator, puteți utiliza diverse opțiuni pentru a păstra anumite efecte (cum ar fi umbra proiectată de text) ca filtre Flash.
Flash salvează măștile Illustrator.
Exportarea fișierelor 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 sunt utilizate mai multe planșe, cum sunt convertite simbolurile, straturile, textul și măștile. De exemplu, puteți exporta simboluri Illustrator ca filme sau grafice și puteți crea simboluri SWF din straturi Illustrator.
Importarea fișierelor Illustrator în 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 Illustrator (AI) și o puteți importa cu fidelitate ridicată în Flash utilizând zona Fișier> Import în desktop sau Fișier> Import. la Bibliotecă.
Dacă fișierul dvs. Illustrator conține mai multe planșe, selectați planșa de importat în caseta de dialog Flash Import ș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 PDF atașat Flash păstrează aceleași atribute ca și când lipește ilustrația Illustrator. În plus, dacă fișierul Illustrator pe care îl importați conține straturi, le puteți importa în unul dintre următoarele moduri.
Convertiți straturile Illustrator în straturi Flash.
Convertiți straturile Illustrator în cadre Flash.
Convertiți toate straturile Illustrator într-un singur strat Flash.
