Руководства

Шейдеры

Бета-версия: Шейдеры пока находятся на стадии бета-тестирования. Мы продолжаем совершенствовать возможности и удобство работы с ними на основе обратной связи. В следующих версиях доступные функции и порядок действий могут измениться.

Шейдеры позволяют добавлять к слоям текстуры, узоры, пикселизацию и хроматическую аберрацию. Вы можете выбрать готовый шейдер или описать нужный эффект ИИ и создать собственный. Созданный шейдер можно применять повторно и менять его внешний вид с помощью параметров.

В этом руководстве описано, как применять, создавать, редактировать и публиковать шейдеры, а также использовать и обновлять их в других файлах.

На снимках показан интерфейс на китайском языке. Названия команд отображаются на выбранном вами языке интерфейса.

Два типа шейдеров

Тип

Где применяется

Для чего подходит

Шейдер заливки
Shader Fill

Заливка, обводка

Создание текстур, шума, узоров и материалов, например мраморного фона.

Шейдер эффекта
Shader Effect

Эффекты

Обработка уже отрисованного содержимого слоя: например, пикселизация, искажение или хроматическая аберрация изображения.

Эти типы шейдеров применяются через разные настройки. В заливке и обводке отображаются только шейдеры заливки, а в эффектах — только шейдеры эффектов. Чтобы сохранить содержимое изображения и изменить его визуальное представление, выберите шейдер эффекта. Для создания узора или текстуры используйте шейдер заливки.

Один и тот же слой: слева — мраморная заливка, справа — та же заливка с эффектом строк развёртки. Нажмите на изображение, чтобы открыть полный снимок экрана.

Перед началом работы

Для работы с шейдерами необходимы права на редактирование текущего файла. Для пользовательских шейдеров также действуют условия пространства, в котором находится файл.

Расположение файла

Условия использования

Личные черновики

Владелец файла имеет права на его редактирование.

Черновики организации

Необходимо место с полным набором функций и права на редактирование текущего файла.

Файлы команды или организации

Необходимо место с полным набором функций и права на редактирование текущего файла. Оба условия распространяются и на гостей.

Пользователи с правами на редактирование файла могут применять встроенные шейдеры Pixso.

Шейдеры можно применять к обычным фреймам, группам, фигурам, векторам, тексту и изображениям. Для срезов и секций соответствующие настройки недоступны.

Применение готового шейдера

Для заливки или обводки

  1. Выберите нужный слой на холсте или на панели слоёв.
  2. На правой панели свойств откройте настройки цвета заливки или обводки.
  3. Измените тип на «Шейдер» и нажмите «Выбрать шейдер».
  4. Выберите шейдер заливки из списка, чтобы применить его к текущей заливке или обводке.
  5. Настройте внешний вид на панели параметров и проверьте результат на холсте.

Примечание: Само переключение типа на «Шейдер» не применяет ресурс автоматически. После этого нужно выбрать шейдер из списка.

Панель заливки, список шейдеров и выбранная сине-белая мраморная текстура
Откройте список ресурсов в настройках заливки и выберите шейдер. На снимке показан локальный шейдер текущего файла. Нажмите на изображение, чтобы открыть полный снимок экрана.

Для эффекта

  1. Выберите слой. В разделе эффектов на правой панели свойств добавьте или выберите тип «Шейдер».
  2. В открывшемся списке выберите нужный шейдер эффекта.
  3. Откройте панель параметров этого шейдера, настройте эффект и проверьте результат.

Если к слою также применены обычные эффекты, например тень или размытие, шейдеры эффектов отображаются отдельным списком под ними, а не вперемешку с ними.

Список шейдеров эффектов, параметры строк развёртки CRT и свойства эффектов справа
Откройте список шейдеров в разделе эффектов и выберите ресурс. Параметры строк развёртки можно настроить на соответствующей панели. Нажмите на изображение, чтобы открыть полный снимок экрана.

