Kuidas Illustrator CC-s SVG-filtreid rakendada

Efektid, nagu üldlevinud vari, on iga disaineri tööriistakomplekti oluline element. Võib-olla olete märganud, et Adobe Illustrator CC menüü Effect sisaldab suurt alammenüüd SVG-filtrite jaoks. Saadaolevate filtrite komplekt laieneb, kui Illustrator areneb, et pakkuda SVG-le rohkem tuge.

Muide, kui olete Illustratori juba aastaid kasutanud, võite meeles pidada, et efektide ja filtrite loendis kuvati varem menüü Efekt. Filtrid olid nagu efektid, ainult et neid ei saanud pärast rakendamist lihtsalt redigeerida. Kuid SVG-filtrid ei ole seda tüüpi filtrite taaselustamine; SVG-filtreid nimetatakse filtriteks, kuna need töötavad veebilehtede kodeerimisel SVG-filtrielemendi kaudu.

Siin on veel üks lahe asi SVG-filtrite kohta: nagu varsti avastate, saate importida ja isegi luua oma SVG-filtreid.

Kui rakendate SVG-filtrit, võib see välja näha sarnane mitte-SVG-efektiga. Näiteks on sellel joonisel kaks identset ruutu, kuid vasakpoolsele on rakendatud rastervarju efekt ja parempoolsele vektori (SVG) varjude filter .

Varjuefekt (vasakul) ja SVG-filter (paremal).

Kui valin SVG-filtriga ristküliku, kuvatakse see filter paneelil Välimus, nagu näidatud.

illustraator-varju-filter

Erinevatel viisidel, kuidas efektid ja SVG-filtrid objekti teekonda muudavad, on peen, kuid tegelik mõju. Mõned neist tagajärgedest on asjakohased ainult veebi- ja rakenduste arendajatele, kuid töövoo lõpust alates on oluline meeles pidada, et vältida SVG-filtrite ja rasterefektide segamist projektides, kuna need mõjutavad objekte erinevalt.

Muide, ma ei saa siinkohal jagamata jätta, et rastri varjuga ruut nendel joonistel on peaaegu seitse korda suurem kui SVG filtriga ruut. Lihtsalt lühike avalik teade SVG-tööstuselt selle kohta, kuidas saate SVG-de abil kaalust alla võtta.

Ja nagu te juba arvasite, pole rasterefektid programmeeritavad. Kui annate need üle animaatorile või HTML-kooderile, ei ole teie arendaja meeskonnakaaslasel samasugust vabadust juhtida rasterefektide tööd animatsioonis või üleminekus.

Lõpuks, kui rakendate SVG-pildile rasterefektide asemel SVG-filtreid, ei pea te muretsema, et need filtrid halvenevad, kui kujundust brauseris ümber skaleeritakse.

Kuidas SVG-filtreid rakendada

Olen püüdnud SVG-pildis võimaluse korral rakendada SVG-filtreid. Vaatame, kuidas see juhtub:

Valige objekt(id), millele filtrit rakendate.

Valige Efekt → SVG-filtrid ja valige filter.
SVG-filtrite alammenüüs on filtrite loend, mille nimed on parimal juhul ainult poolintuitiivsed (nt AI_Shadow_1, mis on varju) ja sagedamini lihtsalt krüptilised (nt AI_Dilate_6). Peate katsetama, kuni tunnete, kuidas need filtrid töötavad.

Kui objekt, millele filtri rakendasite, on endiselt valitud, vaadake paneeli Välimus (valige Aken → Välimus).

Hõljutage kursorit rakendatud filtri kohal ja klõpsake sellel, et kuvada siin näidatud kast Rakenda SVG filter.

SVG-filtrite redigeerimine.

Siin saate muuta rakendatud filtrit ja kasutada eelvaadet, et näha, kuidas filter välja näeb. Samuti saate paneelil Välimus valida ja kustutada SVG-filtri, nagu näidatud.

SVG-filtri kustutamine.

Kuidas importida SVG-filtreid

Illustratori filtrite komplekt on kasulik, kuid vaevalt ületab selle piire, mida saate SVG-filtritega teha. Kui koodite HTML-is, leiate veebisaidilt w3schools juurdepääsetava õpetuse oma SVG-filtrite loomiseks .

Samuti saate veebist osta täiendavaid filtrite komplekte ja isegi leida ilusaid SVG tasuta SVG-filtrite komplekte . Selle filtrikomplekti või muude filtrite installimiseks toimige järgmiselt.

Valige Efekt → SVG filtrid → Impordi SVG filter.

Avanevas dialoogiaknas navigeerige allalaaditud SVG-filtrite failini ja topeltklõpsake seda.
See fail on tõenäoliselt SVG-fail.

Valitud objektidele uute filtrite rakendamiseks valige Efekt–>SVG-filtrid.
Pärast uute filtrite importimist kuvatakse need alammenüüs SVG filtrid.