Шпаргалка по Adobe Illustrator CC для LuckyTemplates
Изучите советы о том, как найти и добавить фильтры SVG, а также ресурсы для создания собственных фильтров SVG. Также узнайте, как передавать код SVG.
Шпаргалка по Adobe Illustrator CC для LuckyTemplates
Многие из наиболее драматических изменений в использовании Illustrator происходят в сфере перевода векторных изображений в Интернет, и недооцененный формат SVG является ключевым звеном в этом процессе. Файлы SVG поддерживают ценные функции масштабируемости векторных изображений и почти повсеместно поддерживаются на веб-сайтах и в средах веб-разработки. При подготовке векторных изображений для Интернета важно избегать стандартных эффектов Illustrator и вместо этого использовать фильтры SVG.
Illustrator поставляется с приличным, но минималистичным набором SVG-фильтров, но вот несколько советов о том, как найти и добавить SVG-фильтры, а также ресурсы для создания ваших собственных SVG-фильтров. Тем, кто работает с веб-разработчиками и разработчиками приложений, можно сделать свою жизнь проще и продуктивнее, ознакомившись со шпаргалкой по передаче кода SVG.
Как применять фильтры SVG в Illustrator
Когда вы создаете файлы SVG для экранов в Illustrator и хотите применить эффекты (например, тени), вы должны применять их как фильтры SVG. Таким образом, ваши файлы SVG сохранят бесконечную масштабируемость без искажений.
Следующие шаги помогут вам применить фильтр SVG к графике в Illustrator:
Выберите объект (ы), к которому вы применяете фильтр.
Выберите Эффект → Фильтры SVG.
Выберите фильтр из появившегося списка.
Большинство фильтров имеют описательные имена. Например, тени с тенью в названии - это падающие тени, а с гауссовым в названии - гауссовские размытия. Рабочий процесс немного странный и окольный, но вам нужно сначала выбрать фильтр, чтобы получить доступ ко всем параметрам, доступным для его применения.
Чтобы изменить выбранный фильтр:
- Не снимая выделения с объекта, к которому был применен фильтр, откройте панель «Оформление», выбрав «Окно» → «Оформление».
- На панели «Оформление» щелкните фильтр SVG, который отображается в разделе «Заливка» панели. Откроется панель «Применить фильтр SVG».
- На панели «Применить фильтр SVG» измените примененный фильтр.
- Чтобы увидеть, как будет выглядеть фильтр, установите флажок «Предварительный просмотр», как показано на рисунке.
Выбрав фильтр, нажмите кнопку «ОК» на панели «Применить фильтр SVG».
Как добавить фильтры SVG в Illustrator
Набор SVG-фильтров Illustrator минималистичен, но вы можете улучшить его, создав свои собственные фильтры или загрузив предварительно упакованные наборы SVG-фильтров из онлайн-источников. Разработка фильтров включает в себя кодирование, но это выполнимо, если вы хорошо знакомы с HTML. Я рекомендую учебник на w3Schools для создания фильтров SVG. Или вы можете приобрести наборы фильтров в Интернете и даже найти несколько хороших наборов бесплатных SVG-фильтров на сайте Creatingo .
После покупки или создания собственных фильтров SVG их можно установить в Illustrator следующим образом:
Выберите Эффект → Фильтры SVG → Импортировать фильтр SVG.
В открывшемся диалоговом окне перейдите к файлу фильтров SVG, который вы создали или скачали бесплатно, и дважды щелкните его.
Файл, который вы ищете, должен быть файлом SVG (несколько фильтров объединены в один файл SVG).
Ваши новые фильтры теперь доступны в подменю SVG Filters.
Выберите Эффект → Фильтры SVG, чтобы применить новые фильтры к выбранным объектам.
Как передать код SVG из Illustrator разработчику
Часто SVG-графика, которую вы создаете в Illustrator, передается игровым дизайнерам, аниматорам, инфографике или другим продуктам, где разработчики будут работать с кодом, стоящим за SVG-графикой. Как иллюстратору вам не нужно знать, как создать этот код, но вам может потребоваться знать, как его получить и передать разработчику. Вот как.
Путь к экспорту вашей SVG-графики в виде кода проходит через функции сохранения Illustrator. В меню «Сохранить» есть параметры (их нелегко найти), которые экспортируют ваш файл в виде кода SVG. Скорее всего, вы захотите общаться в режиме реального времени со своим разработчиком экрана при создании этого кода, потому что несколько вариантов зависят от того, как этот код будет использоваться:
Выберите «Файл» → «Сохранить» (или «Сохранить как», если вы повторно сохраняете файл).
В открывшемся диалоговом окне выберите SVG в меню «Формат».
Игнорируйте параметр файла SVGZ, который предназначен для сжатого файла, который не отображается в браузерах.
Нажмите «Сохранить», чтобы открыть диалоговое окно «Параметры SVG».
Всегда выбирайте SVG 1.1 в раскрывающемся списке профилей SVG. Остальные версии устарели.
Если у вас есть встроенные или связанные изображения в свой файл SVG, выберите «Встраивать» в раскрывающемся списке «Расположение изображений». Однако сначала посоветуйтесь со своим веб-разработчиком по поводу этого выбора.
Выберите «Сохранить возможности редактирования в Illustrator», чтобы сделать файл доступным для редактирования в Illustrator.
Этот выбор увеличивает размер файла, но позволяет вам работать с одним файлом SVG, который вы можете редактировать, обновлять и делиться с веб-разработчиками.
Если отображается кнопка «Дополнительные параметры», щелкните ее, чтобы получить доступ к дополнительным параметрам. и сделайте свой выбор.
По сути, различные параметры генерируют CSS с вашим файлом, который определяет свойства следующими способами. Проконсультируйтесь со своим товарищем по команде веб-разработчика, как определить эти свойства CSS:
- Атрибуты презентации включают стиль в код SVG. Этот вариант самый простой и используется по умолчанию. Используйте это, если вы не сотрудничаете с веб-разработчиком или разработчиком приложений.
- Два варианта атрибутов стиля полагаются на CSS для управления стилями, где это возможно.
- Элементы стиля генерируют селекторы стиля класса для стилизации.
- Параметр « Включить неиспользуемые стили» создает код, который, вероятно, увеличивает размер файла SVG без добавления функциональной ценности.
Снимите пять флажков в нижней части диалогового окна «Параметры SVG», если только ваш партнер-разработчик не попросит вас установить их.
Эти параметры предназначены для узкоспециализированных приложений.
Чтобы сгенерировать код SVG на основе выбора, сделанного в диалоговом окне «Параметры SVG», нажмите кнопку « Код SVG» .
Сгенерированный код SVG отображается в текстовом редакторе вашей операционной системы. Вы можете сохранить этот код в виде текстового файла с помощью текстового редактора вашей операционной системы и передать файл разработчику.
После того, как вы сгенерировали код, нажмите OK, чтобы сохранить файл.
Вы можете повторно открыть и отредактировать этот файл в Illustrator.