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

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

  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. В разделе экспорта не представлены сторонние приложения

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

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

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

Уже пользуетесь Adobe XD?

Обновить приложение

Ознакомьтесь с новыми возможностями

Попробуйте сами

Получить файл-образец

.xd; 13 МБ

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

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

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

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

Вы можете применять 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. Мы будем рады услышать ваши идеи и увидеть ваши работы.

Логотип Adobe

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