Home / Articles / Adding Images and Text

Adding Images and Text

Chapter Description

In this sample chapter from Adobe XD CC Classroom in a Book (2018 release), learn how to import and transform images, plus add or format text.

Assets and Adobe XD

In the previous lesson, you explored creating and editing vector graphics. In this lesson, you’ll learn about the different types of assets you can import into Adobe XD, the different methods for bringing them in from programs like Illustrator, Photoshop, and Sketch, and how to work with them to fit your design.

When it comes to images, Adobe XD supports PNG, GIF, SVG, JPG, and TIFF images. In Adobe XD, images (both raster and vector) that you import are embedded in the XD file, since there is no image-linking workflow, by default, as you would find in Adobe InDesign.

Importing assets

In Adobe XD, there are several methods for adding assets to your projects. In this section, you’ll import a few assets into your design using the Import command.

  1. Choose File > Open (macOS) or click the menu icon (menu_icon.jpg) in the upper-left corner of the application window and choose Open (Windows). Open the App_Design.xd document in the Lessons folder (or where you saved it).

  2. Press Command+0 (macOS) or Ctrl+0 (Windows) to see all of the content.

  3. Click in the Home artboard in the document window.

  4. Choose File > Import (macOS) or click the menu icon (menu_icon.jpg) in the upper-left corner of the application window and choose Import (Windows). Navigate to the Lessons > Lesson04 > images folder. Click to select the image named “home.jpg.” Click Import.

    f0099-01.jpg

    JPEG images you import into Adobe XD are placed at half size. That means a JPEG that is 400 pixels x 400 pixels will be placed at 200 pixels x 200 pixels. The image is placed in the center of the selected artboard and is larger than the artboard. Any image content that is outside the bounds of the artboard is hidden. With the image selected, XD shows the masked content as semi transparent to give you a preview of what is hidden.

  5. With the Select tool (07com04.jpg) selected, drag the image until the top edge snaps to the top edge of the artboard, and ensure that it’s still centered on the artboard (a vertical aqua Smart Guide will appear when it’s centered).

  6. Drag the bottom, middle handle of the image up until the image is as tall as the artboard.

    The proportions of raster images are maintained when resizing by dragging.

  7. Click away from the image, in a blank area of the document window, to deselect it. You should now see that the image content that is outside the bounds of the artboard is hidden.

  8. Click in the artboard named “Nearby spots” to select it.

    Next, you’ll place an SVG file, along with a raster PNG.

  9. Choose File > Import (macOS) or click the menu icon (menu_icon.jpg) in the upper-left corner of the application window and choose Import (Windows). Navigate to the Lessons > Lesson04 > images folder. Click to select the image named “ocean_masked.png” and Command-click (macOS) or Ctrl-click (Windows) the image named “tide.svg.” Click Import.

    f0100-02.jpg

    Both images are placed next to each other, in a row, in the document window.

  10. Click in a blank area away from the selected images to deselect them. Drag the ocean_masked.png image into the center of the Nearby spots artboard (if necessary) and the tide.svg image onto the Detail artboard.

    f0101-01.jpg

    You may want to move the camera icon and blue button shape you created in the last lesson down, out of the way. The figure shows them in a different position.

  11. With the Select tool selected, click in the gray pasteboard away from the artboards to deselect all.

  12. In the Layers panel (Command+Y [macOS) or Ctrl+Y [Window]), click the Home layer name. Press the Command (macOS) or Ctrl (Windows) key and select the Login, Nearby spots, Detail, and “Instructor detail – Dann” artboards to select them all.

  13. Change the Margin Right and Margin Left values to 20 in the Property inspector. Press Return or Enter after the last value you entered. You may need to adjust the Gutter Width and Column Width values to achieve 20 for Margin Right and Margin Left.

    f0101-02.jpg
  14. Deselect the Grid option in the Property inspector to temporarily turn the grid off for the selected artboards.

    Turning off the grids will make it easier to focus on the content.

Importing assets via drag and drop

