Skip to content
Class Notes

Lecture Notes for Adobe XD Classroom in a Book (2020 release)

Lecture Notes for Adobe XD Classroom in a Book (2020 release) simplifies complex topics with easy-to-understand notes.

Preview 20 of 66 pages

See the first 20 pages exactly as they appear in the document.

  1. Page 1
    Read page 1 as text

    C L A S S R O O M I N A BO O K ® Instructor Notes Brian Wood XD Adob e 2020 release

  2. Page 2
  3. Page 3
    Read page 3 as text

    Adobe® XD Classroom in a Book® (2020 release), Instructor Notes © 2020 Adobe. All rights reserved. Adobe Press is an imprint of Pearson Education, Inc. For the latest on Adobe Press books, go to www. adobepress.com. To report errors, please send a note to errata@peachpit.com. For information regarding permissions, request forms, and the appropriate contacts within the Pearson Education Global Rights & Permissions department, please visit www.pearsoned.com/permissions/. If this guide is distributed with software that includes an end user license agreement, this guide, as well as the software described in it, is furnished under license and may be used or copied only in accordance with the terms of such license. Except as permitted by any such license, no part of this guide may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, recording, or otherwise, without the prior written permission of Adobe. Please note that the content in this guide is protected under copyright law even if it is not distributed with software that includes an end user license agreement. The content of this guide is furnished for informational use only, is subject to change without notice, and should not be construed as a commitment by Adobe. Adobe assumes no responsibility or liability for any errors or inaccuracies that may appear in the informational content contained in this guide. Please remember that existing artwork or images that you may want to include in your project may be protected under copyright law. The unauthorized incorporation of such material into your new work could be a violation of the rights of the copyright owner. Please be sure to obtain any permission required from the copyright owner. Any references to company names in sample files are for demonstration purposes only and are not intended to refer to any actual organization. Adobe, the Adobe logo, Acrobat, Classroom in a Book, Illustrator, InDesign, After Effects, Photoshop, and XD are either registered trademarks or trademarks of Adobe in the United States and/or other countries. Apple, Mac, Macintosh, macOS, and Safari are trademarks of Apple Inc., registered in the U.S. and other countries. Microsoft and Windows are either registered trademarks or trademarks of Microsoft Corporation in the U.S. and/or other countries. All rights reserved. Sketch is a registered trademark of Bohemian B.V. All other trademarks are the property of their respective owners. Unless otherwise indicated herein, any third-party trademarks that may appear in this work are the property of their respective owners and any references to third party trademarks, logos or other trade dress are for demonstrative or descriptive purposes only. Such references are not intended to imply any sponsorship, endorsement, authorization, or promotion of Pearson Education, Inc. products by the owners of such marks, or any relationship between the owner and Pearson Education, Inc. or its affiliates, authors, licensees or distributors. Adobe Inc., 345 Park Avenue, San Jose, California 95110-2704, USA Notice to U.S. Government End Users. The Software and Documentation are “Commercial Items,” as that term is defined at 48 C.F.R. §2.101, consisting of “Commercial Computer Software” and “Commercial Computer Software Documentation,” as such terms are used in 48 C.F.R. §12.212 or 48 C.F.R. §227.7202, as applicable. Consistent with 48 C.F.R. §12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and Commercial Computer Software Documentation are being licensed to U.S. Government end users (a) only as Commercial Items and (b) with only those rights as are granted to all other end users pursuant to the terms and conditions herein. Unpublished- rights reserved under the copyright laws of the United States. Adobe Inc., 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S. Government End Users, Adobe agrees to comply with all applicable equal opportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60, 60- 250, and 60-741. The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference. Main Title ISBN ISBN-13: 978-0-13-658380-6 ISBN-10: 0-13-658380-6 Instructor Notes ISBN ISBN-13: 978-0-13-658373-8 ISBN-10: 0-13-658373-3

  4. Page 4
    Read page 4 as text

    ADOBE XD CLASSROOM IN A BOOK (2020 RELEASE) 3 INSTRUCTOR NOTES Getting Started The Adobe XD Classroom in a Book™ (2020 release) course presents students with tips, techniques, and solutions for using the Adobe XD software. The Instructor Notes are intended to complement the information in the Lessons. The information presented here is organized to follow the sequence of instruction in each lesson. About the workbook It is recommended that each student in the class have an individual copy of the Adobe XD Classroom in a Book (2020 release). Students will use this book as you lead them through projects. Additionally, the book can be used as a self-paced tutorial. There are separate lesson files that are available to those who purchase the book as well, and those are separate from the lesson files supplied with these instructor notes. Purchasers will find instructions for accessing the lesson files in the Getting Started section of the book, in “Accessing the lesson files and Web Edition” Web Edition This book comes with a free Web Edition that enhances the instructional value of the book itself and can be accessed from any device with a connection to the Internet. The Web Edition contains the complete text of the book, plus hours of instructional video keyed to the text and interactive quizzes. In addition, the Web Edition will be updated when Adobe adds significant feature updates between major Creative Cloud releases. See the “Web Edition” section in the book’s Getting Started section for more information. Course strategy If you’re teaching an 11-session class, you can teach one lesson of this book per class. The book contains 11 lessons, some of which may take a while to complete. If you are teaching a class with fewer sessions, you may want to combine some of the lessons into a single class. For example: 1 Lessons 1 and 2 could be combined since lesson 1 is shorter. If you have a class where students are already familiar with other Adobe tools, such as Illustrator or Photoshop, you can move more quickly through the parts of the workspace in lesson 1. 2 Lessons 3 and 4 could be combined and shortened. If you have a class where

  5. Page 5
    Read page 5 as text

    4 INSTRUCTOR NOTES students are already familiar with drawing tools, such as the Pen tool, you can skip or move more quickly through the vector creation section in Lesson 4. Make sure to point out what’s different in the drawing tools as compared to other Adobe apps (Illustrator, etc.). For instance, there is no Direct Selection tool in XD, editing requires double-clicking a shape, etc. 3 Lessons 8 and 9 are focused on creating and previewing a prototype. You could combine and shorten these two lessons by not covering as many of the prototyping features. We recommend that you teach all lessons. You can, however, shorten or minimize sections that students may already be familiar with in other Adobe apps. The majority of the basic Adobe XD features and the XD work environment are covered in these lessons. However, completing all the lessons makes a far superior introduction. Before beginning a lesson, encourage students to browse through it, and read any sidebars. � Note: Make sure that all Notes found in the text and in the sidebar are read! They can contain helpful, even problem-solving information. Managing student projects One way to simplify file storage and retrieval in classroom situations is to ask students to create a folder on their hard disks, name it [Student’s] Lessons (substituting the student’s actual name for “Student”), and then copy each project folder into the main Lessons folder. Having students keep all their working files in their own Lessons folder makes it easy for you to clean up files when a class is over. This method for organizing folders is also discussed in the Getting Started section at the beginning of the book. Fonts in the lesson files The lesson files were set up using the default font on macOS (Helvetica Neue), and for some of the lessons, the Apple San Francisco font (SF Pro) that comes with the Apple UI Design Resources kit. If students are learning on Windows, they can simply replace the fonts used with the default Windows font, Segoe UI, or another font.

  6. Page 6
    Read page 6 as text

    ADOBE XD CLASSROOM IN A BOOK (2020 RELEASE) 5 Additional resources Adobe XD Classroom in a Book (2020 release) is not meant to replace documentation that comes with the program or to be a comprehensive reference for every feature. Only the commands and options used in the lessons are explained in this book. For comprehensive information about program features and tutorials, please refer to these resources: Adobe XD Learn & Support: helpx.adobe.com/support/xd.html (accessible in Adobe XD by choosing Help > Learn & Support [macOS] or clicking the menu button on Windows and choosing Help > Learn & Support) is where you can find and browse tutorials, help, and support on Adobe.com. Adobe Forums: community.adobe.com lets you tap into peer-to-peer discussions, questions, and answers on Adobe products. Adobe Create Magazine : create.adobe.com offers thoughtful articles on design and design issues, a gallery showcasing the work of top-notch designers, tutorials, and more. Resources for educators: www.adobe.com/education and edex.adobe.com offer valuable information for instructors who teach classes on Adobe software. Find solutions for education at all levels, including free curricula that can be used to prepare for the Adobe Certified Associate exams. Also check out these useful links: Adobe XD product home page: See adobe.com/products/xd.html.

  7. Page 7
    Read page 7 as text

    6 INSTRUCTOR NOTES LESSON 1: AN INTRODUCTION TO ADOBE XD This lesson provides an overview of the work area and basic functionality of XD. By the end of the lesson, students should understand how all the basic XD elements work together to create designs and the overall workflow for app and web design. They should also understand the overall interface of XD, including how to access panels, where tools are located, and get an idea of prototyping, previewing and sharing as well. Introducing Adobe XD Page 8: It’s important for students to understand that XD does NOT create code. When they create a design and/or prototype in XD, they are creating a proof of concept. At the end of the design process in XD, students can export production- ready assets, design specs, design system, and a working prototype. The app or website is developed in another tool, outside of Adobe XD. We also wanted to point out that XD does not have to be used solely for app or web design. We know of classrooms that use XD to create working presentations or even student portfolios, maybe for a review. When you design something in XD, you can share it out to the world using several methods. A link is created to the project that is hosted on Creative Cloud. The UX design workflow Pages 8–9: This introductory section is meant to give an overview today’s UX workflow which includes all of the stages of design. You can skip this if students already grasp UX design and generally understand what prototyping and wireframing are. Once again, this is a general workflow for an app design and may not accurately reflect steps taken for another type of project like a presentation. The Home screen Page 10: The Home screen is the first thing students will see when they open XD. It is a place where they can create a project, open a previous project, check out a tutorial, access UI Kits and other resources. When XD is first launched, the Home screen will look a bit different than after students have saved and closed their first project.

  8. Page 8
    Read page 8 as text

    ADOBE XD CLASSROOM IN A BOOK (2020 RELEASE) 7 On Page 10, step 2, We ask them to close the Assets panel if it opens on the left side of the workspace because of missing fonts on the document. If the font is an Adobe font (formerly Typekit), then it is automatically synced. If it is a local font, then the missing font will show in the Assets panel, where the student could right- click the name to highlight where it is used on canvas or replace it. Exploring the workspace (macOS) Page 11: We split out the macOS and Windows workspaces since Windows does not have a menu bar with commands. If students are used to working in other Adobe apps, they will find that the workspace in XD is very streamlined. Panels are permanently docked and cannot be moved. They can think of the Property inspector on the right as the Properties panel in Illustrator or InDesign, for instance. Exploring the workspace (Windows) Page 12: On Windows, the XD workspace is minimal with no menus showing. Instead, there is a “hamburger” menu in the upper-left part of the application window that, when opened, will reveal some of the options available in the menus on macOS. On Windows, you will find that all of the same commands are available as on macOS, but on Windows, they are accessed either by right-clicking on content or through keyboard commands. Adobe XD is a native macOS and native Windows application. That means that it takes advantage of some of the typical OS features available on each. Working in Design mode Pages 13–15: This section introduces modes in Adobe XD and gives students an overview of Design mode. Students will most likely stay in Design mode initially and later switch between the three modes (Design, Prototype, and Share), depending on what they want to achieve. Getting to know the tools Page 13: The toolbar in XD is one of the smallest in any Adobe app. That’s mostly due to efficiencies in creating and editing, found in XD. For instance, in Illustrator and InDesign, you’ll find Selection and Direct Selection tools. In XD, you only have one Select tool which doubles as the Selection and Direct Selection tools, as you’ll see. The figures for the lessons in this book were taken using macOS. Make sure that students read the notes available in each lesson, since they can lead to information on finding options in their workspace, especially on Windows.

  9. Page 9
    Read page 9 as text

    8 INSTRUCTOR NOTES Working with the Property inspector Pages 13–14: The Property inspector offers access to all of the formatting options and features. It is permanently docked on the right side of the screen and will be transformed in Prototype mode to show interactions. At the top of the Property inspector, you’ll find some options that are always there: alignment, repeat grid, pathfinder operations, and transform options. The panel is contextual and the content within changes depending on what is selected. Working with panels Pages 14–15: The other panels available in XD, aside from the Property inspector, are on the left side of the workspace. They are the Assets panel, the Layers panel, and the Plugins panel. To show or hide each panel, students can click the icons in the lower-left corner. It would help speed up work in XD if students learn the keyboard commands for them. To toggle the visibility of the Layers panel, press Cmd+Y (macOS) or Ctrl+Y (Windows). To toggle the visibility of the Assets panel, press Cmd+Option+Y (macOS) or Ctrl+Alt+Y (Windows), Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows). Prototype mode Pages 15–16: Initially students will not have much need to go into Prototype mode when they start their own projects since a file needs to at least have multiple artboards to do anything in Prototype mode. Prototyping is not required in your XD project, but it is necessary when wanting to show the interactions between artboards. A good shortcut to remember is to press Control+Tab (macOS) or Ctrl+Tab (Windows) to toggle between the three modes: Design, Prototype, and Share. To learn more about prototyping, see Lesson 8, “Creating a Prototype.” Changing the view of artwork Page 17–23: Adobe XD was built for speed. While the Zoom tool works well, I’ve personally rarely used it in XD. You can utilize the native zooming features on Windows and mac OS. To understand them better, check out the sidebar on page 19 titled, “Using macOS or Windows native zooming.”

  10. Page 10
    Read page 10 as text

    ADOBE XD CLASSROOM IN A BOOK (2020 RELEASE) 9 Using view commands Pages 17–18: You can work more efficiently in XD by holding down the modifier keys to temporarily activate the Zoom tools. Press Command+spacebar (macOS) or Ctrl+spacebar (Windows) to temporarily activate the Zoom tool, which allows you to quickly increase your magnification without having to switch tools. Page 17, step 4: The Zoom menu on Windows has more viewing options than macOS. You may need to either give two sets of instructions for zooming to selection, and other commands, or have students use the keyboard commands for Zoom To Fit All (Cmd+0/Ctrl+0) and other menu commands. Using the Zoom tool Pages 19–21: The Zoom tool is something that we rarely touch in Adobe XD. There are so many other methods for zooming, including pinch-zoom on the trackpad or Option/Alt scroll-wheel zooming. Page 20, after step 4 figure: The shortcuts to access the Zoom tool are relatively picky about the order of keys pressed. For instance, pressing Command and then spacebar sometimes won’t work on my machine. We have to press spacebar and then Command. Scrolling through a document Page 21: Since XD has the ability to create multiple artboards, navigating and scrolling are important. The Hand tool does not appear in the toolbar in XD, it is only accessed via keyboard commands. You can use the spacebar to temporarily activate the Hand tool to scroll through a document. When entering text, use the Alt (Windows) or Option key (macOS) to temporarily access this tool. Page 21, step 2: Windows users need to pay attention to the note after the figure for step 2. In order to use the Hand tool, Windows users may need to press and hold the spacebar and while pressing, press and let go of another key (like the Alt key). Then, while still pressing the spacebar, pan in the document window. Navigating Artboards Pages 22–23: The Layers panel can be (but doesn’t have to be) used for navigating, editing, naming, and more. In order to navigate to another artboard, make sure that students are not double-clicking the name of the artboard in the Layers panel, but rather, double-clicking the thumbnail to the left or to the right of the artboard name.

  11. Page 11
    Read page 11 as text

    10 INSTRUCTOR NOTES Previewing your designs Page 24: Previewing the prototype is essential in order to test the connections you make. Not only can you test connections in the Preview window in XD, but you can also test on device using the Adobe XD mobile app. A great shortcut for the Preview window is Command+Return (macOS) or Ctrl+Enter (Windows). That keyboard command only works to open the window, not close it. To learn more about previewing designs, see Lesson 8, “Creating a Prototype.” Sharing your designs Page 25: When you are ready to share your design with others, you can do so easily in a few ways—one is using the Share workspace. Sharing a prototype is meant to gather feedback in the form of comments and sharing design specs is meant to share the specifications such as fonts, colors, and more with developers at the end of the process. To learn more about sharing your designs, see Lesson 10, “Sharing Your Designs.” Switching between documents Page 26: Switching between documents is different between macOS and Windows. On macOS, you can choose an open document from the Window menu or press Command+~ to toggle between open documents. On Windows, the Window menu is not available, so you will use the OS document switching (Alt+Tab).

  12. Page 12
    Read page 12 as text

    ADOBE XD CLASSROOM IN A BOOK (2020 RELEASE) 11 Review questions 1 What is a wireframe? 2 What do artboards represent in XD? 3 What are the three modes found in XD? 4 What shows in the Layers panel with no content selected? 5 What are the options for sharing? Review answers 1 A low-fidelity wireframe is one way to determine the functional elements of a page or screen without diving into design specifics like colors and fonts. They are a quick method of exploring the basic structure and the relationships between information of an app or website.. 2 Artboards in XD represent the screens in an app or web design, typically. 3 The three modes found in Adobe XD are: Design, Prototype, and Share. When you select a mode, certain features and tools specific to that mode become available in the application window. These modes represent a stage in the design process. As you design, you will most likely be switching back and forth between them. 4 When all content in the document is deselected (except for an artboard), a listing of artboards and any content on the pasteboard appears in the Layers panel. 5 The options for sharing a design or prototype in XD are Invite to Edit, Share For Review, and Share For Development. Exploring on your own You will open a sample file from Adobe XD to investigate and use some of the navigational and organization features learned in this lesson. 1 Open the file named L1_explore.xd. This file is included in the instructor notes Zip file you downloaded from here: www.adobepress.com/XDCIB2020 2 Perform the following on this document: • Practice zooming in and out. • Navigate between artboards using the Layers panel and using keyboard commands. • Open another document and practice navigating between open documents. 3 Choose File > Close without saving.

  13. Page 13
    Read page 13 as text

    12 INSTRUCTOR NOTES LESSON 2: SETTING UP A PROJECT This lesson provides an overview of creation and setup up of students’ first project in Adobe XD. By the end of the lesson, students should have a better understanding of creating a new document, creating and editing artboards, adding grids to artboard, working with multiple artboards, and managing artboards with the Layers panel. Starting the lesson Page 30: At the start of each lesson, you will find an initial step that offers several alternatives for opening a file on both macOS and Windows. Unfortunately on Windows, if you close all open files, there are no menus to choose from, so you will click Your Computer in the Home screen to open a file. Creating and saving a new document Pages 31–33: Pay close attention to the sidebar “Adobe XD and Retina (HiDPI)” on page 32. When creating new documents from a default artboard size, you are creating the design at 1x or non-Retina (non-HiDPI). That is fine and a perfectly suitable way to design apps or web sites. If you decide that designing at 2x or another sizing is necessary, then you will need to double or triple the size of the artboards. This is very important when exporting assets in the last lesson. Adobe XD will generate as many raster assets (PNG, JPEG, etc.) as necessary for the device chosen. As students proceed, they will need to ensure that, if they care about generating production-ready assets, they will need to import images with enough pixel data. That will be covered more in later lessons. On page 32, students are introduced to cloud documents. It’s important for you to understand cloud documents so you can explain them to students. When you first create a document it’s a cloud document. This is a temporary file, and you need to save it at least once to start with. Any files saved as a cloud document are saved in and counted towards their personal storage limit. Saving an XD file locally gives the students an XD file on their machine that they can do what they want with. Know that auto-save, which is a great feature, will not work unless the file is saved as a cloud document. I encourage you to watch the video, “Working with cloud documents,” found in the web edition of the book.

  14. Page 14
    Read page 14 as text

    ADOBE XD CLASSROOM IN A BOOK (2020 RELEASE) 13 Creating artboards with the Artboard tool Pages 34–36: When attempting to select artboards in the Document window, students need to be aware of what tool is selected. With the Artboard tool selected, you can select an artboard by clicking the artboard name above the artboard. If they attempt to click within an artboard with the Artboard tool selected, they will create a new artboard. With the Select tool selected, they can click the name, drag across, or click (if empty)/double-click on an empty spot if it has content, to select it. Page 34, step 4: Students may only see default artboard sizes in the Property inspector if nothing is selected. They may need to scroll in the Property Inspector to see them. Make sure that students name the artboards the same as they see in the book. We will reference those artboards all throughout the lessons. Changing artboard appearance Pages 44–45: Changing the appearance of artboards can be a useful feature when designing. For instance, if you are designing an app and want to set a screen background color, you can draw an object behind all other content and assign a color, or you could assign a color to the artboard. A color set in the background of an artboard is also discoverable when it comes to design specs. Working with multiple artboards Page 41: Since there are currently no templates in XD, being able to select and apply formatting and add content to multiple artboard at once will be very helpful. Used in combination with components (what used to be called Components ), selecting multiple can be very powerful for maintaining design consistency. Adding grids and guides to artboards Pages 43–50: There are two types of grids that can be applied to artboards: layout and square. Layout grids are great for setting margins and columns in your designs. A square grid can be useful for creating icons or other artwork that requires a visible grid to snap to. We should also mention that XD has an invisible 1 pixel grid in the background that all content snaps to by default. Working with square grids Pages 43–46: Square grids are very useful for mobile app design and not used as often with web design. As students make their way through the lessons, they will be asked to zoom in and out, drag content to align to the square grids, and more. Content will snap to a square grid when dragged, but it may also snap to the pixel

  15. Page 15
    Read page 15 as text

    14 INSTRUCTOR NOTES grid if zoomed in far enough. If students find that they can’t snap to the square grid or can’t achieve the same width or height values when dragging, ask them to either zoom in or out and what the content they are dragging snaps to and the values achieved will be different. Units in Adobe XD Page 45, sidebar: This sidebar carries some important information. Throughout the lessons, We try not to reference any kind of unit when referring to measurements, sizes, and more. The reason why is because XD is unit-less. That means, you can treat the sizings in whatever unit you need. For instance, if you design a website in XD, you would assume pixels. If designing for iOS, pt, and so on. When you export design specs, the dev that views them can set the correct unit when they copy measurements, sizes, etc. Applying a layout grid Pages 47–48: Layout grids are what most of us design to when deigning responsive web sites. They make it easy to align content to columns by snapping so that later, when a CSS grid (or other) is used, the content is set to a similar grid. Page 48, step 9: We found that in later versions of XD, setting margins for each side was not adding up properly (how we expected it to anyway). You may find that students need to adjust the values of the Gutter Width and Column Width to achieve the 0, 32, 0, 32 values we suggest in the book. Students can always change the layout grid settings later, but to affect the grids on the artboards in the document, the artboards need to be selected. Creating artboard guides Pages 49–50: Artboard guides are newer (May 2019) and can be a very useful tool for alignment. I find that students accidentally create guides when attempting to drag across artboard content for selection—so watch for that. Also note that guides currently cannot be set on an artboard by typing in values. Managing artboards with the Layers panel Pages 51–52 At times, managing artboards via the Layers panel will be easier than attempting to do so in the Document window. When it comes to dragging the artboards to change the ordering (step 4, page 51), that’s up to the user as to how to order them. Some of us want to keep all of the app artboards in close proximity in the Layers panel listing or all of the website artboards. It really depends. Remind students that dragging and reordering the artboards has no effect in the document, unless artboards overlap.

  16. Page 16
    Read page 16 as text

    ADOBE XD CLASSROOM IN A BOOK (2020 RELEASE) 15 Review questions 1 Why might you rename artboards? 2 Describe the process for adding an artboard to an open document using a default artboard size. 3 What are the two types of grids that can be applied to artboards? 4 Name several methods for selecting multiple artboards. 5 Name two methods for duplicating an artboard. Review answers 1 You will most likely rename artboards to keep track of them when designing. Another reason for renaming will show later when you prototype. In order to create connections between artboards, you will select an artboard by name. 2 In order to add a new artboard using a default size, you can click or drag in the document window with the Artboard tool, then adjust the size of the artboard to match a default size in the Property inspector. You can also select the Artboard tool and click a default artboard size that appears in the Property inspector to create a new artboard at that size. 3 The two types of grids that you can apply to artboards in XD are square and layout. 4 In order to select multiple artboards, you can Shift-click or Command/Ctrl- click artboards in the Layers panel, drag across multiple artboards with the Select tool, or Shift-click artboard names in the Document window. 5 To duplicate an artboard, you can select an artboard in the Document window and press Command+D (macOS) or Ctrl+D (Windows), Option-drag/Alt- drag an artboard in the Document window or Layers panel, copy and paste an artboard, or right-click an artboard in the Layers panel and choose Duplicate.

  17. Page 17
    Read page 17 as text

    16 INSTRUCTOR NOTES Exploring on your own Now you’ll experiment with a few of the tools you learned in this lesson. 1 If the Home screen isn’t already showing, choose File > New (macOS) or on Windows, click the menu icon ( ) and choose New. The Home screen appears. 2 Create a new web design document based on the 1366x768 screen size. 3 Perform the following on this new document: • Add more artboards of the same size. • Add several artboards for an app design. • Add layout grids to all of the artboards and adjust the grid settings. • Change the background color of one of the app artboards. 4 Close the file without saving.

  18. Page 18
    Read page 18 as text

    ADOBE XD CLASSROOM IN A BOOK (2020 RELEASE) 17 LESSON 3: ADDING IMAGES AND TEXT This lesson starts out by teaching students about the different types of assets, then has students import and work with all different types of assets. The lesson finishes with adding and styling text. I wanted to draw your attention to the sidebar “Sizing raster images for Adobe XD” on page 58. If you want to be able to export production-ready assets when finished with your design, you will need to ensure that there is enough pixel data in each placed asset. For vector content (SVG, AI) you won’t need to worry about any of this since that content is made of vector and is infinitely scalable. It’s the image assets you place. This really makes more sense when you choose File > Export > Export Selection with something selected, to see the different number of assets generated for each file type. For instance, choosing PNG, and exporting for iOS, you get 3 PNG files at different sizes for every selected image in the design. When you place raster assets, the ruler of thumb is for web assets, make sure they are twice the size they are used in the design. For iOS, 3 times the size, and for Android, 4 times the size. Starting the lesson Page 56: Since this section in each lesson is meant to show the completed lesson file (for that lesson), you can skip this section if time is at a premium. Assets and Adobe XD Page 57–64: In the case of XD, assets are both vector and raster. You can bring in assets from a lot of different sources including Illustrator, Photoshop, Sketch, and other apps, in a variety of ways. Importing an image Pages 57–58: The reason the image is so large is because it is meant to be exported as an iOS PNG later. That means it should be 3 times the size used in XD. Because JPEG files are placed at half-size, it will be scaled to half size for the final sizing. Page 58, step 6: By default, raster images are scaled proportionally when a handle is dragged. That is assuming that the Lock Aspect option is selected in the Property inspector, which it is, by default.

  19. Page 19
    Read page 19 as text

    18 INSTRUCTOR NOTES Importing multiple assets Pages 59–60: I find that importing via drag and drop from a folder into XD is the easiest since you can control where the images are placed in the document. By placing multiple images using the File > Import command, they are placed in a row in the middle of the document window and may sometimes seem to disappear since they are placed on an artboard and may be hidden. If students find it challenging to find/select placed images, they can open the Layers panel and click on an artboard to see what is there. Importing assets via drag and drop Page 61: Setting up to drag and drop may be tricky if the student doesn’t know the keyboard commands for switching between open apps in their OS. Also, if students drag and drop images onto an artboard, the images may seem to disappear. That may be due to the fact that they have been associated with an artboard and image content outside of the bounds of the artboard will be hidden. Replacing an image Page 62: You’ll find that replacing raster images is one thing. Trying to replace vector graphics, such as an imported SVG file or other is another. For instance, if you import a vector logo composed of multiple vector objects, dragging another logo on top of the existing logo will most likely only replace a part of it. Transforming images Page 63: Copy and paste between artboards is currently one of the best methods for adding the same content, in the same position, to each artboard. You can easily select a range of artboards and paste content on them. Resizing an image in its frame Page 64: In step 4, students may accidentally deselect the image if they don’t press and drag right on the anchor point. Have them double-click the image and try again, if that’s the case. Remind students that if they care about the resolution (quality) of the images for exporting, they need to be careful about scaling images too much (larger) since the larger they make raster images in XD, the lower the resolution when it’s exported. Copying and pasting from Photoshop to XD Pages 65–66: If students don’t have the latest version of Adobe Photoshop 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

  20. Page 20
    Read page 20 as text

    ADOBE XD CLASSROOM IN A BOOK (2020 RELEASE) 19 Import (Windows). Navigate to the Lessons > Lesson03 > images folder and import the screen_header.png file. Page 66, step 6: Students need to Command-click (macOS) or Ctrl-click (Windows) the layer thumbnail, NOT the name of the layer to make a selection from the layer content. Know that there are a bunch of ways to copy and export content from Photoshop—this is not the only way. Opening a Photoshop file in Adobe XD Pages 67–69: Opening a Photoshop file (.PSD) directly in XD is a great way to convert a PSD to an XD document. Almost all content from the PSD will be converted and editable in XD. Students do not have to have Photoshop installed to open a PSD file in XD. Editing an image in Photoshop Pages 69–70: Obviously for this to work, Photoshop needs to be installed on the students machine. The file associations are not important in this case. In other words, if a student machine has .JPG files set to open in Preview, rather than Photoshop, that shouldn’t matter. Bringing in content from Adobe Illustrator Pages 71–72: As was stated in the chapter text, you can bring Illustrator content into XD a bunch of ways—depending on your needs. Sometimes I’m working in Illustrator and need to bring a simple icon to XD, so I’ll copy and paste to embed it in the XD document. Know that students can also copy content from XD and paste it into Illustrator and it’s still editable! Note: In order to open an Illustrator document (.AI) in XD, you don’t need to have Illustrator installed. Masking content Pages 73—78: There are two main ways to mask and the correct masking method for the situation should be used. You cannot easily convert from one mask type to another. Also, know that masked content that you export is cropped.

46 more pages in the full document

Unlock it once and it stays in your library, ready to chat with or turn into flashcards.

Unlock the full document

More Information Technology study materials

See all

Study this document with CramX

Once it is in your library, every tool can work from it.