Join Paul Trani for an in-depth discussion in this video Creating and importing graphics, part of Creating a One-Page Scrollable Website with Muse.
When it comes to designing in Muse, it's actually pretty straightforward. And it's even simpler since we're making a one page website. In fact, I don't even need to worry about the master page. I'm going to work directly on this home page. So double clicking on it, here is my current design. It's looking pretty good. And actually, what I want to do is just finish it out. So I'm going to add a black bar underneath this menu right here at the top. In fact, how I'm going to do that is use the rectangle tool, selecting that rectangle tool, right up here, just click and drag out a bar just like that.
Okay? You can see that it's white, in fact I need to adjust it a little. So, using the selection tool, I can grab and use any of those control points to get this right into position. And again, I want it to be black, so with this selected, we can change the fill color to black, and then remove the stroke by selecting none. All right, so that didn't do it. I thought the text would appear, so what I have an issue with now is the depth. So, right over here in the layers panel, if I take a look, whatever layer you had selected is where it will draw that item.
Okay, so I can open that up, there's my rectangle, and you can see there's that group I open that up. And you can see, okay, those are all the assets, basically the menu items and all I need to do is drag that underneath, sure enough it's now on top. Or I could expand this out and I could make it part of that group, just by dragging it in there just like that, and now I can treat this as one unit. Which is going to help me out later when it comes to controlling this based on the scroll position. Alright that's what's drawn in there I'm going to add some text as well selecting text tool clicking and dragging and typing in for travelers.
Again the same issue it's black on black let's change that to white and if we take a look. For our text notice how I can add web fonts. There should be a couple in here already, this is great. If you ever want to add web fonts, just select that button but I'm going to change that font to Alex Brush. There it is. It's that nice cursive type font. I'm going to boost that up to about 30 and that's what I want. Adding text. And then just adding a graphic quite simply. And to be honest with you, largely what you are going to want to do is you are going to want to import graphics.
You're going to do that by going to File > Place and then locating your asset. In fact, you can see all the different types right in here. I'm going to select a PNG file. It's the path PNG, the Assets folder selecting Open. It loads it into my cursor for placement. And then all I need to do is click and there's that path. Something that I couldn't draw in Muse. So far, so good. I always want to be aware of where it's at in my layers panel. In fact, what I want to do is I want to open up this backgrounds layer and drag this right down there.
So it's going to be behind the content. Alright with this design completed, what I can do is save this site and then I'm going to preview the page in browser. There it is. We have that nav bar at the top. Scrolling down you can see the place graphic. And some other graphics that I'm going to, manipulate later on as well. But really my next step here is to define some headers and footers.
- Creating and importing graphics
- Pinning content to the page
- Adding scroll motion
- Controlling the rate at which items scroll
- Adjusting the opacity as items scroll
- Adding Edge Animate animations that are controlled by the page scroll
- Adding navigation and other links
- Adding widgets
- Publishing and tracking the site