Adobe Muse CC || Starting with the Basics

hello guys before I start the video just want to say that this is a school project and I started recording it and I didn't hit record soon enough so it's gonna start off with me now I'm actually explaining what I was doing this is a tutorial showing how to use many different features of the muse so let's get started I guess let's start off with clicking on file new site so that pops up so these are your defaults I I normally just use the defaults but some but I also do like to change this columns to 3 to create your three column margins and then I normally change the gutter to ten let's click OK now I presented with this here is where most of your is where your site mapping is this is your this is the map of your site this is the the basically the skeleton the bones of your site that no one will ever see but it makes it very easy for managing it down here you have what are call your masters these masters are like templates and background stuff that gets copied to all of your other pages so let's start off with double-clicking on our a master and let's create a header so the most common theme right now is having a header up here having a header having a footer down here that are that state on top of the page at all time and having your contact info at the bottom having the name of your business company or whatever the name your site up here and having a menu up here and then using what are called parallax images which I'll talk about later in the video and and having everything scrolled down with a static background so first what we're going to do is we're gonna create a menu bar just create a rectangle I'm sure gonna do is you're going to drag it up and you're gonna click it into the corner right here you can see it clicked in and it's stopped right the edges so i'ma juicing it drag the bottom of this to line up with our margin drag this to line up but with our side of our website and now we're good to go this is an empty rectangle yet is full of features and full of stuff that is super easy to use what we're going to do is we ran out of color let's go super simple with gray now we have our gray header the top of your page of where your menus sometimes your logo and normally the name of your site is called your header now what we're also gonna do is we're gonna right click copy right click paste we're gonna drag that to the bottom and look now we have a footer but the issues that was footers is see as I drag this down the page gets longer I don't want that to happen I want this to be locked in as the footer so I'm gonna go up here and click footer that is now locked in and it ends and it's going to stay there now what I'm also going to do is I'm gonna click on my header and I'm gonna pin it to the middle and top of my page next thing I'm going to do is right click resize and you're going to make sure that stretch to browser width is on what this will do is it'll automatically resize the size of your header and footer to be the size of the website or to be the size of the person's browser this is mostly an aesthetic thing but you really do want this because you got those people out there with the 21 by 9 massive ultra ride monitors that are just rec websites and you get so many you get those select few people complaining oh your website doesn't look good on my monitor you should guys should do this no that's not what you want what you want to do is you want to be able to beat them to the punch and make it so that so that there's so your website looks good on everything so now this rectangle is pinned up to the top this rectangle is pinned as the footer and now we're good to go but let's go check out her statement let's look at what happened see that that got updated there our homepage is now locked in with this in this footer so that we know our margins of where we have to or we can place things but see if I try and click on it it doesn't work because it's locked in and you can't modify it from your home page you can only modify from your master next thing I'm going to do is that I'm going to start some organization let's go into our layers 3 name this to our header now that got them in our header well we see well why do we have our why do we have our footer and our header in the header layer let's create another layer I'm gonna call this one footer drag this one underneath and we're gonna take our rectangle and you can tell which ones which by selecting these which will tell you what is what and we're going to drag this on door footer layer now we have it on our footer you're good to go now if we click on layers you can see woah look we actually have something here I'm gonna create another layer and I'm gonna call it content that is going to be where we're gonna put all of our where we're gonna put our logos we're gonna put our text boxes where we're gonna put our light boxes where we're going to put a lot of our stuff let's go into our sitemap and let's create some our pages so normal pages most people out of that they have their home page they have their about page and they have their contact page but let's say you want something else maybe you want I don't know let's say news you can just add a new one also another cool feature is if you want to have a menu as they suck or sorry if you want to have a page as a sub page you can also create let's create one on a recent site that I just made I had to create different lessons at different levels of difficulty so let's go lessons and let's go underneath that and click and click the little arrow underneath and these little arrows pop up when you select it and you can add pages underneath on this one side of the underneath let's go beginner click enter it's at another one but at to the side of that other page let's go inter mediate immediate spelt that right this time and let's go expert now you have your your pages down here so this is the skeleton of your website this is what it looks like this is and this is perfect but let's drag this over here let's drag our lessons to be in the middle here our boats over there and this is kind of how most websites are laid out is your laid out with your content your about and then your contact your contact always goes at the end for most for the current theme nowadays no let's go back into our master and let's finally add a menu because if you currently preview the website you're stuck you can't go anywhere it's boring there's nothing to do let's go down here and let's click on menus and we're gonna click on Hort I'm gonna make a horizontal menu that menu is very basic but as you can see look it disappears because not on the right layer let's go right click move to layer and move it to our header now it appears above our header both sides nowadays they have their their content right about here the middle of your second button would normally be a boat on your third margin so a boat there is good and it's normally right in the middle of your header as you can see this is a very blank every blank menu and Adobe does that for a reason it's to make people change it so that everybody's site does not look the same but surprisingly it's weird this theme actually this the color of this menu actually kind of fits in but I'm still going to modify it first thing I'm going to do is I'm gonna get rid of this but looks like Times New Roman font and we're gonna change it to Helvetica now look our text just changed it changed which is amazing that's bull dick Wow look it's bold you can change the size of it make it a bit larger give it more of an impact and even change the color change it to a black font let's do that now what I'm going to do I'm gonna hit escape escape again and I'm gonna hit V V brings you to your selection tool here a very cool shortcut to know let's select just one of these don't double click it just click it once and let's click on this let's click over on our thing here this menu item and this thing you know this is normal and orange on my screen this is showing you what it'll look like here let me let me load up the website and show you this is what it looks like when you hover your mouse over it darkens which is very very efficient and it's actually a very cool thing that that Muse does for you you don't have to create classes you don't have to create States you don't have to do any of that stuff that you would normally see people having to code it's all done for you and it's super simple let's click on it click on it again and as you can see it changes and it stays that darker color when it's active so you can see according to what page I'm on it darkens and it keeps it a slightly darker color as you can see actually when I clicked on the contact page even showed the mouse down one where it gets even darker exit out of our preview and let's add some rounded corners on to our site there this is a very common theme but I like to use on mine is rounding the corners and doing all this stuff or I'll do it like that you can have it where it's like a speech bubble I'm Emily like just rounding two of the corners and it adds a subtle effect but I never try something different let's get rid of all this let's get rid of the fill and have no Phil no Phil at all no Phil or let's do rollover and let's make it slightly faded out for rollover um now see the full let's get get rid of the Phil no Phil there no Phil nothing let's have it just colorless and show you the impact this can actually make is what you can do you can grab another rectangle change the color to be gray and oh whoops it's just undo that grab a rectangle change it to be really thin and it's change the fill to something like this now here's a tip when changing your colors this is done in RGB and you have your values from 0 to 255 250 watt 5 is full color to be change all of these 255 to say when I select white they're all 255 and that means that everything that you get the color white black they're all at zero and gray they're about in between so let's make this a little bit of a lighter color it's changed it to 200 um or now just leave it up to 55 we have our white bar and let's drag it up over here oh whoops drag this bar up over here paste it up here and have it right in the middle there look at that that actually looks nice click on printer view look it looks like a regular website it looks like what's what a a real website might look like and we've barely done anything let's go back to our page here and let's add some states let's go into when you roll over it when you roll over it becomes a little bit fake oh whoops um put that back there actually and click on the wrong thing let's make it so it it gets a little bit lighter when you roll your mouse over it so let's change that to 60 very subtle but it's noticeable let's have it when you have that page selected when it's active that you change the the color of the font to let's say two white so when oh whoops control undo let's go here select select and on the active one let's change our font to white there so now when you're on that page is activated it'll be white click preview and I want to hover over see how very subtle that is it's very subtle but it's nice now when my home page is active it's white go to lessons it's white about white contact white let's go back to our home click exit now let's go back now we've created a very basic website that has navigation has a home page and has everything that you would might need but you're probably wondering well you have these three sub pages where are they why can't you get to them because in your menu I have only the top-level pages and actually if you can if you see and I click on all pages that pops up which shows you which is actually a drop-down menu that shows you all of your pages but I'm going to do top-level pages and I'll show you something in a couple minutes I'll be right back okay I'm back let's work on creating some more menu some more menu integration does it wipe off my keyboard there okay so now what we're going to do is we're going to add some functionality into actually accessing those of there those other pages so we're gonna do is we're going to go into our widgets library and we're gonna use what's called a composition we're gonna drag out a blank composition bring everything back up here but before we move on let's just make sure that this is pinned to the top and this is pinned over to our talk to the top right hand side of our page which is again this let's go back to our composition and the compositions made up of a couple parts it's made up of your actual composition and then click on what's your target this is the area that will pop up when you have it selected as you can see these things on here are called triggers and look it's changing the color of it because of the what's built in let's go ahead and delete two of these and this go right click clear all styling it cleared it it's completely blank right click clear all styling we're gonna do so we're gonna drag this up here we're gonna control zoom in and we're going to create a button that is hidden over top of our lessons here that allows the user to navigate to those other pages zoom out and as you can see this content area is actually quite large so let's resize it bring it down to about here to about here and drag this up to the top here and there we go drag this back up she created a little bit smaller no it's about it um zoom in a bit see where we are it's resize that just a tad bit there we go zoom out now we have a Content area that pops up only when we move our mouse over it let me show you what I mean let's put a random color a fill on there like black and what we're gonna do is we're gonna change these settings here show target on rollover which means when your mouse rolls over it we're gonna hide the target when your mouse is moved off of the target up off of the trigger area and also when it's moved off of the target area because otherwise when you did this you would hover over and hover down here it would disappear so what we're also gonna do is we're gonna put triggers on top and hide initially we're gonna click preview hey look it's not there we're gonna go like this click on lessons and it should have worked as you can see this was shifted over due to us having it it pinned over there so what we can actually do is let's do this hold on that's unpin it and let's have this pinned I think it's like this if I'm not mistaken preview there we go mmm it's still a bit off okay it's there but as you can see move my mouse over and it stays there move my mouse off and it disappears which is actually quite useful I'm gonna unpin this room right here let's just preview it again there now that bars lined up with where we wanted it to be I'm gonna zoom in and see look it actually Auto resizes things for us it spin that's to zoom out back to where it should be let's click exit and let's change our master settings because this is labeled as a footer let's also pennant at the bottom of the page here we're gonna pin it to there on the page we're gonna pin this pin that there it's pin that there we're gonna pin the trigger up here we're gonna pin that up there now we're um pin that back preview see how this works there everything's pinned over to the side here click on it now when i zoom in as you can see when I scroll it doesn't move around anymore doesn't move you can see the scroll bar on the side here look it's not moving around like it was before scroll off to our regular size let's click exit and this bar is bugging me a little bit that it's not actually let's go there right inside preview it looks like there we go nice big bar that looks that looks good let's let's add some more features but first what I'm gonna do I'm gonna go to layers I'm gonna go to header at a composition and as you can see on the side here I can hide this let's just hide that quickly and yeah so we're ready to go one thing also is that since this since I'm covering this lessons thing here this lessons button with with a trigger we want to go over here and we want to select of what it should actually be because we are covering it so now when I go preview click over it and then click on this changes go over here go back and what we can also do is if we can also change it to let's think I spelt lessons wrong don't know why I think I spelt it wrong let's just check lesson no that's right okay I know ever gonna actually do this for this trigger is that when you roll over roll over it we're going to grab grey and we're going to lighten it well why isn't that there my ears composition menu that's weird there as you can see it actually fades it out just a little bit let's changed that to well there what was the other one at let me roll over 60% so let's change this one when you roll over it's at I think if I do this at 40 yes that's the exact same preview let's check it out it didn't stick for some reason let's try it again and you roll over huh that's weird hmm that's weird let's try that absolutely nothing happening hmm that's weird let's change this to be triggers on the bottom maybe that would work oh it actually is doing it it's just so subtle she can see oh there it's working now that was weird preview again it was just so subtle I couldn't even see it oh there we go I guess you have to actually be on a page for it to work as you can see it you hover over it works it's changed this to be a bit darker composition roll over and we're gonna change that to 45 there we go preview home there I mean II however already got a drop-down menu super simple and we're going to change this to we're gonna add in another one and we're gonna go over to menus gonna add in vertical we're gonna go to manual and we can manually add in our pages as you can see that widened it up a whole bunch and we don't want that like that we want to actually let's do control and do control and do control Z here to that we're gonna drag down to this page first and we're going to go to manual well manual there and we're gonna resize this to the size that we want or at least small enough that it'll fit on here so what we're going to do is we are going to change this to be the size of the content box and drag that alright I right click clear all styling hold on control and do let's change our text we're going to change this one too beginner backspace exit plus I'm gonna change this one to intermediate Oh better stop hitting enter how to hit escape after and whoops see I had one too many ctrl Z double click there oh whoa hold on to control y let's add it back control hall and let's go expert now we have our three different ones now what we're going to do so we're gonna use hyper linking and we're gonna link it to our beginner our intermediate and our expert so let's load up these pages and let's create some content for it to go on there so for our beginner add some blank text beginner intermediate and expert preview so we're on our expert patients go to the home beginner intermediate and expert so there we go that is the basics of making a website in Adobe muse I hope you guys liked it in the next part of this tutorial I will be showing how to create your backgrounds and all of your different styling to make it look more like a website instead of like a template so hope you guys learned something and thanks bye

Channel: Maple Coated Gaming Channel

Views: 25,672

Keywords: Adobe, Adobe Muse, Adobe Muse CC, 2016, Maple Coated Gaming, tutorial

Id: hV6xDmjFO2M

Length: 27min 4sec (1624 seconds)

Published: Thu Apr 07 2016