Lessons

Lesson Info

Production Video with Tips

Hi there, this video, we're going to draw this kind of graph thing going on and now struck the dashboard, we're going to create the dashboard, there's a couple of little tricks for drawing Maybe mainly for like dividing these up evenly, bit of maths in the fields, hang around for that at the beginning and then after that it's totally up to you whether you watch the rest of it, it's a little bit monotonous me making lines and drawing stuff, but I know some people like that and they love to kind of watch how I do stuff so you can hang around. I wouldn't so watch the, watch the little tips and then after like a minute or two to skip on to the next video, but I'll be here if you want to hang around and I'll see at the end of the video or the next video. Alright, let's just get started. Okay. I'll try and lead with the drawing tips before we get into the hard work of building the rest of the page. Not even hard work. Just the work. Okay. I'm going to duplicate this page now remember we don'...

t have any prototyping if we did, we'd want to make sure we're in prototype before we duplicated it because there's no prototyping, it doesn't matter. Cool, this one here is going to be the dashboard. Cool. I am going to keep that, I'm going to change that to instructor, dashboard. The instructors log in, they get a kind of a cool dashboard, I'm going to use this thing, you know what I'm going to do just because I like the look of it. I'm going to switch the background to the kind of off white and this too, just a slightly darker color is white. Same with this. So this guy here click on the background and use the off white in the background and we're gonna make these stand out like that. Perfect. Use the same width, keep the consistency across the pages and what I want to do is I'm gonna put that graph here at the top here and then the three little cards underneath. We kind of did this in the earlier wire frames one which you should have open already dan not hiding away on the desktop. Okay, so there is there this guy here, this is the kind of page we're building this. I just used the basic old kind of cards, this one here, I want to add that graph to it. Now I would like three equal parts down here. This can be a guess How do you want to do it first of all you need to work out what your gap is going to be. So let's say you wanted to be 40, can you see that pink number? They're kind of to the left of my arrow top left, So that's going to be 40, I want it to be 40 and I want 40 to be the gap of these guys as well so to do some masses, the drawing tip we can use, we can do a lot of math in these guys. So I want to gaps of 30 so that's 61 to minus 60 off it. So the width here is going to be this Minour now I want to say 60, everyone's like no it's not 1684. Okay. You think if I was that bad at spelling math would be something that you know and somebody go, let's give them the math Anyway. So we've done that. So I've cut those two kind of 40 slots out of it. Then I can say actually I just want to divide this by which is food slash And I divided by three three little boxes so I kind of put a convoluted one in here to show you the advanced options. Okay but you might just do, I want it to be -3 pixels. You just put in -3, You can times about two divided by half. So now I should have these guys all kind of lining up nicely. You'll notice that they weren't perfect. Maybe because of this one here I left as a really crazy width, I should have leveled that off but you get the idea right. The other drawing tip is just going to be the shortcuts for the align tools, I'm pretty sure I've mentioned them before but I'm going to start doing that and I want some lines so I'm going to hold one thing if I start drawing out of line it will probably snap to straight. It doesn't okay if you hold shift while you're dragging it it will make a whole perfect little line here and I'm going to drag it to about here because I want a bit of a key going on over here. Okay I want you now there's a couple of ways of doing it, repeat grades. Really handy for lines. You can just go this many. I don't want that many but I'm gonna drag him out. That's gonna kind that was one way of doing it. I don't want my maybe one more let's say and group it. And I actually just drew lots of lines. Okay And I'm dragging them out. I can it really wants to do them automatically but if I grab all of these hold shift and deselect this back one so click that. So I've only got these guys some of the shortcuts that are really handy on a Mac. It's control control command and V for vertical um spacing and it's a church. So command control h These guys here so all of them have shortcuts, they can be super handy. The hover above them long enough there you go. So distribute horizontally. Is that's that weird little up arrow that nobody works out what that is on a Mac. It's control and I can't remember off the top of my head. I imagine it's control L. T. And h envy dropping a comment. If it's not I don't have a pc close to me to double check that one. There are some lines. I am going to make sure they're one. I'm going to lower them down. We're gonna use our shortcut shortcut for the opacity so anybody remember it was I want to lower the opacity of these lines. I could drag the slider which I just did go back up And remember what it was. Remember the number keypads just above your type? We're gonna type in 50 and 30. Just get the little lines going dragging a little bit and now I'm going to go into production mode. You might hang around. You can skip along, I'm going to draw the rest of that graph um and stylized it a little bit like you start at the beginning, you can hang around, it's not particularly fancy. I'm gonna type some letters, numbers and then duplicate them down. Same along the bottom there and then I use the pen tool to draw a graph, put a key in a drop shadow to these guys. So if you're like oh that doesn't sound very interesting you can skip to the next video. I will not be offended if you want to hang around. I'm not going to fast forward it. I'm just gonna start building it. This is the grind, this is the doing it. It's not very exciting why isn't that appearing. Ah sometimes if it doesn't appear it's because you've got your text as this. Starting off with a flurry there then everybody's like wow I'm going to hang around with this. Let's start with black. I'm going to use that. Where's my small 1? Cool. Alright. We'll put in 25 grand here. Here we go. We use the repeat grid and a few of these. How many do I want that's all matching up issue track this. You can see how good that repeat grid is. I'm gonna double click on this one and this one is going to be 15. The mess I can do. Everything needs to be divisible board by simple numbers 5000 and then we'll do zero. Alright, next thing I'm going to get them to align to the right. Nice. They can stay in there a little happy repeat. Good for the moment and we'll get some markers along the bottom here. So I'm gonna grab actually just duplicate this and I'm going to counter all that way. So I need to go this way. We'll go much 17. How many are we going to do as a long. I want to make this a quick drawing exercise. March april. We're gonna kind of cheat here by not putting them all in. I've gone back to many years. All right and now I want to rotate this around so the rotation option in the repeat, it doesn't work. So I'm going to have to un group it, roll it around now if you're rolling it around, Okay, you can use this to just type in say 90 to get it flat hoops. Oh, that's kind of weird. Right? With them all selected instead of kind of if I use that kind of rotation, I didn't realize this, you can just drag them all around. But if I do it this way they all rotate separately 90°. It's kind of weird. Huh? So I'm going to grab all of these guys. I'm grouping them first, rotate them all around, make sure they're right aligned, rotate them all around. And because responsive resize is on, it's not going to stretch them. It's just going to kind of move them out that way, which is pretty cool. All right. I should have done 2019. But anyway, now I want to draw some pen tool stuff because I'm going to fake in some graph data. So you you you big month in june this one here and this one here We come down to this bottom one and join it all up. Nice. Get to the border. Will give us a color one of our graph colors and now I'm gonna just copy and paste this. So I've got two of them. Okay, I'm gonna double click it to go inside and then I'm just gonna adjust them down in june no way up a little bit higher. Oh, it's been a real good month. I'm going to give this one the green and I'm gonna move it down here and I'm gonna send it to the back but not too far back. So in that case if you're like how did he move it forward? There's send all the way to the front, all the way to the back and these two shortcuts I was using bring forward so it just kind of goes back one or ford one Because there's a bunch of stuff all stacked on top of each other. I'll do one more graph. Let's do the copy paste. Let's do the dark gray one. It's going to have a bad august needs to be higher to be able to see behind that stuff. That's a good month. They all started quite low. You gotta line them up, send them backwards in the middle of the back. There you go. That's not a very good graph. You can't see anything. I'm going to make it slightly transparent using my little number trick. Alright, how helpful is that graph? Pretty pretty, pretty average. I'm gonna put in my little key here. I will use my thing to steal it. I'm going to have one two, three. Tell us total it's okay to leave now we're going to do a couple of other things if you're just sitting there and you can't get to the pause um repeat button. You might just be stuck with me for a little bit longer. This is what happens on the unity one and this is going to happen on skill share. If you haven't looked at instructor HQ, it's kind of a hosting thing that I founded where you can host your own courses on and sell them on your own site and connect them to your other places where you sell them. All right. So I've got these guys. What else do I want to do? I want to do the slick all of these because I want to get rid of the border. I like the Phil, but I want the shadow defaults good. So I've gone three and 6 looks nice and that's the beginning of my dashboard. I'm going to add a footer while I'm here. No, I'm not. I'll leave that. We're into this long enough. Right. You're regretting hanging around to the end. But we made a pretty cool graph. It's not very readable. I really want to go through and give it another go. But hey, we've done it and we're ready to move on. All right. I'll see you in the next video