Lessons
Class Introduction
03:46 2What Muse Can Do
03:30 3Getting Started with your Document
22:18 4Adding Master Page Elements
16:23 5Organize Content with Layers
04:23 6Introduction to Responsive Design
18:19 7Adding Images and Working with the Asset Panel
27:22 8Adding Text and Creating Styles
21:01Advanced Text Styling
11:25 10Apply Effects
05:19 11Adding Links
27:30 12Adding a Button and Working with States
09:20 13The Power of Widgets
17:29 14Adding and Formatting a Contact Form
20:46 15Leveraging the CC Libraries Panel
10:31 16Adding HTML Content
05:11 17Final Testing and Publishing
11:12Lesson Info
Adding a Button and Working with States
So let's get started. What I wanna do is, first off, I wanna just talk a little bit about buttons, like adding a button because they're pretty simple. It's basically a box with some text on it, but there's some cool things we can do. And this is gonna introduce a couple features, a couple things that you can use on other content as well. So I've got the home page open, and I've got a lot of pages open, and I need to fix that, but I'm gonna drag the image down a little bit. I wanna make the image a little bit taller here. The reason why I'm doing that, let me zoom out a bit, is because I know that once we get to certain devices, like the iPad, et cetera, there's gonna be a white gap at the bottom down there. Now if you wanna increase the height of a page, think I kinda showed you this already, but you can come under page, and go to what's called page properties, and if you come to page properties, you can change the minimum height for an individual page. That means that if you had some ...
content down there maybe it's bumping against the footer or something like that, and you just wanna give yourself some space or some gap, you can adjust the minimum height. Just crank it up, and you'll see. If you keep cranking it up, it'll actually preview it on the page. It'll show you out there. So that's great. Alright, I'll click cancel. So we're gonna add a little button out here. The button is just gonna be just like, "Hey, contact us" or some kind of action item, that type of thing. So we'll put it right out in the center. Now I'm what they call industrious. I'm not lazy, but I wanna find ways that help me work faster, or smarter. To create a button we can draw a rectangle and we can put a text box on top. Not that bad, really. But we already had some built in. So if you come over to the right, to the widgets library panel, we're gonna be spending a bit of time in this panel over this section. You see we have the button section. Now there are two buttons in here. There's "High DPI" on "Off," and there's "State Button." "High DPI" on "Off," this is a different animal, you're not gonna use it unless, when you set up the site, you turned on High DPI. I don't know if you remember, we talked about that early on, when we created the first site. That just means that if somebody has a network that's a little bit slower maybe, and you did make it High DPI site, which means bigger images usually, people can turn off the higher resolution images, and just view the lower res. That means it could be a little faster as they work. And once they do it on one page, it does it for the rest of the site until they turn it on or off again. And then we have a State Button. A state button is essentially, like I said, it's a rectangle drawn shape, rounded corners, text in the middle. So let's drag that out, I'm gonna pull that out here, and drop it on the page. Now, after we finish this, we're gonna make sure that it works across everything, right? So I'm gonna put it right down here, and you can center align it if you want. Don't forget we have the alignment options, the align panel, and we also have those smart guides kicking in. You're gonna see those lines all over the place to help you. And I just wanna make the text on it a little bigger. So I'll zoom into it, I'm using the pinch zoom on my track pad, you can go to the zoom tool, if you want, or command plus or control plus on Windows. Now if you come to the text panel, you're gonna see that we have our font, and we have our size, and all that kinda thing, and what's funny about the button is, you don't really need to select a text to do this. So come in here, if you wanna pick a different font, go for it. I'm gonna try something different here. Designing on the fly, it's always great. And then I'll make the text a little bit bigger, and if you wanna change the color, you can. That's great. I will, if I wanna go in here, double click on the text, and that's gonna switch me to the text tool, and that way I can go in and actually change the text. So I will drag across it, once you select that text tool, and let's just change it to something. I'll change it to something like, "Contact Us," a little bit of an action item. Now what I'm wanna do is, I wanna select the entire thing. Right now I have the text selected, the actual text box I should say. In Muse, I keep telling you that if you have a bunch of objects like a widget, and you keep clicking, you're gonna select within that, it's almost like a group of objects, as you keep clicking in, it's gonna keep digging in. If you wanna come back out, to select what are called the parent objects, you can press escape. So right now, if I press escape, I should be able to select the whole thing. And what's great, once again, is if you look in the upper left corner, you're gonna see exactly what it is you have selected. So right now it says, "State Button" for me, and it should say that for you, that way we can adjust it and change what we wanna do. We're gonna change the color and do some different things like that now. And I wanna show you a cool little feature in here. So come to "Fill." Click on "Fill." And just pick a color, pick something. I don't know if I like the orange, red, something like that. And then, come over here to the left, you're gonna see, if we want, we can also put on drop shadow, different effects, things like that, come to normal, click on normal in the upper left corner, and you'll see that we have our states again. I love this because it's kinda just doing it, all the states are already represented, they already have colors and content. The normal and the active state are kinda linked together, so one becomes the other. If you come to "Rollover" for instance, you can click on "Rollover," and you're gonna see you can change the color. I might change it to something else. You can try that if you want. Just go up to "Fill," change it. Now here's the sneaky, cool thing. Let me actually show you. Stay where you're at, I'm gonna take it out to the browser, I'll just give you an idea of what it does. I could just go to preview, let's just do that. That's easy. And I'll look at the button, and I'll scroll down, and you'll see if I hover over, you get to see what it does. It's doing a rollover, and it's doing a mouse-out, that kinda thing, and if I click it does the mouse-down, it does an active, that type of stuff. Let me go back over. If you're still in that menu up there, what you can do is you can actually create transitions from one state to another. Come down here to transition, and try click on "Rollover," if you transition from normal to rollover, and that means you put you cursor over it, you can say let's fade from one to the next. So it'll fade from normal into rollover, essentially. Now if you move the cursor off, you'll see if actually goes back and just switches instantly. But this is gonna fade between. You can set up a delay which means "Just wait a millisecond," whatever it happens to be, a second, et cetera, you can also change the duration and say how long does it take to transition from, in my case, from orange to black. So you can do less than a second if you want or however you wanna work it. We can even use speed which is called easing. "Ease In" means it's gonna start slow, and then progressively get faster. If you "Ease In/Out", it's gonna start slow, speed up, and at the end it's gonna slow down. So that can sometimes be a good thing, depending on how long it takes. So choose that, that looks pretty good. Now what we wanna do is, we wanna make sure that if you roll off of it, let me show you what it's gonna do, if you wanna do this, you can. Click on preview in the corner. Go take a look at it. Scroll down if you need to, and hover over it. There's the fade transition, and watch what happens when you roll out. Bam. It just goes right back to normal. We need to apply that transition to the normal state as well. So go back over to the homepage. You can click on the tab. With that selected, come up top, click on normal, and then, we wanna make sure normal is selected as the state, because we're gonna set up this transition here. So if you click on fade, it's gonna go back to the default setting, so you can change it to match, I forget what I had, point four, point five, something like that. And then "Ease In/Out," and there we go. You can do it for all of the states if you want to. You can go into one, the other, et cetera. Now we can't, unfortunately, shift click on states to do them, I've tried that before, but once we get this, we're good. There we go! There's the button. Now the last step here is to apply an action. We want it to do something, not just look pretty. So with it selected, come up to "Add/Filter Links," and you're gonna see that we have all the different pages, so just come to "Contact," click on that. And we got it. There's our link. So we got ourselves a button that's gonna not only do something or perform an action, but it's actually gonna look a little different. So we're gonna have these effects and different things going on. Okay, I'm gonna save my site. That's pretty good. You can work with buttons a lot. You can make your own buttons, too. Like I said you can draw a shape, do that, and you can still, even an object, even if I draw a rectangle, go up to the upper left corner, you're gonna see that that object can also have states. It doesn't have to be this magic state button thing. It just means that it's pre built and ready to go. That's all. Alright, now let me close this, or get rid of that, I'll delete that.
Ratings and Reviews
MikeD
This is part 2 of a 3 part course covering basics, fundamentals and some advanced properties. The three programs combined make a complete course in Adobe Muse. I am very pleased someone finally made a decent and complete course in how to use use Muse. As a photographer who has fairly simple needs for for building and maintaining a website, I needed something much less complicated than Dreamweaver. Brian Wood does an excellent job as he usually does. He is very detail oriented and he speaks technically to most operations within a program. He does work a little too hard at dumbing it down, but he is much better than those that skip over the details or those ewho don't even know the details. If you want to learn Muse, I highly recommend this course, in fact, all three parts.
wendy fite
Very efficient introduction to the basics in Muse. I did the Muse CC Quick Start course and then followed up with this Muse course on the fundamentals. This course is a little more technical that the quick start. Both courses give you what you need to do a website. The fundamentals talks briefly about HTML,JavaScript, etc.; while the quick start course does not. Recommend this class for using Muse for web design.
Student Work
Related Classes
Design Projects