Adobe illustrator как сделать прозрачный фон svg
Прозрачность настолько естественна для программы Illustrator, что ее можно добавить в иллюстрацию, даже не заметив этого. Чтобы добавить прозрачность в иллюстрацию, выполните любое из следующих действий:
Попробуйте уменьшить степень непрозрачности объектов, чтобы изображения, расположенные ниже, стали видимыми.
Используйте непрозрачные маски, чтобы создавать различные варианты прозрачности.
Используйте режим наложения, чтобы изменять характер взаимодействия цветов перекрывающихся объектов.
Применяйте градиенты и сетчатые объекты, содержащие прозрачность.
Применяйте эффекты или графические стили, содержащие прозрачность, например тени.
Импортируйте файлы Adobe Photoshop, содержащие прозрачность.
Палитра «Прозрачность» («Окно» > «Прозрачность») используется для указания параметров непрозрачности и режима наложения объектов, для создания непрозрачных масок или маскировки участка одного объекта перекрывающим участком прозрачного объекта.
Отображение всех параметров в палитре «Прозрачность»
Отображение миниатюры выделенного объекта в палитре «Прозрачность»
Выберите команду «Показать миниатюру» в меню палитры. Или щелкните двойной треугольник на вкладке палитры, чтобы просмотреть по кругу различные размеры отображения.
Важно знать об использовании прозрачности в иллюстрации, поскольку при печати и сохранении иллюстрации необходимо задать некоторые дополнительные параметры. Чтобы просмотреть прозрачность в иллюстрации, отобразите сетку с рисунком «в шахматную клетку», служащую фоном для прозрачных участков иллюстрации.
Можно также изменить цвет монтажной области, чтобы имитировать вид иллюстрации при печати на цветной бумаге.
Можно изменить непрозрачность отдельного объекта, непрозрачность всех объектов в группе или слое либо непрозрачность заливки или обводки объекта.
Если необходимо изменить непрозрачность заливки или обводки, выделите объект, затем выберите заливку или обводку в палитре «Оформление».
Чтобы выделить все объекты с одинаковой непрозрачностью, выделите один из объектов с нужной прозрачностью или отмените выделение всех объектов и введите значение непрозрачности в палитре «Прозрачность». Затем выберите команду «Выделение» > «По общему признаку» > «Непрозрачность».
Если выделить несколько объектов в слое и изменить настройки непрозрачности, прозрачность перекрывающихся участков выделенных объектов изменится относительно других объектов и будет показано суммарное значение непрозрачности. В то же время, если выбрать целевой слой или группу и изменить настройки непрозрачности, объекты в слое или группе рассматриваются как единый объект. Только объекты, расположенные вне и ниже слоя или группы, видимы сквозь прозрачные объекты. Если объект перемещается в слой или группу, к нему применяются настройки непрозрачности слоя или группы, при перемещении из слоя или группы наружу объект не сохраняет параметров непрозрачности.
Отдельные выделенные объекты с заданной непрозрачностью 50% (слева) и целевой слой с непрозрачностью 50% (справа)
В группе частичной прозрачности одни элементы группы не просматриваются через другие.
В палитре «Слои» выберите целевую группу или слой, которые необходимо преобразовать в группу частичной прозрачности.
В палитре «Прозрачность» выберите «Маскировать в группе». Если этот параметр не отображается, выберите пункт «Показать параметры» в меню палитры.
При выборе параметра «Маскировать в группе» можно задать одно из трех состояний: «включено» (флажок установлен), «выключено» (флажок не установлен) и «нейтрально» (квадрат, перечеркнутый линией). Используйте значение «нейтрально», если необходимо сгруппировать иллюстрацию, не оказывая влияния на параметры частичной прозрачности, определяемые включением слоя или группы. Используйте значение «выключено», если необходимо гарантировать, что слой или группа прозрачных объектов не будет маскировать друг друга.
Используйте непрозрачную маску и маскирующий объект для изменения прозрачности иллюстрации. Непрозрачная маска (которую также называют рисунком-маской) представляет собой фигуру, сквозь которую просматриваются другие объекты. Маскирующий объект определяет, какие из участков являются прозрачными, а также степень прозрачности. В качестве маскирующего объекта можно использовать любой цветной объект или растровое изображение. Illustrator применяет эквиваленты цветов маскирующего объекта в градациях серого для определения степеней непрозрачности маски. На тех участках, где непрозрачная маска окрашена белым, иллюстрация просматривается полностью. На тех участках, где непрозрачная маска окрашена черным, иллюстрация полностью скрыта. Оттенки серого в маске соответствуют различным степеням прозрачности в иллюстрации.
A. Объекты, лежащие ниже B. Рисунок непрозрачной маски C. Маскирующий объект с заливкой градиентом от белого к черному D. Объект «В» перемещен над «Б» и маскирует часть «Б»
При создании непрозрачной маски миниатюра маскирующего объекта отображается в палитре «Прозрачность» справа от миниатюры рисунка-маски. (Если эти миниатюры не отображаются, выберите в меню палитры пункт «Показать миниатюры».) По умолчанию рисунок-маска и маскирующий объект связаны (что показано связью между миниатюрами в палитре). При перемещении рисунка-маски маскирующий объект перемещается вместе с ним. Но при перемещении маскирующего объекта рисунок-маска остается на месте. Можно отсоединить маску в палитре «Прозрачность», чтобы закрепить ее на месте и перемещать рисунок-маску независимо от нее.
В палитре «Прозрачность» отображаются миниатюры непрозрачной маски: миниатюра слева представляет непрозрачную маску, миниатюра справа — маскирующие объекты.
Можно перемещать маски между программами Photoshop и Illustrator. Непрозрачные маски в программе Illustrator преобразуются в слои-маски в Photoshop и наоборот.
Невозможно перейти в режим изоляции из режима редактирования маски и наоборот.
Видеоролик с инструкцией по работе с непрозрачными масками см. по адресу Использование непрозрачных масок.
Нарисовал в люстре иконку, хочу перенести ее в Figma.
Сохраняю ее в svg формате, формат предполагает, что объект можно видоизменять.
Действительно могу менять объект в Figma, но иллюстратор ставит белый фон сзади.
( Мне нужен прозрачный фон )
Как сохранить svg в иллюстраторе без белого фона?
- Вопрос задан более трёх лет назад
- 6981 просмотр
Простой 2 комментария
Не должно быть такой проблемы, если в люстре нет объекта на фоне с белой заливкой. Я постоянно рисую иконки в люстре и таскаю их в фигму - никогда такой проблемы не возникало.
Сергей Михайленко, у фигмы пока очень печальная поддержка SVG - при экспорте она разбирает контуры, превращая их в заливки, что автоматом утяжелает файл. Да и рисовать в ней всё-таки неудобно, тут она до люстры еще долго не будет дотягивать.
Nekto_Habr, Спасибо за ваш ответ. В итоге, я разобрался. Оказывается Figma сам вставляла на задний фон прозрачного изображения svg белый фон. Это легко можно убрать в левой панели программы, сняв заливку фона.
Нерон Лордов, А как правильно переносить SVG из люстры в фигму? какие настройки должны быть, чтобы не было проблем потом:
Kadzi, рад, что ты спросил. Методом гугления, проб и ошибок я для себя решил, что оптимально будет экспортировать SVG следующим образом.
1) Создаем артборды, рисуем в них иконки. Артбордам присваиваем названия, которые характеризуют сами иконки по отдельности - например, если нарисовали домик, окошко, заборчик: именуем артборды house, window, fence.
2) Раскидываем иконки по разным слоям, имена которых характеризуют наборы иконок. Например, домик, окошко и заборчик запихиваем в слой accommodation (жилье, ну или как сам хочешь), а иконки пистолета, ножа, удавки - в weapons.
3) Каждую иконку нужно теперь сгруппировать и назвать группу "Icon" (ну или как-нибудь нейтрально, может даже Group, хотя Icon лучше подходит, имхо). Даже если иконка состоит из одной кривой - всё равно делаем группу. А на каждом артборде в самый низ стопки объектов пихаем пустой прямоугольник (или квадрат, если артборд квадратный), повторяющий периметр артборда, и называем его Container (или Frame, например) - этот прямоугольник будет обеспечивать нужное пустое пространство вокруг иконки. Следим, чтобы Icon и Container были на правильном "тематическом" слое, тут очень легко запутаться. Я для исключения ошибки отключаю и блокирую слои.
4) Теперь можно экспортировать: File -> Export -> Export for screens со следующими настройками:
Такой алгоритм имеет некоторые неочевидные преимущества. Во-первых, такой алгоритм гарантирует корректный просмотр SVG прямо в проводнике (нужно будет установить специальное расширение; я к сожалению забыл, что именно я устанавливал, но думаю нагуглить несложно) - это очень удобно. А другие способы генерации SVG часто показывают черноту вместо иконки.
Во-вторых, ты получаешь файлы, названия которых соответствуют названиям артбордов, а в коде иконки будет упорядоченная структура вида:
- Название файла
- Название слоя
- Контейнер
- Иконка
Думаю, разработчики это оценят, если ты с ними взаимодействуешь.
В-третьих, такой SVG корректно вставится в фигму через обычный drag and drop, и ее рамка выделения будет совпадать с пустым контейнером, а не обволакивать иконку "впритык" к самим кривым.
В-четвертых, настройки со скриншота выше позволяют получать читаемый код SVG, корректный для всех девайсов - десктопа, браузера, мобильников, чего угодно короче.
Разумеется, в разработку нужно отдавать экспортированные из иллюстратора SVG, а не повторно экспортировать их из фигмы. У фигмы свой векторный движок, который пока не очень хорошо вписывается в устоявшиеся стандарты, и там иконки должны расцениваться чисто как "в демонстрационных целях"
Чаще всего владельцы сайтов просят SVG-файлы, на которых будут изображены будущие иконки. SVG-формат хорош тем, что он векторный, а значит вы в любой момент сможете его отредактировать. Для примера мы возьмем вот такой файл, на котором будут изображены несколько будущих иконок. Нам же нужно вывести каждую из них в формате SVG.
Т.к. нам нужно будет выводить иконки по отдельности, то для этого создадим файл с произвольными настройками. Подробнее с ними вы можете познакомиться на скрине ниже.
Далее вам нужно будет скопировать одну из иконок с общего холста на отдельный. Делается это горячими клавишами Ctrl+C / Ctrl+V. В идеале иконки нужно сохранять в тех размерах, в которых вы планируете использовать их на сайте, хотя это и не обязательно и будет зависеть от условий вашей сделки.
В идеале сделать так, чтобы пустых областей вокруг самой иконки не было. Нужно перейти в «монтажные области» (которые вы найдете в правой части вашего рабочего экрана) и выбрать правильные размеры, для вашей иконки.
Все, что вам теперь понадобится – это выбрать пункт «файл» в верху. В открывшейся табличке выбрать пункт «сохранить как» и выбрать формат SVG, а также место, куда будет сохранена иконка.
Точно также работа делается и с остальными иконками, либо с другими. Главное ее вывести в нужных размеров, а остальное уже дело верстальщиков.
В создании этой статьи участвовала наша опытная команда редакторов и исследователей, которые проверили ее на точность и полноту.
Команда контент-менеджеров wikiHow тщательно следит за работой редакторов, чтобы гарантировать соответствие каждой статьи нашим высоким стандартам качества.
Из этой статьи вы узнаете, как изменить цвет фона в Adobe Illustrator.
Откройте изображение в Adobe Illustrator. Для этого дважды щелкните по желтому значку с буквами «Ai», а затем в строке меню (в верхней части экрана) нажмите «Файл» > «Открыть». Выберите изображение, цвет фона которого нужно изменить, а затем нажмите «Открыть».
Поставьте флажок у опции Имитировать цветную бумагу . Она находится в разделе «Параметры прозрачности».
Щелкните по верхнему окошку с образцом цвета. Оно находится в правой части раздела «Параметры прозрачности» (слева от изображения сетки).
- Когда вы закончите, выбранный цвет отобразится в окошке образца в левом нижнем углу диалогового окна.
Щелкните по образцу и перетащите его в пустой квадрат. Пустые квадраты, которые расположены справа от окошка с образцом цвета, позволяют сохранить пользовательские цвета.
Закройте диалоговое окно. В Windows нажмите «X», а в Mac OS X щелкните по красному кружку в углу диалогового окна.
Щелкните по нижнему окошку с образцом цвета. Оно находится в правой части раздела «Параметры прозрачности» (слева от изображения сетки).
Щелкните по цвету, который вы только что сохранили. Вы найдете его в маленьком квадрате в нижней правой части диалогового окна (в квадрате, в который вы перетащили нужный цвет). В окошке образца (в левом нижнем углу диалогового окна) отобразится тот же цвет, что и в маленьком квадрате.
Закройте диалоговое окно. В Windows нажмите «X», а в Mac OS X щелкните по красному кружку в углу диалогового окна. В окошках с образцами цвета и на сетке отобразится нужный вам цвет.
Битовые форматы изображения для Интернета (GIF, JPEG, WBMP и PNG) описывают изображения с помощью сетки пикселей. Файлы получаются большими с одним (часто низким) разрешением и занимают значительную часть полосы пропускания. В отличие от этого, SVG — это векторный формат, описывающий изображения как фигуры, контуры, текст и эффекты фильтра. Полученные файлы компактны и обеспечивают качественную графику в Интернете, на печати и даже портативных устройствах с ограниченными ресурсами. Пользователи могут увеличить изображение SVG на экране без потери резкости, деталей или четкости. Кроме того, формат SVG отлично поддерживает текст и цвета, и пользователи всегда видят изображения таким, как оно выглядит в монтажной области Illustrator.
Формат SVG полностью основан на XML и дает много преимуществ разработчикам и пользователям. С форматом SVG можно использовать XML и JavaScript для создания веб-графики, отвечающей на действия пользователя такими сложными эффектами, как подсветка, всплывающие подсказки, звуки, анимация и т. п.
Можно сохранить работу в формате SVG, используя команду «Сохранить», Сохранить как , «Сохранить копию» или Сохранить для Web и устройств . Для доступа к полному набору параметров экспорта в формате SVG используйте команды «Сохранить», Сохранить как или «Сохранить копию». Команда Сохранить для Web и устройств предоставляет ограниченный набор параметров экспорта в формате SVG (только те, которые используются для работы в Интернете).
Настройки объекта в Illustrator влияют на то, каким будет файл SVG. Помните следующие рекомендации.
Используйте слои для добавления структуры в файл SVG. Если объект сохраняется в формате SVG, каждый слой преобразуется в групповой элемент (). (Например, слой «Button1» становится .) Вложенные слои становятся вложенными группами SVG, а скрытые слои сохраняются со свойством «отображение: нет» стиля SVG.
Если нужно, чтобы объекты на разных слоях выглядели прозрачными, корректируйте непрозрачность каждого объекта, а не каждого слоя. Если непрозрачность меняется на уровне слоя, итоговый файл SVG не покажет прозрачность так, как она выглядит в Illustrator.
Растровые данные не масштабируются в средстве просмотра SVG и не могут отредактироваться, как другие элементы SVG. Старайтесь не создавать объекты, которые будут растрироваться в файле SVG. Сетчатые градиенты и объекты с градиентной заливкой, использующие эффекты «Растрировать», «Имитация», «Размытие», «Штрихи», «Искажение», «Оформление», «Резкость», «Эскиз», «Стилизация», «Текстура» и «Видео», растрируются при сохранении в формате SVG. Графические стили с этими эффектами также вызывают растрирование. Добавляя графические объекты, используйте эффекты SVG, не вызывающие растрирования.
Для повышения производительности файла SVG используйте символы в объекте и упрощайте контуры. Кроме того, если в первую очередь требуется производительность, старайтесь не пользоваться кистями, которые производят большое количество данных контура («Угольно-серый», «Пепел», «Ручка»).
Используйте фрагменты, карты ссылок и сценарии для добавления веб-ссылок в файл SVG.
Язык сценариев (например, JavaScript) открывает неограниченные функциональные возможности для файла SVG. Перемещения с помощью курсора и клавиатуры могут вызвать сценарные функции (например, эффекты прокрутки). Сценарии могут также использовать объектную модель документов (DOM) для обращения к файлу SVG и внесения изменений (например, для вставки или удаления элементов SVG).
Эффекты SVG можно использовать для добавления в объект таких графических свойств, как тени. Эффекты SVG отличаются от битовых эквивалентов тем, что они основаны на XML и не зависят от разрешения. Фактически, эффект SVG — это не что иное, как серия свойств XML, описывающих различные математические операции. Полученный эффект визуализируется для целевого объекта, а не для исходной графики.
Illustrator предоставляет набор эффектов SVG по умолчанию. Можно использовать эффекты с их свойствами по умолчанию, отредактировать код XML для создания пользовательских эффектов или написать код для новых эффектов SVG.
Чтобы изменить фильтры SVG, которые Illustrator использует по умолчанию, используйте текстовый редактор для редактирования файла Adobe SVG Filters.svg в папке Documents and Settings//Application Data/Adobe/Adobe Illustrator CS5 Settings/. Можно изменить или удалить существующие определения фильтра, а также добавить новые.
Для применения эффекта с параметрами по умолчанию выберите эффект в нижней части вложенного меню Эффект > Фильтры SVG .
Для применения эффекта с параметрами пользователя выберите Эффект > Фильтры SVG > Применить фильтр SVG . Выберите эффект в диалоговом окне и нажмите кнопку «Редактировать SVG-фильтр» . Отредактируйте код по умолчанию и нажмите кнопку ОК .
Для создания и применения нового эффекта выберите Эффект > Фильтры SVG > Применить фильтр SVG . В диалоговом окне нажмите кнопку «Новый фильтр SVG» и новый код и нажмите ОК .
Если применяется эффект «Фильтр SVG», Illustrator отображает растрированную версию эффекта на монтажной области. Можно контролировать разрешение миниатюры, изменяя параметр разрешения растрирования документа.
Примечание. Если объект использует несколько эффектов, эффект SVG должен быть последним. Другими словами, он должен отображаться в нижней части палитры «Отображение» (над записью «Прозрачность»). Если SVG-эффект сопровождается другими эффектами, вывод SVG будет осуществлен в виде растрового объекта.
Читайте также: