Lessons

Lesson Info

Infographic

Hi there. This is a production video. Nothing new to learn so you can skip it. But what I'm gonna do is I'm gonna leave it in here. I'm gonna show you because I'm going to create this like little box with the you know we know how to bring in these icons. Now. I'm going to one thing you will learn is how to draw arrowheads in um XT. And just to give it away, it's just a triangle. You can't do arrowheads and XT at the moment. So just do it with the pen tool. But we'll build that will build these, we'll do some adjustments. We only do it because I want this project to look a little nicer as we're going through. And so there's no new skills just for the people who do like to watch what I do while I do it. You can watch this video. Everyone else. I will see it in the next video. Alright. To get started. We're gonna add the graphics in here. I'm gonna start with a kind of a gray box because I want it to stand out from the background. There we go. Center of it all filled with black border wit...

h capacity using my number trick it's the number keyboard that will do grab my type tool, click once in the middle and switch it to center. I'm going to paste in some text. I just typed out. Save you the pain of watching me spell it or can you kind of nailed all those words though. Alright let's bring in some graphics that I've got. So we'll use import which is command shift I control shift diana pc icons, what have we got? Play, replay, mute. I want those ones there they all are all to be white and make them all the right size mean to you buddy way so big. The reason I'm putting this here is you can't actually do video and stuck in here like you can mock up images obviously, but you can't do animations and videos in XT at the moment. Okay. I feel like it's something that'll do. Um So I just need to put this as visual indicators to our both clients and our testers because what it will end up being is remember I said this is like an actual project, it's actually being built now in the background while I'm doing this course, you can see it here so I want this kind of swoosh and then underneath it is this I don't know, I like it as an idea, right? It's this video that's already playing. You can't help but watching, you can unmute it if you want and then it just explains this product. I like video anyway, you can tell a mega loads of them. So that's what I want in here. This guy's gonna get cut out by me and it's gonna have an image, video playing back here. Command one of the big enough they are now, you notice I pulled from both sides. So hold shift it locks the height and width and if you hold down the option key on a Mac or the old key on a pc, It kind of expands on both sides. It's quite handy done that a few times. I think the next thing I want to do is these infographics in here and this brings up a little bit of appointments. I want some arrows going right so I could there's no arrowheads in. You'll notice I didn't do that in the stroke because it doesn't exist at the moment. So using my line to draw the line, I wanted to be white so I wanted to be thick. How thick? I don't know. I'm guessing five looks good and I want a little arrowhead at the end. But there's no arrowhead option in here. Like some of the other programs you can jump to one of those other programs like illustrator, I'll open it up in the background there. Alright here, in illustrator you can grab the line tool, it's hiding underneath the rectangle tool. I'm gonna draw a line over here. I'm not sure why. But in the properties panel here, if you click the word stroke, you can go to their heads and that's something that will probably appear in XT but at the moment it doesn't. So you can just kind of pick it, you can change the percentage as well. Often the arrowheads are huge for some reason. So I'm gonna turn this down to say 50%. Well the opposite of what I wanted, what did I put in 550 so I can grab that, copy it and just paste it into here. You can see there's my little tiny arrow. Probably need to make it bigger. Holding shift there is there, it's still got the stroke, right? So I need to turn that to five. So that's how you could get arrowheads in there. I sneakily sneakily grab the pen tool using our sweet clicking one skill is just do this cheap, nasty well, and I end up and do what happened there. I jumped I don't know where I went. All right. So there's my sweet arrowhead, Is it even aligned? It's a droopy little little bit bit. So that's what I'll do. It's not a perfect arrow. It's up to you. I just kind of grouped them and I'll start using this thing for the moment though. I need to bring in some icons also need to make sure it's sitting within my kind of boundaries and everything so far. So I'm going to go imports. I've got some icons in actually there are images because their logos, um images. Where's my logos? I haven't actually put them in there for you? Watch this? I will flick my fingers and they will appear ready and you know the best bit. I was flicking my fingers and went to export them and then you all saw them, you're like, what about those guys? They're already there. They were totally already there. Okay. So we've got these guys are going to import them all, jeez, they're all kind of various sizes. Okay. Especially the youtube one. That's what I'm going to do is just show you go through, go through the motions of getting them already. Let's go here. Do I have to end group at 1st. I don't awesome cooking on skill share is quite the toughie. He's probably the one that needs to go the biggest holding shift. Remember while you're dragging it? This one here is gonna be interesting because if I make it all white, I'm just gonna, I'm gonna lose that circle in the middle. So what I'm gonna show you to do is um, group it. So it's now like that or keep on grouping it until you get this bit separate. I'm gonna make it like this like this and who like it's a test who thinks they know how they do this now? How do you cut a hole in that? Because I wanted to be a whole, I want to be able to see through it. You know, boolean operators and we're going to use the second one in which is always the one you want Probably and then I'm gonna switch the color to white and then make this thing just a little less generous. Same with you. So we'll get down, remember command one to make sure you're at 100% because these are all way too big so you're gonna be able to use instructor executed pulling in income from you to me. Oh well that's youtube, you to me, I'm gonna lock that so it doesn't move command el control L on a PC skill share twitter. So how are you going to earn money from twitter and then we're going to reuse these two fellas a couple of times so this will be my first one, 2nd 1. Actually I'll put it there and then tuck in this end. Now when I'm dragging it, if you drag it in it'll probably snap. If you hold shift it will force it to kind of go in a straight line which is handy. No one's not even pointing at the piggy bank. That's alright, you get the idea, it's more like a little infographic to help trying to explain what we do girl, they all need to come up, grab it all even but all grab one of these guys. Here we go. Okay, so now I want to add the rest of the dashboard features so these are not repeating grades at the moment so what I'm gonna do is I'll turn that off, goodbye cheat. I totally cheated just there. Okay it's unfair. It's just text boxes and I had them on another mock up that I was kind of practicing this course. Okay, I like to give it a once through before I do it just to make sure it's all going to kind of work and make half sense so I just stole it off that and stolen error as well. Actually I saw that from the google material. Here we go. Cool. So now I want to grab it because I made it to the right size earlier on repeat grid, get it close and then extend it out so it lines up and even lines up perfectly. Lucky I remember it was 40 pixels in between these guys so that's what we're gonna do for the moment. That will do. There's a different data, you can get a hold of 40 looking at the little pink numbers to the left there. Nothing I'm doing is going to grab it and I'm going to use it on the home page as well as like a little example. So come on, zero Click This one. Command Command three. Command 1. Alright, so I'm gonna do it in this box here. Okay, so my little sample is probably just going to be three of them maybe. Yeah three is going to be enough and I'm going to make sure it fits in by just lining it up with their for the higher and try and grab the background graphic which is that rectangle a little hard to get. No, I got him straight up. Nice. Alright yeah that's going to be extended so we go up higher. Now we've now we've done masking, we can do this a bit better So what I might do is actually make this a lot bigger this way and then kind of drag it, drag it. Not that one, drag that one hard to grab, grab the wrong one. There there we go grab them. I'm gonna put it kind of right in the middle, select both of these and I want the actually I want this the rectangle, the great thing to be in the back right This is going to bring up I guess a good point because what happens if I grab that, stick it in the back man it depends on how you grab it, grab the edge there sent to the back and using the shortcut. So now it's behind the gray box. So if I grab that hold shift, grab that as well and do my masking trick, command shift em or control shift M on a pc. It's gonna mask it but I wanted the gray box as well. So before you do it click this, copy it. So you've got a version of it, Select them both. Do you mask and then paste this new version back on the top and send it to the back end up with like two parts one is being used as a as a mask but you need the other one to kind of fill the background in as well. I'm gonna give you a new here. What is this thing? You see that thing appears it's getting in my way. Who are you? Hey man, I can't see what it is, dragging it around. If I delete you might know. I can't work out what it was. I got 12, 345 boxes. I'm not sure. I've got this big gap here. You probably sort There's another one. See this thing here. Here's some artifact from something. Can I give him a fill? Nope. Just gonna delete them. Happens to the best of us. Oh, just drag one and drag them all. Come on buddies, everybody come with me. All right. And that is going to be the end. I'm gonna kind of get this to line up. I don't want to I do want to do this because I love it to be tidied up, but I know I'm gonna have to extend it again. Mark my words. All right. So we had some arrows. We added some icons. I generated some new icons that the logos that didn't need to be generated. But we learned a little bit of stuff and we got it looking a little bit prettier. Alright, let's get into the next video