Design with Marvel Canvas

- [Narrator] One other way we can actually add designs in here instead of just going to Photoshop or Sketch or some other program, and making it and then importing them. You can actually design right in here. Now, it's pretty simple, I'm gonna tell you that, and I tend to cheat a little bit to make it work, but if you have you're project open in Marvel you can see right here design. So, this is Marvel Canvas and that's what it used to be called, I'm not sure if it still is. This just says design, I don't know, but click on design, and it's gonna create basically a new screen for us.

See it says image 7 and we can rename this if we want to. What I wanna do is we're actually gonna go in, and create a page or create a screen rather that's gonna have a video on it. So, we're gonna design that right now. So let's just call this video content or something like that. I tend not to put spaces in things. It's just a web habit, I don't know. You're gonna see you can zoom in, zoom out over here. You're also gonna see down lower left, I wanna point this out first. If you click on that you're gonna see a series of keyboard shortcuts that are actually really useful.

So, I use zoom in, I use center quite a bit, do things like that. There's a lot of things you can do in here. You wanna draw an oval just type in the letter o. A lot of things like that. So, I'll close that up, click on the x if you did open it and come back out here. Now if you wanna zoom in and zoom out you can use Command+, Command- or Control+, Control-, and you're gonna see on the left we've got our tool bar. These are all the things that we can add. You also have a zoom tool which is great. On the right you're gonna see all the different things we can do. There's not a lot, I gotta be honest, not a ton.

What we're gonna do is we're gonna add a little bit of content here. So, I'm gonna make this just a hair bigger. I'm gonna add a header and I'm gonna add a footer, and if we wanted to draw all that out you could come over here to the left to the drawing tools, and if I click on rectangle it's just gonna put a rectangle out there. So, you can come out here and just kind of adjust the rectangle. There's not a lot, like I said, we can do here. If you wanna do things like change the width and height, you can do that numerically here. You can change the position here. We do have opacity we can change.

Gonna make things a little bit transparent. And you can change the corner radius if you want to. Right now I'm pretty sure you can't change each corner independently and do stuff like that. And we have fill and border, and that's pretty much it. This stuff is called arrange. You can arrange things, bring things to the front and back, and all that kind of thing. It's pretty simple to work with, so I don't use it that often. What I tend to do is if I'm gonna use this, because maybe I wanna create some pieces and create another design.

I'll actually design some of it in Illustrator or XD or somewhere else, and just bring in those pieces. So, to get rid of this rectangle here you can press backspace or delete, and that should get rid of it, there we go. Now we're gonna add just some image content that I created elsewhere. So, click on the add image over here. We're gonna upload an image. And come back into the exercise files folder now. I'm gonna add a header and a footer. In here we can select both if we want to. So let's do that, you can Shift click between the two.

Click open and it should put both of them out here for us. Now as you can see, I made them a little bit bigger than they need to be, so we're gonna drag one and then the other and make them a little bit smaller here. There we go, I got that one. Make that a little bit smaller. And as you drag make sure you hold down the Shift key. It's something I always forget to do in here. I'm gonna snap it over there, and get this one using the Shift key. Just drag. Right when you get to somewhere like this let go of the mouse then the Shift key, and you've got it, and I'm gonna drag this down to the bottom here.

You're also gonna see we do have alignment options in here, like align to bottom, etc., but not quite workin' right now that's fine, Let me click on this one to select it, and I can kind of drag it over if I need to, and snap it. You're gonna notice there are what are called smart guides, used to, at least with Adobe applications, that's what they called 'em. And I can drag and hold the Shift key down, and snap it. You can even, if you want make the measurements and dimensions. I let go of the mouse and then the shift key. Over here, so if you want width and height, you can do it over there, too.

So we're not doing to bad here. I'm gonna zoom out just a bit so you can see it. Now what I can do is I could add other content to this. We have a text tool in here if we want to. You can also once again kind of, put things out here, different imagery, different shapes like ovals, etc. Click on the text tool and it's just gonna put some text out here. Let me zoom in so you can see this, and what we can do is we can take that text, and if you just click and drag you can drag it somewhere and you can align it there. And then double click on it, you can get you're cursor in there, and just type something if you want.

Like it says. So we'll type in Here's how to make dough. Bam! Now if I click away and then click on it you can recenter it. If I double click, I can select that again, we can go in and kinda change things up a little bit. You're gonna notice in here that we have some text formatting options. We've got text color. First, if I click on the text color here you'll see we have a little color picker we can work with. Make it a gray, it went away that's fine.

And then come down here you're gonna see text we can do alignments like center, right, left. Different things you can see it's using Roboto, which is pretty cool, and you can see sizing and line spacing, and just some different things we can do. Now, as we're working here, once again, this is really simple, okay? So, we're not gonna be doing a ton of stuff in here. But if this is all I need, and actually this is all I need, cause what we're gonna do later on is put a YouTube video right here and have it be part of the app, just to show you how that works. We can now go in and say let's save this or add it to the project.

The saving button's been stuck for a little while on my end here, but if you click on save it should exit and it's not gonna actually make a screen out of this, it's just gonna save it for the next time you come in. What we wanna do though is we do wanna add this to the project. So, click add to project. Hopefully, it does it for me. There we go, if I scroll down, you might need to do the same, you can see it right there. So there's video content. You can, this is the best part I think, if you decide you're gonna make a whole bunch of pages or something like that and you wanna keep the same header and footer.

If you click back on design right here, you're gonna notice it starts from the same spot as last time. Okay, I don't wanna make any changes here, but we can save and exit without adding another page to the project. Should close it up and bring us back. If we decide that we wanna edit this one, this screen, you're gonna see edit. That's kinda weird, but that's not how you edit the design. You've gotta come down here and click edit design. So click edit design, and then you can take and make changes to it.

Once you do that, you don't wanna just save and exit, cause save and exit is gonna save it for the next one you make, the next screen you make. You wanna update this image. So click update image in this case. It's gonna redraw, put it out there, and it should change it to match. So you can use this Design Canvas if you want to to start from scratch and just build pieces using shapes maybe simple things, or bring in imagery that you use that you have that you can kind of work with.