Building a Website from Scratch | Adobe Muse CC Tutorial | Muse For You

[Music] hey what's up amuses this is John it means for you here to help you build awesome websites without code and in this video tutorial I'll be creating a website from beginning to end so I'll be yep creating a website from scratch to show you exactly how to build a website in Adobe muse now with this website I have used quite a few widgets from use for you shop comm just add more interest and more animation to the website so I have the website here and if I click refresh we can see that we have the SVG draw drawing the logo here and then we have the animator fading in the logo I've used some animated buttons here for subscribe and shop and then I'll scroll down the site we have branding development consulting and then I use some lorem ipsum text here the text doesn't say anything but just as an example here we have works and again some some text some lorem ipsum text which is just kind of babble text just as a placeholder and then here we have a slideshow and it goes through a few different images here and then here meet our team here use the animator widget to animate these images going up very good here I have another image here I have a contact form that says let's discuss here very good and I've formatted and styled this contact form in Adobe muse and then here I have a footer with home about subscribe and contact with the logo here and then right here I have an animated button from the animated buttons widget and if I click on it it brings us back to the top of the page and then here I have the menu so if I click the menu we have I'm using the the big menu here and I'm using the door the one called door so it opens up like a door and then we have home about shop subscribe and contact so if I click about it goes to the about page dedicated to service I put the logo here and some text here at the bottom some lorem ipsum text then I'll go back to menu I'll go to shop here we have a shop and here I used Photoshop buttons which I'll show you in this video tutorial I've used Photoshop buttons and I've used the PayPal animated buttons widget so that you can click on the button and actually purchase this item here here we have t-shirt and it'll take you to the shop and very good and I have to rename it here since retro hat but it's actually a t-shirt but yeah we'll go over that in this video tutorial so here I click buy now and this one should say hat very good hipster hat very good and then here I click buy now and then this one is a scarf very good scarf there and the user can pay with paypal very good so there it is and so hovers over here and this was created using a photoshop button there and this is the animated button widget animated buttons widget found at muesli shop comm and then here again we have the footer and an image here in a sense shop right here so I'll click on the menu again then I'll click on subscribe' here we're using the MailChimp Unlimited widget and MailChimp or yeah MailChimp and then with the MailChimp Unlimited widget and then the user can subscribe to the subscription here and here I wrote receive updates on new products very good and the footer the footer is on every page here which is very nice they're very good and then I'll go to menu and then I'll go to contact and we just have the contact form again that says let's discuss so as you can see it's a fairly simple site but I think visually it's it's very nice and it it hit up it hits home to all the kind of major important things that a website might need as far as like a subscription a shop and just some nice design there very good so in this video tutorial I'm going to show you how to build this website so let's begin so the first thing I did before I built the website was look for a template that I liked so I went to this website here called design crazed org free Photoshop PSD website templates and I'll leave a link in the show more area below but basically I wanted to get some inspiration for the website kind of the layout how I wanted it to look and so I just browsed this page and I think I came across this one here called meet Brandi and I just downloaded it so what I'm going to do is I'm going to open up my Adobe muse website and this is what the website looks like the one I just showed but I have a blank page here so we'll start with the blank page and I'll just double click on the homepage there very good and actually before I start building the website what I want to do is create all my pages first so I'm going to right click duplicate page because the home page has the 960 grid in the 960 grid you can get from these resources com just go to that page and he has a nice 960 grid there so I'm using that grid because it allows me to tend design better and I know kind of where to place things with the grid which is really nice so I'm going to create my pages so I'm going to so I created the second page I'm going to right click duplicate page right click duplicate page and right click duplicate page so here I want a home page I want an about page I want a subscribe paetynn oh excuse me I want a shop page here and I want a subscribed page and I want a contact page very good so those are my five pages and I'm going to start with the home page first so I'll double click on home so here we are on the home page and I'm just going to zoom out by hitting command - very good so I have my assets here and let me minimize this here I'm going to go to my Finder window and I have all my assets for this website here and before you start your website you do want to prepare your assets but I'll go over all of this and the different assets that I use for this website so the first thing I want to place is the the brandy PSD image it comes with the PSD a dot Photoshop file and a dot jpg file so I'm going to click hold and drag and place the dot jpg file here and I'll just put it over here to the right just so I can start seeing how I want to create the layout of my website so there's a layout and what I'm going to do is insert the logo because I want to take the colors from the logo so I have the logo actually the logo is in an illustrator file so I'm going to open the illustrator file I'm going to right click open with Adobe Illustrator and here's the logo so I'm just going to copy this logo and I'm going to delete this background here and I'll delete that background there as well and now I just want to copy this entire logo simply by clicking holding and dragging over it and then I'm going to hit command C to copy or control C if you're on Windows and I'll go back to my Adobe muse website and I'll hit command V to paste and now I paste into a double Muse as an SVG and most browsers now are compatible with SVG so this will work very good and now I'm just going to resize this a little bit bigger to about there perfect and now I have my logo in the website now the reason I place the logo first is because I want to sample the color the colors of the logo and that's the style that I want to make the website is the color of this logo here we go so to sample the color of this logo I'm going to click on the browser here or the the page I'm going to go up here to browser fill I'm going to click the drop down and now I have the sample color tool and I want to click on it and then I want a sample kind of like this goldish color here so I'll sample that and the background is going to become that color for a moment but don't worry about it too much because what we want to do now is we want to save this color by clicking this ad swatch icon here that looks like a piece of paper so I'll click on it and then also click OK and now we have that color saved and our swatches panel so I'll go to the sample color tool again and I want to sample this kind of black color in here very good and it'll turn the browser that color but now what I want to do is save it to the swatches panel so I'll click the swatches panel there again and I'll click OK or the swatches icon and now I have those two colors which I want to use for my website ok very good and now I can make the browser fill white again there we good so now very good so now the excuse me the the browser fill is white so now what I want to do is create that first top part with an image so I'm going to select my rectangle tool I'm going to click hold and drag and just create a rectangle right there and I'm going to make the rectangle 500 pixels in height I like to use exact numbers when I'm working with different sections on my website so this one this first section here is going to have it's going to be 100% width and it's going to have a height of 500 pixels and we know it's 100% width because the 100% width button here is selected and that all that means is that when you make the browser bigger or smaller the image will shrink or get bigger with the browser very good so now I have this rectangle rectangle here and I want to fill it with an image so I'm going to go to fill add image and I'm going to select this image here very good and I'm going to scale to fill and center in the position in the middle there now this image first we can see that it's that it covered the logo so what I want to do is right click and arrange and then send to back or you can do that with the layers panel if you click on layers and you can just bring layers on top or behind each other okay very good so now the images in the background and I want to give this image kind of a darker overlay so to do that we go to fill we go to opacity and we set it to let's say I'll say 60% opacity and then for the color I'll select that kind of darker color that we sampled from the logo very good so that just gives the background a bit of a darker color very good so now I want to create the next section which is going to say branding development and consulting so for that I want another rectangle so I'll just select the rectangle tool and I'll click hold and drag and just create a rectangle and now I'll fill this rectangle with that kind of yellowish color goldish color so I'll go to the drop down here and also like kind of this goldish color here very good so now it has that color very good and I'll just drag this down a little bit more actually I'll make it for the height on this I'll make it 300 pixels in height very good and now I want to add some text so what I'm going to do is I'm going to go to a lorem ipsum generator and for those of you who are not familiar with what lorem ipsum is it's just kind of like dummy text like when you're designing something you can use it and here I'll click on generate lorem ipsum and I'll leave a link to this in the description area below and I'll just copy this text very good and I'll paste right here into Adobe muse and now we have some kind of dummy text that we can play with and I don't need that much text so I'm just going to delete like that and perfect very good and we can see that this rectangle got smaller so I will make that bigger and now that I've got some text in here what I want to do is find the font for my website I did this before and for this website I'm using Kings castle on display but you can search for more fonts by clicking on add web fonts here and here I'll close this and then here we are in the Typekit fonts and they just have tons of fonts here that you can use so that could just be something that you want to look at like what font you want to use for your Adobe Muse website very good so then I'll just cancel this here so we have some text here and I want to make this text white so I'll just highlight it and make it white there so we can read it and I'll make the text that king's castle on display perfect and now I want a header and actually before I add that text let me make this bigger here and actually want a header up here that says features so I'm going to select the text tool drag out the text box and I'm going to write in features I'm going to highlight it and I'm to make the text about 60s good or let's say let's say 48 there and I'll make the text white and I'll make it that king's castle on display and I'll underline it by selecting the underlying option here and then I'll Center the text by selecting the center positioning there perfect and then I'll position this right in the centre of the browser very good perfect and then I'll make the smaller here okay so here we have some text and here I want to add the text branding and and actually before I do that what I want to do is add an H to H to styling tag for search engine optimization to this heading so now I'm going to click on paragraph Styles and I'm going to create a new style from the attributes so I'll click there and I'll double click on paragraph style and I'll make this an h2 sub head and I'll call this h2 so now when I have different sub heads like this I'll just assign at the h2 sub head tag and this is good for search engine optimization so it knows which which parts are important on the website very good so now I'm going to create another text and I'm going to just drag it out like so and I'm going to write branding and again I'll format it to the king's castle on display and I'll make this a bit bigger let's say 24 and I'll make the text to white and that looks good there and then I'll put the text right underneath branding branding there and then I'm going to give this branding text another paragraph style I want to make make this h3 because it's not as a as important as the h2 tag but it's still pretty important so we'll just click there create a new paragraph style and I'll call this h3 and I'll create an h3 subhead very good perfect so now what I'm going to do is copy and paste this a few times so we have three different subheadings there very good and I'll copy and I'll just change the text here I'll call this development and consulting very good and I'll make the text a little bit shorter there and I'll just copy and paste that text perfect very good and all those have the h3 tag and this one has the h2 tag perfect so there we go we've started our site we've got some text some subheadings here and I'm just going to reference this website again so I can see what I'm working with okay so the next one is works so let me go back to the site and I'm going to create another rectangle so I'm going to copy and paste this rectangle just bring it down here and I'm going to fill this rectangle with the darker color here very good and I'm just going to copy this features text and just place it right in the center there and I'm going to say works for heat for this one and again it has the h2 tag so I'm all set there and for this I'm just gonna copy this text and just paste some text underneath here and I'm going to Center this text very good so there we have it we have works looks good all right so we have features works very nice and little references cited again and then we have an image here or this is actually a slideshow so I'm going to insert a slideshow so I'm going to go back here and I'm going to go to object insert widget and I'm going to click slideshow and I'm going to insert a basic slideshow and I'll just insert that there and then what I want to do is bring the slideshow down and I'm going to click on the widget options here and I'm going to take off previous/next captions and counter very good so we just have the image and we don't see any of those captions or the next and previous button very good so now what I want to do is make this slideshow 100% with so I'm going to click the 100% width tool right up here and perfect now this slide shows 100% width and what I want to do is replace the images in here so I'm going to click the widget options I'm going to click on where it says add images I'm going to click there and I'm going to select four different images here very good now select those there so now we have a slideshow and the slideshow will slide through these images and I have it sliding at a transition speed of 0.5 and it will autoplay and it will change every 3.5 seconds and it will resume after 3 seconds we don't need to worry about the resume after because we can't manually change the slides so it's not going to resume after it's just going to autoplay at 3.5 seconds at a transition speed of 0.5 and the transition is going to be a fade transition very good and I can make this the slideshow bit taller and height actually I like the the height there it's at 360 so we'll leave it like that very good so I'll reference this website again and here we have the meet our team section so let's add that section there very good so I'm going to actually go back here to this website and I'm going to copy works here and I'm going to paste or actually I'm going to create a rectangle so I'll copy this rectangle and I'll paste it so I'll hit command C and command V to paste and then we have it here and this rectangle I'm going to give it a height of 500 very good oh and actually this rectangle yeah let's change it to 300 or 400 very good and this one as well so I'm going to bring everything down a little bit we're going to do 350 for this this rectangle very good and 350 as well for this rectangle I just like exact numbers it helps me with the design and things like that so so these rectangles are at a height of 350 and then this slide shows 360 and then here we have this rectangle here which is 500 pixels okay so now I want to copy the text works and I want to paste it and then here I want to Center it in the middle and I want to say meet our team okay very good so now what I want to do is create three rectangles so I'm going to select the rectangle tool and I'm going to create perfect squares so I'll hold down shift and I want to create 240 by 240 squares there and that's why I like working with this grid system because it allows me to create perfect squares on the grid and so this disbands like almost 4 grid lines here and it's 240 by 240 so I'll just copy and paste that 3 times and we can't really see them because they're they're transparent but they're there and actually what I'm going to do so we can see it is fill this rectangle first so I'm going to fill this rectangle with an image of person so I'm going to go to fill add image and I have I'm going to put it in list mode here I have person 1 here and I'm going to scale to fill and position in the center and I'll copy and paste and then position that right in the middle then I'll go to fill here in the image I'll click on that on how to image and I'll say person 3 here very good and one more time I'm going to leave person 3 over here at the end they're good or let's do something like that yep so here I'll position this in the center then I'll go to fill add image and then I'll do person for perfect very good so there I have my team and let me do something like this yeah that's better okay perfect yeah in the center is right here yeah that's better ok so there I have my team I have the three images and what I want to do is copy this text here so we can have some more text underneath meet our team and I might need to make the rectangle a little bit a little bit taller so we'll add more more height to the rectangle here very good and I'll bring these images down and I'll create some more text here so create text here I'll save Sam and I'll make it white I'll select the king's castle on display and I'll make it 18 very good and I'll Center it so we have Sam there so I'll copy and paste this here we have I'm going to call her Alex and then we are going to have max here all right very good yeah this is just for demonstration purposes so I'm just giving kind of random names there very good so there we have the names so that's our team and then let me reference this website one more time and then we have another image and then we have let's discuss we have the contact there so I'm going to go to plan view I'm going to go yeah actually I'm going to go back to the site we're working on and I'm going to add another image so I'm just going to grab the rectangle tool create a banner here or rectangle and we're going to say 300 pixels in height should be should be good or we'll do 350 very good so now go to fill add image and let's see we'll use this image here I'll do scale to fill and position in the center perfect all right so now I want to copy this rectangle here again this darker rectangle and paste it and then just bring it at the bottom there very good and this is going to be our let's discuss session so I'm going to copy meet our team and paste it because we want all the sub heads to have the h2 tag there and by copying and pasting we can share that that they'll have the h2 tag so there's meet our team or excuse me so now yeah we want to say let's let's discuss and I want to create a contact form so to create a contact form you just go to object insert widget go to excuse me go to form and create a I'm going to create a simple contact you can create a detailed contact with more more forms or more areas for people to enter and for me very good so now I want to style this contact form so what I'm going to do is grab this this field here and you can just keep clicking inside the contact form until you grab the element that you want in the contact form I'm just going to drag out and I'm going to move this over here to the left and I'm going to remove the fill so I'm going to say no fill I'm going to remove the stroke and actually I just want the stroke to be on the bottom so I'm going to click on stroke and I'm going to for the weight I'm going to uncheck the constrain or make stroke weight settings make all stroke stroke weight settings the same and I'm just going to add a stroke to the bottom a stroke of three very good and the stroke color I'm going to say white very good and then here I'm going to kind of drag this out a little bit so they're all the same yeah that's perfect and I'm going to delete horse's name email and message okay and then here I'll Center the submit button and there we have a nicer looking contact form and I think I actually let me click in this again I'm going to go to stroke and I've added stroke to the top instead of the bottom there we go that makes more sense stroke and we unconstraint that make all these zeros and just have a stroke on the bottom there we go that's a bit better yeah there we go so we can enter a message enter an email enter name enter email so I'm going to select this text in here and I'm going to make it white and I'm going to give it the Kings cards lon display font and I don't want it to be italicized perfect so there's our contact form it's a little more minimalized and yeah it just looks a bit nicer and I'll just Center that in the middle very nice and then we will style the submit button I'll give it this kind of goldish color I'll make the font white and I'll give it again the Kings cars lawn display and I'll make the text 18 they're perfect and for the strip hub for the corner radius I'll just make it zero because I want it to be a square and for the border I'll make it that color they're very good and let's make the font a little bit bigger or I'll make it all capital there and I'll make it a little bit bigger 24 very good yeah we'll just drag this up a little bit there very good so we have our submit button let's discuss this is our contact form and then I can have it go to you know whatever email I wanted to I can give it a form name and then after sending I can you know go to another page or pick which page I want the user to go to they're going I can add more standard fields here a cell phone number a company work phone number work address I can add a CAPTCHA you can do recap show which is really cool and I actually want to do reCAPTCHA just to make sure that that a computer is not going filling out my form and there's actually have a video on how to do this how to do the reCAPTCHA where you'll need to get a public key and private key you can just go to google and type in reCAPTCHA or yeah watch the video because this will take me a long time if I'm going to get into this but this just ensures that you know when your website is live that a robot isn't kind of typing into your form and spamming you or whatever or that you're not getting spam email very good so for now I'm just going to leave that like so or what I'm going to do is just turn off the recapture for the moment but it is a good idea to have the CAPTCHA on pretty good so that's in another video but I'll just keep with designing this website here so very good so as you can see when I first started building the site I just kind of used this PSD for some ideas like I used features works meet our team and and let's discuss so I just kind of use some of those ideas so now we have the basic outline of the website design we have you know yeah features works meet our team we have some some images and a contact form so now if I I'm going to delete this because we don't really need it anymore so I'm going to go to file preview page and browser and I'll scroll down and as we can see we have that nice website we have the slideshow there we have meet our team and we have let's discuss so one thing I've noticed is that the font doesn't look as nice and that's because in the previous example I added the font smoother widget so I'm going to go to my muse for you widgets and I'm going to click on font smoother I'm going to click hold and drag and place onto my Adobe muse website so there I have it and I'll close my library panel and I'll go to file preview page and browser and perfect now my fonts are much smoother yeah the font looks a lot nicer now very good and I notice this isn't centered so I'm going to Center this okay I'm trying to find the center here I think that's it right there yep there it is and I'll Center this perfect and perfect they're centered okay let me do this very good all right so that's centered there and perfect centered yep so features works meet our team there it is in the center is that right yep that's in the center and then the same here perfect all right so I'll just moving a few things around all right so let me preview again we can see that the font looks nicer and everything is just really nice very good so now the next thing that I want to do is add the menu and the footer to this page so I'm actually going to go to the master page so I'm going to go back to my plan view I'm going to click on the masters page and I'm going to add the big menu from Muse for you so I'll go to my library panel and I'll scroll down here and I have the big menu widget so I'm going to use the door widget or the door effect for the menu so I'm going to click hold and drag and place onto my Adobe muse website and very good so there I have the menu and I'm going to place up the styling options over here to the left and I'm going to place the menu right up here at the top very good so now I'm going to open my widget options and I'm just going to have a save menu perfect and then for the open button background color I'm going to say this darker color that we sampled from the logo and for the radius I'm going to say zero very good yep oh let me go back to the widget options here so that's 0 for the radius and for the the link text one I'm going to say home link text 2 I'm going to say about text 3 I'm going to say shop and text 4 I'm going to say subscribe and text 5 I'm going to say contact perfect very good so now I'm going to go back to my widget options here and what I'm going to do now because I want to use the font this font that we selected for the website I'm going to go to file preview page and browser and I'm going to right click on any of these fonts I'm going to right click inspect element and then I'm going to scroll down and right over here I'm in my styling options here or my Styles here in the code inspector and right here where it says font family we see it says king's castle on display Sam cetera so I'm just going to copy that after font family and even all of it even the semicolon and I'm going to hit command C to copy and I'm going to go back to my w's website and I'm going to go to plan I'm going to go to the master page and over here in the menu widget I'm going to where it says font family for the open button I want to use that king's castle on display as well as over here in the in the menu open I'm going to use the castle on font there so for font family we just enter that in there very good okay for home I want to capitalize it as well home and about about there very good so now I'm going to go to my styling options and for the overlay color I want it to be that dark color that we sampled for the font color I want it to be white for the font hover color I want it to be the kind of that gold color there and to anything else and for the close button I want it to be this close this gold color on hover so on before hug where I want it to be white and then when you hover over it I want it to be kind of that goldish color and then all the other settings are good sounds good and the other thing I want to do is make sure that this menu is on top of everything else so I want to go to my layers panel and I want to click here where it says new layer so I'll click there and I want my menu on layer 2 because it's above layer 1 and this ensures that that it stays on top of all the other elements in my Adobe muse website so now that we've changed the font family what we want to do is pin this menu to the top and right or wherever you place the menu you want to make sure that it's pinned so if it's in the top middle or the top left or bottom left or bottom center or bottom right you just want to make sure that the menu is pinned and that area so here I have it in the upper right so I pinned the menu to the upper right very good and this ensures that when we preview the website so if I go to file preview page in browser and I click menu this ensures that the menu covers the entire page ok if it's not pinned because the way the menu works if it's not pinned and we go to file preview page and browser and we'll just give it a second here and I click menu we can see it doesn't cover the entire page so you just want to make sure that the menu is pinned to to the browser in whatever direction its pinned so here I'm going to pin it back to the upper right and I'll go to file preview page and browser and perfect and then I'll click menu and we can see we have that menu there very good and because it's in the master page it's going to work on all of these pages as you can see all of these pages have the menu in them very good and the other thing I'll do on the master page here so I'll click on a master and yeah the other thing I want to do is add a footer so to add a footer I'm just going to drag this down here the bottom of the browser or it no excuse me I'm going to yeah just drag the bottom of the page down here and what I want to do is create a rectangle down here so I'm going to click the rectangle tool and I'm going to click hold and drag and create a rectangle like so and I'm going to fill this rectangle with the goldish color here so I'll go to the drop down here where it says fill and I'll click that color there very good so that's our footer so now if I go to my plan view every page now has that footer area and you just want to make sure with your footer we have the footer tab here and if you bring this up the footer actually gets larger so now it's like some white space here and this rectangle or we can make this rectangle reach the top of the footer and make the footer bigger so here we have the tab bottom of page and bottom of browser and then here we have the footer so whatever distance this footer is from the bottom of the page I would say yeah from the bottom of the page that's how big your footer is going to be so I'm just going to drag this down a little bit more and perfect there's our footer and now it's on every page and will work more with the footer as I go in this tutorial as I go on in this tutorial okay so now we have our home page home page is pretty sad so I'm going to preview it again in the browser preview page and browser and I'll scroll down so we have the logo we have the menu and I'll scroll down some more we have features works we have a slideshow there meet our team we have an image here and a contact page here very good so now I'm going to continue working with the rest of the website as you can see there's like a little line here we don't really want that and that line is there because there's some space between the rectangle and the footer so I'll just bring the footer down a little bit to make sure we don't have any of that white space here so I'll go to file preview page and browser and you might have not noticed it but there was a white line between that black area this darker area and the footer so now as you can see it's seamless there's no space between this black area and the in the footer all right very good so now I'm going to continue with the rest of the pages I'm going to go to my about page and I'm going to make the browser fill kind of that dark black so I'll just go to my browser fill here and select this dark black very good and I'm going to reference the other website real quick so I'm just going to reference this about page here and here we can see it says dedicated to service and I have the logo again here and yeah and some text down here so what I'm going to do is I'm going to go back to the page we're working on I'm going to go to the home page and I'm just going to copy this features title here I'll go to the about page paste that in and again if we go to our character styles or excuse me our paragraph styles it's in h2 which is what I want because it's a subheading and I'll just place it in the center there of the website very good and the top there and I'll say dedicated a to service very good and I'll just make this wider so it fits there nicely and perfect now I want to place the logo in here so I'm going to go back into my Adobe muse website or the assets and I'm going to select the monogram again actually closed it so I'm going to reopen it and actually I can copy it from the home page here so we're going to copy this and paste it in here and perfect so there's our logo and then I'm going to go back to my home page and just copy some text from down here and let me Center this oh wait no there's something very good salt to copy that I'm gonna zoom out a little bit so I have a better reference of where things are positioned you just hold command minus to zoom out so I command C to copy that text and I'll hit command V to paste or control C and control V if you're on Windows very good I'll just Center that in there perfect and as you can see we have quite a bit of space or not much space between the footer area and the page so to change that we just drag the bottom of the page here we just drag this down so we grab this tab right here yeah and actually I thought you have to go to the master page but you just drag this bottom of the page down and it gives more site to the to the web page here alright perfect very good so now I'm going to continue to the shop so for the shop I actually put an image at the top here so I'm going to select the rectangle tool and I'll create an image or rectangle I should say and the height of this rectangle I want it to be 300 very good so now I'm going to go to fill add image and I have an image of a shop here or kind of like a shop and I'll say scale to fill and position it in the center very good so there's just a few items there and again I'm going to go back here to my about page we'll click on dedicated to service and I'm going to paste that in here and I just want something that says shop so I'll just position that there and say shop very good perfect and I'll come back to this page we're going to work quite a bit with this page but for now I'll just leave it like so and I also want to add a gradient to the back of this not a gradient and overlay so I'm going to go to fill so I clicked on the image first I'm going to go to fill and I'm going to select color I'm going to select this darker color and I'm going to say for the opacity I'm going to say 50% or 60 we can do 60% yeah 60% and that way we can see the text shop a little bit better and the image is a little bit not faded but it has an overlay to it so it's not as there's not as much contrast to it very good and as well actually I'm going to leave this area white and we're going to come back to this because we're actually going to add products here and the slop and the excuse me in the shop section we're going and then I have the SUBSCRIBE area we're going to come back to this as well because I'm going to use MailChimp for this and we have the contact area for the contact area what I'm going to do I'll go to contact and I'll just simply where it says browser fill I'll just select this darker area there and then I'll go to my home page I'll scroll down and I'll say let's discuss and this contact page so we're kind of duplicating the contact page here you can just have it on one page but I just wanted to showcase the contact page there so I'll have it on both sections and I'll bring this area down so it there's a little more space there and it can breathe a little bit very good so now we have the contact page that's it for the contact page it's pretty much done so we have the shop and the subscribe area so yeah we have the home page the about page and the contact page done so now we're going to work on the shop page so I'm going to double click on shop and what I want to do when I was first creating the site what I did is I created a square so I created a square and it was 240 by 240 so actually let me delete this rectangle you can create a perfect square by selecting the rectangle tool holding down shift and then dragging out and basically I use the gridlines there and I saw that 240 and 240 fit nicely within these gridlines and it was a nice size to to put an image in so let me bring this down a little bit so what I said it is like I put a square here so I'm going to copy and paste and let me fill this this square so we can see it and yeah hold on there you go so I'm going to copy and paste and put that in the center actually the center is right here copy and paste and put that in the center so I looked at it I said that looks nice I want three items here for the shop and I'm going to fill these items with images so basically what I did and I'm going to go to fill add image and I have a few images here for the shop the first one no that's that's not quite it I think it's close here so and then scale to fill yeah so I had a hat here and a few other items I'm not going to fill these with the rectangle or with the image because we're actually going to create a Photoshop button now if you never created one I'm going to show you how to do it and I'm actually going to make another quick video to showcase this as well but I'll show you now how to create a Photoshop button so to do that what we're going to do is we're going to go to our finder or you're going to find the image that you want to kind of have an overlay or Photoshop button and I should probably explain this a little bit better but if we go to the first website and I'll go to file preview page in browser and we open it here as you can see it has an overlay so when you hover your mouse it tells you the item and what and how much the item cost and then here we have some buttons that I'm going to go over after I do this here but basically this is a Photoshop button excuse me Photoshop button where you hover over it and it has that effect so I'm going to show you how I did that I'm going to open up those images so the first image was this shirt right here so I'm going to right click open with Adobe Photoshop there and it's going to open so there we have it and what I want to do because R square is 240 pixels by 240 pixels what I want to do is go to image go to image size and I want to change the the height to 240 whatever numbers is less that's what you want to change it to because if you change the height to 240 or the width to 240 the height is going to be less than 240 like for example Feist if I do 240 now the height is 160 and it's not going to fit the square so I want to say 240 and now we have a with a 360 and a height of 240 resolution 300 is good and I'll click OK and then I'm going to hit command a to select all or control if you're on Windows and then command C to copy or control C if you're on Windows and I'm going to go to file new and I'm going to create a new kind of artboard here that's 240 by 240 resolution 300 is good and I'm going to click OK and then I'm going to hit command V to paste that image in there and then we can move this image around and then I'm going to Center it perfectly within this artboard there and now what I want to do is create a square so I'm going to create on you create a new layer by selecting the new layer icon here looks like a piece of paper there and then I'm going to create a square and right there is good the square tool and I'll just create a square over the artboard there perfect and I'm going to fill the square with this darker color so I'm going to go to my browser fill select this black color here and I'll just copy the hex code very good and I'll make it white again so I just copied the hex code there and what I'm going to do is go to right-click on this rectangle go to go to blending options and then color overlay I'm going to click there and then here where I can select the color I'm just going to paste that in there click OK and click ok so now that Square is that darker color and I'll just make it bigger so that it covers the entire area there very good so I'll go to right-click on or actually I have to apply the transformation apply I'm going to right click again go to blending options and now in the blending options I'm going to say opacity I'm going to say 60 and I'll click OK so has an opacity over it and then I'm going to go to my text tool here in Photoshop and just create some text so I'm going to say sweater this is actually more of a sweater sweater and I'm going to say mmm $21 ok and I'll move this text down in the center like so very good that looks good and perfect so now we have kind of that image there and let me bring this down a little bit more that looks good there looks more in the center yeah perfect we have short sweater $21 and that's basically it so now what we want to do is save this P this Photoshop file so you just go to file save and then I'll save it as sweater PSD click OK or enter and then I'll click OK then I'll go back into Adobe Muse and I'll go back to the shop area the one we were working on and I'll delete actually I'll leave that there for a second and now to place that Photoshop button you go to file place Photoshop button very good and now I'm going to search for that sweater PSD which is down here I'll double click and then for the normal state we want to say layer one which is just the sweater without anything on it that's layer one and then for the rollover state we want to say composite which is the entire with all the layers visible that's called the composite yeah basically it's like all the layers put together and then I'll click OK and then I'll place it there and we can see it fits perfectly over the 240 by 240 image there so I'll just delete this image in the background and I'll just place that there and now I'll go to file preview page and browser and I'll scroll down and when we hover over it we can see it says sweater perfect that's exactly what we wanted to do so now I'm going to go back to the Photoshop file and I'm just going to create a new layer and actually what I could have done before that is what I'm going to do excuse me yeah what I could have done before has opened another image so I'm going to right click open with Adobe Photoshop and I'm going to resize this image so I'm going to go to image image size and I'm going to say 240 again and click OK resolution 300 is good I'll take command data copy and then command C - excuse me command a to select and then command C to copy and then I'll go back to that sweater PSD and I'll paste and now we have that layer with this image and basically what I want to do is put the text sweater over this image and the rectangle so there we have that so layer 2 now has the image and we can change this text or I'll go to my text tool and we can say a hipster hat very good and now go to file save as and I'll save this as hipster hat so if you noticed I kind of am just using the previous file we had before and just saving kind of a new file with it and that way just speeds up the process and I'll go back to muse I'll go to file place Photoshop button and I'll select the hipster hat if I can find it let's see where is it yeah here it is hipster hat composite for the normal state we want layer two because that's where the images and then we'll go to composite for the other state very good yeah composite no not background composite there we go I'll click OK and I'll place that in there I'll delete this one and just place that right there in the center and then we have one more image so I'll go back to my finder and let's find here so I have the scarf here I'll right click open with Adobe Photoshop and I'll go to image image size and I'll say here I'll say 240 for the width because it's less than the height and then there we go in the resolution 300 click OK they command a to select all and then command C to copy I'll go here and this the file that we're working with I'll create a new layer I'll say paste and I'll Center this image in the center and then I'll bring the rectangle on top of it and this text over it and I probably could have changed the price to the hipster hat which is would have been a good idea and then I'll change the text here select the text tool and here I'll say scar and I'll change this to $15 very good and then I'll go to file save as and I'll do scarf - 2 because I've already saved the scarf and I'm going to go back into the hipster PSD let's see if I can find it hipster dot PSD he rips their hat so I'll double click there open it and I'm just going to change the price of this hipster hat to like we're going to say we're going to say star 14 or now 17 kind of check the price up there but we're going to probably hat is 14 I don't know why I'm thinking about this too much it's just a hat and it's for demonstration purposes alright so now go to file save and I can go back into Adobe News and I think I can go to assets and just update the assets of this of the Hat so I'll just right-click here update asset and then right click here update asset very good so that should update the hipster hat and I'll go to the file place Photoshop button and I'll select the scarf - to composite I want layer 3 and then excuse me normal state later three rollover state composite mouse down state composite active state composite and I'll place that in there I'll delete this in the background there and perfect so now go to file preview page in browser and we'll let it load here and so I hover over it says sweater 21 hipster hat 14 scarf 15 perfect excuse me my voice just cracked a little bit very good so now what I want to do is add the PayPal buttons and for the PayPal buttons I'm using the PayPal animated buy buttons from muse free shop comm so I'll just click on library and I'll scroll down and I'll find the PayPal animated buy buttons widget I'll click there and I'm going to use the one without the icon so I'll just click on the first widget here and I'll click hold and drag and perfect place onto my Adobe muse website and then I'll just Center it underneath here and I'll open these options here for the email to pay you know you can enter the email there I'll just leave it like that for now the amount we said I think 21 for the sweater language United States currency US dollars the name I'm going to say sweater item number will say item number one shipping cost we're going to do free shipping because we're cool like that a tax rate will leave 8.5 because yeah we might not be that cool and we might have to pay taxes in our state so instance number will leave at one Wenonah for the button type I'm going to actually say Tamiya one because I really like the way this button looks and then the button text before I'm gonna say yeah by now and then the button text after I'm going to say $21 alright and the font size I'll make a little bigger I'll say 18 and very good and for the color one I'm going to make it this kind of goldish color color - I'm gonna say goldish color as well color three I'm going to say white and color for let's do black and color five that darker color they're very good and for the font I'm going to go back into the home page I'm going to go to file preview page and browser and let it load and I'm going to right click inspect element and I'll go here to my Styles select the font fit right right after it says font family select this here king's castle on displace and serve command C to copy or control CP on Windows and then I'll go back to my shop page go here to the animated the PayPal animated by buttons widget select this command a to select it and then delete and then hit enter there very good so here it doesn't show the font but it will very good so that's it for that button so I'll hit command C and then command V to paste the the button paste it there and paste it here and then I'll just change a few of the options alright it's all going here for this one we're going to say amount 14 item number two will leave shipping cost zero and tax rate eight point five here we're going to change the price to fourteen the button text after and then we'll leave that like that perfect then I'll go back in here for the scarf I think we said oh we didn't change the item name here for the Hat so go back in here and we'll say hipster hipster hat very good and then here I'll go back in here I changed it to scarf amount of 15 let's see and then here the button text after will change to 15 and everything else looks good alright perfect so now I'm going to go to file preview page and browser and I'll scroll down so here we say we CSS 21 and it says by now and by now and if I click on it just takes a moment loading it goes to my paypal here says seller email at muesli shop calm because I didn't enter my you know full email but you can put your paypal email here and then the person or the user can purchase the product and we can see here a tax it adds the tax rate which was eight point five and the total comes out to twenty 2.79 there and I think people just added some some things here with online banking I mean it could have been here but I just did just notice that you can pay with online banking so yeah so there you can get paid with PayPal and have your online store with PayPal and happy users pay that way as well and I like the let me close this here and I'll close this here again oops let me go back here and I like the way the the PayPal animated by buttons work is just add more kind of interest and animation to the buttons there all right very good and if I wanted to as well I could or actually I'm just going to leave it there because when the person rolls over the image it says the title of the product and the price all right so that's pretty much it for the shop page I think we're done with that and I'm just going to reference this page here yeah that's pretty much what I did for this page as well all right so I'm going to go back to my plan view so we have our home about shop and subscribe now for our subscribe page I'm going to double click in here and I'm actually going to use my my own MailChimp form so I'll be right back because I'm going to log in to MailChimp so I've logged into MailChimp and I've clicked on list and then signup forms and then here you can go on you can click on embedded forms and then what I want to do is click on naked because I just want the naked code and here I have the person can enter their email address their first name and their last name and then the code is right here so I'm going to copy this code and I'm actually going to use the MailChimp Unlimited widget from muse free shop comm and I'm going to click on library to access it and I'm going to go to MailChimp unlimited widget and I'm just going to click hold and drag the first one because the code isn't that long I don't need to use the HTML version I'll just use the version here where I can paste in the code so I'll click hold and drag place onto my dummy's website then here in the widget options where it says enter your MailChimp code I'll hit command V to enter that code I copied from MailChimp and there's our form I don't want those colors and actually before I start styling I want to make the browser fill of this page dark that dark blackish color that we have from our logo and then I'll Center this MailChimp form in the middle and I'll start styling it so for the form background color I want it to be transparent so down here which says form transparent I'm going to say yes and then for the font I'm going to select I think it was a Alegre or basically just a font that that matches more the style the font of my website I'll go back to this and I am going to update the metal trim form so that we can add the font family in this version we can't yet so that'll be an update very soon the heading font size I'm happy with that and actually I don't want the heading to say subscribe to our mailing list so I'm going to delete that so I'm going to go in the code and I'm going to look for where it says subscribe to our mailing list which is right up here it's in between these two h2 tags I'm just going to go in there and delete that within the code because we're going to add the title ourselves and let me put that back in there alright so that deletes that very good the heading color we don't need to worry about that anymore because we deleted it the label color I'm going to say white label font size 14 is fine label text line I'll leave it in the center input background color I'm going to say kind of this goldish color here very good input font size will say 18 will make it a bit bigger input font color we're going to say white input text-align:center is fine and put text transform I'm going to say uppercase for a nicer effect there so when the user inputs their text it's all in uppercase and then input border I'm going to say actually we don't want a border something to say none and the input border type and put border radius 0 that's fine input border width we don't have a border so we we can either set three that it won't affect it because we don't have a border and put height 30 is fine we can make it if we'd like but I find that that looks good 30 is good and put transparent no indicates required color I'll change that to the goldish color instead of or I'll say white yeah oh that's the indicates required text there yeah yeah we'll say we'll leave that at white and the asterisks color I'm going to say white as well very good and the field pattern 5 that's fine and we already set the form to transparent perfect so that's our form it's styled and now what I want to do is style the subscribe button and I'll show you how this looks in the browser browser so I'll go to file preview page in browser and perfect and I'll type in email address John that means for you shop comm first name John last name rainbows and then if we had subscribe it'll say I'm already subscribed yeah I'm already subscribed to the muse for you mailing list but yeah that's the MailChimp form and we want to style the subscribe button here to make it look a little bit nicer so I'll go back to my widgets here and I'll select the MailChimp Unlimited subscribe button so I'll click hold and drag and place onto my Adobe muse website and here will style this subscribe button background color will say that goldish color subscribe button font color will say white subscribe button hover color will say the dark black there subscribe button border size we can leave it at 3 subscribe button border radius 0 is fine font size 32 is good button with 22 is good but in height 50 will leave it at 50 that's good but in line height will say 25 that's good as well subscribe button border type I don't think I want a border actually I will leave will leave the border there that's fine and then subscribe button align align yeah we can align to the left right or Center and I want it to be in the center so we'll leave it like so and I'll just place the widget options more to the left there so it's not in the way of our web page and our web design so I'll go to file preview page in browser and perfect our subscribe button is now styled and we these inputs here in our MailChimp form very good so the subscribe button is a bit big and also I'm not really crazy about that font so I'm gonna select let's try a birria and see if we get that's not bad I want it to match more the text that we've been working with so let's see if I can find something or let me go back to the first site and I can reference it so here I have my subscribed and for this one I used an ad Amina so let's go back here and I'll click here and I'll select ad Mena I can find it here it is a de Mena perfect and I'll go to file preview page and browser and perfect so now it's more to our liking and you'll notice that the menu doesn't have the styling on it and that's because we need to add text with that font family in it so I'm going to go a let me reference the set again I said subscribe and then I said receive updates on new products so I'm going to go back to our website I'm going to go to shop and copy this text here I'll go back to our subscribe page I'll paste that in there and I'll put that in the center and I'll say subscribe and then I'm going to copy this actually I'm gonna create some text and I don't really want to add any paragraph styles to this text because it's not really a subheading but I'm going to say receive updates on the products and I'll hit command you select all of it or control it you're on windows and then I'll select Kings causal on display font size I'll say 18 and I'll make it white there very good and I'll bring the mail trim form down and I'll put and I'll Center this text as well in the center and then I'll Center that right there perfect that looks good I'll bring this back up a little bit it looks good maybe up a little bit more they're perfect and I'll I'll let this page breathe a little bit more to bring that down a little bit and I'll go to file preview page and browser and perfect looks good subscribe receive updates on your products we got our MailChimp form and the user can subscribe very nice so I think we're almost done with the website the last thing I want to do is create the footer and then I want to link all the pages together so I'm going to go to the footer area and what I'm going to do let me go to my plan view I'm going to copy this logo again right here and I'm going to go to plan and we're actually not almost done with the website there's still quite a bit we have to do I'm going to hit command V to paste and just resize this a little bit so that it fits nicely in here and I'll arrange right-click let's see we'll move to layer 3 there perfect so that it's in the front and we'll make this a little bit bigger perfect so that's in our footer and I want to add some links here so I'm going to create some text and I'm going to say home and I'll put it in some brackets for some more styling a home and again we'll make this King king's castle on we'll make it white and 14 is good because in the footer you can have the links be a little bit smaller at least I like them like to have them a little bit smaller and I'll copy and paste there and I'll say about I'll put it in brackets as well very good paste copy and paste and then I'll say in here I'll say shop now paste again I'll say subscribe I'll make this text area a little bit bigger paste again and then I'll say a contact alright this wider here oops make it wider perfect and I'm just going to select all these and then I'm going to go to a line align to selection and then make sure that it's horizontal vertically distribute the space there so that all the spacing is nice and even between these buttons alright so there's our footer it's a very basic footer obviously a footer usually has more content in it or more links but there we have it and now I'm going to link these footer items I'm gonna click on home where it says hyperlinks I'm just going to click home about I'm going to click about shop I'm going to click SHOP subscribe say subscribe and contact I'll say contact right here alright so we've linked the footer and if we go to any of the pages so if I got my dedicated to service page or my about page we see the footer there looks very nice and I'll go to file preview page in browser and I'll scroll down and we have our footer area there and if we click right now it's not going to show the page because we haven't previewed the website in the browser we've just been previewing the page so yeah the footer is there and now that we're linking everything I'm going to link the menu to all the pages as well so we're going to go to our master page and I did edit all this in the master page the footer area so you want to make sure you do that so that it shows up on all the pages so now to link the menu here the big menu widget to the pages we just click on the big menu widget options and then here where it says link 1 for the home page it's always dot slash index dot HTML for link 2 it's going to be dot slash about dot HTML and what I'm doing is just doing dot backslash and the name of the page HTML and then here we're going to say dot backslash op HTML and then for the link 4 we're going to say backslash subscribe HTML hit enter and then fill in five dot backslash contact HTML and basically you just want to write the name of the page dot HTML and we can see here it says home about shop subscribe and contact so if you rename it you just have to rename it in the widget options of the big menu widget and it's not case-sensitive so like just all lowercase letters and here we have uppercase letters in the beginning you don't need to worry about that when you're entering into the widget options very good so we've just linked everything so now I'm going to go to the home page go to plan view click on home page and instead of file preview page and browser I'm going to go to file preview site and browser and this um this renders or generates all of the pages so that we can preview the website in the browser alright perfect so here's our home page we scroll down looks good and we have submit here our contact form we have our footer looks good and our footer takes us to all the pages there's shop about subscribe excuse me I've always cracked a little bit and contact so not only do we have it in the footer if we go to the menu and we go to the menu click about goes to about menu shop menu subscribe menu contact so as you can see our website is taking shape and it's easy to navigate has some nice content on it and looks good so I'm not sure if I put the font smoother widget in here I might have I put it on the home page so only the home page has the font smoother what I want to do is add this to the master page so all the pages have that food smooth font added to them so I'm going to hit command X to cut this from the home page or control X if you're on Windows I'm going to go to plan view go to my master page and then hit command V to paste so now all my pages will have the font smoother widget and all the fonts will look really nice very good and actually I don't want these to overlap so I'm just going to bring this widget options down here this is the email chip subscribe very good the MailChimp unlimited subscribe button alright very good so we have the basic foundation of the website done I mean you could upload this and you know users can navigate they could purchase from the shop it could subscribe in the SUBSCRIBE page they could contact you in the contact page and they have got an about page and a nice homepage so the next thing we want to do is kind of add more styling to the website with these for you widgets from yabbies for you shop comm widgets so I'm going to go and see what I can kind of spice up or kind of make look nicer and the first thing I notice here is that I have this logo and with this logo what I want to do is use the SVG draw so that it animates and then it fades in so we're going to do that with that and then here I notice I have some space for some icons next to branding development and consulting so I'm going to put some icons here and I'm going to use a click effects widget so that if the user clicks they have some interesting effects going on there and then here I notice I can use the animator widget to animate these images so as they go up they animate they animate one by one and yeah so I think that's it for that and then let me see what else I can add yeah it added the the PayPal animated buy buttons for the buttons here so we've gone over that yeah subscribe is pretty straightforward I don't really want to add any animation there and the contact don't need to add any animation there either I guess I could use SVG draw here for the about page and animate the logo here but I might not do that because I just want people to read what we're what this website is about and you know who we are you know if this was a real site I just want them to read it and not necessarily see anything super flashy but know that this is what we're about and you can just read the content they're very good and it's solid it looks good it has a nice logo and everything so now I'm going to go back to the home page so basically we're just going to make the home page look a little bit nicer and one thing I noticed that because it's what page is a little bit long let's say someone's scrolling and they want to go back the top I want to add an animated back to the top button right here in this lower area so what I'm going to do next is use the SVG draw widget so I have the logo here I'm going to go to my assets folder and I'm going to open up that hipster monogram logo I'm going to right click open with or not hipster just a monogram logo template I'm going to go back to muse and I'm going to see how big this image is here because I like the size of it it's 380 by 361 so I'm going to go back to illustrator and I'm going to come to delete this background here and just select this monogram here and then I'll hold shift to unselect the background so now we just have the monogram selected I'll hit command C to copy and I'll go to file I want to create an artboard so I'm going to go to file and we'll let it load here go to file new and I'm going to say 400 by 400 because the image on the website was about 380 by 321 I'm going to create a 400 by 400 square yeah I'm going to create it 400 by 400 square so that when we use the animator widget and the SVG draw widget we can just place them on top of each other and they're the same size and we can resize them but just keep the proportion the same so that we can add the SVG draw and then add the animator effect over as well so I'll click OK and I'll hit command V to paste and I'll make this logo I'll go to transform and we'll make the logo 380 pixels and width and then the height will be 387 so that's perfect so now what I want to do is go to file save for web I want the transparency to be on and I want to click Save so I'll save this I'll go to my website 2 which is the folder I'm working in and I'll say logo yeah logo - 1 because I think a safe logo for the first example and now what I want to do is sample this gold color here because I want my outline for the SVG draw I want the outline to be in gold so I'll select I'll sample this gold color and I'll click here and I'll just copy this code and perfect and now what I want to do is select this entire logo I want to go to fill up here where this question mark is I'm going to say fill I'm going to say none and then for the stroke I'm going to say 0.75 and then for the stroke color here in Illustrator we have the fill and then we have the stroke here so I'm going to click click on stroke then double click and then hit command V to paste and click OK so now our stroke color is that goldish color and I like 0.75 because it's nice and thin point 1 is a little bit too thick so I'll do 0.75 and point 1 isn't bad but point seven-five I find it looks really nice when it draws so there I have the outline for the SVG draw so I'll go to file save as and here where it says format I'll say SVG and then I'll save it as logo 1 dot s VG and then here the SVG options look good and you can just follow these options if you're not quite sure what to do with this but usually it's pretty good so I'll just click OK and very good so now I have my PNG which I'm going to use for the animator widget and the SVG which I'm going to use for the SVG draw widget so I'm actually going to leave this logo here because I like the size so I'm going to reference it when bringing in the SVG draw so to bring in the SVG draw widget I'm going to go to library and I'm going to scroll down and here I have damage go down a little bit more have Muse for us VG draw widget 1.1 I'll click the drop-down I'll click here then I'll click hold and drag to place the widget in here and perfect and then so the size of this is 380 by 361 so I'm actually going to say for the width and the height of the SVG I'm going to say 380 by not 38 380 by 380 all right looks good and then I'm going to go to the widget options and SVG draw here it says choose an SVG G I'm going to click Add file and then I'll go to website 2 and then I want to say logo 1 SVG and perfect and I want to draw a sinkers asynchronously so that all the lines draw together and perfect looks good and very good so now I'm just going to place this over this image and it fits quite nicely over it so I'm going to delete this SVG here and I'm just going to bring the SVG draw up like so and then I'm going to go to file preview page in browser and we can see the logo draws there looks nice perfect and it is a little bit lighter I could even make the the lines the darker the black color and that might look interesting as well but let's leave that for now and now I'm going to bring in the image so I'm going to go back here and I'm going to say logo 1 - PNG I'll bring it in here and place it right in there very good and now for the the size I'm going to make this image a little bit smaller so I'm going to click on it and then for the width I'm going to say and I'm going to constrain proportions and I'm going to say 380 and actually what I need to do is crop it so I'll select the crop tool click in the center and here I'll change it to 380 then I'll click the selection tool and I'll select the image and I'll set this to 380 as well alright very good so I am moving a little bit more quickly now because the video will be very long if if I don't but feel free to ask me questions as you watch the video in the comments section you can ask me any questions so now I'll go to preview page and browser and we have the PNG and the SVG is actually drawing in the background but because they're overlapped we don't really see it and it's not even perfectly overlapped so I have to make sure that they overlap perfectly all right so let's see here there we go that should be perfect file preview page and browser and if we can't see the SVG draw perfect we can't see it so that means they're perfectly overlapped so now what I want to do is bring in the animator widget so I'm going to go to library scroll down and I'll click down here where it says the animator widget and I'll say initial because it's our it's our first animation I'll click hold and drag place on my Adobe muse website and click the widget options and we're going to leave the graphic style name animate 1 and we want it to fade in so I'm going to select fade in and we're going to say 7 seconds want to fade in after 7 seconds and we want it to animate on start so I'll leave that like so and perfect so now I'll go to file preview page in browser and oh we didn't have the graphic style name to the PNG so I'll click on the PNG I'll go to graphic Styles create a new graphic style and just one graphic style not too I'll click on style I'll double click and call this animate 1 alright good now go to file preview page and browser and very good so we have the the SVG drawing and then the image fades in looks really nice and I'm actually going to change the color of the lines of the SVG because I think I'm using a lighter background for some reason this time so I'm going to say color and actually let me go into my me site and find this darker color here and then I'm going to go to fill and copy this hex code go back to illustrator that's Photoshop go back to illustrator for the stroke here I'm going to paste that in click OK then I'll go file save to save the SVG go back to muse and I'm going to bring this down a little bit select the SVG in the back choose an SVG select logo one again and get and then let me place this PNG over it again very good and I'll go to file preview page and browser and it draws yeah that's very nice it looks a bit nicer when it's darker and because we can still see the lines I want the Viji to fade out so I'm going to select SVG back here and then I'm going to toggle the fade out and I'm going to say after seven seconds or actually I'm going to say after 12 seconds we want the fade out to be longer so that the effect of the SVG stays there for a bit we don't want it to start fading out as it's drawing so I'm going to say file preview page in browser and so it draws perfect we get the drawing effect then it fades out and all we get is the logo I really like that effect looks good so we're good for the logo there the SVG draw logo and the fade in looks good so now I'm going to keep going down the page and now I want to add some icons here next to branding development and consulting so I'm going to go to my library panel and I'm going to scroll down and I'm going to say I'm going to use the click effects widget so I have the click effects widget 1.1 I'm going to click hold and drag place onto my dopamine's website I'm going to make the icon size I'm going to say 32 and icon color before I'm going to say the dark black here and the icon color after I'm going to say white all right I'm going to do that I'm going to do it the other way around white and then the darker color here and then the effect color I'm going to say kind of the start color here all right yeah if that's the case I'm going to do icon before color black and icon color after white for the pointer we're going to leave pointer like that looks good all right so now I have that there I'm just going to put it next to branding I'm going to line it up with branding so that it looks like it's just in line with branding and I'm going to copy and paste oh and actually I want to change the icon as well and I'm going to randomly select an icon just to save some time for this video so I selected some cubes there let's see font see how that looks okay and then I'll copy this again paste that in there and then next to consulting and then I'll say gift maybe that's not really oh I had globe that would have been cool F G so let's do globe alright cool so we have branding development and consulting so now go to and let me close this Chrome browser because I have a lot of windows open so I'll go to file preview page and browser and there goes it draws nicely perfect and then here we have our logos if I click we have the click effect and what I like is that it has the effect and then changes color on just one of the icons so it looks like it looks cool it looks like ok I'm clicking on each one and then selecting each one there and I want to change the click effect actually so I'm going to select select click effect I'm going to say Radomir and i can have different click effects by changing the instance number here let's say I wanted a different click effect I could say instance number 2 so I'll do 2 there and it will leave it at that and then here I'll say 3 and we'll change it to marine and let's see how that looks I'll go to file preview page in browser will let it load and I'll click if we have that effect there we have that effect and there we have that effect cool so we have three different effects there and it looks good nice and I'm going to change them all to radomir because I like that and I'm saying instance number one because we don't need multiple instances because they're using the same type of effect and the same colors I'll say one and I'll say radomir perfect so now go to file preview page and browser I'll scroll down and nice we have those click effects very good so as you can see we're adding more more depth more animation more styling to this website for works on going to leave it like that yeah I'm going to continue with the website so we got works I'll leave the slideshow as it is and meet our team I want this to animate so I want Sam to animate up then Alex and then max so I'm going to go back to my website I'll scroll down to that area and I'm going to go to my library panel because we've already added an animation I want to add the animator additional so we select here under the animate animator widget and here it says muse for you the animator - additional so I'm going to click hold and drag place on to there and very good so now I'm going to go to the widget options and this is animate - for the graphic style name so that's good because we've already used enemy one instance name - good the select animation I want it to fade up so fade in fade in up no not fading up just is it faded up no it is that fade and up okay good very good and then for the duration I want it to be two seconds I'll enter in 2000 and I want it to be on scroll and I wanted to start 100% from the top of the browser so as soon as it hits the bottom of the page it's going to start animating and I want to repeat the animation down here and it looks good and I wanted to you know we'll leave it on scroll so now I want to go to this image I want to click on graphic Styles create a new graphic style by selecting this icon that looks like a piece of paper double clicking and I'll enter in animate - so now we've added this animation a graphic style named anime - to this image okay perfect so now I'm just going to copy and paste for the other ones and here I'm going to say animate 3 and since number 3 you need to change the instance number because I'm going to have different duration for each of them until the hm2 have their own instance number so here I'm going to say 4 seconds and all the other options are good then I'll go to the second image here create a new graphic style double click animate 3 yeah go create a new graphic style selecting this icon it looks like a piece of paper then I'll copy this again paste copy the the animator widget there I'll say animate for instance number four and then I'll say six seconds and then everything else looks good so I'll go to this image and then assign it the animate for styling so I'll say animate four by selecting the icon there looks like a piece of paper create a new graphic cell and then yeah everything looks good there so now I'll go to file preview page and browser and I'll scroll up so that we have the animation there SVG draw we got our click effects here looks good I'll scroll down and perfect nice I really like how that animates looks good and if I go back up it'll animate again because I asked it to repeat the animation Sam I mean max goes a little bit slow but I kind of like it it kinda has a smooth smooth feel to it it's like hey here we are and I could even change the timing I say to we'll leave it at two seconds there I'll set think her name's would I give her name Alex yeah Alex will set two three seconds and then max will set to four seconds so I have kind of a faster animation so I'll go to file preview page and browser and I'll scroll down so we have the animation there I'll scroll down and there it's a bit quicker that's better it I mean I kind of like that both ways is kind of your your preference I would say but I am going to change it to how I had it before because I like the smoothness of that nice fading in maybe I'll say five seconds for max so he doesn't come in as slowly all right so we've got the animation there and it will preview that in a second and actually let's preview it now just to see how it looks I like to preview my site as I'm working on it and animation good scroll down nice and we're going to change max to six seconds just so the timing looks good okay so I'm going to leave it there we'll preview it in a second now the last thing I want to do so we've got the SVG draw we've got two click effects and we've got the animator in here and we got the animator up here as well and the last thing I want to do is add a two back to the top page icon so I want to add it down here in this area so I'm going to go to library I'm going to scroll down nice for you and I'm going to select it's up here animated buttons widget and I'm going to select animated buttons with icons widget so I'm going to click hold and drag place onto my Adobe muse website and for the button I'm gonna say I'm gonna use sack night because I like the way it looks and the first one sack night one is a square and for the we're not going to have button text before button text after because it's an icon and for the size I'm going to say 32 not the font size excuse me the icon size I'm going to say 32 looks good and then the color I'm going to say the color before I'm gonna say white and color 3 I'm going to say black and then color for I'm going to say gold and yeah I think that's all we need to do offset this is gold as well and color too will set the gold we'll see how that looks and let's make that let's make that icon size 50 and OSAC night box size we're going to do a hundred there we go that's better so we have a nice big button and bring a sec night box size border size and let's do 50 for the board oops not 500 we're going to do 50 so that it fills the animation fills the entire box there and we're going to select for the icon we're not going to select right we're going to select up so we're going to select a air fa arrow circle 0 up we can do 0 up or we can do I might like just up so we'll do arrow up and now I like 0 up so we'll go back here and I'll say 0 up alright looks good and now I'll just look snot we won't do that I'll just place this here in the bottom and actually what I want to do is make this a footer item so I'll click on it click on footer and now I can bring it down to the footer I'll say a range I want to bring this to the top so I'll go to my layers panel here in layer one I'll bring this animated buttons with icons to the layer 3 and very good perfect now if we put it over the footer it's it's there and yeah we just want to put it on this page because not every page is a full is a full page and I'll just minimize this here a little little bit so we can fit it really nicely in there alright looks good so there's our back to top button and what I want to do is link this to an anchor at the top of the page so I'm going to click on the anchor icon here click on anchor and yeah I'm back to the top of the page click the anchor tool and then click here on the top and call this top you can call it anything you'd like but I find top works well for this example and I'll put it to the very top of the page right there so that when the user clicks this icon it goes to the very top of the page so now I want to select the animated button here I want to go to hyperlinks and I want to select this anchor call the top very good so now if I go to file preview page and browser okay we have our SVG draw and our animator fade in looks nice and we have our buttons here okay they're a bit bigger so we might have to play with some of the widget options and I'll scroll down we have the animator here looks good perfect we have a slideshow here we create a slideshow we have an image here contact and then we have a back to top button and we can see we have that animation there which looks nice and we click on it goes to the top of the website now this buttons a little too big from liking so I'm going to go in here and make it a bit smaller and for instance number of msh2 because I think some of the some of the instance numbers might be overlapping with the click effects so we'll just say two there and very good so let's see let's make the sack night box a little bit smaller so we'll say 7d looks good in the icon size we're going to say 38 and perfect looks good and we'll do something like that and good so now go to file preview page and browser and perfect so our icons are back to normal yeah it was just a bit overlap there yep looks good then I'll scroll down back to top click there I don't know if there were let me check something yeah they're a bit smaller here all right yeah they shouldn't overlap here so I'm wondering why they're a bit bigger when I preview it so that's something we look into so I'll go to file preview page in browser but they don't look bad here they don't look too big so we'll leave it like so but that is something that I will take a look at but here we have the animation and yeah back to top so I think that's pretty much it for the website we have the animator widget we have the big menu widget from use for your shop comm yeah I'm just gonna go over the different widgets here the big menu widget we have the font smooth ER widget added to the fonts to make the font smoother we have the SVG draw widget to draw the animation the logo here at first then we have the animator widget fading this in we have the click effects widget here so that when they click on it these icons they have an effect and you can just add icons with the click effects which I find really cool so great if you just want to add icons and then people can click on it and it will have a nice effect we have a slideshow here that I've added very good and then we're using the animator widget here the slideshow is just from Adobe muse but here we're using the animator widget from use for you shop comm and the click effects which yeah from yeast-free shop calm as well we have the animator widget there and we have an image here we have a contact form just from Adobe muse and we have the animated buttons widget that will bring us back to the top I think I might know why it's uh these are a bit bigger it's because it's using this style sheet here because of the icons use the same style X tile style name if I could put it that way so that's a that'll be an update or yeah an update that I'll be doing for the some of these widgets very good or if you're just having icons you can make in the same times but I'll fix it and you can let me know you know if you have any questions with it I can I can help you out with that but yeah we have the back to the top and made it buttons widget we'll go to the menu we'll go to the about page very good and we can see that footer is on top of the menu and that's because if we go to our master page we'll click here we want to make sure that our layers panel the menu is on layer 3 we want to make sure that the menu is on top of everything just like that on top of the footer on top of all the buttons very good so I'll go back here I'll go to file preview page in browser and scroll down so now our menu if we scroll down the our menus on top of everything yep looks good yeah it's on top on top of that yeah I believe yep it's on top all right very good so now I'm going to go to about there's our about page dedicated to service shop there's our shop page we use the the PayPal animated Bible ends here for the buy now you click on them it will take you to PayPal we use the Photoshop buttons in Adobe muse to have a hover effect over these shop items and we added some text to your shop at the top and an image we got the footer there at the bottom I'll click on menu go to subscribe we use the MailChimp Unlimited widget here from use for you shop comm then the the shop bones are as well are from use free shop comm very good subscribe MailChimp unlimited we can subscribe to the MailChimp very good we got the footer as well click on menu I'll click on contact and then we have a contact form here and the footer as well perfect so one thing I did notice and just a quick edit is that that submit button is a little bit too far from the pate from the rest of the contact form so I'll just click there go to plan view and I'll click here and bring this up as well very good perfect so that looks good our website done is done so once again I'm going to go to a file preview page in browser and perfect I'm just going to close some of these windows here let me close these windows other file preview page and browser looks good we have the intro I'll scroll down features works meet our team looks good let's discuss and sorry one last thing I'm going to make the font size here a bit smaller just so we can see these items here get smaller as well file preview page in browser yep and they're smaller here so that will be a change in case you want to use the click effects and the animated buttons widget they kind of overlap a little bit but I will fix that in the in an update or you can just have the icons be the same size here very good unless I have the same instance number here let me check that instance number one number one and number one okay and instance number two okay yeah that'll be an update alright so I'll go to file this is going to be the file preview sorry I know I've been previewing a lot file preview we have the image there intro very good scroll down we have the icons with click effects from you shop comm and the animator widget animations here very good image here contact form submit buttons a bit closer we could style this a bit more to like the hover there we have the footer perfect back to top perfect menu click on about there it is footer good menu click on shop there's our shop by now buttons hover with the Photoshop buttons and this is the PayPal put animated bag buttons from use free shop comm footer looks good menu subscribe there's a subscribe form our footer looks good menu contact and there's our contact form and our footer looks good in all these link as well to the different pages on the website very good so I think I've covered quite a bit of information to upload the site I have some videos on uploading the website I'll kind of let you go through that on uploading the website or you can ask me some questions in the comment section below but yeah I had a lot of fun creating this video tutorial I know a lot of you wanted to see kind of me build a website from scratch it is a longer video but I think it's very useful information for designing designing your website and actually the last thing you'll want to do as well is on each page go to page properties go to page and then page properties you give each page a description and this is for SEO purposes and make sure that the page your page name has a good title and you can enter keywords there and as well and I have a Google Analytics widget I go to library go to muse for you shop.com I have Google Analytics and you can place you'll want to place it on the master page so I'll go to plan and I'll place the Google Analytics widget here and then you just want to you'll just want to write the tracking ID here that you get from Google Analytics very good so I think that's it so again the menu and the footer are on the master page the Google Analytics here that I placed just recently places on the master page and the fonts moved there is on the master page when you put anything on the master page it puts it on all the pages so you can share all your pages have these elements here very good so I think that's it for this website I'll just go to the home page here thanks again for watching if you watch this whole video that's awesome I think it'll be well on your way to create it creating an awesome website if you have any questions about SEO at the end or uploading your website let me know I kind of want more we're how to just develop a website from the beginning and how to add different things I did do a bit of SEO with the subheads here but yeah oh and one last thing in the master page you can go to page page properties and you can add a page title prefix so what I do for my site is I type in nice for you for the page title prefix then a bar space and then a bar and then another space and then for the page title suffix I do Adobe muse CC or whatever pertains to your site or and before I do a bar and a space now what this does is it puts some prefix before your page title and the suffix after your page title and this is good for SEO so that each page has either the name of your company and then maybe a small description or just the name of your company and maybe a suffix yeah and maybe a suffix that you want to add to it and then you can add a favicon to all your pages so I'll go to file cite properties and then here where it says favicon image you'll click the folder there and then hopefully it brings me to that favicon folder otherwise I'll have to look for it and yes it does so I have my muse for you logo favicon there and I'll click OK so I'll go to plan I'll go to file preview site and browser and it's exporting and this is just a little bit of SEO here and here you can see it says muse for you home and then I'll click on the other pages about and there it is Assessor means for you about and I didn't put a space in the suffix I'll go to the master page page properties and space there yeah I want to put a space there in the suffix yeah so in the space at the beginning of the suffix bar then a space after the bar and then the name that I want to add there so I'll go to preview page in browser and I think this this will be the last preview all right so we have a sesame for you home finally my cursor there nice for you home at WCC and the home page you can title something more descriptive like maybe the name of your company means for you about let's reload that there okay so there's about shop and I don't think it's updated here but subscribe and let me go back to the plan view here page properties yes should be go file preview site and browser I think it just hasn't cashed yet for some of these other pages very again I'll let it load and I'm just okay there we go alright home about the ads better its cash now shop yep you can see at the top says Muse for you shop at WCC subscribe that's a title of page see has the prefix and the suffix after each page and this is great for search engine optimization for your website and contact awesome very good so I'll go back to the home page that was the last preview if you have any questions about any of this feel free to ask me in the comment section just leave any feedback or comments there and very good so we've designed an entire website in Adobe Muse with quite a bit of functionality up yeah a shop some ale chip subscription contact form and plenty of effects to add a lot of interest to your users when visiting your website and a lot of the effects were from nice free shop comm so I'll actually show you where to access it you can go to muse for you shop comm click on shop now and you'll be brought to the shop here and you can go you can get all whoops you can get all widgets and any new widgets for only 39 year and you can click here to subscribe or you can use PayPal to subscribe or you can purchase the widgets individually and you can see all the widgets that I've used here for this website the animator widget the SVG draw widget let's see what else Google Analytics let's see the big menu which I use for the menu the font smoother widget let's see you could add a file file upload a widget if you wanted users to upload and you types of files and there was an update to that we can choose what files the user can upload to have more control of what gets uploaded to server very good we use the click effects widget and the paypal bye at the paypal animated by buttons here so for the the shop that you have PayPal animated by buttons very good and we use the animated buttons here for the back to top button very good and we use the MailChimp Unlimited widget there very good so yeah I think we use probably let me see one two three four five six seven eight nine we use nine widgets for this website and made it look really nice and more interest and more animation and effects for your users so again you can get all widgets and any new widgets for only 39 year you can click here to subscribe or pay with paypal by clicking here very good so that's it for this video tutorial if you watch the entire video that's awesome again feel free to ask me any questions ok I wanted to make this video to really help you build a website in Adobe muse from the beginning I think this can set you off well on your way to building a website I do have videos on uploading your website to a server getting web hosting if you need it I'll leave a link for web posting below as well as access to to my web page here and yeah and in another video I'm going to go over CloudFlare how to speed up your website using CloudFlare and all those nice and cool tricks or cool things you can do for your site to make it faster this was my first kind of building from scratch website there's going to be a lot more of these because I do want to help you build awesome websites without code and show you how to build a website from scratch so that you can watch it and build your website come from the beginning and have your website done like within a couple days within a week or however much time you want to put into it but hopefully this showed you that you can build the website within a few hours and just have a really nice site to either show it to your client or do for yourself for your own project and yet for your own project or your clients and just really impress yourself and/or your clients with a really cool website with a lot of functionality and all that and now that muses becoming responsive the sky's the limit and I will do a video on how to make a website with the responsive design the new responsive design when it comes out so we'll build a design for mobile tablet and desktop and what's great is that music will still be adaptive as well you can still build for tablet phone and desktop or you can do responsive excuse me a phone or ya phone tablet and desktop I'm going to go from phone to desktop first because those are kind of best practices but you can do responsive or adaptive in the new muse that's coming out very soon should be out by the end of this year okay so I think I've harped on that enough yeah just thanks for watching if you like this video you can subscribe below also in the show more section below are links to more resources to use for you shop comm and if you are the resources there and yeah I'm going to do this to help you both awesome awesome websites without code thanks for watching check out my free shop calm and I'll see you in the next video tutorial thank you you [Music]

Channel: Muse For You

Views: 654,415

Keywords: adobe muse, adobe muse cc, adobe muse tutorial, muse tutorial, adobe muse widgets, muse widgets, adobe muse website, muse website, build a website from scratch, build a website from scratch in adobe muse, using adobe muse, adobe muse 101, adobe muse for dummies, building a website, adobe muse seo, adobe muse and mailchimp, adobe muse and paypal, paypal, mailchimp, create an online shop, website footer, google analytics, svg draw, the animator, css animations, muse for you

Id: rXmga-D0xDM

Length: 114min 24sec (6864 seconds)

Published: Sun Nov 08 2015