Поиск ресурсов в списке

По умолчанию выбран вариант «Все». Ресурсы расположены по категориям: встроенные, локальные, облачные и используемые. Список также можно отфильтровать по источнику.

Категория

Содержимое

Встроенные

Шейдеры, включённые в текущую версию Pixso.

Локальные

Шейдеры, созданные в текущем файле.

Облачные

Опубликованные шейдеры, доступные участникам вашей команды или организации.

Используемые

Шейдеры, применённые в текущем файле, в том числе на других его страницах.

Фильтры всех, встроенных, локальных, облачных и используемых шейдеров
Выберите источник ресурсов в верхней части списка. Нажмите на изображение, чтобы открыть полный снимок экрана.

Настройка параметров шейдера

Выберите слой с применённым шейдером и откройте соответствующие настройки заливки, обводки или эффекта. Набор доступных параметров зависит от шейдера, поэтому элементы управления у разных ресурсов могут отличаться.

  • Чтобы изменить внешний вид отдельного слоя: настройте параметры — например, цвет, интенсивность, угол или масштаб текстуры. Изменения сразу отображаются на холсте.
  • Чтобы добавить элемент управления или изменить реализацию эффекта: отредактируйте сам шейдер с помощью ИИ, а не только параметры слоя.
  • Шейдер заливки можно сочетать с обычными заливками. Они накладываются друг на друга в порядке списка заливок. Прозрачность шейдерной заливки также можно изменить.

Режимы наложения шейдера заливки работают так же, как у обычной заливки. Шейдер эффекта обрабатывает итоговое изображение слоя и не использует режим наложения отдельной заливки. Чтобы смешать результат с нижележащим содержимым, измените режим наложения слоя.

Примечание: Если хотя бы одна сторона слоя меньше 200 px, рядом с его размерами появляется подсказка о качестве эффекта. На небольших слоях пикселизация может быть заметнее. Это не означает, что создание шейдера завершилось ошибкой, и не устанавливает обязательный минимальный размер 200 × 200 px.

В этом примере доступны цвет фона и прожилок, толщина узора и интенсивность зернистости. У других ресурсов набор параметров может отличаться. Нажмите на изображение, чтобы открыть полный снимок экрана.

Создание собственного шейдера

Новый шейдер сохраняется в текущем файле и не становится автоматически облачным ресурсом для других файлов. Сейчас создать шейдер можно с помощью ИИ: нажмите «+» в верхней части списка шейдеров и выберите создание с помощью ИИ либо опишите задачу непосредственно в диалоге с ИИ.

Создание с помощью ИИ

  1. Откройте список шейдеров из настроек заливки, обводки или эффектов. Нажмите «+» вверху списка и выберите создание с помощью ИИ. Также можно сразу открыть диалог с ИИ и описать нужный шейдер.
  2. Укажите желаемый визуальный результат и поясните, нужно ли создать текстуру заливки или обработать существующий слой.
  3. Перечислите параметры, которые должны оставаться настраиваемыми: например, цвета, размер зерна, интенсивность искажения или угол. При необходимости прикрепите референс.
  4. Ответьте на уточняющие вопросы ИИ и дождитесь завершения генерации и проверки.
  5. После создания проверьте открывшийся шейдер и панель параметров. Оцените результат на слое и продолжите настройку.

Ресурс, созданный из настроек заливки или обводки, предназначен для заливки и обводки. Ресурс из раздела эффектов предназначен для эффектов. При запуске через эти настройки ИИ уже учитывает выбранный тип — повторно указывать место применения не требуется.

При создании шейдера через диалог с ИИ он сразу применяется к выбранному подходящему слою, после чего открываются параметры. Если шейдер ещё не применён, выберите его в соответствующем списке локальных ресурсов.

Создание с помощью ИИ в списке шейдеров заливки
Запустите создание с помощью ИИ из списка шейдеров. Нажмите на изображение, чтобы открыть полный снимок экрана.

