Adding Text7:45 with Nick Pettit
After you've drawn shapes in a design, you'll more than likely want to add text to label sections of an app, buttons, and so forth. The text tool in Adobe XD offers the ability to place text anywhere and then format it using the property inspector.
- Text Tool: T
- Selection Tool: V
- Move Object by 10px: Shift + Arrows
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.
With the major chunks of our design in place, 0:00 we're ready to work on more functional details like text and buttons. 0:02 Let's start out easy, at the top, with the name of the app. 0:07 First, select the text tool from the left side, or 0:11 just hit the T key on your keyboard. 0:15 Then if you click generally in the area where you want the text, 0:19 here at the upper left, you can start typing. 0:23 This app is called, Trippin', with an apostrophe. 0:27 To accept this text, hit the escape key on your keyboard. 0:34 Then we can switch back to the selection tool by hitting the V key on the keyboard. 0:40 And we can position this text a little bit better, so 0:47 that it's aligned left with the photo, and 0:51 aligned toward the middle with the profile image. 0:54 In the property inspector, let's change some values. 0:59 First, change the font from Helvetica Neue, 1:03 or whatever appears to be on your OS, to Verdana. 1:08 This font might not be the choice that we'd use in the final design, 1:15 but it's functional for the purposes of prototyping this app 1:19 without getting too deep into the visual design of it. 1:23 Next, change the Fill color to something that will contrast with the dark 1:26 background. 1:31 I'm going to use a sort of orangey yellow color, 1:33 it's mostly yellow, just a little bit of orange there. 1:37 And we'll actually end up using the same color throughout the rest of the design, 1:43 just for highlights and accents and buttons and things. 1:48 Finally, let's change the font styling from Regular to Bold and Italic. 1:52 And this bit would probably be replaced by an SVG 1:59 based logo later on, but it works for the purposes of prototyping. 2:05 Next, we're going to add text on top of this first photo here. 2:11 We'll have the name of the city, a price for 2:17 the trip, and then a button to book the trip. 2:21 Select the text tool again, by selecting it from the menu here or 2:25 hitting the T key on your keyboard, and 2:30 then across the top of this image, in all caps, 2:34 we'll type BOLDER and then hit Escape to accept. 2:39 In the property inspector, 2:44 change the Fill color to white, 2:48 then change the size to 34, and 2:52 the font style just to Bold instead of Bold Italic. 2:56 Last, let's change the alignment to Center. 3:04 This won't actually center the text, but if we position it using the selection 3:07 tool, And 3:13 then we change the text later on, it will stay centered. 3:17 Now let's add some prices to this trip. 3:23 Using the type tool, I'll click on the bottom left of 3:27 this photo here, and let's just say this trip costs $1149, 3:32 and then I'll hit Escape to accept. 3:37 In the property inspector, change the font size to 18. 3:42 Then let's scroll down here and 3:49 just add a small shadow underneath this to make it stand out a bit more. 3:52 I'll increase the opacity to 40%,. 3:58 And set the x to 0, the y to 1. 4:05 And then we'll keep this shadow super crisp with 0 blur. 4:10 Next, change the text so that it's left-aligned. 4:16 That way, when we change the amounts on other photos, 4:20 they'll all line up with one another along the left edge. 4:23 Finally, use the selection tool to move it to the bottom-left corner of the image. 4:27 And if you hold down Shift on your keyboard and 4:35 use the arrow keys, you can move at 10 pixels at a time. 4:38 So holding down Shift, I'm going to hit the right arrow key to move it to 4:42 the right by 10 pixels, and then again, I'll hold down Shift and 4:47 hit the up arrow key to move it up by 10 pixels. 4:52 And using that technique, you can get a little bit more accurate positioning 4:55 depending on what you want to place. 5:00 To finish this up, we'll add a booking button. 5:03 To do this, select the rectangle tool, and 5:06 in the bottom right corner of the first image, 5:11 draw a rectangle something like this, and 5:16 switch over to the selection tool to move that just a little bit. 5:21 And then with this rectangle still selected, 5:28 in the property inspector, change the corner radius to a value of 20, 5:31 so that instead of a rectangle, we have a capsule shape. 5:37 And then next to the fill and 5:43 border colors, you'll notice there's an eye dropper tool. 5:46 We don't wanna border on this, so let's remove the border, but for 5:50 the Fill, we want this to be the same color as the logo. 5:54 So we can use this eye dropper tool and 5:58 we'll hover over an area of the text that looks like it has a solid yellow color, 6:03 be careful not to select any of the earliest parts. 6:09 Along the side there, so that looks pretty solid to me, 6:13 and that will give us the same color as our logo. 6:16 Now, let's type some text over it. 6:22 I'll hit the text tool and click over the button, 6:24 and I'm going to type the word Book and hit Escape to accept. 6:30 And then change the Fill color to black, so it stands out. 6:35 Change the alignment to Center. 6:41 And then with this text still selected, if we change over to the selection tool, 6:44 by hitting the V key, and then hold down Shift and 6:50 click the button background, we can make sure that these are horizontally and 6:55 vertically aligned using the alignment tools up at the top. 7:02 So I want those to be aligned middle or vertically, 7:07 then I want it to be aligned center or horizontally. 7:13 And this will make sure that the text is perfectly in the middle of the button. 7:20 When you're done, make sure to save your work. 7:27 Our first image is done, but we want three more of them so 7:30 people can see all the different places they can travel. 7:34 Might be tempted to just copy and paste your images but there's a much better and 7:37 faster way that I'll show you next. 7:42
You need to sign up for Treehouse in order to download course files.Sign up