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.

Working with text

When it comes to adding text to your design in Adobe XD, you can add text in two main ways: as text at a point or text in an area. Text at a point is a horizontal line of text that begins where you click and expands as you enter characters. Each line of text is independent—the line expands or shrinks as you edit it but doesn’t wrap to the next line unless you add a paragraph return or a soft return. Entering text this way is useful for adding a headline or a few words to your artwork.

Text in an area uses the boundaries of an object to control the flow of characters. When text reaches a boundary, it automatically wraps to fit inside the defined area. Entering text in this way is useful when you want to create one or more paragraphs.

In this section, you’ll explore the different ways to create text and change the formatting of text. In the first part, in the Home artboard, you’ll begin by assembling design content you added in a past lesson.

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

  2. With the Select tool (07com04.jpg) selected, drag a marquee across the Onshore artwork to select it. Make sure not to select the icons to the left (they are difficult to see).

    f0119-01.jpg
  3. Drag the artwork onto the Home artboard. If you are finding it difficult to drag the artwork, try zooming in.

    f0119-02.jpg
  4. Zoom in to the Home artboard using any method.

  5. Shift-drag the lower-right corner of the selected content to make it larger. Make sure it approximately matches the width in the following figure, and is positioned like you see in the final part of the following figure.

    In Lesson 5, you’ll change the color of the Onshore artwork when you begin to explore working with groups.

  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).

Adding text at a point

With some design content on the Home artboard in place, next you’ll focus on adding subheading text below the Onshore text. Since this new text will be a single line, creating text at a point is the best option, as you’ll soon see.

  1. Select the Text tool (texttool.jpg) in the toolbar. Click in the bottom of the Home artboard (in the white area) and type It’s epic out. to create text at a point.

    f0120-01.jpg

    If you continue to type, the text will continue to the right until you either press Return or Enter for a paragraph return or press Shift+Return (macOS) or Shift+Enter (Windows) for a soft return.

  2. Press Esc to select the text object.

    A single point appears at the bottom of the bounding box around the text. This is one way to tell that this is text at a point.

  3. Drag the point down and up to see the font size change. Stop dragging when you see a font size of 16 in the Property inspector.

  4. With the text object still selected, click the Fill color box in the Property inspector. Change the color to white in the Color Picker that appears.

  5. Select the Select tool (07com04.jpg) and drag the text below the Onshore text.

    f0121-01.jpg
  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).

Creating a text area

To create text in an area, you click with the Text tool (texttool.jpg) and drag to create an area to type text into. When the cursor appears, you can type. Next, you’ll create a text area for some body copy you’ll add to your design.

  1. Press the spacebar to access the Hand tool (07com06.jpg), and drag in the document window to see the Detail artboard.

  2. With the Text tool (texttool.jpg) selected, toward the top of the artboard (over the image), drag from the left edge of the artboard to the right edge to create a text area that is as wide as the artboard. Type 01 SURF REPORT, press Return or Enter, and type Saturday, September 3 at 1:15 PM. Leave the cursor in the text.

    Notice that the text formatting is the same as the last text. The formatting you see may look a bit different from the figures and that’s OK. Next, you’ll add more text from a text file in the Lessons file. This can be a great method for adding text to your designs from an external source.

  3. 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 folder and select the file named “Surf.txt.” Click Import to place the text in its own type object on the same artboard.

    f0122-01.jpg
  4. With the Text tool still selected, click in the new text area to select all of the text. Choose Edit > Cut (macOS) or press Ctrl+X (Windows).

    If you remove all of the text from a text area, the text area itself will also be removed.

  5. Insert the cursor after the “...1:15 PM” and press Return or Enter. Press Command+V (macOS) or Ctrl+V (Windows) to paste the text.

    f0122-02.jpg
  6. Press Esc to select the text area.

    You may see that some of the text is no longer showing (all of the text in the figure is showing). This is called overset text and is indicated by the dot in the bottom middle point of the text area when it’s selected. Next, you’ll show the rest of the text by resizing the type object.

  7. If you see all of the text, drag the bottom middle point up until some of the text disappears and a dot shows in the bottom bounding point. Drag down until all of the text appears and the dot disappears.

  8. With the text shape selected, click the white Fill color box to the left of the Fill option and click the gray color swatch you saved in a previous lesson.

  9. Click the artboard name “Detail” above the current artboard to select it. Select the Layout option in the Grid section of the Property inspector to turn the layout grid back on.

  10. Select the Select tool (07com04.jpg) and drag the text area down into the white area of the artboard. Align the left edge of the text area with the left side of the first layout grid column (see the figure).

    f0123-03.jpg
  11. Drag the right edge of the text area to the left to make it narrower, snapping it to the right edge of the right layout grid column.

    f0123-04.jpg
  12. Click in a blank area of the document window away from content to deselect.

