Sådan anvender du SVG-filtre i Illustrator CC

Effekter, som den allestedsnærværende skygge, er et væsentligt element i enhver designers værktøjskasse. Du har måske bemærket, at Adobe Illustrator CC 's Effect-menu indeholder en betydelig undermenu til SVG-filtre. Det tilgængelige sæt filtre udvides, efterhånden som Illustrator udvikler sig for at give mere understøttelse af SVG.

Forresten, hvis du har brugt Illustrator i årevis, husker du måske, at menuen Effekt bruges til at vise effekter og filtre. Filtre var som effekter, bortset fra at de ikke let kunne redigeres efter at være blevet anvendt. Men SVG-filtre er ikke en genoplivning af disse typer filtre; SVG-filtre kaldes filtre, fordi de fungerer gennem SVG-filterelementet i kodende websider.

Her er en anden cool ting om SVG-filtre: Som du snart opdager, kan du importere og endda oprette dine egne SVG-filtre.

Når du anvender et SVG-filter, kan det ligne en ikke-SVG-effekt. For eksempel denne figur viser to identiske kvadrater, men den ene venstre har en raster drop shadow effekt påføres, og en til højre har en vektor (SVG) skyggeeffekt filter anvendt.

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

Når jeg vælger rektanglet med SVG-filteret, vises det filter i panelet Udseende, som vist.

illustrator-dråbeskygge-filter

De forskellige måder, som effekter og SVG-filtre ændrer et objekts sti på, har subtile, men reelle implikationer. Nogle af disse implikationer er kun relevante for web- og app-udviklere, men fra din ende af workflowet er det vigtige at huske på at undgå at blande SVG-filtre og rastereffekter i projekter, fordi de påvirker objekter forskelligt.

Jeg kan i øvrigt ikke lade være med at dele her, at firkanten med raster-dråbeskyggen i disse figurer er næsten syv gange større end den med SVG-filteret. Blot en kort public service-meddelelse fra SVG-industrien om, hvordan du kan tabe (file) vægt med SVG'er.

Og som du måske har anet nu, er rastereffekter ikke programmerbare. Når du overdrager dem til en animator eller en HTML-koder, vil din udvikler-teamkammerat ikke have den samme form for frihed til at kontrollere, hvordan rastereffekter fungerer i en animation eller en overgang.

Endelig, når du anvender SVG-filtre i stedet for rastereffekter på SVG-illustrationer, behøver du ikke bekymre dig om, at disse filtre forringes, når illustrationen omskaleres i en browser.

Sådan anvender du SVG-filtre

Jeg har argumenteret for at anvende SVG-filtre, når det er muligt i SVG-illustrationer. Lad os gå igennem, hvordan det sker:

Vælg det eller de objekter, som du anvender filteret på.

Vælg Effekt→SVG-filtre, og vælg et filter.
SVG Filters undermenuen har en liste over filtre med navne, der i bedste fald kun er semi-intuitive (såsom AI_Shadow_1, som er en drop shadow) og oftere bare kryptiske (såsom AI_Dilate_6). Du bliver nødt til at eksperimentere, indtil du får en fornemmelse af, hvordan disse filtre fungerer.

Med objektet, som du anvendte filteret på, stadig markeret, se panelet Udseende (vælg Vindue→ Udseende).

Hold markøren over det anvendte filter, og klik på det for at få vist boksen Anvend SVG-filter, vist her.

Redigering af SVG-filtre.

Her kan du ændre det anvendte filter og bruge afkrydsningsfeltet Eksempel til at se, hvordan filteret vil se ud. Du kan også vælge og slette et SVG-filter i panelet Udseende, som vist.

Sletning af et SVG-filter.

Sådan importeres SVG-filtre

Illustrators sæt af filtre er nyttigt, men skubber næppe grænserne for, hvad du kan gøre med SVG-filtre. Hvis du koder i HTML, finder du en tilgængelig vejledning til at lave dine egne SVG-filtre på w3schools .

Du kan også købe yderligere sæt filtre online og endda finde nogle gode sæt SVG gratis SVG-filtre . Følg disse trin for at installere dette sæt filtre eller andre filtre:

Vælg Effekt→SVG-filtre→Importer SVG-filter.

I dialogboksen, der åbnes, skal du navigere til og dobbeltklikke på den SVG-filterfil, du downloadede.
Filen vil sandsynligvis være en SVG-fil.

Vælg Effekt–>SVG-filtre for at anvende nye filtre på valgte objekter.
Når du har importeret nye filtre, vises de i undermenuen SVG-filtre.