Multe dintre cele mai dramatice schimbări în modul în care este utilizat Illustrator au loc în domeniul traducerii imaginilor vectoriale pe web, iar formatul SVG subevaluat este veriga cheie în acest proces. Fișierele SVG păstrează caracteristicile de scalabilitate prețuite ale ilustrațiilor vectoriale și sunt acceptate aproape universal în site-uri web și medii de dezvoltare web. Când pregătiți ilustrații vectoriale pentru web, este important să evitați efectele standard ale Illustrator și, în schimb, să utilizați filtre SVG.
Illustrator vine cu un set decent, dar minimalist, de filtre SVG, dar iată câteva sfaturi despre cum să găsiți și să adăugați filtre SVG, precum și resurse pentru crearea propriilor filtre SVG. Pentru cei care lucrează cu dezvoltatorii de aplicații web și web, faceți-vă viața mai ușoară și mai productivă, consultând foaia de trucuri pentru predarea codului SVG.
Când creați fișiere SVG pentru ecrane în Illustrator și doriți să aplicați efecte (cum ar fi umbre), ar trebui să le aplicați ca filtre SVG. În acest fel, fișierele dvs. SVG păstrează scalabilitatea infinită fără distorsiuni.
Următorii pași vă ghidează prin aplicarea unui filtru SVG la grafică în Illustrator:
Selectați obiectele la care aplicați filtrul.
Alegeți Efect → Filtre SVG.
Selectați un filtru din lista care apare.
Majoritatea filtrelor au nume descriptive. De exemplu, cele cu umbră în nume sunt umbre, cele cu gaussian în nume sunt neclarități gaussiene. Fluxul de lucru este puțin ciudat și rotund, dar trebuie mai întâi să selectați un filtru pentru a accesa toate opțiunile disponibile pentru aplicarea unuia.
Pentru a schimba filtrul selectat:
După ce vă stabiliți un filtru, faceți clic pe OK în panoul Aplicare filtru SVG.
Setul de filtre SVG de la Illustrator este minimalist, dar îl puteți îmbunătăți proiectând propriile filtre sau descărcând seturi de filtre SVG preambalate din surse online. Proiectarea filtrelor implică codare, dar este realizabilă dacă vă simțiți bine cu HTML. Recomand tutorialul de la w3Schools pentru crearea filtrelor SVG. Sau puteți achiziționa seturi de filtre online și chiar găsiți câteva seturi frumoase de filtre SVG gratuite la Creatingo .
După ce achiziționați sau creați propriile filtre SVG, iată cum le instalați în Illustrator:
Alegeți Efect → Filtre SVG → Importați filtru SVG.
În dialogul care se deschide, navigați la și faceți dublu clic pe fișierul de filtre SVG pe care l-ați creat sau descărcat gratuit.
Fișierul pe care îl căutați ar trebui să fie un fișier SVG (mai multe filtre sunt grupate într-un singur fișier SVG).
Noile filtre sunt acum disponibile în submeniul Filtre SVG.
Alegeți Efect → Filtre SVG pentru a aplica noile filtre asupra obiectelor selectate.
Adesea grafica SVG pe care o creați în Illustrator este predată designerilor de jocuri, animatorilor, infograficelor sau altor rezultate, unde dezvoltatorii vor lucra cu codul din spatele graficului SVG. În calitate de ilustrator, nu trebuie să știți cum să creați acel cod, dar poate că trebuie să știți cum să îl obțineți și să îl transferați unui dezvoltator. Iată cum.
Calea către exportul graficelor dvs. SVG ca cod rulează prin funcțiile de salvare ale Illustrator. Meniul Salvare are opțiuni (nu sunt ușor de găsit) care vă exportă fișierul ca cod SVG. Probabil că veți dori să fiți în comunicare în timp real cu dezvoltatorul ecranului pe măsură ce generați codul respectiv, deoarece mai multe opțiuni sunt determinate de modul în care codul respectiv va fi utilizat:
Alegeți Fișier → Salvați (sau Salvați ca și cum ați salva un fișier).
În fereastra de dialog care se deschide, selectați SVG din meniul Format.
Ignorați opțiunea fișier SVGZ, care este pentru un fișier comprimat care nu se afișează în browsere.
Faceți clic pe Salvare pentru a deschide caseta de dialog Opțiuni SVG.
Alegeți întotdeauna SVG 1.1 în meniul derulant Profiluri SVG. Alte versiuni sunt învechite.
Dacă ați încorporat sau legat imagini în fișierul dvs. SVG, alegeți Încorporați din meniul derulant Locații imagine. Cu toate acestea, consultați mai întâi dezvoltatorul dvs. web despre această alegere.
Selectați Păstrează capacitățile de editare Illustrator pentru a face fișierul editabil în Illustrator.
Această alegere mărește dimensiunea fișierului, dar vă permite să lucrați cu un singur fișier SVG pe care îl puteți edita, actualiza și partaja cu dezvoltatorii web.
Dacă este afișat butonul Mai multe opțiuni, faceți clic pe acesta pentru a accesa opțiunile avansate. și faceți selecțiile.
În esență, diferitele opțiuni generează CSS cu fișierul dvs. care definește proprietățile în următoarele moduri. Consultați-vă cu colegul de echipă dezvoltator web despre cum să definiți aceste proprietăți CSS:
Debifați cele cinci casete de selectare din partea de jos a casetei de dialog Opțiuni SVG, cu excepția cazului în care partenerul dvs. de dezvoltare vă solicită să le selectați.
Aceste opțiuni sunt pentru aplicații extrem de specializate.
Pentru a genera cod SVG pe baza selecțiilor pe care le faceți în caseta de dialog Opțiuni SVG, faceți clic pe butonul Cod SVG .
Codul SVG generat este afișat în editorul de text al sistemului de operare. Puteți salva codul respectiv ca fișier text folosind editorul de text al sistemului de operare și puteți preda fișierul unui dezvoltator.
După ce ați generat cod, faceți clic pe OK pentru a salva fișierul.
Puteți redeschide și edita acest fișier în Illustrator.
Puteți utiliza instrumentul Snapshot din Adobe Acrobat CS5 pentru a selecta atât text, cât și imagini și pentru a crea o imagine a unei anumite zone dintr-un fișier PDF. Rezultatul este denumit în mod obișnuit o captură de ecran a unei secțiuni dintr-un fișier PDF. Rezultatul este o imagine, iar textul dvs. nu este […]
Conceput pentru cercetători și oameni de știință, capacitățile de măsurare din Photoshop CC sunt destul de puternice. Puteți măsura aproape orice și puteți număra numărul de orice dintr-o imagine tehnică, poate de la un microscop sau telescop. Dacă știți dimensiunea exactă a oricărui element dintr-o imagine, atunci puteți descoperi aproape orice […]
Când utilizați instrumentele Liquify din Adobe Creative Suite 5 (Adobe CS5) Illustrator, puteți îndoi obiecte - le puteți face ondulate, lipicioase sau înțepătoare - creând distorsiuni simple până la complexe. Instrumentele Liquify pot realiza tot felul de distorsiuni creative sau ciudate (în funcție de modul în care privești) obiectele tale. Tu […]
Când aveți text în proiectul Adobe XD, puteți începe să modificați proprietățile textului. Aceste proprietăți includ Familie de fonturi, Dimensiune font, Greutate font, Aliniere, Spațiere dintre caractere (crezare și urmărire), Spațiere între linii (înfilare), Umplere, Chenar (contur), Umbră (umbră) și Încețoșare fundal. Deci, haideți să revizuim modul în care sunt aplicate aceste proprietăți. Despre lizibilitate și font […]
Puteți utiliza InDesign pentru a crea și modifica grafica codului QR. Codurile QR sunt o formă de cod de bare care poate stoca informații precum cuvinte, numere, adrese URL sau alte forme de date. Utilizatorul scanează codul QR folosind camera și software-ul de pe un dispozitiv, cum ar fi un smartphone, iar software-ul folosește […]
La fel ca în Adobe Illustrator, planurile de desen Photoshop oferă capacitatea de a crea pagini sau ecrane separate într-un singur document. Acest lucru poate fi util în special dacă construiți ecrane pentru o aplicație mobilă sau o broșură mică. Vă puteți gândi la o planșă de desen ca la un tip special de grup de straturi creat folosind panoul Straturi. Este […]
Împachetarea textului în Adobe Illustrator CC nu este chiar același lucru cu împachetarea unui cadou - este mai ușor! O împachetare text forțează textul să se înfășoare în jurul unui grafic, așa cum se arată în această figură. Această caracteristică poate adăuga un pic de creativitate oricărei piese. Graficul forțează textul să se înfășoare în jurul lui. Mai întâi, creați […]
Când proiectați în Adobe Illustrator CC, de multe ori aveți nevoie de o formă pentru a avea o dimensiune exactă (de exemplu, 2 x 3 inci). După ce creați o formă, cel mai bun mod de a o redimensiona la măsurători exacte este să utilizați panoul Transformare, prezentat în această figură. Selectați obiectul și apoi alegeți Window→Transform to […]
Aflați cum să aplicați transparența graficelor SVG în Illustrator. Explorați cum să scoateți SVG-uri cu fundaluri transparente și să aplicați efecte de transparență.
După ce ați importat imaginile în Adobe XD, nu aveți prea mult control de editare, dar puteți redimensiona și roti imaginile la fel ca orice altă formă. De asemenea, puteți rotunji cu ușurință colțurile unei imagini importate folosind widget-urile de colț. Mascarea imaginilor Prin definirea unei forme închise […]
