Обуздайте мощь Photoshop и Illustrator с помощью Adobe XD

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

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

Adobe Creative Cloud—это дизайнерская кухня. Где каждое приложение—инструмент, оптимизированный под конкретную задачу. Будь то печать, интернет, экран, видео или аудио. В Creative Cloud, есть приложение, оптимизированное для каждого из этих носителей.

Adobe XD был разработан с аналогичной целью—специализированная платформа для дизайна и прототипирования опыта. C другой стороны, Photoshop и Illustrator не были созданы для UX дизайна. Эти инструменты имеют многолетний опыт основных рабочих процессов, к которым они прислушиваются, и продолжают развиваться по-своему. Photoshop всегда был и будет являться приложением для фотографий, редактирования изображений и искусства. Illustrator по-прежнему будет предназначением для всего, что связанно с векторной графикой.

Adobe XD—это платформа предназначенная для дизайна и прототипирования опыта, тем не менее, Photoshop и Illustrator, также являются незаменимыми инструментами для UX дизайнера. Очень часто нам необходимо отредактировать изображения в Photoshop или подкорректировать векторные иллюстрации с помощью Illustrator. Мы постоянно разрываемся между различными приложениями, для того, чтобы выполнить работу максимально эффективно. Ниже я опишу несколько различных способов, с которыми вы можете работать и перемещать контент между различными приложениями и XD.

Слева документ Photoshop. Справа, тот же документ Photoshop в Adobe XD.
Слева документ Photoshop. Справа, тот же документ Photoshop в Adobe XD.

1. Откройте документ Photoshop в XD

Чтобы удовлетворять свои потребности в проектировании экранов, на протяжении многих лет дизайнеры полагались на Photoshop. Мы понимаем проблемы привыкания и перехода на новый инструмент, в виду отсутствия доступа к работам за предыдущие несколько лет. С самым последним обновлением вы имеете возможность открывать документы PSD в Adobe XD, с любым артбордом содержащим слои, в неизменном виде, и возможностью для их редактирования. Это позволяет вам работать с PSD используя уникальные возможности XD, такие, как прототипирование и совместное использование.

  • Совет. Используйте повторно в Adobe XD, любой UI kit или шаблон, разработанный для Photoshop. Поскольку XD не поддерживает некоторые функции Photoshop, есть определенные области дизайна, которые импортируются как растровые изображения. Подробнее о поддерживаемых элементах вы можете прочитать здесь.

Копирование нескольких слоев из PS в XD

2. Копирование слоев из документа Photoshop в XD

Вам не обязательно переносить весь документ в Adobe XD. Порой, всё что вам нужно, это куча слоёв из Photoshop. Самый быстрый способ перенести слой из Photoshop в XD—использовать copy/paste (копировать/вставить). Вы можете копировать как растровое изображение так и SVG прямо из Photoshop. В XD есть простые операции для вставки и переноса этих слоёв.

  • Совет. Это эффективно, если вам не требуется рабочий процесс в обоих приложениях одновременно, включающий в себя редактирование слоёв в Photoshop и актуализацию их в XD. Обратитесь к разделу библиотека Creative Cloud ниже, если вам нужен связанный рабочий процесс.

Связанный рабочий процесс редактирования графики Ps с использованием библиотеку Creative Cloud

3. Работа со связанной графикой Photoshop в XD

Если вам нужно отредактировать растровые изображения и повторно использовать их в своих прототипах, библиотеки Creative Cloud—это самый эффективный способ управления рабочим процессом приложений в связке. Добавьте растровое изображение в библиотеку Creative Cloud внутри Photoshop. С помощью окна библиотеки Creative Cloud (command-shift-L), вы можете поместить растровое изображение как связанную графику в XD. Теперь у вас есть возможность редактировать свои растровые изображения в Photoshop, в то время как они изменятся в XD.

  • Совет. Использование библиотеки Creative Cloud, позволяет размещать как связанную графику, так и несвязанную (alt drag). Если в какой-то момент вам понадобится отключить графику, просто нажмите иконку ссылки или используйте контекстное меню, чтобы отключить связь. Выключение связи предотвратит обновление графики, а также любых других изменений.

Копирование векторных иллюстраций из Ai в XD

4. Копирование слоёв из документа Illustrator в XD

Вам также не всегда обязательно переносить весь документ из Illustrator. Порой, всё что вам нужно, это куча слоёв. Самый быстрый способ перенести объекты из Illustrator в XD—использовать copy/paste (копировать/вставить). Скопируйте из Illustrator как SVG и вставьте в XD. Поскольку XD—это инструмент для рисования на основе вектора, вы можете продолжить редактирование контуров объекта.

  • Совет. Это эффективно, если вам не требуется рабочий процесс в обоих приложениях одновременно, включающий в себя редактирование слоёв в Illustrator и актуализации их в XD. Обратитесь к разделу CC Library ниже, если вам нужен связанный рабочий процесс.

Редактирование связанной графики Ai с использованием библиотеку Creative Cloud

5. Работа со связанной графикой Illustrator в XD

Если вам нужно отредактировать векторные изображения и повторно использовать их в своих прототипах, библиотеки Creative Cloud—это самый эффективный способ управления рабочим процессом приложений в связке. Добавьте векторный объект в библиотеку Creative Cloud внутри Illustrator. С помощью окна библиотеки Creative Cloud (command-shift-L), вы можете поместить векторный объект как связанную графику в XD.

  • Совет. Использование библиотеки Creative Cloud, позволяет размещать как связанную графику, так и несвязанную (alt drag). Если в какой-то момент вам понадобится отключить графику, просто нажмите значок ссылки или используйте контекстное меню, чтобы отключить связь.  Отключение связи предотвратит обновление графических, а также любых изменений.

Использование библиотеки Creative Cloud для стилей

6. Использование цветов и текстовых стилей из Photoshop и Illustrator

Illustrator и Photoshop использовались в создании стилей для нескольких проектов. Используя библиотеку Creative Cloud, вы можете сохранять цвета и текстовые стили из документов вашего бренда или листов стикеров. Повторно примените эти цвета и стили текста, с помощью окна библиотеки Creative Cloud в XD.

Слева, документ Sketch. Справа тот же документ Sketch в Adobe XD
Слева, документ Sketch. Справа тот же документ Sketch в Adobe XD

7. Открытие документа Sketch в XD

Начиная с мартовского обновления, позволено открывать документы Sketch с помощью Adobe XD. Это даёт возможность легко перенести предыдущую работу из Sketch в XD. Если ваш документ содержит символы, мы автоматически добавляем эти символы на панель Assets (Ресурсы) в XD.