Если ты пользователь Photoshop, который ещё не пробовал Adobe XD, тогда сейчас самое время. Adobe XD даёт тебе, не только, замечательную возможность, подключить свой дизайн Photoshop, и преобразовать его в интерактивный прототип приложения и веб-сайта, а также интуитивно понятный интерфейс, который делает работу в обоих программах, простым и эффективным рабочим процессом, включающим в себя мощные функции для совместного использования своего дизайна и получения обратной связи. Вот некоторые простые шаги, от старшего евангелиста Creative Cloud, веб-дизайнера Пола Трани, которые помогут тебе получить файлы Photoshop в Adobe XD, а также несколько ключевых советов, которые помогут тебе использовать по максимуму рабочий процесс нескольких программ, чтобы перевести твой дизайн на новый уровень.
Начни: Импорт своих PSD файлов в Adobe XD
- Скачай Adobe XD или попробуй бесплатную пробную версию.
- Создай новый проект, и нажми File > Open. Найди .PSD файл и открой его.
- Adobe XD импортирует твой файл Photoshop, вместе со всеми слоями, эффектами, группами и масками с абсолютной точностью, позволяя тебе управлять .PSD в Adobe XD и использовать его фоны, иконки и прочее.
- Используй инструменты Adobe XD, чтобы начать проектировать своё приложение или веб-сайт. Переключись в режим прототипа и начни соединять экраны, чтобы создать полностью интерактивный прототип.
- Посмотри, как оживает твой дизайн Photoshop, когда становится полностью интерактивным прототипом приложения и веб-сайта.
“Это так же просто, как открыть PSD прямо в XD и погрузиться в него. Когда ты загрузил свой ресурс Photoshop в XD, собери его в прототип, соединив несколько экранов вместе. Все слои импортируются отдельно, поэтому всё получается ровно, красиво и аккуратно,” — говорит Пол.
Копируй и вставляй свой дизайн Photoshop в Adobe XD
Если ты работаешь в Photoshop, и хочешь перенести свой дизайн в Adobe XD, ещё быстрее,то ты можешь просто скопировать и вставить свою работу в программу. Это значит, что ты можешь переносить отдельные слои, изображениями Photoshop, или весь дизайн как единое изображение, объединив все слои. Вот шаги для копирования и вставки своего дизайна Photoshop в Adobe XD:
- С помощью инструмента Marquee в Photoshop выбери контент, который ты хочешь скопировать, в XD.
- Нажми Edit > Copy в Photoshop, чтобы скопировать содержимое текущего слоя или выбери Edit > Copy Merged, чтобы скопировать весь контент на всех слоях в пределах выбранной области.
- Открой Adobe XD и нажми Edit > Paste, чтобы вставить скопированный слой или весь дизайн в XD, как растровое изображение.
Импортируй ресурсы Photoshop в Adobe XD с использованием библиотеки Creative Cloud
По словам Пола, лучший способ для работы — это импорт своих проектов Photoshop себе в библиотеку Creative Cloud, и использование этой библиотеки для доступа к своим ресурсам в Adobe XD. Это значит, что ты легко можешь использовать ресурсы Photoshop в прототипах своих приложений и веб-сайтов в XD, повторно редактировать эти ресурсы в Photoshop, и автоматически получать их в Adobe XD. Ниже приведены шаги по импорту своих ресурсов Photoshop в библиотеку Creative Cloud и доступа к ним в Adobe XD:
- Выбери контент, который ты хочешь импортировать в Photoshop. В правой части экрана в разделе Libraries нажми кнопку +. Убедись, что графика выбрана и нажми Add.
- В Adobe XD выбери File > Open CC Libraries. Нажми и перетащи свой ресурс Photoshop в проект Adobe XD.
- Теперь ты работаешь со связанным ресурсом. Любое изменение, внесенное тобой из Photoshop в этот ресурс, автоматически будет отражено в Adobe XD.
“Причина, по которой я буду использовать библиотеки Creative Cloud, заключается в том, что ресурсы в них связаны между собой. По тому я могу зайти в мою библиотеку, щелкнуть правой кнопкой мыши, отредактировать файл в Photoshop, для лёгкой настройки фона, и вернуться в XD после того, как я его подправил. Или если у тебя 15 различных артбордов, именно правильная связь в реальном времени, сделает твою жизнь намного проще,” — говорит Пол.
Используй повтор сетки для быстрого создания многоэкранного опыта своих ресурсов Photoshop
Если ты много работаете в Photoshop, вероятно, ты тратишь немало времени на небольшие корректировки нескольких визуальных элементов. Как только ты перенесешь ресурсы в Adobe XD, то сразу сможешь использовать мощную функцию повтор сетки (Repeat Grid), чтобы сэкономить время. С помощью повтора сетки, по сути, ты создаёшь группу объектов, которые могут включать в себя твой дизайн Photoshop. Изменения, внесенные в один артборд, будут автоматически применяться ко всем остальным.
“Когда дело доходит до создания нового дизайна, включающего в себя мелкие иконки или кнопки, использование такого инструмента, как повтор сетки, по-настоящему продвигает вперёд. Допустим у тебя должен быть экран, в котором есть пять различных элементов, а остальной его внешний вид не должен меняться, на разных артбордах, для этого в Photoshop, тебе придётся много раз дублировать содержимое. В XD очень легко создать последовательный опыт для всех артбордов используя свои ресурсы Photoshop,” — говорит Пол.
Делись своими прототипами и легко получай обратную связь по своему дизайну Photoshop
Основным преимуществом использования Adobe XD для дизайна и создания интерактивных прототипов, является способность легко делиться ссылками на свои творения и получать обратную связь. Это может быть эффективным для сбора отзывов о своих проектах Photoshop.
Чтобы начать совместно использовать интерактивный прототип, после того, как ты его сделал и связал вместе свои артборды, нажми кнопку совместного доступа в правом верхнем углу Adobe XD, а затем нажми Publish Prototype. После, ты можешь нажать Create Public Link, чтобы создать URL-адрес, которым можно поделиться с другими. Любой, с кем ты поделился ссылкой, может оставлять комментарии и выделять определённые аспекты дизайна.
“Если у меня есть ссылка и я хочу дать обратную связь по дизайну Photoshop, я могу закрепить комментарии в определённых частях прототипа Adobe XD, тому что когда-то было в Photoshop. Клиент может сказать, ‘эй, сделай это зеленым,’ и этот комментарий прикреплён к верхнему левому углу, где нужно сделать что-то зеленым. Всё это отслеживается, но ты всегда можешь решить это как дизайнер
(особенно если это связанные ресурсы), просто откатив изменения назад в Photoshop и потом обновить ссылку,” — говорит Пол.
Также ссылки, могут служить отличным инструментом для взаимодействия с разработчиками, так как по ссылке, они могут получить доступ к информации о размерах любых элементов.
Все ресурсы, необходимые для успешной работы в Adobe XD
Есть много преимуществ для работы в Photoshop и Adobe XD, но лучший способ эффективно создавать потрясающий дизайн, и превращать его во впечатляющие интерактивные прототипы веб-сайтов и приложений, — это использовать оба инструмента в тандеме. Вот ещё некоторые ресурсы, которые помогут тебе начать использовать Adobe XD:
- Выходные с Adobe XD: Всё, что тебе нужно для дизайна мобильного приложения — Всестороннее руководство, в котором ты найдёшь некоторые из лучших обучающих уроков Adobe XD, со всем, необходимым, чтобы применять ресурсы Photoshop и начать дизайн, прототипирование и совместное использование, уже сегодня.
- 5 бесплатных UI Kits для Adobe XD созданных лучшими UX дизайнерами — Когда ты будешь готов начать штамповать свой дизайн с помощью новых UI Kits, бесплатных ресурсов для Adobe XD, созданных топовыми UX дизайнерами, чтобы помочь тебе получить определённый внешний вид или функцию для прототипа твоего приложения или веб-сайта.
“Я думаю, что XD достаточно прост для любого пользователя Photoshop, чтобы познать его. Инструменты очень простые. Если ты знаешь Photoshop, тогда ты знаешь XD,” — говорит Пол.