Another method for bringing assets into Adobe XD is to drag and drop from the Finder (macOS) or Windows File Explorer (Windows). This is a great way to insert images into existing frames, as you’ll see in a later section, “Masking with an image fill,” or as a more precise placement option.

  1. Press Command+0 (macOS) or Ctrl+0 (Windows) to see all of the artboards.

  2. With the Select tool (07com04.jpg) selected, click in a blank area away from artboards to deselect all.

  3. Go to the Finder (macOS) or Windows Explorer (Windows), open the Lessons > Lesson04 > images folder, and leave the folder open. Go back to XD. With XD and the folder showing, click the image named “beach.jpg.”

    The beach.jpg image has a dimension of 1300 pixels x 1135 pixels. As I mentioned, JPEGs you import are placed at half their original size.

  4. Command-click (macOS) or Ctrl-click (Windows) the image named “dann.png” to select both images. Release the key and drag either image into XD, just to the right of the artboard named “Instructor detail – Dann,” above the watch artboards.

    Both images are placed next to each other on the pasteboard as a row of images. If you were to release the mouse button over an artboard, any images that touch the artboard would be placed on that artboard (an arrow is pointing to the figure where the image of Dann was placed on the second watch artboard). If a placed image doesn’t overlap the first artboard, then it will be placed on the next artboard to the right, and so on for as many images you are dragging. Images that don’t overlap an artboard will be placed on the empty pasteboard.

    f0102-02.jpg
  5. Click in Adobe XD to make it the focus again, if necessary.

  6. Drag the beach image onto the artboard named “Nearby spots.”

    f0103-01.jpg

    As with the first image you placed, the image is cropped by the artboard. In the next section, you’ll resize and position the image, so leave it where it is for now.

  7. Click the image of Dann to select it. In the Property inspector, click to select the Lock Aspect icon (fog.jpg) so the width and height change together, if necessary. Select the W (Width) value and type 375. Press Return or Enter to scale the image to the width of the artboard you are about to drag it onto.

    f0103-02.jpg

    Aside from dragging to resize an image, this is simply another method for resizing.

  8. Drag the image of Dann so the top snaps to the top of the “Instructor detail – Dann” artboard, and it also is aligned with the middle of the artboard. A vertical aqua Smart Guide will appear when the image is centered in the artboard.

Transforming images

Images you import into Adobe XD can be transformed in a variety of ways—from scaling and rounding corners to rotating and positioning. In this section, you’ll apply a few transformations to the images you’ve imported so far.

  1. With the Select tool (07com04.jpg) still selected, move the pointer over the image on the Home artboard; a blue highlight will appear, indicating the size of the image. Click to select the image.

    f0104-01.jpg
  2. Press Command+C (macOS) or Ctrl+C (Windows) to copy it. Click in a blank area of the artboard named “Login” to make it the active artboard. Press Command+V (macOS) or Ctrl+V (Windows) to paste it.

    Content copied from one artboard to another is pasted in the same position, relative to the upper-left corner. In Lesson 5, “Organizing Content,” you’ll see how to arrange content and work with layering to get the new image behind the content you pasted from the iOS UI kit in Lesson 3, “Creating Graphics.”

  3. Click the beach image on the artboard named “Nearby spots.”

  4. Press Command+3 (macOS) or Ctrl+3 (Windows) to zoom in to the selection. Press Command+– (macOS) or Ctrl+– (Windows) a few times to zoom out.

    Notice the corner widgets in the corners of the image. As with vector shapes you draw, you can also round the corners on an image or in the Property inspector. For more information on rounding corners, refer to the Lesson 3 section “Rounding corners.”

  5. Drag the image to reposition it. Notice that as you drag, if an edge of the image comes close to an artboard edge, it snaps. As you drag, press the Command (macOS) or Ctrl (Windows) key to temporarily turn off snapping as you drag. Position the image as you see in the following figure. Release the mouse button and then the key.

    With the image in place, next you’ll continue to transform it by scaling and rotating. You may want to zoom in to the image further.

  6. Drag the lower-right corner of the image toward its center to make it smaller. Make sure it’s still a little wider than the artboard.

    f0105-02.jpg
  7. Move the pointer just off any corner of the selected image. When the rotate arrow (arrow2.jpg) appears, drag clockwise to rotate the image a little. Make sure the image is still covering the top of the artboard. You may need to reposition the image by dragging it, like you see in the second part of the following figure.

    As you rotate, the Rotation value will change in the Property inspector. You can also edit the Rotation value in the Property inspector to rotate an object.

  8. Drag the ocean_masked.png image that is beneath the image of the ocean, just off of the artboard, into the gray pasteboard for now.

    f0105-04.jpg
  9. Press Command+0 (macOS) or Ctrl+0 (Windows) to see everything.

  10. Click the gray vector shape you created in the previous lesson (see the following figure). Click the Fill color box in the Property inspector and change the color to white.

  11. Drag that shape on top of the image of the ocean on the Nearby spots artboard, covering the very bottom of the image, as you see in the figure.

    f0106-01.jpg
  12. Click the image of Dann on the artboard named “Instructor detail – Dann” to select it. Change the X value to 0 and Y value to 0 in the Property inspector, if they aren’t already. Press Return or Enter after you enter the last value to apply it.

    The X (horizontal) value and Y (vertical) value each start at zero (0) in the upper-left corner of each artboard. Content such as the image, in this case, is positioned from its upper-left corner relative to the upper-left corner of the artboard. Positioning content using the X and Y values can be a way to work more precisely.

