Slik bruker du SVG-filtre i Illustrator CC

Effekter, som den allestedsnærværende fallskyggen, er et viktig element i enhver designers verktøysett. Du har kanskje lagt merke til at Adobe Illustrator CCs Effektmeny inkluderer en betydelig undermeny for SVG-filtre. Det tilgjengelige settet med filtre utvides etter hvert som Illustrator utvikler seg for å gi mer støtte for SVG.

Forresten, hvis du har brukt Illustrator i årevis, husker du kanskje at Effekt-menyen pleide å vise effekter og filtre. Filtre var som effekter, bortsett fra at de ikke lett kunne redigeres etter å ha blitt brukt. Men SVG-filtre er ikke en gjenoppliving av den typen filtre; SVG-filtre kalles filtre fordi de opererer gjennom SVG-filterelementet i koding av nettsider.

Her er en annen kul ting om SVG-filtre: Som du snart oppdager, kan du importere og til og med lage dine egne SVG-filtre.

Når du bruker et SVG-filter, kan det se ut som en ikke-SVG-effekt. For eksempel kan denne figuren viser to identiske kvadrater, men den ene til venstre har et raster skygge virkning påføres, og en på høyre side har en vektor (SVG) skygge filter anvendes.

En skyggeeffekt (venstre) og SVG-filter (høyre).

Når jeg velger rektangelet med SVG-filteret, vises det filteret i Utseende-panelet, som vist.

illustratør-slippskygge-filter

De forskjellige måtene effekter og SVG-filtre endrer banen til et objekt på har subtile, men reelle implikasjoner. Noen av disse implikasjonene er bare relevante for nett- og apputviklere, men fra slutten av arbeidsflyten er det viktig å huske på å unngå å blande SVG-filtre og rastereffekter i prosjekter fordi de påvirker objekter annerledes.

Jeg kan forresten ikke la være å dele her at firkanten med raster-slippskyggen i disse figurene er nesten syv ganger større enn den med SVG-filteret. Bare en kort offentlig kunngjøring fra SVG-bransjen om hvordan du kan gå ned i vekt med SVG-er.

Og som du kanskje har antatt nå, er ikke rastereffekter programmerbare. Når du gir dem over til en animatør eller en HTML-koder, vil ikke utviklerlagkameraten din ha samme frihet til å kontrollere hvordan rastereffekter fungerer i en animasjon eller en overgang.

Til slutt, når du bruker SVG-filtre i stedet for rastereffekter på SVG-grafikk, trenger du ikke å bekymre deg for at disse filtrene forringes når kunstverket skaleres på nytt i en nettleser.

Slik bruker du SVG-filtre

Jeg har argumentert for å bruke SVG-filtre når det er mulig i SVG-kunstverk. La oss gå gjennom hvordan det skjer:

Velg objektet/objektene du bruker filteret på.

Velg Effekt → SVG-filtre og velg et filter.
SVG Filters-undermenyen har en liste over filtre med navn som i beste fall bare er semi-intuitive (som AI_Shadow_1, som er en drop shadow) og oftere bare kryptiske (som AI_Dilate_6). Du må eksperimentere til du får en følelse av hvordan disse filtrene fungerer.

Mens objektet du brukte filteret på fortsatt er valgt, viser du Utseende-panelet (velg Vindu→ Utseende).

Hold markøren over det brukte filteret og klikk på det for å vise Bruk SVG-filter-boksen, vist her.

Redigering av SVG-filtre.

Her kan du endre det brukte filteret, og bruke forhåndsvisningsboksen for å se hvordan filteret vil se ut. Du kan også velge og slette et SVG-filter i Utseende-panelet, som vist.

Sletter et SVG-filter.

Slik importerer du SVG-filtre

Illustrators sett med filtre er nyttig, men flytter neppe grensene for hva du kan gjøre med SVG-filtre. Hvis du koder i HTML, finner du en tilgjengelig opplæring for å lage dine egne SVG-filtre på w3schools .

Du kan også kjøpe flere sett med filtre på nettet, og til og med finne noen fine sett med SVG gratis SVG-filtre . Følg disse trinnene for å installere dette settet med filtre eller andre filtre:

Velg Effekt → SVG-filtre → Importer SVG-filter.

I dialogboksen som åpnes, naviger til og dobbeltklikk på SVG-filterfilen du lastet ned.
Filen vil sannsynligvis være en SVG-fil.

Velg Effekt–>SVG-filtre for å bruke nye filtre på valgte objekter.
Etter at du har importert nye filtre, vises de på undermenyen SVG-filtre.