Lessons

Lesson Info

Strokes & Lines

Hi there. This video is all about learning about strokes like dotted lines and dashed lines and having these little rounded ends instead of the kind of flat ends. So join me, it looks like a long video will cover all the strokes really quickly at the beginning and then we'll kind of build out some other pages that we need for this will build out the Academy K page that has looked dotted lines and the mobile version which has a little kind of burger menu here, which you keep calling a knave sandwich. But let's build all of that now in our video, let's jump in. Alright, so we'll learn strokes and lines first real quickly just in case you're just watching this video purely just to work out strokes and lines and then we'll do a little bit of actually making stuff like you saw at the beginning there. So first of all get rid of this junk and let's look at the basic line, you're like how can how can lines be, how long is this movie? Not that hard. So I've used my line tool. Okay to draw a lin...

e. It doesn't really matter if you're doing it with a rectangle. Okay, we'll actually do it with both just so you can see I'm going to remove the fill of this just so that you can see it just that they match. Okay, so basically I want to look at the line and we'll just do this on the on the fly because we can so we call it border but it's the stroke around the outside. If you've ever used any other kind of victor drawing. Program the stroke easy stuff size. I'm gonna bump it up to three dashed pretty easy. Okay. It makes a little dash line dot, it is a weird one and it's going to require us to learn how to round cap is. So let's say I need to build a little knob sandwich. Right. So the knave sandwiches considered this Like a little three line menu bar. Okay, You see them in lots of apps and mobile websites. Okay, so might stretch me a little bit and we go, how big is this one gonna be? We're gonna build one in a second. Right. Do you know what I mean? Like those little three lines that you click to get into the menu anyway. Okay, so mine's gonna need to be bigger just mocking it up. So we're gonna look at this option here. Okay, so you've got different capping. This unfortunate first one, the one that's on by default is the butt cap. Don't worry, everyone giggles. Okay, this one here is the one we want, we want the round cap. Can you see what it does to the ends? The capping becomes rounded. This one here, I never use, Okay, it's the square cap or predicting cap. Sorry, it sticks out the difference between the butt cap and always good for a laugh. My own laughs. So, but cap and projecting cap just kind of, the line is still there, but there's a line. Can you kind of see why it's there? Okay. Kind of ends there but it's got equal distant top bottom and to the right and never use that one. Okay, so rounded caps are important because they look cool but when you're doing dotted lines they become more important necessity. Even so size of three we're gonna have you have to have a dash of zero And a gap of something OK something higher than your size. So I'm going to go up to say something like seven and the big changes. Can you see what happens there? You're like that doesn't look like a dotted line. You need to do this and go to round caps. Hey there should just be a dropdown saying dotted line. There's not write that down somewhere. You'll forget I forget writing this course and like is it this one? I just I just throw stuff into the mall until I eventually get it. It's the same for illustrator. It's a real weird one. So any size doesn't matter. Just size. It's the size of the dots. He's got to make sure that zero dash and the gap is something that you like. Here we go. Alright, more line goodness is going to be this, we'll have a look at this guy. He's a good example. I'm gonna make a couple of versions of him. Uh So yes let's leave him there. So we'll leave the first one alone and what we're looking at is this option here? Okay? It's the way that um joins. Okay all the lines join each other. Okay the middle joins so that one there is a nice eater that joint there is a miter joint so it's just the regular standard one. It's probably best. I just click on them. See you there. The difference is can you see the difference between this one and that one? So where these two lines joined Mitya nice pointy end rounded, obviously rounded and this option here the last one kind of like globs them off. Never use that one kind of looks like a I feel like it's a piece from my board game that I know I can't think of it? Oh it could be chess an idiot. Alright good porn. That's what he was all right. Um So okay I had to get them myself there and we're back in action. Another thing that I want to show you is if I grab all three of these and I want to show you the difference between this option here so where the line sits. Okay so at the moment I've got a stroke, okay if I double click it that would kick him. Okay? It's actually there's a line right around the outside and the stroke is actually on the inside of a click off. Can you see the line, others on the outside and they poke on the inside, you can get them to poke on the line outside. There's the outside one. So it's inside, outside. Inside outside or you can get it to mount the kind of straddle the middle. That's how lots of design programs work. It's just up to you what you want. Um, just different looks. So actually let's just duplicate this a few times so you can compare the differences, not that you haven't worked it out already. You probably have so inside middle, which has already had an outside, it's the same thing. Where is the outside, but you can kind of see the different uses of it. You just need to be aware, you can do that because you'll bring in stuff and you'll apply a stroke and you be like, hmm, that's kind of weird. It doesn't look like that. And the other program that I draw it in, this is probably just the way that the line follows. Okay, the stroke applies on the path. So that's it for the lines. What we're going to do now is we need to do a little bit of production. We need to kind of finish off. Which one do you like the best anybody I like. The point of insights do. So I'm gonna leave the one I had originally don't delete the background. So yeah, we're going to go through and build a few things. You saw it at the beginning there. So I'm going to go through delete this and this little trick, I use quite a bit so I need all of these guys but I'm actually selecting the navigation so I delete it. It's accidental. So you select them all hold shift and click the the navigation. What else is there two Things to Navigations The Whole Time? There you go, you don't need two of those so select them all holder shift, click the background and it just means that de select the background or at least the navigation and I can delete them all. Okay to build the things I want. What I might do is speed up a little bit because there's not going to be anything particularly nice to get started so we'll speed along. Okay this is the first one. Make a page called Academy video and I'm going to add a little bit of navigation so we'll speed that along as well. Alright, if you're following along I'm just gonna grab all the text. It is in your exercise files and text and fonts. There's one called left Nav. What I'm gonna do is create a bunch of little text boxes. Oh no we're gonna use our repeat grid because we're being fancy big grid. Okay, make a bunch of them and we're going to go and change the text for these so I'll see you in a sec. All right, you're back a new little dividing line and guess what I wanted to be a dotted line, anybody remember how that works. So I'm going to draw a line. Just a regular line to kind of help divide this left Nav, we did a big colored box in the wireframe. Just wanted something a little bit more subtle. So a couple of things are going to make it the green. What green that'll do. And you remember you pick any size here, right, so we'll pick five. Do you have a dash? No, you have a gap though. So I'm gonna put in five. Let's just see what we got and you can see it's not working. Why is it not working? Just like little lines, you're like, what happened? Hahaha. Round cap. Okay, Kevin needs to be way, way bigger. Not that way way bigger. How am I liking it? Get 100% to make sure you're doing it properly and I'm gonna mess around with this. We'll get well fast forward it because you don't need to see. All right, you're back. That's that's my dotted lines that I liked and we're going to bring in a text title. Okay, So we're probably going to use our age twos on this one. I'm just going to copy it. You can see how useful just having those lying around us. You can use obviously your character styles. I don't know, I don't know why I like grabbing them. Okay, And we're gonna use this text in here, choosing a profitable course topic and I'm gonna start using that green throughout as well before we move on we're going to need a big box. Okay to put our video for later. Of course we topic we're going to learn so I'll get I'll fast forward this one as well. Alright if you're playing along and importing the play button from my exercise files, icons with my play there it is there nice and small and I want it to be our lovely green color. We need to do this for later on before we go as well. I should make that. I should get rid of you. Goodbye grab you. You probably noticed this before you're like, why did you turn into a symbol? That was my bad down the bottom here symbols. It's good to name this one is going to be called top Nav. That's great. This guy here is going to be called. I'm actually going to one group and then get rid of the get rid of the peak grid. Turned that into also art symbol is going to be my left Nav left Nav. That guy copy and paste. We don't have a footy yet. It's all right. Anything else? Yes, I want to like a little page indicator. So when we're on our academy page, it'll look like we're on the academy page. So and we're gonna get no stroke. Send it to the back that looks about right. This lines come across. I should be using my grids but I told you I promised you I wouldn't use them anymore. Let's get that. And when we move from different pages, two pages this thing will move around to let indicate what page you're on. The last thing I need to do before we go is I need to create a little nav. I'm sorry a little mobile version will start using in a sec so I want to grab my art board tool, we'll go for IPhone eight. Um That works fine for me. This is the app, this is onboarding boarding one. Yeah, what I want to do is I'm gonna borrow some bits. Wanna grab you copy, yep based come down here and I'm going to flip this around there. It is yeah, on that side that's hide beautiful gradient. I'm going to bring in a logo and draw some lines, draw the lines first because it was kind of a lines video. It's turned into a production video. It's all right, So I want three lines, yep. Um It's like 100%. So command one or control one just so that you're not it's a big I think hard working this far away but it's good because you get a kind of visual, I kind of feel for what it's going to be. You can have just flat lines. What do you reckon looks better? Giant ones, three little lines like that. Cool. And then is it round caps or butt caps? What do you reckon around I think but caps. I think he's got it. We've gone for square. Where else? We haven't gone around the corners except for that button and probably 42.5. You can't do 2.5 in here, totally ken. Alright let's bring in the logo for the last bit before we move on. So I'm using import. I'm using command shift. I now instead of going to file import it's control shift. I I hope you don't mind me going through the shortcuts. It's kind of like if you've got it you're like I've got it dan I'm beating it in there. So in your dreams you'll be thinking command shift. Die or control shift I. P. C. You probably know both of them. Alright let's bring in our exercise files and and images. There's one called logo stack Stack. What? I can't even see that one stay quite there. It is there what I'm gonna do is I'm gonna drag it over here. Um group it, grab just that piece there. Delete that. I just want to use this in the mobile version and it's a weird logo. Huh? I need to going to illustrate and kind of join all that stuff up. He's right there. Cool. Other than I'm not super happy with this. I'll fiddle with it in the break to make it look like a knave sandwich properly. I call it a sandwich. It's a burger menu. Most people go to burger menus. I first learned of sandwich and I thought that was the coolest name ever. Then somebody called a burger menu, which is equally a great name for it. But I keep calling it a sandwich. Some people do. Most people don't anymore, but that's us for this video. Yeah. Lots about lines. And we also got some stuff ready for our upcoming tutorials Academy page. Alright, let's get going.