Reshaping an image

Next, you’ll crop part of the ocean image shape by editing the anchor points. This can be an easy way to hide parts of an image you don’t want showing or to change the shape of the image frame in different ways.

  1. Press Z to select the Zoom tool. Drag across the ocean image at the top of the Nearby spots artboard to zoom in.

  2. Press V to select the Select tool and double-click the same ocean image at the top of the Nearby spots artboard to reveal the anchor points.

    Similar to working with vector shapes and paths, double-clicking an image enters Path Edit mode, where you can see and edit the individual anchor points for the shape of the image frame.

  3. Drag a rectangle around the two anchor points at the bottom of the image to select them.

    f0107-01.jpg

    Because you are in Path Edit mode, the image is isolated from the rest of the document and dragging won’t select anything else in the document.

  4. Drag one of the anchor points up and make sure it’s on the right edge of the artboard to resize the shape and hide the bottom of the image.

    The image will always stay in the center of the shape and will resize to fill the shape proportionally. With the anchor points showing in Path Edit mode, you could double-click one of them to convert between smooth and corner, click directly on the edge of the shape to add anchor points, or even select anchor points and delete them to change the shape.

  5. Press Esc to stop editing the anchor points and show the bounding box of the image again. Make sure that the image is covering the top part of the artboard. If it isn’t, drag to reposition it.

    f0107-03.jpg

    The corner radius widgets that you saw previously in the image corners are now gone. When you edit the shape that the image fills, you can no longer edit the corner radius of the corners.

  6. Choose File > Save (macOS) or click the menu icon (menu_icon.jpg) in the upper-left corner of the application window and choose Save (Windows).

Replacing an image

If you need to replace an image in your design, you can do so by dragging an image from your desktop onto an existing image to replace it. Next, you’ll replace a copy of the ocean image in your design.

  1. Click the image of the ocean at the top of the artboard named “Nearby spots” if it’s not still selected.

  2. Right-click on the image and choose Copy from the menu that appears. Right-click on the artboard named “Detail,” and choose Paste to paste it in the same relative position on the Detail artboard as the original artboard.

    The image that is pasted will still reflect the transformations applied to the original. This includes the cropping, scaling, and rotation. You can think of an image in Adobe XD as the fill of a shape.

  3. Press Command+0 (masOS) or Ctrl+0 (Windows) to see everything.

  4. Go to the Finder (macOS) or Windows Explorer (Windows), open the Lessons > Lesson04 > images folder, and leave the folder open in the Finder window (macOS) or Windows Explorer (Windows). Go back to XD. With XD and the folder showing, click the image named “home.jpg.” Drag the image on top of the ocean image on the Detail artboard. When it shows a blue highlight, release the mouse button to replace the image.

    The image will fill the shape proportionally. This may mean that the image is scaled if the image you are replacing is larger or smaller than the image you are dragging in.

  5. With the image selected, change the Rotation to 0 in the Property inspector to remove the rotation.

Bringing in content from Illustrator

