Как да приложите SVG филтри в Illustrator CC

Ефектите, като повсеместната падаща сянка, са основен елемент в инструментариума на всеки дизайнер. Може да сте забелязали, че менюто Effect на Adobe Illustrator CC включва значително подменю за SVG филтри. Наличният набор от филтри се разширява с развитието на Illustrator, за да осигури повече поддръжка за SVG.

Между другото, ако сте използвали Illustrator от години, може би си спомняте, че менюто Effect се използва за изброяване на ефекти и филтри. Филтрите бяха като ефекти, с изключение на това, че не можеха да бъдат лесно редактирани след прилагане. Но SVG филтрите не са възраждане на тези видове филтри; SVG филтрите се наричат филтри, защото работят чрез SVG филтърния елемент в кодирането на уеб страници.

Ето още едно страхотно нещо за SVG филтрите: Както ще откриете скоро, можете да импортирате и дори да създавате свои собствени SVG филтри.

Когато приложите SVG филтър, той може да изглежда подобно на не-SVG ефект. Например, тази фигура показва два еднакви квадрата, но този вляво има приложен ефект на растерна падаща сянка , а този отдясно има приложен векторен (SVG) филтър за падаща сянка .

Ефект на падаща сянка (вляво) и SVG филтър (вдясно).

Когато избера правоъгълника с SVG филтъра, този филтър се появява в панела Външен вид, както е показано.

illustrator-drop-shadow-filter

Различните начини, по които ефектите и SVG филтрите променят пътя на обекта, имат фини, но реални последици. Някои от тези последици са от значение само за разработчиците на уеб и приложения, но от вашия край на работния процес, важното нещо, което трябва да имате предвид, е да избягвате смесването на SVG филтри и растерни ефекти в проекти, тъй като те засягат обектите по различен начин.

Между другото, тук не мога да не споделя, че квадратът с растерната падаща сянка на тези фигури е почти седем пъти по-голям от този със SVG филтъра. Само кратко съобщение за обществена услуга от SVG индустрията за това как можете да отслабнете (файлове) с SVG.

И както може би сте предположили досега, растерните ефекти не са програмируеми. Когато ги предадете на аниматор или HTML кодер, вашият съотборник разработчик няма да има същата свобода да контролира как работят растерните ефекти в анимация или преход.

И накрая, когато прилагате SVG филтри вместо растерни ефекти към SVG произведения на изкуството, не е нужно да се притеснявате, че тези филтри ще се влошават, когато произведението на изкуството се мащабира отново в браузър.

Как да приложите SVG филтри

Подкрепих случая за прилагане на SVG филтри, когато е възможно в SVG произведения на изкуството. Нека да преминем през това как се случва това:

Изберете обекта(ите), към които прилагате филтъра.

Изберете Ефект→SVG Филтри и изберете филтър.
Подменюто SVG Филтри има списък с филтри с имена, които в най-добрия случай са само полуинтуитивни (като AI_Shadow_1, което е падаща сянка) и по-често просто загадъчни (като AI_Dilate_6). Ще трябва да експериментирате, докато усетите как работят тези филтри.

Когато обектът, към който сте приложили филтъра, все още е избран, вижте панела Външен вид (изберете Прозорец→ Външен вид).

Задръжте курсора на мишката върху приложения филтър и щракнете върху него, за да разкриете полето Прилагане на SVG филтър, показано тук.

Редактиране на SVG филтри.

Тук можете да промените приложения филтър и да използвате квадратчето за отметка Преглед, за да видите как ще изглежда филтърът. Можете също да изберете и изтриете SVG филтър в панела Външен вид, както е показано.

Изтриване на SVG филтър.

Как да импортирате SVG филтри

Наборът от филтри на Illustrator е полезен, но едва ли натиска границите на това, което можете да правите със SVG филтрите. Ако кодирате в HTML, ще намерите достъпен урок за създаване на ваши собствени SVG филтри в w3schools .

Можете също така да закупите допълнителни комплекти филтри онлайн и дори да намерите някои хубави комплекти безплатни SVG филтри . За да инсталирате този набор от филтри или други филтри, следвайте тези стъпки:

Изберете Ефект→ SVG филтри→ Импортиране на SVG филтър.

В диалоговия прозорец, който се отваря, отидете и щракнете двукратно върху файла с SVG филтри, който сте изтеглили.
Файлът вероятно ще бъде SVG файл.

Изберете Ефект–>SVG Филтри, за да приложите нови филтри към избрани обекти.
След като импортирате нови филтри, те се появяват в подменюто SVG филтри.