Join Paul Trani for an in-depth discussion in this video Creating a homepage, part of Creating a Small-Business Website with Adobe Muse.
- Once you've output all the graphics for your site, you can start assembling everything in Muse. Again, I'm in Photoshop here and I've already output all of these graphics. But this is what I need to now create in Muse. Let's keep in mind all the graphics were output in here, I might pull from this backup folder, but in general, I'm going to start in Muse by going to File, New Site. From there, you can just leave these defaults, click ok. And these are the different views. You have Plan, Design, Preview, and Publish.
Starting in the Plan view, you can see my homepage and the master page. Just double-click on Home because we're going to build out this home page, and notice how I'm now in Design View. So I can start designing this page. In fact, right up here, I can change the browser fill color like I'm doing now. You can see what that does, in fact I'm going to change it back to white. But really, ultimately what I want is I want that image to be in the background. So I'm going to select Browser Fill, and I'm going to select Add Image. Now, I'm going to pull from this backup folder, just locate that background jpg, select Open.
You can see it there, displaying it at 100 percent, but really, I want to be able to see the whole image. So change the fitting to Scale to Fill. Fills that browser ultimately. And turn off Scrolling, that way the content will scroll but we'll always see that nice background image. Alright, that looks good. And, notice there's actually a container in here as well. In fact, that's what this Fill and Stroke is all about. So I can change the fill again, you can see what it affects. I'm going to change it to white, but in order to see that background back there, I want to change the opacity.
So selecting Fill to expand those options we'll change opacity to about 70 percent, like that. So we can still see that background back there. Alright, looks good so far. And notice how you can actually create some elements, in fact, I can select the rectangle tool, and just start to draw out a bar, this is really our navigation bar, all the way across. Ok. You can always use your selection tool to move it, but since that's selected, I can change that fill color as well, change that to black, change the stroke to None, to give me my nice little navigation bar.
But really, more than likely you're going to be importing images. In order to do that, File, Place, and locate all of those images. I'm pulling from that backup folder everything except for this background jpg, so I'm going to hold down the command key to deselect it, or control key if you're on a PC, select open, loads them all into my cursor, now I can start placing these elements. So I'll place this accessories image, right there, art prints can go up here, this buckle...
I don't want to click down here, because it's going to place it in the footer. I'm going to actually place it right up here above this line. So if I click and add it there, you can see how it pushes down that footer. And that's what I want to do. Just for a couple of these images, I'll just drop them down here, and I can adjust them in a second. This fashion image will go right up here, we have the logo it can be placed right there, that apparel image like that, shirt, right down there, and also, that image. With everything placed, I can start to adjust this content.
And you'll notice how your content will snap into place, based on these guides. I can feel them snap into place. I might move this logo up, in fact, use my arrow keys just to position it like so, in fact I'm going to select both of these by holding the shift key, and then moving them down, kind of like that, making sure they have ample space. Alright, then I can move this image down, and start to position this content. And you start to feel the snapping going on between these different images.
As I bring this down, and even this image up, I can see that it snaps, so it's actually going to be even with the one next to it. Starts to give me positioning based on images around it, so as I bring this up, you can see that it's about 31 pixels, that's the gap between these images. Bring this down here, and I'll move this case right down here as well, because I want some room for some text that I can add there. Because I still always want to refer back to my design, which happens to still be in Photoshop.
And there's my text. Alright, all in all, I'd say that looks good. In fact I want to click Preview, and now I'm actually reviewing my content in a web browser, and I can see as I scroll, the background stays in place, yet all my content scrolls and everything looks good. And really my next step for this site is to start to add some text. But, I do need to save this website, So, going to Website, Save Site, and you can save it out to your 01 Begin folder.
I'm going to save this to the 01 Final because this is the final site based on these files for this chapter. And, all I'm going to call this is DenverDesignShop. Saving it there.
- Crafting information that visitors will want to read
- Creating a compelling homepage
- Adding navigation
- Implementing social media options (Twitter, Facebook, and YouTube)
- Implementing a contact form and a shopping cart
- Publishing the website
- Adding metadata for search engines