Ako použiť filtre SVG v aplikácii Illustrator CC

Efekty, ako všadeprítomný tieň, sú základným prvkom v súprave nástrojov každého dizajnéra. Možno ste si všimli, že ponuka Efekt aplikácie Adobe Illustrator CC obsahuje podstatnú podponuku pre filtre SVG. Dostupná sada filtrov sa rozširuje s vývojom aplikácie Illustrator, aby poskytoval väčšiu podporu pre SVG.

Mimochodom, ak používate Illustrator roky, možno si pamätáte, že ponuka Efekty slúžila na zoznam efektov a filtrov. Filtre boli ako efekty, až na to, že sa po použití nedali ľahko upravovať. Ale SVG filtre nie sú oživením týchto typov filtrov; Filtre SVG sa nazývajú filtre, pretože fungujú prostredníctvom prvku filtra SVG v kódovaní webových stránok.

Tu je ďalšia skvelá vec o filtroch SVG: Ako čoskoro zistíte, môžete importovať a dokonca vytvárať svoje vlastné filtre SVG.

Keď použijete filter SVG, môže vyzerať podobne ako efekt bez SVG. Napríklad tento obrázok ukazuje dva identické štvorce, ale ten vľavo má aplikovaný rastrový efekt tieňa a ten vpravo má aplikovaný vektorový (SVG) filter tieňa .

Efekt vrhnutého tieňa (vľavo) a filter SVG (vpravo).

Keď vyberiem obdĺžnik s filtrom SVG, tento filter sa zobrazí na paneli Vzhľad, ako je znázornené.

ilustrátor-drop-shadow-filter

Rôzne spôsoby, akými efekty a filtre SVG menia cestu objektu, majú jemné, ale skutočné dôsledky. Niektoré z týchto dôsledkov sú relevantné iba pre vývojárov webu a aplikácií, ale od konca pracovného postupu je dôležité mať na pamäti, že sa vyhýbate zmiešaniu filtrov SVG a rastrových efektov v projektoch, pretože ovplyvňujú objekty odlišne.

Mimochodom, nedá mi nepodeliť sa o to, že štvorec s rastrovým tieňom na týchto obrázkoch je takmer sedemkrát väčší ako ten s SVG filtrom. Len krátke verejné oznámenie z odvetvia SVG o tom, ako môžete schudnúť (zaradiť) pomocou SVG.

A ako ste už možno tušili, rastrové efekty nie sú programovateľné. Keď ich odovzdáte animátorovi alebo kódovačovi HTML, váš tímový vývojár nebude mať rovnaký druh slobody pri kontrole fungovania rastrových efektov v animácii alebo prechode.

Nakoniec, keď na kresbu SVG použijete filtre SVG namiesto rastrových efektov, nemusíte sa obávať, že tieto filtre znehodnotia pri zmene veľkosti kresby v prehliadači.

Ako aplikovať SVG filtre

Urobil som dôvod na použitie filtrov SVG vždy, keď je to možné, v umeleckých dielach SVG. Poďme si prejsť, ako sa to deje:

Vyberte objekt(y), na ktorý použijete filter.

Vyberte Efekt → Filtre SVG a vyberte filter.
Podponuka Filtre SVG obsahuje zoznam filtrov s názvami, ktoré sú v najlepšom prípade iba polointuitívne (napríklad AI_Shadow_1, čo je tieň) a častejšie iba záhadné (napríklad AI_Dilate_6). Budete musieť experimentovať, kým nezistíte, ako tieto filtre fungujú.

Keď je objekt, na ktorý ste aplikovali filter, stále vybratý, zobrazte panel Vzhľad (vyberte Okno→Vzhľad).

Umiestnite kurzor myši na použitý filter a kliknutím naň odkryte pole Použiť filter SVG, ktoré je zobrazené tu.

Úprava filtrov SVG.

Tu môžete zmeniť použitý filter a pomocou začiarkavacieho políčka Ukážka vidieť, ako bude filter vyzerať. Môžete tiež vybrať a odstrániť filter SVG na paneli Vzhľad, ako je znázornené.

Odstránenie filtra SVG.

Ako importovať filtre SVG

Sada filtrov aplikácie Illustrator je užitočná, ale sotva posúva hranice toho, čo môžete robiť s filtrami SVG. Ak kódujete v HTML, prístupný návod na vytváranie vlastných SVG filtrov nájdete na w3schools .

Môžete si tiež zakúpiť ďalšie sady filtrov online a dokonca nájsť pekné sady bezplatných SVG filtrov SVG . Ak chcete nainštalovať túto sadu filtrov alebo iné filtre, postupujte takto:

Vyberte Efekt → Filtre SVG → Importovať filter SVG.

V dialógovom okne, ktoré sa otvorí, prejdite na súbor s filtrami SVG, ktorý ste si stiahli, a dvakrát naň kliknite.
Súbor bude pravdepodobne súbor SVG.

Vyberte Efekt–>Filtre SVG, ak chcete použiť nové filtre na vybraté objekty.
Po importovaní nových filtrov sa tieto zobrazia v podponuke Filtre SVG.