Примеры запросов

В запросе можно указать нужный эффект, место его применения и параметры для дальнейшей настройки.

  • Пример для заливки: «Создай шейдер мрамора для фоновой заливки в синих и белых тонах. Добавь настройку обоих цветов, толщины узора и интенсивности зернистости».
  • Пример для эффекта: «Добавь к выбранному изображению эффект старого монитора, сохранив основное содержимое. Сделай настраиваемыми плотность строк развёртки, интенсивность хроматической аберрации и яркость».
  • Пример изменения: «Измени текущий шейдер мрамора: добавь управление направлением текстуры и сохрани существующие настройки цвета».

Если информации недостаточно, ИИ уточнит тип, эффект или параметры. Чтобы создать несколько шейдеров за один запрос, опишите назначение каждого в одном сообщении и укажите, нужны ли только основные настройки или расширенный набор параметров.

Примечание: Для обычных однотонных и градиентных заливок, теней и размытия подходят стандартные свойства Pixso. Создавайте шейдеры, когда нужен более специфичный визуальный эффект, который можно повторно использовать и настраивать.

Редактирование и управление

Параметры слоя и сам ресурс: в чём разница

Параметры слоя меняют внешний вид уже применённого эффекта. Редактирование шейдера с помощью ИИ или его переименование изменяет сам повторно используемый ресурс. Чтобы добавить настройку, изменить внешний вид по умолчанию или реализацию, укажите в диалоге с ИИ нужный локальный шейдер и требования. Сохраните результат после изменения и проверки.

После сохранения изменений слои, использующие этот ресурс, должны принять новую версию по соответствующему уведомлению. Эффект не заменяется немедленно и без предупреждения. Подробнее см. раздел «Обновление применённых шейдеров».

Чтобы переименовать созданный вами шейдер, щёлкните его правой кнопкой мыши в списке. Для отдельного пользовательского эффекта можно описать новую задачу ИИ и создать ещё один шейдер.

Удаление ресурса

В исходном файле выберите локальный шейдер и подтвердите удаление. Неопубликованный ресурс исчезнет из списков локальных и используемых ресурсов; опубликованный — из общих и используемых ресурсов.

Примечание: Удаление ресурса не удаляет эффект со слоёв. Слои, к которым шейдер уже применён, сохраняют эффект и его параметры. Чтобы убрать его только с одного слоя, удалите соответствующую шейдерную заливку, обводку или эффект этого слоя. Перед удалением опубликованного ресурса согласуйте действие с теми, кто его использует.

Публикация и использование в других файлах

Пользовательский шейдер принадлежит файлу, в котором он создан. Чтобы выбирать его из облачного списка в других файлах, опубликуйте шейдер из исходного файла. Предварительно создавать цветовой стиль или стиль эффекта не нужно.

Область доступности публикации

Расположение исходного файла

Результат публикации

Черновик

Прямая публикация недоступна. Следуя подсказке, переместите файл в пространство команды или организации, где разрешена публикация, и убедитесь, что выполнены условия доступа.

Файл команды

Ресурс публикуется для команды, которой принадлежит файл. Её участники смогут выбрать его в облачном списке других файлов.

Файл организации

Ресурс публикуется в текущем пространстве организации. Её участники смогут выбрать его в облачном списке других файлов.

Примечание: Область доступности определяется расположением исходного файла. Создание шейдера не делает его доступным во всех файлах аккаунта, а публикация не размещает его в открытом сообществе. Предоставление ссылки на исходный файл не заменяет публикацию шейдера.

Сообщение об условиях доступа при публикации шейдера из черновика
Сообщение об условиях доступа при попытке опубликовать шейдер из черновика. Нажмите на изображение, чтобы открыть полный снимок экрана.