There are several ways to bring content from Illustrator into Adobe XD: copy and paste, export from Illustrator and import into XD, or drag and drop from Illustrator into XD. Note that you currently cannot import native Illustrator files (.AI files) into Adobe XD. In this section, you’ll see a few methods for bringing vector content from Illustrator into Adobe XD. But first, here are a few things to watch for when attempting to copy and paste content from Illustrator to Adobe XD:

  • Text remains as text and all supported type attributes are retained when pasted. If you use a Typekit font for the text, that Typekit font will still be applied to the text pasted in Adobe XD.

  • Some complex appearance attributes, like gradient mesh, may be lost when pasting in Adobe XD.

  • Appearance attributes like multiple strokes and fills in Illustrator may be split into multiple grouped objects.

  • Groups remain as groups in XD.

  • Copying and pasting multiple (non-grouped) objects from Illustrator into Adobe XD creates a single group.

  • You can also copy bitmap images from Adobe Illustrator and paste them into Adobe XD, retaining their fidelity.

  1. Open Adobe Illustrator CC.

  2. Choose File > Open. Navigate to the Lessons > Lesson04 > images folder, select the file named “icons.ai,” and click Open.

    The Illustrator file contains a series of simple icons that you will bring into your design in Adobe XD. The simplest way to bring content from Illustrator into Adobe XD is to copy and paste, and that’s what you’ll do next.

  3. Choose View > Fit Artboard In Window.

  4. Choose Select > All, then choose Edit > Copy.

    f0110-01.jpg
  5. Back in Adobe XD, click in the Icons artboard to make it the active artboard. Press Command+3 (macOS) or Ctrl+3 (Windows) to zoom in.

  6. Press Command+V (macOS) or Ctrl+V (Windows) to paste the icons as vector artwork in XD. Drag the selected icons from the artwork, away from the circle if they overlap.

    f0110-02.jpg

    The individual icons are pasted as a group in Adobe XD. In Lesson 5, “Organizing Content,” you’ll learn more about how to work with these groups.

  7. Press Command+Shift+G (macOS) or Ctrl+Shift+G (Windows) to ungroup the icons.

  8. Switch back to Illustrator and choose Illustrator CC > Quit Illustrator, (macOS) or File > Exit (Windows), and return to XD.

Exporting artwork from Illustrator for Adobe XD video.jpg

Sometimes, you may not be happy with the fidelity of the assets copied from Illustrator and pasted into XD. In this case, you can choose to export as SVG from Illustrator and import or drag that asset into Adobe XD. To learn about how to easily export artwork from Illustrator to be used in Adobe XD, check out the video “Exporting artwork from Illustrator for Adobe XD,” which is a part of the Web Edition of this book. For more information, see the “Web Edition” section of “Getting Started” at the beginning of the book.

Bringing in content from Photoshop

There are three main ways to bring content from Adobe Photoshop into Adobe XD: copy and paste, export from Photoshop and import into XD, or place the content in a Creative Cloud Library and drag it into your design from the Creative Cloud Library panel in XD. Note that you currently cannot import native Photoshop files (PSD files) into Adobe XD.

In this section, you’ll bring content from Photoshop into your design in Adobe XD using a few methods.

  1. Open Adobe Photoshop CC.

  2. Choose File > Open. Navigate to the Lessons > Lesson04 > images folder, select the file named “beach_card.psd,” and click Open. If the New Library From Document dialog box appears, click Cancel.

    The Photoshop file contains a design with multiple image layers as well as text and a vector icon. Next, you’ll copy the image content and paste it into Adobe XD as a flattened raster image.

  3. Choose View > Fit On Screen.

  4. Choose Select > All and then choose Edit > Copy Merged.

    The Copy Merged command will flatten or merge all content to one layer, no matter what layers are selected in the Layers panel. If you select one or more raster layers, you could choose Edit > Copy to copy only the selected content from the selected layers.

  5. Switch back to Adobe XD. Press Command+0 (macOS) or Ctrl+0 (Windows) to see all of the artboards.

  6. With the Select tool selected, click in the gray pasteboard away from the artboards to deselect all.

  7. With nothing selected, press Command+V (macOS) or Ctrl+V (Windows) to paste the content into the center of the document window.

  8. With the image selected and the Select tool (07com04.jpg) selected, drag a corner of the image to make it smaller. Drag until you see approximately 1300 pixels for a width in the Property inspector. Drag it into position to the right of the “Instructor detail – Dann” artboard.

  9. Switch back to Adobe Photoshop.

  10. In Photoshop, open the Layers panel by choosing Window > Layers, if it isn’t already showing.

  11. In the Layers panel, right-click the layer name Wave, not the thumbnail to the left of the name. Choose Copy SVG from the menu.

    f0112-02.jpg

    From the same contextual menu, you could also choose Quick Export As PNG or Export As... if you’d like to choose a file format and options. The file generated by Photoshop could then be imported into Adobe XD.

  12. Close Photoshop without saving.

  13. Back in Adobe XD, click in the Icons artboard to make it the active artboard. Press Command+3 (macOS) or Ctrl+3 (Windows) to zoom in to the artboard.

  14. Press Command+V (macOS) or Ctrl+V (Windows) to paste the SVG content from Photoshop.

    f0113-01.jpg

    You may want to drag the SVG content into a blank area of the artboard, as you see in the figure.

  15. Choose File > Save (macOS) or click the menu icon (menu_icon.jpg) in the upper-left corner of the application window and choose Save (Windows).

3. Masking content | Next Section Previous Section

There are currently no related articles. Please check back later.