hello and welcome to a new episode of adobe creative cloud TV my name is teri white and in this episode we're going to take a look at the ins and outs of how to use the various slideshow options in Adobe muse so I'm going to show you the most common ones you use how to use them even when it's kind of hidden so that you get a full understanding of how the slideshows work so let's jump right in first thing we'll do is we'll go ahead and create a brand new site from scratch so we'll just go create we'll say new site it will give us the default and we'll just go ahead and only thing we're going to change is that we want it to be high DPI and we want I just like to work in columns for the sake of alignment and just making things look great on the page but let's go ahead and just click OK on that and that will give us our base basic site now what I want to do is I want to create two more pages I'm going to create a page called and I will call this one services and then we'll do one more called galleries alright so now we have our three pages next thing we'll do is of course we'll put some like elements that we want our to be across all the pages on the master page so I usually like to design with some kind of visual element at the top of the page be a rectangle it could be a logo could be a logo on a rectangle be whatever you want let's just go ahead and get a nice color for that and now that we've got our color in place let's just go ahead and grab I'll grab a logo from my library let's go grab my logo here and hear this alright so now we've got the logo in place we're just going to go ahead and pull this up make it smaller and last but not least we need a menu so let's go to our widget library let's go to our menus horizontal menu and we'll just go ahead drag that out and we'll put that up here for now and of course we can redesign that menu to our hearts content taking away the boxes changing the fonts whatever we want to do but now the main thing for this to really work well is to understand and work in layers because the first slideshow we're going to do is going to be a full-screen slideshow and the aspect or the the caveat with fullscreen is that it takes over the entire screen so what I wouldn't want the fullscreen slideshow to do is take over everything that we've got here so what I'm going to do before I leave the master page is going to go to the layers panel and since everything is already on this layer I'm just going to call this layer navigation that's our navigation layer everything is already on it now we will create a new layer and we'll call this new layer double click we'll call it slideshows and the slide shows will always be on the layer underneath the navigation so we'll just pull that layer down so that way slideshows will always tuck underneath everything else that's on the screen ok so now we've got our master page we can close it we can head back to the site where everything is already there and the next thing we'll do is we'll go to the home page and we'll test out some of the options I was telling you about so let's go to the home page and here what we want to do is go ahead and bring in our full screen slideshow so we'll go back to the widget library we're done with a content panel for now we'll go to the widget library and we'll go to slideshows and you see basic blank full screen lightbox and thumbnails well technically there's really only one slideshow and use all of these are just various starters or presets if you will call them to get you started if you in other words you want a full-screen slideshow then it's got all the fullscreen options turned on already if you were to drag on a blink slideshow and then turn it on turn on a full screen option it would be a full screen slideshow so these are just kind of just a way to get you started quickly without there just being one slideshow that you have to then go and change all the options every single time so let's go ahead and drag on the fullscreen slideshow and when I drag on a full-screen slideshow as I said it takes over the entire screen but because we put that on the slideshow layer its underneath everything else now if I were to go to the layers panel real quick and turn off navigation you would see that the fullscreen slideshow comes in with its own left and right navigation button and a counter well those items can either be turned on turned off or moved around so for example let's go to the slideshow options and what I don't need is the counter I don't need to know how many images I have so let's go and turn it off the next thing is you have these left and right navigation buttons well we can pick those up and we put those anywhere we want so I just want to move those down I don't want them at the top of the screen and then when I pick this one up out without clicking on it there it is I can pick it up and as soon as I get it lined up we got smart guides to kick in and I can go ahead and put this all the way on the right side of the screen now before we leave this set of options are the navigation left and right remember they were they originally were both in the upper left hand corner that's because an NS the way it was designed but they were pinned to that upper left-hand corner so the left one is now pinned in the upper left corner but the right one is also still pinned in the upper left-hand corner so I'm going to just change the pin to the upper right corner that way that's that will stick to that side of the screen and the other one will stick to the other side of the screen no matter how wide or narrow the person's browser is and last but not least if we select both of them we can go in and we can for example either take the fill out or certainly lower the opacity of that fill so it's just not a big white box sitting there but we kind of give people something visual they see a little bit of white there knowing something to click on ok so that's our full screen slideshow and then of course last but not least we'd want images to go in it so we go back to the slideshow options a little blue triangle while the slideshows select it and we can go ahead and click and then we can go grab I believe I put them in the demo I went to the Auto Show in Michigan last week and let's go ahead and just grab my Auto Show images I spent a lot of time looking at concept car so these are going to be the Mercedes new f-15 concept car okay and then last but not least let's go ahead and turn on the navigation layer and if we were to preview our homepage right now this is what it would look like in a browser generates the HTML opens up my default browser and shows me my preview and my slideshow is running I still have my left and right navigation buttons I can go back and forth between the images or I could turn off navigation and just let it run in the background I put other things on top so that's the fullscreen slideshow in full-screen means no matter how big or how narrow or how skinny or how tall I make my browser it will be fullscreen okay so that's how the fullscreen slideshow works now of course you can still go back in you can still go any options you can say don't want it to autoplay you can say you do want it to autoplay you can tell it how many seconds you want you can shuffle the order you could turn off the navigation buttons you can do a different type of transition you could do a fade instead of a horizontal swipe or vertical swipe so you have all those options you can configure just about on any slideshow but those are some of the ones you might want to look at for the fullscreen okay next up we've got our home page done let's go to the services page now on the services page I want to be able to put text below the slide show about the services so I don't want this one to be fullscreen but I do want it to be what's called full whit and if you go to your slideshow widget library and within these slideshow options there's no full width slideshow so how do we do a full width slideshow in Muse well you can grab any one you want except fullscreen obviously let's go ahead and do because I just like to start off with nothing now grab the blank slideshow I'll turn off all the stuff I don't want down on captions don't want counter we can have previous and next buttons if we want but actually I'm even going to turn those off and now what I do is simply reshape the container for the slides to be up here and more importantly touch the left side of the of the browser window in muse and the right side and when it touches the side you'll get a little red guide letting you know you're touching the side and you see the little pop-up there it says with 100 percent that's when you know you've got the hundred percent kicked in for the slideshow you can make the height whatever you want or don't want and of course you can keep putting content below it because it will never be any higher than your height now of course your images that you use I'm not going to use the same set of images for each one of these you have to keep that in mind that this is a full width slideshow and most people's browser windows are pretty wide so you might want to go into Photoshop and make your images more wide than they are at all like for example I would never want to put tall images or portrait images in this type of slideshow because they just won't look right more than likely they'll be cropped off so let's go ahead and add images again again which that same ones because it's not really not about the images as much as it's about the techniques so you'll see less of some images more of other images depending on the image aspect ratio and what you can see in that image but that's a full width slideshow so now if I were to go in and go back to muse grab my text frame I can create a we can create loops I want to do that let's make it not a footer item there we go we're going to pull this down and that's the good thing about my guides and we have some text we can put in there and we can duplicate this put this one over here and that way we can now fill these with whatever text we want we can oops there we go we can say whatever we want in these frames about our services okay we'll just copy that paste paste paste paste paste come over here same thing pace pace pace pace pace just to give you some sample text to work with and of course we'd want to probably keep those aligned at the top of each other there we go so now they're nice and aligned and let's see what this light this page looks like in the browser so a preview page and browser and we get that nice full width slideshow again it may not show all of the image but it's giving us a nice display that we can again we wanted the user to navigate we put navigation buttons on the left and right but you kind of see this on websites all the time where they're going between multiple images while you read the stuff or deal with the stuff at the bottom or above the slideshow so that's the full width option that's kind of hidden it there because there isn't a full width choice all right so let's go back to muse and let's close the services page and now let's go to the galleries page in a galleries page this is where you would typically maybe put in multiple slideshows so now the question becomes what kind of slideshow do you want and some of the things I'm going to do here also apply to the full screen and full width slideshows I'll talk about those options in a moment so let's say for example I want a thumbnails are actually you know what let's start with blank we'll start with black again I'll turn on some options and show you so going to start with a blank slideshow and again I can put this anywhere I want on the page I can put whatever text I want next to it whether other images I want next to it I can turn off any options want I don't want captions I don't need a counter I do want the navigation so I can move the navigation around yep I can put that whatever it wherever I want and again same thing we would just go and load up this with images click the little folder go graph yes the same car show go grab the same images and here they come okay so now this slideshow we don't want to autoplay we want the user to be able to click between them but maybe we also want the user to be able to click on a specific image without having to go through all of them let's say there are a hundred images in there we don't want the user to have to click on 50 images to get to number 51 so let's go ahead and turn on thumbnails now when you turn on the thumbnails option they'll just appear usually on the side but you can do whatever you want with these thumbnails for example you can pick up you keep clicking and drill down you can drill down to the thumbnail area you can say well maybe I want the thumbnails underneath the slideshow you can go ahead and reshape or resize it so it takes up whatever room you want it to take up so those are my thumbnails and a user can just click on the image they want to get to to get to it now while we've got the thumbnails up the thumbnails are very important on all the slideshows even if you're not going to use them so even on a full-screen slideshow and on the full width slideshow there are times where I would bring up the thumbnails here's why if you ever wanted to rearrange the images you deal with the bum nails so for example if I want this red one to be last pick it up and rearrange it to be last if I want to delete let's say the first one click on that thumbnail hit your delete button on your keyboard or backspace on your keyboard so that's how we control what images we that's how we control the images that are already in the slideshow so if you wanted to rearrange the ones on a full screen slideshow or a full width slideshow go to your slideshow options turn on thumbnails long enough to do every you want to do then turn thumbnails back off again and that way you use the thumbnails to control everything but you don't have to have thumbnails on full screen full width slideshows for the actual user okay so that is the B basic or blank slideshow added images turn on and off some options and then of course we show thumbnails now let's bring over one more let's bring over the lightbox one when I bring over the lightbox one it's going to have thumbnails by default so they go ahead and again let's make sure this is not a foot or item good and I go ahead and pull up why am I not getting this to go down okay let's do it the hard way there we go so give myself some more room and again we put this on this side for example all right so now we've got this slideshow with its thumbnails and maybe we want to do the same thing one of those thumbnails to be on the bottom and at the top now what's what's the difference between the lightbox slideshow in any of the other slideshows and by the way we don't need our footer to be that long there we go the difference is and we can leave the sample images in for this one but when we preview this page it'll generate the HTML and show us the page in the browser and notice we don't see the slideshow for them for the lightbox one let's deal with this one first we'll come back up come back to the lightbox so this lets me navigate because we turned off autoplay so it's just sitting there waiting for the users our navigate with the buttons or to click on the specific image they want to get to so that's what thumbnails are for now let's go down and deal with lightbox all you have a light box is the thumbnails that's why the thumbnails default to the top of the slideshow because users won't if you saw just this you may not even scroll down to see if there's any more so it might be a good idea to keep the thumbnails at the top and what this will do is when you click on an actual image notice it darkens the rest of the page anything that's on the rest of the page text images video widgets whatever is darkened and then it shows you all the other options in the slideshow the caption the navigation the counter all the things that we left on and the ability to go through those things and if you click off of it then it all goes away so let's go back and do a little bit more work let's say for example and here are the other things that are turned off let's say that we want to put the this back up at the top because you just won't know it's there if we don't and we can probably move the whole thing down a bit I see our navigation is still up there kind of hard to see but it is there move our navigation I think there's one more up there somewhere maybe I can find it maybe I can't oh there's actually that's the counter anything else yep one more navigation button there this alright so what I'm going to do I'm going to turn off the options I don't want so let's go in let's turn off captions let's turn off the counter and you know what I don't really necessarily need the navigation if I'm going to have the thumbnails but we can leave the navigation on or off it's up to you so now if we preview this page let it generate the HTML open the slideshow up or the page up and again so as we click on any thumbnail it takes us into the slideshow here our navigation buttons to go back and forth and once the users done unfortunately there's no like hey close this they just have to know to click anywhere outside of it and then it goes back to the normal display so lightbox know it's up to you if you use it you know that's how it works you don't use it then you can use the standard slideshows so everything else in the slideshow here if we go back up to this one let's look at any more options I may have missed they're all enabled by default for swipe what that means is that they are enabled on mobile devices so users are going to swipe between the images they don't have to tap navigation buttons and we saw the other options so far you can shuffle the order if you're not trying to show them in a specific order that way they come up in a different order each time that's good for an autoplay slideshow one where the user is visiting the page and the slideshow is just going to start that way it won't always start on the same image and one always play in the same order and last but not least you could do freeform thumbnails where the thumbnails could be kind of all over the page you can rearrange them any way you want and not locked into a grid and then that way user can you know tap on an image it shows an image tap on another image somewhere else on the page it shows the image so you can kind of use the freeform method as triggers to show specific images that you're talking about throughout the page and you can even perhaps pin that slideshow so that it moves up and/or so it stays in place as the page is moving up and down so all kinds of options for you to work on and so we talked about if we recap real quick we talked about the fullscreen slideshow and its options full with it which is kind of hidden and basically the other or standard default slideshow options that have been amused pretty much since day one so I hope that helps you now have a better understanding of how the various slideshow options can be used and how they can be used on different pages and more important to going to use fullscreen you definitely want to work in layers so with that take care and we'll catch on the next one you