Hvernig á að nota SVG síur í Illustrator CC

Áhrif, eins og alls staðar nálægur fallskuggi, eru ómissandi þáttur í verkfærakistu hvers hönnuðar. Þú gætir hafa tekið eftir því að áhrifavalmynd Adobe Illustrator CC inniheldur verulega undirvalmynd fyrir SVG síur. Tiltækt síasett er að stækka eftir því sem Illustrator þróast til að veita meiri stuðning fyrir SVG.

Við the vegur, ef þú hefur notað Illustrator í mörg ár, gætirðu munað að áhrifavalmyndin var notuð til að skrá áhrif og síur. Síur voru eins og áhrif, nema að ekki var auðvelt að breyta þeim eftir að hafa verið notaðar. En SVG síur eru ekki endurvakning þessara tegunda sía; SVG síur eru kallaðar síur vegna þess að þær starfa í gegnum SVG síueininguna í kóða vefsíðum.

Hér er annað flott við SVG síur: Eins og þú uppgötvar fljótlega geturðu flutt inn og jafnvel búið til þínar eigin SVG síur.

Þegar þú notar SVG síu gæti það litið svipað út og ekki SVG áhrif. Til dæmis, Þessi mynd sýnir tvær sömu reitum, en sá vinstri hefur a raster falla skuggi áhrif beitt og einn á the réttur hefur a vektor (SVG) falla skuggi sía beitt.

Skuggaáhrif (vinstri) og SVG sía (hægri).

Þegar ég vel rétthyrninginn með SVG síunni birtist þessi sía á Útlitsspjaldinu, eins og sýnt er.

teiknari-falla-skugga-sía

Mismunandi leiðir sem áhrif og SVG síur breyta slóð hlutar hafa lúmskar en raunverulegar afleiðingar. Sum þessara vísbendinga eiga aðeins við um vef- og apphönnuði, en frá lokum vinnuflæðisins er mikilvægt að hafa í huga að forðast að blanda SVG síum og rasteráhrifum í verkefnum vegna þess að þau hafa mismunandi áhrif á hluti.

Við the vegur get ég ekki varist því að deila því hér að ferningurinn með rasterfallskugganum á þessum myndum er næstum sjö sinnum stærri en sá sem er með SVG síunni. Bara stutt opinber þjónustutilkynning frá SVG iðnaðinum um hvernig þú getur léttast (skráa) með SVG.

Og eins og þú hefur kannski giskað á núna eru rasteráhrif ekki forritanleg. Þegar þú snýr þeim yfir í hreyfimyndavél eða HTML kóðara, mun þróunarfélagi þinn ekki hafa sama frelsi til að stjórna því hvernig rasteráhrif virka í hreyfimyndum eða umbreytingum.

Að lokum, þegar þú notar SVG síur í stað rasteráhrifa á SVG listaverk, þarftu ekki að hafa áhyggjur af því að þessar síur fari niður þegar listaverkið er endurskalað í vafra.

Hvernig á að nota SVG síur

Ég hef lagt áherslu á að beita SVG síum þegar mögulegt er í SVG listaverkum. Við skulum ganga í gegnum hvernig það gerist:

Veldu hlutinn/hlutina sem þú ert að nota síuna á.

Veldu Effect→ SVG Filters og veldu síu.
SVG Filters undirvalmyndin hefur lista yfir síur með nöfnum sem í besta falli eru aðeins hálf-innsæi (eins og AI_Shadow_1, sem er dropaskuggi) og oftar bara dulmál (eins og AI_Dilate_6). Þú verður að gera tilraunir þar til þú færð tilfinningu fyrir því hvernig þessar síur virka.

Þegar hluturinn sem þú notaðir síuna á er enn valinn, skoðaðu Útlit spjaldið (veldu Gluggi→ Útlit).

Færðu bendilinn yfir notaða síu og smelltu á hana til að birta Apply SVG Filter reitinn, sýndur hér.

Breytir SVG síum.

Hér geturðu breytt síunni sem notað er og notað Forskoðun gátreitinn til að sjá hvernig sían mun líta út. Þú getur líka valið og eytt SVG síu á Útlitsspjaldinu, eins og sýnt er.

Eyðir SVG síu.

Hvernig á að flytja inn SVG síur

Síusett Illustrator er gagnlegt en ýtir varla við mörkum þess sem þú getur gert með SVG síum. Ef þú kóðar í HTML finnurðu aðgengilegt kennsluefni til að búa til þínar eigin SVG síur á w3schools .

Þú getur líka keypt fleiri sett af síum á netinu og jafnvel fundið nokkur flott sett af SVG ókeypis SVG síum . Til að setja upp þetta sett af síum eða öðrum síum skaltu fylgja þessum skrefum:

Veldu Áhrif → SVG síur → Flytja inn SVG síu.

Í glugganum sem opnast, flettu að og tvísmelltu á SVG-síuskrána sem þú halaðir niður.
Skráin mun líklega vera SVG skrá.

Veldu Effect–>SVG Filters til að nota nýjar síur á valda hluti.
Eftir að þú hefur flutt inn nýjar síur birtast þær á SVG Filters undirvalmyndinni.