Creating New Screens7:32 with Nick Pettit
New screens in Adobe XD are typically defined using artboards. In this video, we'll complete the design by creating a 2nd screen.
Text to Copy
To save time, you can copy the two paragraphs below into the second screen of the design.
Grab your trail mix and take a deep breath! At heights around 8,000 feet, Boulder offers incredible views of the Rocky Mountains and exciting challenges for experienced hikers.
This weekend trip for two includes a modest mountain home on the outskirts of Boulder, along with flights and ground transportation. The snow will be back soon, so book today for best availability!
Get Adobe XD
Adobe XD Plans - Adobe XD is available as part of Adobe Creative Cloud in both free and paid memberships. Any edition of Adobe XD (including the free plan) will work with this course. Follow this link to review plans, create an Adobe Creative Cloud account, and download Adobe XD.
Image Files - These are the image files we'll use throughout this course. Download this file, unzip it, and look for the photos folder.
This new screen is going to be linked from the first trip, 0:00 which is Boulder, Colorado. 0:04 So it would nice if we used that same imagery maybe as a full screen background. 0:06 Open the final browser on your device and 0:13 navigate to the folder where you downloaded the photos originally. 0:17 Drag the boulder image onto the second art board, and 0:23 then position it so that you can see just the two trees 0:28 in the bottom right corner, something like that. 0:33 This covered up the tool bar but we can fix this by right 0:38 clicking on the image and then choosing, Send to Back. 0:43 This will rearrange the layers on the artboard so 0:50 that the image is at the bottom of the stack. 0:54 Now if you click anywhere in the blank area, 0:57 it will deselect the image and you can see what the art board looks like. 1:01 Next, we should add some title text to label what this place 1:06 is along with a description. 1:10 And then finally a button to choose dates. 1:13 If you'd like, you can add more photos and button controls but 1:16 we're going to keep things simple for the purposes of this example. 1:21 So let's start with that title text by copying that Boulder text and 1:26 then pasting it into this art board. 1:31 Double click the Boulder text on the first image in 1:34 the repeated grid and then copy it to your clipboard. 1:39 And then click anywhere inside the second art board and paste it. 1:44 Now, let's add some paragraph text. 1:52 In the note associated with this video, 1:54 you can find some pre-written text that you can copy to your clipboard. 1:57 That way we don't have to sit here together and type it all out. 2:01 Then select the type tool or hit the T key on your keyboard. 2:05 Click somewhere in the middle of the second art board, 2:11 And paste the contents of your clipboard. 2:17 This text will probably look wrong in lots of ways at first, but 2:22 we'll work on correcting that now. 2:27 So with the text selected, first change its fill color 2:30 to pure black, since this is on a lighter background. 2:35 Then change the font size to 13. 2:40 And instead of bold, we'll just make this a regular style. 2:45 Just below that and to the right, 2:50 there's two buttons with some different looking lines of text. 2:52 The first is the default for short lines of text, but instead, 2:57 select this second button, which is called Area Text. 3:02 Now, you can resize the box containing the text, and 3:07 the text will naturally re-flow however it needs to, to fit inside that box. 3:12 Right now, this box is entirely too wide. 3:18 So if we set the zoom level to something like 25% and 3:22 zoom way out here, we can then click and 3:29 drag on one of these handles to resize this box. 3:33 Just like that. 3:39 And then we can reset the zoom level. 3:43 Now let's just resize this a bit more now that we're zoomed closer to it. 3:49 Make sure that all of the text is visible. 3:56 Looks like I may have included a few extra characters there at the end. 3:59 So I'll just fix that. 4:06 And then let's just use the smart guides to make sure that this is centered 4:08 properly. 4:12 There we go, I'll actually move it up just a little. 4:13 And maybe just make it a bit smaller there. 4:18 There we go, I like that. 4:25 Now using the rectangle tool, draw a box around the text 4:27 that's slightly larger than the text itself. 4:33 This will act as a container. 4:37 You can hold the Alt key on Windows or 4:40 Option key on Mac if you want to draw from the middle of the text. 4:43 So I've got my smart guides there. 4:48 And I'll do something like that. 4:54 Then in the layer panel, drag and drop it so it's beneath the text. 4:58 And now in the property inspector, we can adjust some settings. 5:05 Add a border radius of six, 5:09 and then remove the border. 5:14 And then let's add a background blur. 5:19 So I'll check the box next to background blur, and this way, 5:22 we can make the box slightly transparent so that the background can 5:27 shine through while still providing added legibility to the text. 5:31 So the first value is the background blur amount, we'll set that to five. 5:36 The next value is the brightness, we'll set that to about ten. 5:42 And then we'll keep the opacity at zero, 5:50 which is basically just the fill opacity. 5:54 Now, using the Selection Tool, 5:58 let's copy one of these book buttons and reuse it. 6:02 So I'll click away from this image here. 6:08 Double click one of these book buttons to select the group, 6:14 copy it to the clipboard, And 6:17 then I'll click back on this art board and paste it. 6:22 And I'll drag this so it's just below this text. 6:26 Maybe something like that. 6:32 A little lower there. 6:34 And then using the Text Tool, we'll change book to say, 6:37 Choose Dates and hit Escape to accept and 6:42 then going back to the Selection Tool again. 6:47 Let's select this rectangle, 6:51 it might be a little difficult to grab it from the art board there. 6:53 So I'm just clicking inside of the Layers panel here. 6:58 And let's make this button a little wider. 7:03 I'll hold down the option key on a Mac or Alt on Windows to 7:06 constrain the proportions there and make it even on both sides. 7:11 And now it wraps around the text, just like we'd expect from a button. 7:16 When you're done, save your work. 7:22 We're done creating our second art board. 7:25 Now, we can link them together in an interactive prototype. 7:27
You need to sign up for Treehouse in order to download course files.Sign up