Com aplicar filtres SVG a Illustrator CC

Els efectes, com la omnipresent ombra, són un element essencial en el conjunt d'eines de cada dissenyador. És possible que hàgiu notat que el menú Efecte d' Adobe Illustrator CC inclou un submenú important per als filtres SVG. El conjunt de filtres disponible s'amplia a mesura que Illustrator evoluciona per oferir més suport per a SVG.

Per cert, si heu utilitzat Illustrator durant anys, potser recordeu que el menú Efecte solia enumerar efectes i filtres. Els filtres eren com efectes, excepte que no es podien editar fàcilment després d'aplicar-los. Però els filtres SVG no són un renaixement d'aquests tipus de filtres; Els filtres SVG s'anomenen filtres perquè funcionen mitjançant l'element de filtre SVG a les pàgines web de codificació.

Aquí hi ha una altra cosa interessant sobre els filtres SVG: com descobriu aviat, podeu importar i fins i tot crear els vostres propis filtres SVG.

Quan apliqueu un filtre SVG, pot semblar un efecte que no sigui SVG. Per exemple, aquesta figura mostra dos quadrats idèntics, però el de l'esquerra té aplicat un efecte d' ombra ràster i el de la dreta té aplicat un filtre d' ombra vectorial (SVG) .

Un efecte d'ombra (esquerra) i un filtre SVG (dreta).

Quan selecciono el rectangle amb el filtre SVG, aquest filtre apareix al tauler Aparença, tal com es mostra.

il·lustrador-filtre d'ombra

Les diferents maneres en què els efectes i els filtres SVG canvien el camí d'un objecte tenen implicacions subtils però reals. Algunes d'aquestes implicacions només són rellevants per als desenvolupadors web i d'aplicacions, però des del vostre extrem del flux de treball, l'important que cal tenir en compte és evitar barrejar filtres SVG i efectes ràster en projectes perquè afecten els objectes de manera diferent.

Per cert, no puc evitar compartir aquí que el quadrat amb l'ombra del ràster en aquestes xifres és gairebé set vegades més gran que el que té el filtre SVG. Només un breu anunci de servei públic de la indústria SVG sobre com podeu perdre pes (fitxer) amb SVG.

I com ja heu suposat, els efectes ràster no són programables. Quan els envieu a un animador o a un codificador HTML, el vostre company d'equip desenvolupador no tindrà el mateix tipus de llibertat per controlar com funcionen els efectes de trama en una animació o una transició.

Finalment, quan apliqueu filtres SVG en comptes d'efectes ràster a les il·lustracions SVG, no us haureu de preocupar perquè aquests filtres es degraden quan l'il·lustració es reescala en un navegador.

Com aplicar els filtres SVG

He argumentat per aplicar filtres SVG sempre que sigui possible a les il·lustracions SVG. Vegem com passa això:

Seleccioneu els objectes als quals esteu aplicant el filtre.

Trieu Efecte → Filtres SVG i seleccioneu un filtre.
El submenú Filtres SVG té una llista de filtres amb noms que, en el millor dels casos, només són semi-intuïtius (com ara AI_Shadow_1, que és una ombra) i més sovint només críptics (com AI_Dilate_6). Haureu d'experimentar fins que tingueu una idea de com funcionen aquests filtres.

Amb l'objecte al qual heu aplicat el filtre encara seleccionat, visualitzeu el panell Aparença (trieu Finestra → Aparença).

Passeu el cursor per sobre del filtre aplicat i feu-hi clic per mostrar el quadre Aplica el filtre SVG, que es mostra aquí.

Edició de filtres SVG.

Aquí podeu canviar el filtre aplicat i utilitzar la casella de selecció Vista prèvia per veure com es veurà el filtre. També podeu seleccionar i suprimir un filtre SVG al tauler Aparença, tal com es mostra.

S'està suprimint un filtre SVG.

Com importar filtres SVG

El conjunt de filtres d'Illustrator és útil, però gairebé no supera els límits del que podeu fer amb els filtres SVG. Si codifiqueu en HTML, trobareu un tutorial accessible per crear els vostres propis filtres SVG a w3schools .

També podeu comprar conjunts addicionals de filtres en línia i, fins i tot, trobar alguns conjunts agradables de filtres SVG gratuïts . Per instal·lar aquest conjunt de filtres o altres filtres, seguiu aquests passos:

Trieu Efecte → Filtres SVG → Importa el filtre SVG.

Al quadre de diàleg que s'obre, navegueu i feu doble clic al fitxer de filtres SVG que heu baixat.
El fitxer probablement serà un fitxer SVG.

Trieu Efecte–>Filtres SVG per aplicar filtres nous als objectes seleccionats.
Després d'importar filtres nous, apareixeran al submenú Filtres SVG.