Bringing in content from Photoshop
There are a lot of ways to bring content from Photoshop into XD: copy and paste, export from Photoshop and import into XD, import a Photoshop file (.psd) (which places the PSD content into the XD file), open a Photoshop file (.psd) directly in XD (which opens the PSD as a separate XD file), or place the content in a Creative Cloud Library and drag it into your design from the Creative Cloud Library panel in XD.
In this section, you’ll use a few different methods to bring content from Photoshop into your design in Adobe XD.
NOTE
If you don’t have the latest version of Adobe Photoshop CC installed on your machine, in Adobe XD you can choose File > Import (macOS) or click the menu icon (
) in the upper-left corner of the application window and choose Import (Windows). Navigate to the Lessons > Lesson04 > images folder and import the screen_header.png image file.
Copying and pasting from Photoshop to XD
To start, you’ll open a Photoshop document in Photoshop and copy content that you will then paste into your Adobe XD project.
Open the latest version of Adobe Photoshop CC.
Choose File > Open. Navigate to the Lessons > Lesson04 > images folder, select the file named journal.psd, and click Open. If the New Library From Document dialog box appears, click Cancel.
The Photoshop file contains a design with multiple artboards that contains layers of imagery, text, vector content, and more. Next, you’ll copy image content and paste it into Adobe XD as a flattened raster image.
Choose View > Fit On Screen.
The image at the top of the Journal artboard needs to be copied into your XD project, without the time and other status bar information currently on top of it. You can make a selection, select specific layers, and copy what you need or simply copy a selected area and paste a flattened raster image of that content.
Make sure the Layers panel is open. You can choose Window > Layers to see it.
In Photoshop, the Layers panel lists artboards along with layers. They’re marked by disclosure triangles, as groups are, but they lack the folder icons that groups display.
Click the disclosure triangle next to the Journal artboard name (it should be at the top of the list) to reveal the contents of the artboard. Scroll down in the Layers panel, if necessary, to see the layer named Journal Header Image. Click to select it.
Command-click (macOS) or Ctrl-click (Windows) the layer thumbnail to the left of the layer name in the panel to make a selection from the layer content.
Choose Edit > Copy to copy the image within the selection marquee.
Close Photoshop, without saving if asked. Back in Adobe XD, in the Travel_Design document, press Command+0 (macOS) or Ctrl+0 (Windows) to see all of the artboards, if you don’t already.
With the Select tool selected, click in the gray pasteboard away from the artboards to deselect all.
With nothing selected, press Command+V (macOS) or Ctrl+V (Windows) to paste the content into the center of the document window.
)
)
NOTE
Content you paste from Photoshop is a single flattened image in Adobe XD.
Drag the image below the Icons artboard.
Choose File > Save (macOS) or click the menu icon (
) in the upper-left corner of the application window and choose Save (Windows).
)
Opening a Photoshop file in Adobe XD
You can open Photoshop (.psd) files in Adobe XD, and they will be converted into XD files. When a Photoshop file is opened in XD, Photoshop elements and effects that can be mapped to XD’s functionality are available. The rest of the elements either are rasterized or don’t appear in the XD file. Next, in Adobe XD you’ll open a design started in Photoshop.
In Adobe XD, choose File > Open From Your Computer (macOS) or click the menu icon (
) in the upper-left corner of the application window and choose Open From Your Computer (Windows). Open the journal.psd document in the Lessons > Lesson04 > images folder.The Photoshop document is now an XD document called Journal, that is open in Adobe XD.
Press Command+0 (macOS) or Ctrl+0 (Windows) to see all of the content.
Most of the content on the two artboards is still editable in XD, but there are a few exceptions. For a listing of the supported features when you open Photoshop files in Adobe XD, see https://helpx.adobe.com/xd/kb/open-photoshop-files-in-xd.html.
With the Select tool (
) selected, click the text “Meng” in the Journal artboard.Open the Layers panel by clicking the Layers panel button (
) in the lower-left corner of the application window, if it isn’t already open. In the Layers panel, you’ll see a folder icon (
) to the left of the selected content named “Hike info,” which indicates a group of content. Click the folder icon to reveal everything in it. All of the text is still editable.Click the white status bar content at the top of the Journal artboard on the left.
The status bar content has been rasterized and is now a single image. You can tell because of the image icon (
) in the Layers panel to the left of the name. Next, you’ll copy one of the artboards into your project.Click in a blank area, away from the artboards, to deselect all. Then click the Journal ver2 artboard name above the artboard on the right. Press Command+C (macOS) or Ctrl+C (Windows) to copy the artboard and all of its content.
Choose File > Close (macOS) or click the X in the upper-right corner (Windows) to close the Journal document, without saving it.
Back in the Travel_Design.xd document, press Command+V (macOS) or Ctrl+V (Windows) to paste the artboard and content to the right of the iPad artboard.
Drag the group with the “Meng” text to the Journal artboard and drop it below the image.
To center the content on the Journal artboard, click the Align Center (Horizontally) button (
) at the top of the Property Inspector. The group is aligned to the horizontal center of the artboard.
)
)
)
)
)
)
NOTE
You can only open Sketch files created using Sketch version 43 or newer. If you have an older file, save the file using the latest version of Sketch, and then open the file in XD.
TIP
You can drag images directly from all modern web browsers onto your artboards. You can also drag the images into an object on an artboard; when you do so, the image size is automatically adjusted to fit the object.