Руководство пользователя Отмена

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

  1. Руководство пользователя Adobe XD
  2. Введение
    1. Новые возможности Adobe XD
    2. Распространенные вопросы
    3. Создание дизайна, прототипов и совместная работа в Adobe XD
    4. Системные требования
      1. Требования к оборудованию и программному обеспечению
      2. Adobe XD, Big Sur и Apple Silicon | macOS 11
    5. Основные сведения о рабочей среде
    6. Изменение языка приложения в Adobe XD
    7. Доступ к наборам для дизайна пользовательского интерфейса
    8. Доступность в Adobe XD
    9. Сочетания клавиш
    10. Советы и рекомендации
    11. Варианты условий подписки на Adobe XD
    12. Изменения в начальном плане XD
  3. Дизайн
    1. Монтажные области, направляющие и слои
      1. Начало работы с монтажными областями
      2. Использование направляющих и сеток
      3. Создание прокручиваемых монтажных областей
      4. Работа со слоями
      5. Создание групп прокрутки
    2. Фигуры, объекты и путь
      1. Выделение, изменение размера и поворот объектов
      2. Перемещение, выравнивание, распределение и упорядочивание объектов
      3. Группирование, блокирование, дублирование, копирование и зеркальное отражение объектов
      4. Задание обводки, заливки и теней для объектов
      5. Создание повторяющихся элементов
      6. Создание перспективных проектов с помощью 3D-преобразований
      7. Редактирование объектов с помощью логических операций
    3. Текст и шрифты
      1. Работа с инструментами для рисования и создания текста
      2. Шрифты в Adobe XD
    4. Компоненты и состояния
      1. Работа с компонентами
      2. Работа с вложенными компонентами
      3. Добавление нескольких состояний для компонентов
    5. Маскировка и эффекты
      1. Создание маски с фигурами
      2. Работа с эффектами размытия
      3. Создание и изменение градиентов
      4. Применение эффектов наложения
    6. Макет
      1. Адаптивное изменение размера и ограничения
      2. Установка фиксированного отступа для компонентов и групп
      3. Создание динамичных проектов с подборками
    7. Видео и анимации Lottie
      1. Работа с видео
      2. Создание прототипов при помощи видео
      3. Работа с анимацией Lottie
  4. Создание прототипа
    1. Создание интерактивных прототипов
    2. Анимирование прототипов
    3. Свойства объекта, которые поддерживаются при автоматическом анимировании
    4. Создание прототипов с клавиатуры и геймпада
    5. Создание прототипов с помощью голосовых команд и воспроизведения
    6. Создание синхронизированных переходов
    7. Добавление наложений
    8. Создание голосовых прототипов
    9. Создание якорных ссылок
    10. Создание гиперссылок
    11. Предварительный просмотр проектов и прототипов
  5. Публикация, экспорт и проверка
    1. Публикация выбранных монтажных областей
    2. Предоставление совместного доступа к проектам и прототипам
    3. Настройка разрешений на доступ к ссылкам
    4. Работа с прототипами
    5. Просмотр прототипов
    6. Работа со спецификациями дизайна
    7. Предоставление общего доступа к спецификациям дизайна
    8. Проверка спецификаций дизайна
    9. Навигация в спецификациях дизайна
    10. Проверка и комментирование спецификаций дизайна
    11. Экспорт ресурсов дизайна
    12. Экспорт и загрузка ресурсов из спецификаций дизайна
    13. Корпоративный групповой совместный доступ
  6. Системы дизайна
    1. Системы дизайна с библиотеками Creative Cloud Libraries
    2. Работа с ресурсами документа в Adobe XD
    3. Работа с библиотеками Creative Cloud Libraries в Adobe XD
    4. Переход от связанных ресурсов к библиотекам Creative Cloud Libraries
    5. Работа с проектными токенами 
    6. Использование ресурсов из библиотек Creative Cloud Libraries
  7. Облачные документы
    1. Облачные документы в Adobe XD
    2. Совместная работа и совместное редактирование проектов
    3. Совместное редактирование документов, к которым вам предоставили доступ
  8. Интеграция и плагины
    1. Работа с внешними ресурсами
    2. Работа с ресурсами проекта из Photoshop
    3. Копирование ресурсов из Photoshop
    4. Как импортировать или открыть проекты Photoshop
    5. Работа с ресурсами Illustrator в Adobe XD
    6. Импортирование и открытие проектов Illustrator
    7. Копирование векторных объектов из Illustrator в XD
    8. Плагины для Adobe XD
    9. Создание плагинов и управление ими
    10. Интеграция Jira с XD
    11. Подключаемый модуль Slack для XD
    12. Подключаемый модуль Zoom для XD
    13. Публикация работы из XD на Behance
  9. XD для iOS и Android
    1. Предварительный просмотр на мобильных устройствах
    2. Часто задаваемые вопросы по Adobe XD для мобильных устройств
  10. Устранение неполадок
    1. Выявленные неполадки и исправленные ошибки
      1. Выявленные неполадки
      2. Исправленные неполадки
    2. Установка и обновления
      1. XD отображается как несовместимый в Windows
      2. Код ошибки 191
      3. Код ошибки 183
      4. Проблемы при установке плагинов XD
      5.  Запрос на удаление и переустановку XD в Windows 10
      6. Проблемы с миграцией предпочтений
    3. Запуск и сбой
      1.  XD аварийно завершает работу при запуске в Windows 10
      2.  XD закрывается при выходе из Creative Cloud
      3. Проблема со статусом подписки в Windows
      4. Предупреждение о заблокированном приложении при запуске XD в Windows
      5. Создание аварийного дампа в Windows
      6. Сбор и отправка журнала сбоев
    4. Облачные документы и библиотеки Creative Cloud Libraries
      1. Проблемы с облачными документами XD
      2. Проблемы со связанными компонентами
      3. Проблемы с библиотеками и ссылками
    5. Прототип, публикация и обзор
      1. Не удается записать взаимодействия прототипов в macOS Catalina
      2. Проблемы с процессами публикации
      3. Опубликованные ссылки не отображаются в браузерах
      4. Прототипы некорректно отображаются в браузерах
      5. На общих ссылках внезапно появляется панель комментариев
      6. Невозможно опубликовать библиотеки
    6. Импорт, экспорт и работа с другими приложениями
      1. Импорт и экспорт в XD
      2. Файлы Photoshop в XD
      3. Файлы Illustrator в XD
      4. Экспорт из XD в After Effects
      5. Файлы Sketch в XD
      6. В разделе экспорта не представлены сторонние приложения

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

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

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

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

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

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

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

  • Основной цвет — самый нижний цвет в иллюстрации.

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

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

Условия наложения

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

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

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

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

    • Оформление: применяется и влияет на весь объект.
    • Главный компонент: применяется и влияет на все экземпляры в вашем проекте дизайна. Например, если вы измените цвет объекта в главном компоненте, это изменение будет каскадно применено ко всем экземплярам в вашем проекте дизайна.

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

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

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

Ограничения

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

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

Примеры и образцы файлов

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

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

Руководства

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

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

Что дальше?

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

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

Спросите сообщество

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

Логотип Adobe

Вход в учетную запись