Lessons

Lesson Info

Working with Type

Hi there. Welcome to the video all about type N. X. T. Actually just getting the basics right now. If you are in adobe nerd and you'll be like man, what am I going to learn from this? Type video stick around XD has some quirky text things plus we throw in some tricks and tips for distributing and duplicating. It's worth your time. Hang about. Let's get started. Alright to get started, grab the capital T tool and I'm going to zoom in a little bit and use my shortcut command one commands ones really good when you're dealing with Type so it's controlled one on APC and that gives you 2 100% remember. It's just better to be dealing with that when you're dealing with text. Okay, be seeing it the ax, the actual size that your audience is going to see it when you're making decisions on how big it is and how small it is. So grab the capital T. And there's two type boxes if you click once you get what's called a point text box. Okay. And this is good for headings and it goes on and on forever. O...

kay, that's the way it is. And the other type box, if I go back to my black arrow, okay to kind of de select out of that and then go back to my type tool and if I click hold and drag I get what's called an area text box. Okay. And the difference between this is when I mash it, see what happens, it's gonna fix with. So headings. Body copy navigation, body copy, you only use this for body copy things that have like multiple paragraphs and Lauren ipsum, that type of stuff. You can convert each of them. I could say black arrow. I could say you I want to be an area type box now that there's a little icon for point text. That's the one area text. And so you click on this, I think it kind of changes a little bit over here. But what's what happens if I double click to get inside? I can start typing and you can see it has a fixed with the weird thing about it though is the actual height of that box is just that blue dotted line. Look what happens when I go back to my black arrow because there's all these other texts, what happens to it just kind of disappears. I'm gonna move it down so you can see it but it just gets kind of lost underneath this. So that's what this little blue dot in the middle of this white circle is meant to indicate if I drag it down any of these icons, drag it down, you can see there he is there. So if you end up with a box like this and you make it too small, okay, that little blue dot appears and it's not as important as called over set text and something like in design. It's not super important when you're doing a mock up. It might be though. Um So keep an eye on a little blood up so you can convert one to the other point text area text. All right. A couple of things we're going to move and now and start kind of fixing up our navigation. Now when you are working in wire frames don't be picking fonts. Okay. I'm just gonna leave it as Ariel you leave it as something really simple. It's not time to be picking fonts and we'll do proper fonts a little bit later in the course when we start doing high fidelity will look a little bit more. The real basics though. Before we move on is I've got this box selected. You can see over here, I'm not gonna go through everything. I am actually cause it's real quick left, align center, right align. Okay you've got underline this is the space between letters. So I put up to 20. It's going to open up there. Let's put it up to up something really high. 200. Okay. Space between letters, that's the space between lines. Put it up to and this is the space after the paragraph. So I go into here and I put a return in between these two and I open it up so I put a return in there. There's no spacing but if I go actually I like spacing. When there's a return you can see not between the lines but after there's a return. That's where I put a little entering. All right, a couple of other things to show you about text. A little quickie. Next d I'm gonna delete that stuff and what I want to do is I don't want to use this. This is an XT logo. I'm just going to delete it. I'm going to put in the company name. Don't be tempted to put in the logo here. Like it's really hard as a designer to not start putting in the logo, but then you start using the brand colors and then the fonts and then white frame is not a wireframe anymore. It's like a half baked high res version. So just stick to the actual text. So upper case is kind of a nice way to remove any kind of design from it. Just keep it all very standard. Anything I'm going to do here is I'm going to select all the text and make it white so it can be seen at least across this. The other thing is font size. Remember I'm at 100% remember, command one on a Mac control one on a pc. So I'm picking the right size and it's quite big. Right? So a real common body copy size. Well for wire frames is at 16 pixels. So I just clicked it over here and hit 16 and hit return so often I'll just have 16 everywhere. Maybe the headings will be a slightly bigger size to indicate. Kind of what our headings and what are not. And the other thing to do is on the black arrow. Can you see this little white dot here? Okay. When you're in point text, okay. Which pretty much most of the text that I'm doing here, except for big chunks of body copy are going to be this point text. You see this little dot here and there's a couple of things, it's kind of weird, and if you click hold and drag it down, it's a great way of adjusting the size. Okay, So, and this one here doesn't have a drop down or a slider, so you have to keep typing it in there. So if you're just like a little bit bigger, just drag that. The other weird thing it does is you can see there if I'm right over the top of it, it's up and down. If I come out just a little bit, so not quite on the circle, but just outside, anywhere here, click hold and drag it. It's rotating. Now, you see it over here, there's my rotation and it's up to you, but I'd stay away from rotating text. It's quite hard to do in an app and coding a website. Weirdly, um, it can be done, but yeah, Your developer might hate you if you start rotating text and he's gonna go try and make a consistent rotated text. You have to have real good justification for that pain. But anyway, so we've got our text here, a couple of things I want to like this here, what is this? This is set to 10.1 is a little bit small for what I need. And so I'm going to click it. Delete it. Goodbye guys, I'm going to duplicate this across. You can copy and paste it. Okay. If you select something and go edit copy and then edit, paste it just ends up over the top of it so you can see they're just there. So what I find is a little easier is with the black arrow. So click before you start dragging. So I'm going to drag it over here. Hold down the option key on a Mac or old key on a pc. You can see just kind of while you're dragging makes a copy. I find that quite useful. So I want a couple of things. This first one here on my wire frame is going to be the example. It's like having an example version of it. I'm going to hold down my option and drag over pricing. So you type this in as well. Now, the reason we are keeping these in separate boxes because obviously I could just put in space space space, space, space, space, space, space space and then put in login and that's fine. Two things. One is it's hard to kind of adjust that spacing. That's not a real big problem. What ends up happening is in XT, which we'll see later on when we start doing mock ups If this is one big text box with all the different like words in it. You can only get it to be a navigation item for one thing because it's one text box, you can say this whole block of text goes to the example page, but you can't split it up. So with these all in their own little type boxes, it means later on when we get in the course, we can actually get this button to go to something different from this one. So you'll get in the habit of that. So I'm going to have a couple of these, I'm gonna have login and we're going to have start trail, start trial. Okay. Another thing while we're here is you can see how I can see the edge of this thing. If you can't see it. Sometimes clicking the white background, click on the edge of the art boards. A nice easy double click on the edge of the art board is a nice easy way to select the whole art board. Otherwise it's clicking on their name when you've got the whole art board selected, you can adjust these columns here. Mine is quite light. I'm going to adjust mine mainly because I want you to be able to see it. Okay, You can see it there through the video. Sometimes the videos don't show the contrast very well. Anyway, that's a handy trick. Double click the edge and you get the outboards kind of overall settings. That's not the trick I wanted to give you the one is um I want this to kind of line up close to here. I want them to be all kind of distributed some of the same spacings. There's a couple of ways you can do it. You can select them all. Okay, so I've got everything selected including my now I'm gonna hold shift and click the navigation. Okay? So that diesel exit, that's maybe a bit advanced here. So let's just go click hold, shift, hold, shift, hold, shift, hold shift. So I'm holding shift when I'm clicking them. Makes a nice big selection. And up here there's your alliance. Okay, I want this one here. The distribute horizontally. You can see there's some shortcuts up. They're going to click on it and just spread them all out what you will find the one XD is let's say I don't do that. And let's say I like this one up and I'm like yeah, that's about perfect. If I start dragging this, I'm not doing anything. Can you see those little helpful smart guides appearing? And you can see when I get to hear it's kind of like the little pink thing appears and says, oh would you like them to be 41 pixels apart and you're like yeah man, that is too good. Look at that. Okay, I end up doing that a lot more than kind of trying to remember the shortcut or I have problems with horizontal and vertical. Always click the wrong one anyway. All right, so that's the basics for text. We are going to look at it a lot better later on when we get into kind of web based fonts and do some fancier things, but at the moment, that's what we need to get going with our wireframe, simple text point, text point, text, area text. There was a couple of other little tricks in there. Alright, let's jump into the next video.