SVG-szűrők alkalmazása az Illustrator CC-ben

Az effektusok, akárcsak a mindenütt jelenlévő vetett árnyék, minden tervező eszköztárának alapvető elemei. Talán észrevette, hogy az Adobe Illustrator CC Effect menüje jelentős almenüt tartalmaz az SVG-szűrők számára. A rendelkezésre álló szűrőkészlet egyre bővül, ahogy az Illustrator egyre több támogatást nyújt az SVG-hez.

Egyébként, ha évek óta használja az Illustratort, emlékezhet arra, hogy az Effektus menü az effektusok és szűrők listáját szolgálta. A szűrők olyanok, mint az effektusok, kivéve, hogy alkalmazásuk után nem tudták könnyen szerkeszteni őket. Az SVG-szűrők azonban nem az ilyen típusú szűrők újjáélesztését jelentik; SVG szűrők nevezzük szűrők mert működnek az SVG szűrőbetétet kódoló weboldalakat.

Íme egy másik nagyszerű dolog az SVG-szűrőkkel kapcsolatban: Amint hamarosan rájön, importálhat és akár létrehozhat saját SVG-szűrőket.

Ha SVG-szűrőt alkalmaz, az hasonló lehet egy nem SVG-effektushoz. Például ezen az ábrán két egyforma négyzet látható, de a bal oldali raszteres árnyékoló hatást , a jobb oldali pedig vektoros (SVG) vetett árnyék szűrőt alkalmaz.

Egy árnyék effektus (balra) és SVG-szűrő (jobbra).

Amikor kiválasztom a téglalapot az SVG szűrővel, ez a szűrő megjelenik a Megjelenés panelen, ahogy az ábrán látható.

illusztrátor-árnyék-szűrő

Az effektusok és az SVG-szűrők különböző módjai, amelyek megváltoztatják egy objektum útvonalát, finom, de valós következményekkel járnak. Ezen következmények némelyike ​​csak a web- és alkalmazásfejlesztőkre vonatkozik, de a munkafolyamat végétől kezdve fontos szem előtt tartani, hogy ne keverjük össze az SVG-szűrőket és a rasztereffektusokat a projektekben, mert ezek eltérően hatnak az objektumokra.

Egyébként nem tehetek róla, hogy megosztom itt, hogy ezeken az ábrákon a raszteres árnyékoló négyzet majdnem hétszer nagyobb, mint az SVG szűrős négyzet. Csak egy rövid közszolgálati közlemény az SVG-ipartól arról, hogyan lehet fogyni (fájl) SVG-kkel.

És amint azt már sejtette, a rasztereffektusok nem programozhatók. Ha átadja őket egy animátornak vagy egy HTML-kódolónak, a fejlesztő csapattársának nem lesz ugyanolyan szabadsága, hogy szabályozza a rasztereffektusok működését egy animációban vagy átmenetben.

Végül, ha rasztereffektusok helyett SVG-szűrőket alkalmaz az SVG-grafikákon, nem kell attól tartania, hogy ezek a szűrők leromlanak, amikor a grafikát átméretezi a böngészőben.

SVG szűrők alkalmazása

Megpróbáltam SVG-szűrőket alkalmazni, amikor csak lehetséges az SVG-grafikákban. Nézzük végig, hogyan történik ez:

Válassza ki azt az objektumot, amely(ek)re a szűrőt alkalmazza.

Válassza az Effektus → SVG-szűrők lehetőséget, és válasszon egy szűrőt.
Az SVG Filters almenüben olyan szűrők listája található, amelyek nevei a legjobb esetben is csak félig intuitívak (mint például az AI_Shadow_1, ami egy vetett árnyék), és gyakrabban csak rejtélyesek (például AI_Dilate_6). Addig kell kísérleteznie, amíg meg nem érzi ezeknek a szűrőknek a működését.

Ha az objektum, amelyre a szűrőt alkalmazta, továbbra is ki van jelölve, tekintse meg a Megjelenés panelt (válassza az Ablak → Megjelenés lehetőséget).

Vigye az egérmutatót az alkalmazott szűrő fölé, és kattintson rá az SVG-szűrő alkalmazása mező megjelenítéséhez, amely itt látható.

SVG-szűrők szerkesztése.

Itt módosíthatja az alkalmazott szűrőt, és az Előnézet jelölőnégyzet segítségével megtekintheti, hogyan fog kinézni a szűrő. Az ábra szerint a Megjelenés panelen is kiválaszthat és törölhet SVG-szűrőt.

SVG-szűrő törlése.

SVG szűrők importálása

Az Illustrator szűrőkészlete hasznos, de aligha feszegeti az SVG-szűrőkkel végzett műveletek határait. Ha HTML-ben kódol, a w3schools oldalon talál egy hozzáférhető oktatóanyagot saját SVG-szűrőinek létrehozásához .

További szűrőkészleteket is vásárolhat az interneten, és még találhat néhány szép SVG ingyenes SVG-szűrőkészletet is . A szűrőkészlet vagy más szűrők telepítéséhez kövesse az alábbi lépéseket:

Válassza a Hatás → SVG-szűrők → SVG-szűrő importálása menüpontot.

A megnyíló párbeszédpanelen keresse meg, és kattintson duplán a letöltött SVG-szűrőfájlra.
A fájl valószínűleg SVG fájl lesz.

Válassza az Effektus–>SVG-szűrők lehetőséget új szűrők alkalmazásához a kiválasztott objektumokra.
Az új szűrők importálása után megjelennek az SVG-szűrők almenüben.