Применение эффектов наложения

Последнее обновление 6 февр. 2023 г.

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

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

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

Вот несколько примеров эффектов, созданных с использованием режимов наложения Умножение, Экран, Жесткий свет, Исключение и Яркость.

Хотите узнать терминологию накладываемого цвета?

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

Итоговый цвет — цвет, полученный после наложения.

Основной и накладываемый цвета зависят от выбранного режима наложения.

A. Накладываемый цвет B. Основной цвет C. Итоговый цвет

Группы	Режим наложения	Результаты
Обычный	Обычный	Это режим по умолчанию, режим наложения не применяется.
Затемнение	Затемнение	В этом режиме рассматривается информация цвета в каждом изображении, и в качестве итогового выбирается основной или накладываемый цвет в зависимости от того, какой из них темнее. Пиксели с цветом, более светлым по сравнению с накладываемым, заменяются, а пиксели с цветом, более темным по сравнению с накладываемым, остаются неизменными.
	Умножение	В этом режиме рассматривается информация цвета в каждом изображении, и значение основного цвета умножается на значение накладываемого цвета. Итоговый цвет всегда более темный.
	Затемнение основы	В этом режиме рассматривается информация цвета в каждом изображении и основной цвет заменяется более темным для отражения накладываемого цвета в результате увеличения контраста между двумя цветами.
Осветление	Осветление	В этом режиме рассматривается информация цвета в каждом изображении, и в качестве итогового выбирается основной или накладываемый цвет в зависимости от того, какой из них светлее.
	Экран	В этом режиме рассматривается информация цвета в каждом изображении, и значение инверсии умножается на значение накладываемого и основного цвета. Итоговый цвет всегда более светлый.
	Осветление основы	В этом режиме рассматривается информация цвета в каждом изображении и основной цвет заменяется более ярким для отражения накладываемого цвета в результате уменьшения контраста между двумя цветами.
Контрастность	Перекрытие	В этом режиме цвета умножаются или осветляются в зависимости от основного цвета. Узоры или цвета перекрывают существующие пиксели, оставляя неизменными светлые и темные участки основного цвета.
	Рассеянный свет	В этом режиме цвета становятся более темными или более светлыми в зависимости от накладываемого цвета. Полученный эффект аналогичен освещению изображения расплывчатым светом прожектора.
	Жесткий свет	В этом режиме цвета умножаются или осветляются в зависимости от накладываемого цвета. Полученный эффект аналогичен освещению изображения резким светом прожектора.
Инверсия	Разница	В этом режиме рассматривается информация цвета в каждом изображении и вычитается либо накладываемый цвет из основного цвета, либо основной цвет из накладываемого цвета в зависимости от того, какой цвет имеет большее значение яркости.
	Исключение	В этом режиме создается эффект, аналогичный создаваемому в режиме «Разница», но характеризующийся более низким контрастом.
Компонент	Оттенок	В этом режиме создается итоговый цвет со светимостью и насыщенностью основного цвета и цветовым тоном накладываемого цвета.
	Насыщенность	В этом режиме создается итоговый цвет со светимостью и цветовым тоном основного цвета и насыщенностью накладываемого цвета.
	Цвет	С помощью этого параметра создается итоговый цвет со светимостью основного цвета и с цветовым тоном и насыщенностью накладываемого цвета.
	Свечение	В этом режиме создается итоговый цвет с цветовым тоном и насыщенностью основного цвета и светимостью накладываемого цвета.

Хотите создать эффект наложения?

Прежде чем начать, изучите эти простые правила обработки объектов во время применения или изменения режимов наложения:

Оформление: применяется и влияет на весь объект.
Главный компонент: применяется и влияет на все экземпляры в вашем проекте дизайна. Например, если вы измените цвет объекта в главном компоненте, это изменение будет каскадно применено ко всем экземплярам в вашем проекте дизайна.
Экземпляр компонента: переопределяет примененные режимы наложения в экземплярах компонентов.
Повторяющаяся сетка: применяется ко всем ячейкам.
Совместимость: сохраняет эффект наложения при работе с Photoshop, Illustrator, Sketch и After Effects.

Выберите изображение или объект (включая фигуры, текстовые слои, группы, маски или компоненты) на холсте дизайна. В инспекторе свойств выберите и примените режим наложения по своему выбору.

Для переключения уровней отображения примененных режимов наложения также можно использовать Option Shift + / - в MAC и Alt Shift + / - в WIN.

Для предварительного просмотра примененного эффекта режима наложения выберите .

Ограничения

Режимы наложения не поддерживаются при следующем поведении объектов:

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

Примеры

Хотите создать плакат с эффектами наложения? Выберите изображение на холсте и в инспекторе свойств выберите и примените следующие параметры наложения, чтобы получить такие потрясающие результаты:

Жесткий свет
Разница
Экран
Затемнение основы

Исходное изображение
Затемнение основы	Жесткий свет
Разница	Экран

Руководства

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

Время просмотра: 1 мин.

Что дальше?

Теперь вы знаете все необходимое для начала работы с режимами наложения в Adobe XD. Интерфейс Adobe XD интуитивно понятен, поэтому вам наверняка будет просто научиться работать с цветами, размытием и т. д.

Есть вопрос или идея?

Если вы хотите задать вопрос или поделиться интересной идеей, вступайте в сообщество Adobe XD. Мы будем рады услышать ваши идеи и увидеть ваши работы.

Проектируйте прототипы пользовательских интерфейсов при помощи Adobe XD
Создавайте интерактивные макеты для веб-сайтов и мобильных приложений.

Открыть приложение

Создание и изменение градиентов

Обучение

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

Сообщество

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

Главная страница Adobe

Получите доступ к вашим любимым приложениям Creative Cloud, сервисам, управлению файлами и многому другому.