Как экспортировать картинку в adobe 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, а затем перетащите, чтобы временно отключить умные направляющие.
Лучше всего создать отдельную монтажную область для руководства по стилю, в которую вы поместите все атрибуты айдентики, а также цвета бренда, типографику, общие стили и элементы управления, такие как кнопки, ввод данных и общие иконки.
Узнайте, как экспортировать готовые к использованию ресурсы из Adobe XD в форматах PNG, SVG, JPG и PDF.
Вы можете экспортировать ресурсы, такие как растровые изображения, значки и фоновые рисунки, текст и монтажные области из XD в форматах PNG, SVG, JPG и PDF. Эти экспортированные ресурсы оптимизированы для развертывания в iOS, Android или в веб-приложениях.
Если вы используете XD на macOS, вы также можете добавить свои проекты в сторонние среды, например Zeplin, Avocode, Sympli, Kite Compositor и Protopie.
macOS
Выберите объект или монтажную область, перейдите в раздел Файл > Экспорт или нажмите Cmd+E.
Windows
Выберите объект или монтажную область и перейдите в раздел Файл > Экспорт.
- Пакетная обработка. Вы можете выполнить пакетную обработку ресурсов для экспорта, отмеченных с помощью параметра Отметить для экспорта в инспекторе свойств. Чтобы экспортировать несколько объектов как один ресурс, сгруппируйте эти объекты перед экспортом.
- Выбрано. Вы можете выбирать и экспортировать отдельные ресурсы.
- Все монтажные области. Вы можете выбрать все монтажные области для экспорта из проекта дизайна.
- After Effects. Вы можете выбрать ресурс для экспорта в After Effects.
Пометка слоев для экспорта
Слои, помеченные для экспорта, включены в спецификации дизайна как ресурсы. Чтобы пометить ресурсы для экспорта, выберите любой слой на холсте и выполните одно из следующих действий:
- Нажмите правой кнопкой мыши на слой на холсте и выберите «Пометить для экспорта» из выпадающего списка.
- Откройте панель слоев и щелкните значок отметки для экспорта рядом с названием слоя.
Ресурсы — это файлы дизайна, которые нужны разработчикам, чтобы воссоздать продукт вашего дизайна с помощью HTML/CSS/JS на веб-сайте или с помощью языков Swift или Java в приложениях для iOS и Android.
Как правило, самыми распространенными ресурсами являются растровые изображения, значки и фоновые рисунки, которые вы можете экспортировать в следующих форматах: PNG, SVG, PDF, JPG.
Learn how to export production-ready assets from Adobe XD to PNG, SVG, JPG, and PDF file formats.
You can export assets such as bitmap images, icons and background patterns, text, and artboards from XD as PNG, SVG, JPG, and PDF. These exported assets are optimized for deployment on iOS, Android, or the web apps.
If you are using XD on macOS, you can also bring your designs into third-party integrations such as Zeplin, Avocode, Sympli, Kite Compositor, and Protopie.
macOS
Select an object or an artboard, navigate to File > Export or press Cmd + E.
Windows
Select an object or an artboard and navigate to File > Export.
- Batch: You can batch export assets that are marked using Mark for Export option in the Property Inspector. To export multiple objects as a single asset, group the objects before export.
- Selected: You can select and export specific assets.
- All artboards: You can select all the artboards for export in a design project.
- After Effects: You can select the asset to export to After Effects.
Mark layers for export
Layers marked for export are included as assets in design specs. To mark assets for export, select any layer on canvas, and use any of the following options:
- Right-click the layer on the canvas and choose Mark for Export from the drop-down.
- Open the layers panel and click the mark for export icon next to the layer name.
Assets are design files required by the developers to re-create what you designed, using HTML/CSS/JS in a website, or native languages like Swift or Java in iOS and Android apps.
In general, the most common assets are bitmap images, icons, and background patterns that you can export in these formats: PNG, SVG, PDF, JPG.
Если ты пользователь 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,” — говорит Пол.
Unless the front-end developers who are going to code your designs are independent enough to retrieve the design assets directly from your XD file, chances are you will be the one having to export all the assets for them.
By assets, I mean those design files that will be needed by the developers to re-create what you designed, using HTML/CSS/JS in case of a website, or native languages like Swift or Java in case of iOS and Android apps.
In general, the most common assets are bitmap images, icons and background patterns.
You might also need to simply export some of your artboards in order to present your work to your clients or coworkers.
At the moment, in Adobe XD you can export design assets as PNG, PDF, SVG and JPG formats.
To export one or more assets:
1. Select one or multiple objects directly from your artboards or from the layers panel.
2. Select File > Export, or use the shortcut CMD + E (Mac) & CTRL + E (Win)
3. Select the format you need (PNG, PDF, SVG or JPG). There are different export options for each of these formats.
Export as PNG
When exporting assets as PNG, first of all you have to choose which platform you want them to be exported for:
• Design: The default option where your asset is exported at 1x resolution. Choose this if for example you just want to export one of your artboards.
• Web: Assets are exported at 1x and 2x resolutions.
• iOS: Assets are exported at 1x, 2x, and 3x resolutions.
• Android: Assets are optimised and exported for all the currently available Android screen densities: ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi
After choosing the target platform, you need to select the resolution at which you created your designs, from the “Designed at” dropdown menu.
Chances are you designed at 1x (if you used the default artboard sizes provided by XD). Some designers prefer to design at higher resolutions, like 2x or even 3x.
E xample: if I design an iPhone7 screen at 2x, my artboard size will be 750×1334 px, which is twice the size of the standard 1x artboard 375×667.
In this case, when I export assets, I will have to select “2x” from the “Designed at” dropdown menu.
As a last step, select the destination folder and click on the Export button.
Export as SVG
This format is widely used for icons or other vector assets which need to scale on different screen sizes without losing quality, for example in responsive websites.
When exporting as SVG, you have two options to choose from:
- Embed: the bitmap image you are saving is placed into the SVG file itself.
- Link: the bitmap image you are saving is stored separately, and a reference to it is added in the SVG file.
In doubt, just choose the Embed option.
You can also tick the “Optimize asset” checkbox if you want lighter assets in terms of file sizes (the code within the SVG file will be minified, resulting in smaller file).
Export as PDF
PDF is not a format used when coding web or mobile apps or websites, but it might come in handy if you need to share your designs with clients, stakeholders or coworkers.
Select the artboards or objects you want to export and choose if you want to export them as a Single PDF file (all artboards will be included in the same PDF file) or as Multiple PDF files (each artboard will be saved as an individual PDF file).
Quick export (copy and paste)
If you need to quickly show your work without having to save a file on your machine, you can quickly do that by selecting your artboard or object, copying it and then pasting it into a chat window (Slack, Skype, Whatsapp Desktop ..) or an email.
This is really useful when you need a quick feedback from clients or coworkers.
Читайте также: