Lessons

Lesson Info

Building Your Webpage in Muse

So let's go ahead and set up our background here. So what I did was I charged it on over to fa Tolia dot com royalty free, and I searched for tiled pattern. That was the words that I put in. And I found a lovely file this file right here that we're gonna open for you. Seamless patterns. So pop that open it is an adobe illustrator files close that up that up. So the these are all the different patterns that were included in that one file that I purchased royalty free. So how on earth what? I get one of those patterns out in such a format that I could use it in my muse website. Well, we simply click on one of the patterns and the designer grouped the artwork together. So if I click on any of these, I'm selecting that whole pattern. So let's click on this one right here. We're simply going to copy it to our clipboard by pressing Commander Control. See, now we're going to create a new illustrator document because we got to get that one piece out of that file. If we put that whole file in M...

use all of those patterns would show up all over the background of our side would be awful. So let's call this one floral, uh, live click. OK, and now we just paste. There's that pattern. Now I'm gonna use that trick to shrink the art board down the trim. So object art boards fit toe artwork bounds. The next thing I need to do because this level of opacity is going to be too distracting for my background, I want to click to select it. And I want to change the opacity to something like 15%. So it's very light. Maybe I could go to 20. Now we'll save that file. It'll pop it in the news. So file safer web because we're going to the Web over here at the top, right? You're gonna choose paying eight and click Save. Where do you want to live? Well, put it right here. Now it's come back over to Muse, so we've got an options bar in Muse. So if you're looking at where to customize this background, uh, just look for the grace watch. It's gray in color. Where's the grace watch that must have to do with the browser so if we wanted merely just to change the color of that background area, not include a graphic. We could do that here, but if you want, include a graphic click browser. Phil, when you do, do you get that? You get this little poppet menu toe, add an image. You're going to click the microscopic folder icon next to the word image, and that's gonna let you navigate to where that lives. So give that a click, and now we can choose the pattern that we just made. And it comes right in to Muse. So because that pattern was set up to tile seamlessly, it looks absolutely beautiful. Unfortunately, there's no opacity control for background graphics in Mu, so you'd have to set that over in the program where you created the graphic. Great. Now let's, uh, let's go ahead and bring in our photo shot file where we design the site. So let's choose file place. Navigate to where your PSD file lives, my lives right here. And you get a choice of what you want to import when you navigate to a PST file. Do you want to import the composite image, which is great for recreating the side in music. I think of it like a template that you're going to trace. You're not really gonna trace it. But if you've set up all the elements and Photoshopped exactly how you want your website to be, so it will just be a graphic. So you bring that graphic in, and then you could begin to recreate the elements and muse on top of the graphic that you made it in photo shop. So if you're more comfortable in photo shop, doing your design work or your mock ups, you could do it over there, popping into muse as a composite, which basically means it's going to bring in a J peg of the site. Any time you place a graphic and muse, it loads itself up in your cursor, so see it hanging around right there. If you want to place it at a certain size, you can click and drag with your cursor, and then that graphic will appear at the size in which you click and drag, or if you just want to place it at 100% just click. So here's the website that I made in, uh, put a shop this website that we're building right now or the graphic rather is not a website and Photoshopped but the mock up. So let's say that I want to go ahead and start building it. So now we come back up to file place again, navigate to that same Photoshopped document This time I can choose import layer. So now if I named my layers meaningful e use this little scroll bar, I could recreate my whole site in use by using this composite is a go by and then bringing in the individual layers on top of this composite. So this is the logo right here. When you're bringing in layers, you want to make sure to turn on clip toe layer content. See the preview over here on the right hand side. Because my Photoshopped document is kind of big where I designed that I want photoshopped to bring in that layer, but I want it trim to the actual layer content. So I'm gonna turn on clip toe layer contents and then it comes in at the actual size that it is in the photo shop document. Otherwise it comes in kind of small, so we could click OK again, it loads up into your curse. Or see how it's cruising around with my cursor. As I move it, I have to click to place it. And now I could set that directly on top of my what? I'm the graphic I'm using as my template. So that's how you can design it in photo shop. Bring in the photo shopped file is a go by and then begin to bring in the individual layers. Place them on top of your go by this composited right here and then when you're finished, delete the composite so really helpful way individually designed. So let's go ahead and place this logo. I want my logo to appear up here in the browser window part and I'm gonna drag my active page content down a little bit lower. Now let's say that I don't want this registration mark on here. If you bring in any of your photo shop players that has, ah, little content around the edges that you don't want to be visible and muse, you can crop it and muse. So let's come up here to the Options bar, and you're going to click the tiny little crop tool. It also has the keyboard shortcut of see, Just like Photoshopped. So let's give that a click, and then I can click and drag the handles to crop that are out. So anything that's around the edges of the thing that you bring in you can crop out right here and means you don't have to go back to photo shop to do that. Great. Now, actually, do want to bring my composite back for just a second, cause I want to steal some of the colors that I've got in that file, so we'll choose five place. Go back to pet students. PSD What you get with the exercise files that leave it set to import composite image. Who would say Okay and we're just going to click to place it it full size. Now let's add our fitter bar down here, so if we go back to the actual website, you'll see if I scroll down that I've got this nice kind of anchoring base for everything to sit on. So it's come back over here to muse. Grab the rectangle tool in the options bar right there. Come down here to your document and in the footer area, which is this area between these two guides right here, I'm just going to click and drag to draw a rectangle and notice how when I sent. When I get near the edge of the live page content, see how the the line of the pages turning red. You want to do that because that lets Muse know that you want that graphic to resize with the browser window. If you don't drag it all the way to the edges of the live content area and you don't see that red bar, then it might not expand when the browser window expands. So now we can add a color to it. So they're right tangles still selected. I can come up here to the Phil. We've got filling stroke. So let's click the field icon and I've got a little eye dropper in the panel that expands the click the eyedropper. Now I can come down here in snatch up that color that I had in my Photoshopped document, and if I think I'm gonna use that color swatch again and it's likely that I will, I can click the little new Swatch icon and it appears right here in the field panel so I can get back to it easily. And while we're at it, let's go ahead and actually don't do that yet. Here's your selection tool right here. So to change any of these elements you need to have and item selected, so now we can go ahead and get rid of our composite. Actually, I'm gonna drag that a little bit. There we go. Now let's start bringing in other elements. Let's go ahead and add our tagline down here so I can grab T for the text tool. Click. When we can say I hope not a click, click and drag click and drag to draw text box proudly demoralizing your pit. Since 2000 and eight, format it like you. Would any other techs choose the font? Here's my Web bonds and I could even add Web fonts right there, so that would take me straight to check it. So here's one of the funds that I that I downloaded. You've got your point size control right here. Also make that little bit larger so you can see it. Here's your text color tool. I'm gonna click that pink that I snatched up from the Photoshopped document. Now let's go ahead and add some text down the bottom here. I'm gonna grab my selection talks. I can see that my rectangular bar doesn't extend to the edge of the live page content, so it's Click it Hamlets. Drag that out, see how that line is turning. Rid. There we go. So now we'll grab our text tool again and we'll type. Are copyright information being sure to click and drag and we'll say Option G or all G 2014 pets Tombs, OLC format. It thinks Not gonna work on that, so we'll choose something like Here we go. Now let's add our navigation. So over here on the right hand side, these panels open up automatically. But if you don't see them, for whatever reason, go to the window menu and you want to make sure that the Widgets library is open. This is where all the chunks of code live, and there are oodles and gobs of them. So here's the widget library panel. You've got all these different categories. Forms. Oh yes, forms menus. That's what we want. So let's go ahead and click on the menu and you see a sample of it appear at the top, right? So it's drag. Or you could treat creative vertical menu and these air customizable. So let's click the horizontal menu, drag it over to our page, and it appears, and we've got some options here that we can sit. Do we want our menu to include only the top level pages, or do we want it to include all pages? So if you've added any sub pages and you definitely want to turn on all pages, which direction do you want your menu to go? Do you want to edit these buttons together? Absolutely. So now let me scoot this guy over a little bit. If I want to make my menu a little bit larger, it's got re sizing handles so I can click and drag to make that any size that I want. I can change what the buttons looked like, and I don't even have to change each one click on one button to activate it. Come up here to the Options bar and you've got the same kind of formatting controls so we can control the Phil. I could make it that nice peak all of the navigation buttons update automatically. I can give my buttons. Ah, a nice gray stroke. If I want to. You do you have to remember to set a stroke with? So if you change the color of the stroke in your surprise because no stroke actually appears on your buttons. That's because this menu or field rather set to zero. So make sure that you actually enter a number there. The next thing you might do is give all these buttons rounded corners and I'm gonna zoom in because this control is the smallest control that we've seen yet all week. So it zoom in and take a peek at it. Here's your rounded corner control right here, so you can control the roundness of each corner individually. But if you want them all to be uniform and we do for this design, I'm just going to click and turn them on, see how they're changing to a curve as I click. And then this field right here, this radius feels lets you specify how around and they are, the higher the number of them were around in the corners you're gonna be, Then you could make him around if you want it. I mean, you could enter such a high radius that the buttons became around instead of rectangular. So think about all that stuff. Is your building out your navigation here? We can increase the around this just a little bit. And can you see that at the bottom? Right? How the the buttons are changing. You can make him perfectly pill shapes if you wanted to you. So let's zoom back out. Let's say I want to control the spacing between all of the buttons, so I'm gonna click to select the whole mess. It is a little bit persnickety when you're dealing with the navigation. You know, click to activate the button click to activate the whole thing. So to change spacing, you need to have the whole thing active. And it is. And you know it's active because it's got that bounding box all the way around it instead of around just one button. So let's space these guys out by grabbing the spacing panel, and we're going to do that with the gutter control. It's always type in zero right there. See how now I've got more of a gutter between my buttons So that's how you would, uh, space the mouth. And if you've got some navigation going on, ah, you would need to click all the sudden navigation pages or just one of them, rather, and you could form at them appropriately to you So you could come over here and do that same Phil, if you wanted to, for the sub navigation pages. And once you change one, the rest of the pages at that level changes well, really incredible stuff here. Now let's go ahead and change the font so I can come up here and here's my text right here. The far right foot text. Then I get my Fatman. You and I can access my nice Web font from type kit, and I can change the size of the text on the navigation buttons and a course change the color, which we set right there. Now let's change the rollover state. So all you have to do is, uh, you have to have the whole bar selected for this to work. So that was a spacing panel. Now let's click the state's panel. I guess you have to have one button selected for the state's battle. That's The biggest thing that I have a problem with with Muse is difficult for me to remember when you want the whole mass selected versus just one of the buttons. But if the 1st 1 doesn't work, then select the other thing. So if you've got just one button selected and you don't see any states or you don't see the panel populate like you expect, then try selecting the whole bar and see what that does. But when we have one button selected them in the States panel right here, we can set all of our rollovers. So this is my normal state, and that's fine. But for my rollover state, let's click that, and by default, it's great. But let's say I wanted to be perhaps this light green when I roll over it. So let's click the fill button right here and grab a little eye dropper and come over to our logo and click to snatch up that light green. And then we can click the little Swatch icon, and now it's saved so we can use it again later. So see now my normal state is pink in my rollover state is green. Well, what's my active state gonna be and the active state is just when they're on the page, What does that? But it looked like he wanted to be different to let them know where they are. So let's make that the dark green of the pets team's logo. So with the active state active with active, active, come over here to the Phil. And this is a little bit persnickety, too, because you can't really move around that box right there. So if it's covering up what you want to get at, then you might have to be Ah. Oh, a little clever to get at that. So you might have to temporarily you might have to temporarily crashed program Wow, All we want to do is move a logo. So what? We thank you, Muse. What we could do is just scoot the logo down open the fill panel, used the eyedropper to get at that dark green and then move the logo back. But it is odd that you can't move those panels around. Yes, drink. This might be a good time to ask. I was going to ask you if it saves the current state. So if it crashes, you come back where you were on Lee. If you had saved the site, you have to do it manually. Yeah, Round Teoh repetition. How fast can she do this? Maybe I should have upgraded to the latest version. Any questions on what we've been looking at in you so far? So we'd have a few questions, actually, Yeah. There's a question here from Aussie Kim, and they want to know how does muse handle responsive designs? That the website format's itself for the device for mobile and for Well, you've got a nice set of templates that you can access. So you've actually got you can see what your website is gonna look like on a tablet and IPhone using these buttons right here. But having not actually made a website for mobile devices can't really speak to that. But you do have some nice previews in here that you can see what it would look like. But you've got full CSS support over here, so it should be able to rearrange itself, depending upon you know how you build this side. That's a little bit more technical up. What device that you're looking at should be able to re flow that so many people look at websites on their mobile device. So now you know what? Buttons to press. Yeah, see what it will look like when you're putting that designed together? Yeah, so you can see a preview of those right here. So we're going to stay mostly in desktop mood so happily. I had saved this site before, so let's take a look at our master page again. This double click it to open it. So here's what we end up with the navigation bar. So let's click to activate one of the buttons. And if I come over here to my state's panel, you can see the different states that we've got here. So let's go ahead and have another go with that active site will see if it'll let us move our logo down a little bit. And uses is just riddled with smart guides. So as I drag things around, see those guys that are popping up. Anything else that's on the page is offering to let me a line with those elements, which is really quite wonderful. So now let's come appear to this button right here. Click are active State and we're going to click are feel icon in the options bar, and now we can click are dropper and come down here and pick up that olive green. And then, of course, we're gonna add it as a swatch because we might need to get back to that color later. And now we can skewed our logo back. See how, as I'm moving that logo around, it's it's snapping to the left edge of the page content area. That's really, really wonderful. Here we go. So that's all there is to setting up all those different states. So now as I click that button, I can see that. Okay, when I rolled over is gonna be light green, and you can preview it by clicking the preview button. See, those beautiful rollovers? Weren't those easy? And if we click cost teams and we're on costumes page, that button becomes start green to let people know. Hey, you're here. So that's a wonderful thing. Now let's go back to design mood and let's say that we want to rearrange our pages. So it was Click back on plan and see how the everything we put on the Master page Auto populated itself onto all the other pages. That is usually powerful right there. So let's say I decide that I want the location page over here. Now let's go back to preview. It moved the button for me. Incredibly powerful stuff. So let's go back to design and let's take a look at actually more what we want to go back to plan now because we want to build on our home page. So let's double click home the only one to put repeating elements on that master page, and you can have multiple master pages. So now is choose file place, and let's bring in some of those Photoshopped layers that have are pictures on there. Click to activate the PSD file. This time we're gonna turn on import layer, and as I click on the layers, I get a preview of what they are over here on the right hand side. So remember, when you're importing layers, you always want to turn on clip toe layer contents, and you can select multiple layers to come in at one time. So if I want hat, seasonal and outfits, I can shift clue to select those three layers like okay, now they're all three loaded up in my little cursor gun here. I clicked to place them. Now I can, uh, move them around individually, set him where I want them. I can align them however I want. And again, you're going to see those smart guides pop up. See, that little blue line uses a heck of a lot of fun to play with. Here we go. Now, at this point, we might want to move our header down or a foot or down a little bit rather so we can click and drag this guy right here to scoop that down and give us a little bit more page room. Now, if we wanted Teoh, add are rounded rectangles toe all three of these images. We would shift click to select them, and they would touch each corner of that rounded rectangle box up there. And then we would set exactly how much rounding we want. The higher the number, the more around the corners you're gonna be. And if we want to add a little bit of a stroke, we would click the stroke button, see the usefulness of saving those colors. We might come over here and add a pink stroke. I'm not seeing the pink stroke. Why? Because my stroke is set to zero, so you might set it to two. Now it's activate our select tool. And let's make sure that these items air space proportionately. So as I click to activate one of the graphics, I should be able just to move them independently of each other. Here we go. So as I get them close to each other, see how muses helping me perfectly align. So you're gonna have diesel areas that will come up in highlight and let you know when you're spacing is equal, equally distributed. Now we can come down here and shoes, file place and just keep bringing in elements from our Photoshopped document. And I don't know about y'all. But when I learned how to design websites, I draw the man on paper. Then I build them in photo shop, and then I bring them into the tool that I'm gonna use to actually assemble the site. So drop sketch this stuff out on paper. It'll save you a lot of time that if you're more comfortable building kind of building the mock up up in photo shop. Then you can just access that right here in use. So now I want to bring in my titles. So I've got three of those guys clipped a layer. Contents look OK with my little gun to place them. They're in here somewhere. There they are. Screw these guys up, and the bottom of your page will kind of move around. As you move your content around, it's always going to snap back to the default height that you specified when you created the new site. So now I'm going to click to activate each one of these guys, and we're gonna scoop hm over. And now we get at our text. When you grab the text tool, click and drag to draw a box. And we could come over here to our actual website and steal the text. Copy paste, Go back to muse paced. Format it. You can even set up character and paragraph styles in here. So if you find yourself formatting in a similar similar way over and over and over, then that would be a great opportunity to set up a style for that. You hyperlink or send anyone out. Maybe after your blog's or absolutely OK, You can also duplicate elements on your page. So if I shift option, drag or shift all drag on the PC once I get one text box formatted like I want it orographic formatted like I want it, I can click and drag to duplicate it and then simply type in the other text. We did get a tip. Doctor Koop came in and said, Tell Lisa that if this site saved at least once, news will all almost always recover up to about three minutes before you crash nicely. Thank you, Dio. Okay, so let's click preview So we've got for the home page here. Not too bad. We had more time. We would continue to finagle it. But I want to show you now are some of those witches. So it's come back over here, too. Plan, because I want to switch to building another page. So typically you start with building the master page, but all of your repeating elements on there and then you start coming in here and double clicking each of the individual pages to continue to build them out. So it's come to costumes and let's go back over to our widget library, and we've got a category called slide shows and you've got several different ones. You've got five different templates that you can choose from here. Lightbox was the 1st 1 that I should do where the thumbnails were kind of small in a grid, and as you click each one and the whole screen kind of goes dark, that's lightbox. Full screen is interesting, too. Thumbnails is You click on these, you get a sample of what that slide show is gonna look like over here. So let's build the thumbnails. They both work in a similar way. So you just drag element out from the widget library that you want to add clicking dragon into place. If I want to center it on the page, See how I'm getting that guide right here as I hit that center Mark and I feel a little bit of a snap with the tool. If I want to make this larger, I can I can click to activate uh, all the elements that I want to create, increase in size and click and drag to make them bigger. If I wanted, I can make the thumbnails bigger if I wanted Just click toe, activate them. And as you dragged, increase the size of one, they all change. So let's say you wanted to create a slide show that looks a little bit like that. Now we can populate these little they're like photo sales, kind of like we saw back in light room. So now let's come appear. Choose file place or press command e navigate to the folder where all your images are. Click the 1st 1 shift click to select the last one Click open. Everything that you bring in is loaded up in your cursor gun. So don't let that throw you. If nothing changes, just click within one of those boxes. And now if the program doesn't crash okay, then it auto populates If we want to add a caption to each one, we can click the thumbnail that we want to add the caption for double click it down here in this area and we call this one angel click the next one We can call this one Bross Tafari In I skater Timely for the Olympics. I loved watching the ice skating. It was so nice royalty and so on and so forth so you could continue experimenting with the size of this, you know, make it a large as you want. Move your navigation elements down to wherever you would like. So you can customize this stuff like crazy so you could position the navigation wherever you want it. So now let's take a peek at that. And of course, you could add all manner of strokes across everything to really format it. So let's take a look at the preview. Not too bad, huh? With just a couple of minutes, we can build something like That's absolutely insane. You can also set a specific role over states for those thumbnails. Let me show you that real quick. So as I click on this one time no right here and I go back to my state's panel, I can see all of my different states. So maybe my normal state is 50% in my rollover state is 100% opacity. So that way, when I roll over each one, it becomes fully visible. Save the site by choosing file a safe side as and we'll call this one Epstein's live. And now, when we want to publish it, we click publish. And if you're on the full creative cloud subscription, you can type in your site name right here. We'll call this one pet students version to click, OK, and it automatically goes up live on the Web, kind of in a trial version. So it's publishing it live on the Web right now. We're going cancel our that when you're ready to take it live. What you want to do is choose file upload FTP host, and that's where you would enter the custom domain name in there that you've got. But that business catalyst thing and in the hosting would still be free causes business catalyst. But the u. R L would no longer be, you know, pets tombs dot business catalyst dot com But that business callous thing you can share that with your client and, you know, it's kind of like in a trial version to see if they like it. You can continue to find to the site and so on and so forth. So I hope that is enough to get you excited about what you can do with Muse. It is an amazing program