Adobe xd tutorial images how to#
Adobe xd tutorial images windows#

The X (horizontal) value and Y (vertical) value each start at zero (0) in the upper-left corner of each artboard. Release the mouse button and then the key. Position the image as you see in the following figure. As you drag, press the Command (macOS) or Ctrl (Windows) key to temporarily turn off snapping as you drag. Notice that as you drag, if an edge of the image comes close to an artboard edge, it snaps. For more information on rounding corners, refer to the Lesson 3 section “Rounding corners.”ĭrag the image to reposition it. As with vector shapes you draw, you can also round the corners on an image or in the Property inspector. Notice the corner widgets in the corners of the image. Press Command+– (macOS) or Ctrl+– (Windows) a few times to zoom out. Press Command+3 (macOS) or Ctrl+3 (Windows) to zoom in to the selection.

Adobe xd tutorial images how to#

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.”Ĭlick the beach image on the artboard named “Nearby spots.” You can also Option-drag (macOS) or Alt-drag (Windows) content between artboards, but you will need to work harder to get it in exactly the same position as the copy.Ĭontent copied from one artboard to another is pasted in the same position, relative to the upper-left corner.

Release the key and drag either image into XD, just to the right of the artboard named “Instructor detail – Dann,” above the watch artboards. As I mentioned, JPEGs you import are placed at half their original size.Ĭommand-click (macOS) or Ctrl-click (Windows) the image named “dann.png” to select both images. The beach.jpg image has a dimension of 1300 pixels x 1135 pixels. With XD and the folder showing, click the image named “beach.jpg.”

Adobe xd tutorial images windows#

Go to the Finder (macOS) or Windows Explorer (Windows), open the Lessons > Lesson04 > images folder, and leave the folder open. With the Select tool ( ) selected, click in a blank area away from artboards to deselect all. Press Command+0 (macOS) or Ctrl+0 (Windows) to see all of the artboards. 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.

Turning off the grids will make it easier to focus on the content.Īnother method for bringing assets into Adobe XD is to drag and drop from the Finder (macOS) or Windows File Explorer (Windows). Open the App_Design.xd document in the Lessons folder (or where you saved it).

In this section, you’ll import a few assets into your design using the Import command.Ĭhoose File > Open (macOS) or click the menu icon ( ) in the upper-left corner of the application window and choose Open (Windows). In Adobe XD, there are several methods for adding assets to your projects. If you’re designing for iOS, and designing at 1x, you’ll want to make sure that any raster images you import are scaled at 3x (3 times the size they are in your Adobe XD design), and for Android, 400% (or 4x). Be careful about simply importing overly large images each time you need an image, since large file sizes can slow down load time. In the case of an image for a website, if your image spans the entire width of a 1920 x 1080 artboard, you’ll want to ensure that your image is 3840 pixels across (twice the width of the intended use in XD). It’s best to edit your raster images in a program like Adobe Photoshop to be the maximum size you need, before you import them into XD. The sizing is especially important if you will later need to export production-ready assets for a website or app. If you’re designing using the default artboard sizes (1x), you need to pay attention to the sizing of any raster images (JPG, GIF, PNG) you import into your design.