Публикация из исходного файла

  1. В исходном файле откройте список шейдеров нужного типа. Убедитесь, что локальный ресурс создан, и проверьте его эффект.
  2. Нажмите кнопку публикации в списке, чтобы открыть окно подтверждения.
  3. Проверьте пространство файла и область доступности, затем подтвердите публикацию. Если файл находится в черновиках, сначала измените его расположение и выполните условия доступа, указанные в подсказке.

Использование в другом файле

  1. Откройте целевой файл под аккаунтом участника соответствующей команды или организации. Убедитесь, что у вас есть права на редактирование и назначено место с полным набором функций.
  2. Выберите слой и откройте список шейдеров из соответствующего раздела: заливка, обводка или эффекты.
  3. Переключитесь на облачные ресурсы, выберите опубликованный шейдер и примените его.
  4. Настройте параметры для текущего макета. Шейдер заливки по-прежнему применяется только к заливке или обводке, а шейдер эффекта — только как эффект.

Обновление применённых шейдеров

Изменение ресурса и принятие обновления слоем — два отдельных действия. Условия появления уведомления различаются для исходного файла и других файлов.

Где применяется

Когда доступно обновление

Действие

Слои в исходном файле

После сохранения изменений локального ресурса. Предварительная публикация не требуется.

Выберите слой, откройте свойства соответствующего шейдера и нажмите значок обновления.

Слои в других файлах

После публикации обновления из исходного файла.

В целевом файле выберите слой, откройте свойства соответствующего шейдера и нажмите значок обновления.

После изменения эффекта или имени опубликованного ресурса опубликуйте обновление из исходного файла. Только после этого новая версия станет доступна другим файлам. Сохранения локальных изменений недостаточно для передачи новой версии между файлами.

Что происходит с параметрами после обновления

  • Параметры, для которых найдено соответствие в новой версии, сохраняют заданные вами значения.
  • Если допустимый диапазон сузился, прежнее значение приводится к его границам. Например, при исходном значении 100 и новом диапазоне 10–50 после обновления будет установлено 50.
  • Если для старого параметра нет соответствия в новой версии, его значение, сохранённое на слое, удаляется.

Примечание: После принятия обновления снова проверьте внешний вид важных слоёв, особенно если в ресурсе добавлены или удалены параметры либо изменены их диапазоны.

Частые вопросы

Почему созданного шейдера нет в списке?

Проверьте раздел, из которого открыт список: в заливке и обводке не отображаются шейдеры эффектов, а в эффектах — шейдеры заливки. Неопубликованный локальный ресурс виден только в файле, где он создан. Для поиска в другом файле убедитесь, что ресурс опубликован и ваш аккаунт входит в соответствующую команду или организацию.

Почему публикация недоступна или появляется сообщение об ограничении?

Проверьте, не находится ли исходный файл в черновиках, и какие условия доступа действуют в его пространстве. Публиковать шейдеры напрямую из черновиков нельзя: сначала переместите файл в подходящее пространство команды или организации. Доступ участников команды и участников организации — разные области доступности.

Почему изменения в исходном ресурсе не появились в других файлах?

Убедитесь, что из исходного файла опубликовано обновление, а не просто сохранены локальные изменения. В целевом файле выберите слой с этим ресурсом, откройте свойства шейдера и нажмите значок обновления.

Почему нет настроек для стилей, компонентов или переменных?

В текущей версии не предусмотрены цветовые стили шейдеров, стили их эффектов и привязка параметров к переменным. В настройках заливки и эффектов компонентов, вариантов и экземпляров шейдеры не отображаются. При создании компонента из слоя, уже содержащего шейдер, появляется предупреждение. Для повторного использования в других файлах применяйте публикацию самого шейдера и облачный список, а не публикацию стилей.

Что делать, если заметна пикселизация?

Проверьте размеры слоя и подсказку о качестве. Если хотя бы одна сторона меньше 200 px, отдельные пиксели могут быть заметнее. С учётом назначения макета измените размеры слоя или доступные параметры текстуры и зернистости. Затем проверьте результат при конечном размере использования.