Как открыть xd в фотошопе
Я был приятно удивлен, когда впервые попробовал Adobe XD. Для дизайнера, который до сих пор использует Photoshop для UI дизайна и никогда не пробовал Sketch – это просто глоток свежего воздуха.
Интерфейс прост и интуитивно понятен. Нет необходимости долго обучаться работе с ним. Он занимает мало места и прост. Создание интерактивных прототипов и запись видео просто завораживают.
Но вот, какой вопрос мучил меня с самого начала. И этот вопрос на самом деле является очень болезненным и знакомым: Как экспортировать объекты для передачи их разработчику? Вот истинная причина, почему я не использую Sketch в работе. Дело в том, что большинство разработчиков, с которыми я сталкиваюсь, ожидают получить именно PSD файл.
И вот, что я сделал:
Создал артборд для каждой иконки/объекта и отключил заливку фона так, чтобы все элементы были на прозрачном фоне. Если вы используете шрифт иконок, убедитесь, что он у вас переведен в векторный формат: Выберите все иконки и перейдите по Object / Path / Convert to Path
Шаг 1: Создание артбордов
Теперь переходим к File / Export и экспортируем все артборды в PNG (1x, 2x, 3x) или в SVG формате. Таким образом, у вас каждый объект будет отдельным файлом к большой радости разработчика.
Шаг 2: Экспорт артбордов Экспортированные объекты в PNG (1x, 2x, 3x) Экспортированные объекты в SVG
Также вы можете экспортировать один объект. Выберите его и снова перейдите по File / Export и вам будет экспортирован только один объект
Правда я заметил одну проблему: при экспорте к SVG файлу добавляется квадратный фон (хотя я удаляю заливку фона). Надеюсь, что это баг и Adobe его скоро пофиксит.
Баг при экспорте в SVG
Спасибо за внимание, надеюсь моя статья вам поможет. Кстати, я – фриланс UX/UI дизайнер. Оцените мои работы на Product Hunt и следите за моими обновлениями в Twitter @mightyalex.
Полный список поддерживаемых функций при открытии файла Photoshop в XD.
В XD добавлены элементы и эффекты Photoshop, которые можно сопоставить с функциями XD; остальные либо растрируются, либо пока не передаются в файл XD.
Команда XD работает над улучшением этой функции. Оставьте свой отзыв в UserVoice.
Ниже приведен полный список поддерживаемых и неподдерживаемых функций при открытии файла Photoshop в XD.
- Плотность и растушевка не импортируются
- Повернутые фигуры всегда переносятся в виде контуров независимо от их исходного типа (прямоугольник, эллипс и т. д.)
- Трафаретная заливка
- Множественные тени
- Непрозрачность заливки
- Конусовидные, зеркальные или ромбовидные градиентные заливки
Указанные ниже свойства теней и внутренних теней не поддерживаются.
- Режим наложения
- Размах
- Контур
- Шум
- Просвечивание
- Сглаживание
Остановки прозрачности и средние точки для градиентных заливок не поддерживаются.
Следующие градиенты не поддерживаются:
- Угловые градиенты
- Зеркальные градиенты
- Ромбовидные градиенты
Остановки прозрачности и средние точки, преобразованные в обычные остановки, не поддерживаются.
Следующие эффекты растрируются при переносе в XD:
- Внутренняя тень
- Фаска
- Тиснение
- Свечение
- Глянец
- Наложение цвета
- Наложение градиента
- Перекрытие узором
- Тень
Следующие функции не поддерживаются:
- Плотность и растушевка
- Эффекты на обрезанных слоях
Маски слоев импортируются как маскирующие прямоугольники в XD.
- Видимость монтажной области игнорируется.
- Частичные блокировки рассматриваются как полные.
Предустановки монтажных областей, сетки монтажных областей и направляющие не переносятся в файл XD.
Следующие текстовые функции не поддерживаются:
- Текст по контуру
- Типографические функции: кернинг, масштабирование, маленькие заглавные буквы, надстрочный и подстрочный индекс, зачеркивание
- Стили абзаца: несколько стилей на слой, отступ абзаца и пробел до/после выравнивания
- Сглаживание и языковые параметры
- Вертикальный текст импортируется как горизонтальный
- Деформация текста
Смарт-объекты преобразуются в слои с высокой точностью и возможностью редактирования.
Когда вы нарезаете хлеб или разделываете мясо, выбор правильного ножа делает задачу проще и безопаснее. Дизайн ничем не отличается. За последние несколько лет процесс разработки дизайна изменился и повлиял на роли и обязанности дизайнера. Пространства, для которых мы проектируем, разветвляются и раскалываются. Дизайн подвижен и происходит не изолированно.
Ножи регулярно затачиваются, для того чтобы не тупились. Программное обеспечение регулярно обновляется, для того, чтобы обеспечить его актуальность и бесперебойную работу. Шеф-повар никогда не использует один и тот же нож для каждой задачи. Кухня шеф-повара оснащена несколькими ножами, которые выполняют различные задачи, такие как разделка, нарезка, и обрезка.
Adobe Creative Cloud—это дизайнерская кухня. Где каждое приложение—инструмент, оптимизированный под конкретную задачу. Будь то печать, интернет, экран, видео или аудио. В Creative Cloud, есть приложение, оптимизированное для каждого из этих носителей.
Adobe XD был разработан с аналогичной целью—специализированная платформа для дизайна и прототипирования опыта. C другой стороны, Photoshop и Illustrator не были созданы для UX дизайна. Эти инструменты имеют многолетний опыт основных рабочих процессов, к которым они прислушиваются, и продолжают развиваться по-своему. Photoshop всегда был и будет являться приложением для фотографий, редактирования изображений и искусства. Illustrator по-прежнему будет предназначением для всего, что связанно с векторной графикой.
Adobe XD—это платформа предназначенная для дизайна и прототипирования опыта, тем не менее, Photoshop и Illustrator, также являются незаменимыми инструментами для UX дизайнера. Очень часто нам необходимо отредактировать изображения в Photoshop или подкорректировать векторные иллюстрации с помощью Illustrator. Мы постоянно разрываемся между различными приложениями, для того, чтобы выполнить работу максимально эффективно. Ниже я опишу несколько различных способов, с которыми вы можете работать и перемещать контент между различными приложениями и XD.
1. Откройте документ Photoshop в XD
Чтобы удовлетворять свои потребности в проектировании экранов, на протяжении многих лет дизайнеры полагались на Photoshop. Мы понимаем проблемы привыкания и перехода на новый инструмент, в виду отсутствия доступа к работам за предыдущие несколько лет. С самым последним обновлением вы имеете возможность открывать документы PSD в Adobe XD, с любым артбордом содержащим слои, в неизменном виде, и возможностью для их редактирования. Это позволяет вам работать с PSD используя уникальные возможности XD, такие, как прототипирование и совместное использование.
Adobe Experience Design — отличное приложение для UI / UX дизайнеров, среди всех прочих функций, оно предоставляет вам возможности как для разработки дизайна, так и для создания взаимодействия прототипа с переходами между монтажными областями. Вот список моих любимых советов и трюков, которые позволят вам использовать потенциал XD.
Вот 40-минутное видео, которое я сделал, а ниже вы найдете резюме:
Вы можете создавать простые макеты и вайрфреймы с помощью мобильного приложения Adobe Comp для iOS и Android. Преимущественно быстрое и интуитивное прототипирование с применением пальца или стилуса с множеством предопределенных жестов. Также легко создать вайрфрейм на встрече с вашим клиентом. Несмотря на то, что Adobe Comp не поддерживает экспорт в Adobe XD, вы можете экспортировать в Illustrator, а затем скопировать и вставить в Adobe XD для редактирования векторных фигур.
Если вы хотите передать растровые изображения между Photoshop и Adobe XD, просто сделайте выделение в Photoshop, а затем нажмите Cmd + Shift + c (скопировать все объединенные копии, которые отображаются при выделении), а затем нажмите Cmd + v в Adobe XD. Однако, вы также можете экспортировать векторные слои из Photoshop, щелкнув правой кнопкой мыши на слой и выбрав “Копировать SVG” и вставить в XD.
В Adobe XD вы можете включить сетку для монтажных областей с помощью горячих клавиш Cmd + ‘. По умолчанию сетка имеет значение 8 px, поэтому сдвиг Shift + стрелка влево / вправо не помещается в сетку. Нажмите на название монтажной области, чтобы выбрать её, и измените значение по умолчанию 8px на 10 пиксельную сетку, чтобы соответствовать значению сдвига. Сделайте это по умолчанию для дальнейших проектов.
Сейчас в Adobe XD, нет таких направляющих, как в Photoshop, тем не менее умные направляющие появляются при перетаскивании и обеспечивают более удобное позиционирование элементов. Однако иногда такое поведение по умолчанию может привести к нежелательной привязке. Просто нажмите Cmd, а затем перетащите, чтобы временно отключить умные направляющие.
Лучше всего создать отдельную монтажную область для руководства по стилю, в которую вы поместите все атрибуты айдентики, а также цвета бренда, типографику, общие стили и элементы управления, такие как кнопки, ввод данных и общие иконки.
Читайте также: