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

Создание перспективных проектов с помощью 3D-преобразований

Вам нужна информация о моделировании 3D-эффектов при создании иммерсивных и интерактивных сцен в Adobe XD? Вы обратились по адресу!

Функция 3D-преобразований позволяет имитировать глубину и перспективу объекта в проектах с минимальными усилиями. Посредством вращения любого объекта вокруг его горизонтальной и вертикальной осей, а также добавления глубины по оси Z вы можете имитировать такие визуальные эффекты, как трехмерные анимации, макеты в перспективе, зеркальное отражение карт и многое другое. 

Работа с 3D-преобразованиями
Зеркальное отражение с использованием 3D-преобразований

Прежде чем продолжить

Убедитесь, что вы знакомы с рабочими процессами создания проектов и прототипов в XD и их ограничениями.

Моделирование глубины и перспективы объекта

Вы можете применять 3D-преобразования к сложным композициям, таким как группы прокрутки, повторяющиеся сетки, подборки, отступы. При включенных 3D-преобразованиях вы можете управлять ориентацией объектов по осям X и Y, а также добавлять глубину по оси Z.

Включение 3D-преобразований

Чтобы включить 3D-преобразования, выберите требуемый объект и нажмите кнопку «3D-преобразования» в инспекторе свойств.

Включение 3D-преобразований

перемещение редактируемого элемента

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

Поворот объектов по оси X или Y

После активации значка 3D-преобразований  в инспекторе свойств выполните действия, описанные ниже, чтобы настроить ориентацию объектов по осям X и Y.

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

Поворот объекта вокруг оси X

Поворот объекта вокруг оси X

Помещает выбранный объект по оси X.

Поворот объекта вокруг оси Y

Поворот объекта вокруг оси Y

Помещает выбранный объект по вертикальной оси Y.

Добавление глубины по оси Z

Теперь, когда вы знаете, как включить 3D-преобразования и вращать объекты по осям X и Y, сделайте следующий шаг и узнайте о том, как использовать третье измерение — ось Z. 

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

Перемещение объекта по оси Z

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

На что следует обратить внимание

  • Значок 3D-преобразований используется только для отображения или скрытия элементов управления и самого редактируемого элемента. С его помощью вы не сможете создать 3D-среду или отключить преобразования, уже примененные в вашем оформлении.
  • При изменении размера объектов, использующих поворот по оси X или Y, значение глубины Z будет меняться автоматически, что может привести к переупорядочению содержимого. Например, при оформлении группы карточек с использованием перспективы каждая карточка вращается под одним углом, но с разной глубиной. Если выбрать несколько карточек и попытаться изменить их размер, то эта операция будет выполнена нормально. Однако при этом также будет изменяться положение каждой карты по оси Z, что будет приводить к переупорядочению содержимого.

  • При изменении значения глубины Z для любого объекта XD не поддерживает такие способы упорядочивания слоев как На передний план, На задний план и переупорядочивание с панели Слои.

Видео. Как работать с 3D-преобразованиями в XD?

«С помощью 3D-преобразований в Adobe XD вы можете моделировать глубину объекта и перспективу всего несколькими щелчками мыши на холсте дизайна», — Dani Beaumont, главный менеджер по продукту, Adobe XD.

Посмотрите этот видеоролик, чтобы научиться работать с 3D-преобразованиями в XD.

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

Советы и рекомендации

Вы уже знаете, как работать с 3D-преобразованиями в XD. Ниже вы найдете еще несколько полезных советов и рекомендаций.

  • В любое время вы можете быстро вернуть объект к двухмерному отображению. Щелкните правой кнопкой мыши выбранный объект и выберите Сбросить 3D-преобразования. Также для сброса 3D-преобразований можно воспользоваться кнопками ⌥⌘T в macOS и Alt + Ctrl + T в Windows.
  • Вы можете показать или скрыть элементы управления 3D-преобразованиями. Для отображения или скрытия элементов управления 3D-преобразованиями используйте кнопки ⌘T в macOS и Ctrl + T в Windows.

Что дальше?

Теперь вы знаете все необходимое для использования 3D-преобразований в своих проектах. Теперь рассмотрим, как их анимировать и открывать к ним доступ дизайнерам и другим участникам проекта для получения обратной связи.

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

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

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

Получайте помощь быстрее и проще

Новый пользователь?