Styling text

In Adobe XD, the text-formatting options are found in the Property inspector and include formatting such as type, font size, and text alignment. In this section, you’ll get a feel for formatting text in Adobe XD by applying formatting to existing text.

  1. Double-click the artboard icon (artboardicon.jpg) to the left of the artboard name “Home” in the Layers panel to fit the Home artboard in the document window.

  2. With the Select tool (07com04.jpg) selected, click to select the text “It’s epic out.”

  3. Make sure that Helvetica Neue (macOS) or Segoe UI (Windows) is selected for the font in the Property inspector. Click the arrow next to “Regular” to reveal the Font Weight menu and choose Bold.

    For both text at a point and text areas, you can change the formatting for all of the text by simply selecting the type object with the Select tool. If you want to apply different formatting to different text within text at a point or a text area, you can select text with the Text tool.

  4. Press the spacebar to access the Hand tool (07com06.jpg), and drag in the document window to see the text on the Detail artboard.

  5. With the Select tool (07com04.jpg) selected, drag all of the items on the Detail artboard into new positions, both on and off the artboard, as you see in the figure.

    f0124-02.jpg

    In a later lesson, you’ll make the Detail artboard taller to fit other content, like a repeat grid. For now, move the icons and images as in the figure.

  6. Click the text area that begins with “01 SURF REPORT...” Change the Font Size to 15 in the Property inspector. Change the Line Spacing to 25. Press Return or Enter after the last value entered.

    Line spacing is the space between lines of text and is similar to leading in programs like Adobe Illustrator.

  7. Drag the overset text indicator (the circle in the bottom middle bounding point) down to show all of the text, if you see it.

  8. Select the Text tool (texttool.jpg) and click in the text to select it all. Click three times on the text “Saturday, September 3 at 1:15 PM” to select the entire line. Click the arrow next to “Regular” to reveal the Font Weight menu in the Property inspector and choose Bold.

  9. Click the Fill color box in the Property inspector and change the Hex value to #162232. Press Return or Enter to accept the change. Click the plus (+) in the lower-left corner of the Color Picker to save the color as a swatch.

  10. Click in a blank area of the document window to stop editing the text and to be able to create a new text area.

  11. With the Text tool (texttool.jpg) selected, click below the top image on the Detail artboard. Type SURF, press Return or Enter, and type 2-4.

  12. Press Command+A (macOS) or Ctrl+A (Windows) to select all of that text. In the Property inspector, change the font size to 12, and the font weight to Bold. Click the Fill color box and in the Color Picker select the dark blue swatch you saved a few steps ago.

  13. Drag across the text “2-4” to select it. Change the font size to 80, and the Line Spacing to 75.

  14. Press Esc to select the text area. Press V to select the Select tool.

Duplicating text

One way to reuse text formatting is to copy a text object that has the formatting you want and change the text. You can also click in text with formatting you want and then create a new text object and the formatting from the original text will be used. In this final section, you’ll copy text and change it.

  1. Option-drag (macOS) or Alt-drag (Windows) the SURF 2-4 text object straight to the right. When horizontal Smart Guides appear, indicating the copy is aligned with the original, release the mouse button and then the key.

    f0126-02.jpg
  2. Double-click in the copied text to select it all. Type FT to replace the text. You may want to zoom in closer.

  3. Press Esc to select the text object and drag it down into place as you see in the following figure.

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

  5. Click in a blank area of the document window away from content to deselect.

  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).

  7. If you plan on jumping to the next lesson, you can leave the App_Design.xd file open. Otherwise, choose File > Close (macOS) or click the X in the upper-right corner (Windows) for each open document.

5. Review questions | Next Section Previous Section

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