Muse's new features include the ability to create bulleted and numbered lists, add RECAPTCHA box to filter out spam form submissions, and use self-hosted web fonts, allowing you more wiggle room in terms of customization. This tutorial will show you what's new in the August 2014 update of Adobe Muse, and will guide you through the details so that you'll make the most out of these updates.
In this movie, I'm going to be talking about some of the new features that are shipping with the August 2014 release of Adobe Muse CC. First up is something that I'm really excited about personally. It's something that a lot of web designers have been really asking for in Adobe Muse, and it's finally here, it's the ability to create bulleted and numbered lists. Let's take a look at how it works. We're going to scroll down here to this. Section where it says our address and right down here at the bottom where it says the phone number, what I'm going to do is I'm just going to start creating a list right here. So I'm going to start off by selecting where it says phone and then I'm going to come up here to these new drop downs.
You can see right here here's the bulleted list and also the numbered list. And so inside the bulleted list you have the ability to choose between. These three types of bullets here, and also you can add new characters by clicking this, we'll explore that a little bit later on in the course though. I'm just going to create a simple bulleted list here, you can see it adds in the bullet, when I press enter, or return it takes me to the next line. I can type out something like fax, and then they'll just do a fake phone number here, let's do 805-555-5678 and then the next one here, let's do website and we'll just do www.companyname.com, there we go, and then I can come back in here and bold these up.
Something like that and then we'll just move this into place. And you can see there I've created a nice bulleted list. I could switch this any time I wanted to a different bullet type. I can also change it to a numbered list anytime I want and of course, I have the ability to fully customize those list options as well and we'll talk all about that a little bit later on when we talk about text in that chapter specifically. But I just wanted to give you an idea, sort of whet your appetite a bit, get you excited about it so that when you get to that section, you'll be ready to go. Now the next new feature that we talk about is actually right above this and you'll notice in this form here that something looks a little bit different, probably something you've never seen before and that's this little guy right here.
And this is an image verification RECAPTCHA box. It's not the BC CAPTCHA that you're used to where it only worked on business catalyst sites, this is full on RECAPTCHA, powered by Google. What this is going to do is help to cut down on the automated form submission spam that usually comes through, so if you didn't have a business catalyst hosted site and you were using the form feature for Muse. Chances are you were getting emails that you didn't intend to get and it's because you didn't have any sort of barrier in-between you and the spammers, well this is that barrier.
Let me show you exactly how this works, when I select the form here, you'll notice I get the fly out up here at the top. And I can turn on and off the RECAPTCHA field and it tells you that this toggles Google recatia image verification to help prevent automated spam forum submissions. Now if you don't really understand what it means just go ahead and turn it on, that way you can see it and then when you get in here you can actually click on the element itself. So lets go ahead and do that, here, I'll select it. And once I select it, I can go to its personal flyout and you can see here the RECAPTCHA information.
You will need a public and a private key in order to make this work. This is required for non-business catalyst sites. If you want more information about this, click the Learn More link. I'm going to walk you through how to do this in the Forms movie a little bit later on in this course but for now, let's just say that when you click this. It's going to take you to this page where it goes in-depth on how to do this with Google. It is free, and like I said I'm going to explain all about this a little bit later on. Once you have all your RECAPTCHA stuff set up, you come back and you put this in place and when I export this in a minute, I'll show you exactly how it works but, now let's move on to the third new feature, which is also another big one in my opinion.
And that is the ability to add, web fonts to your Muse website. Now, wait a minute. We've actually been able to do web fonts in Muse for a while now, with Edge web fonts, right? So how is this any different? Well, this is for self hosted web fonts, which is so cool. That means fonts that you purchased from places like fonts.com, My Fonts, Font Squirrel, those places that sell those web font kits, where it comes with all of these different types of fonts that you've probably never seen before. That's what this is for and so let me show you exactly how to do this.
First and foremost, you gotta download the package and once you download the package, you then have to install the regular version of the font onto your system. Let's jump out to my desktop here, and you can see I've got this font called Font Awesome, which is an icon font. That's why I am so excited about this because Muse didn't have support for icons before, you can now do that with this new feature. So I'm going to open up this Font Awesome Folder and inside of the Font Awesome Folder, there's a new folder called Fonts right here. And I can just double click on the .TTF, you're probably going to be looking for .TTF or .OTF, that's for true type fonts or open type fonts, there's actually both versions here.
And when I double click on that, on the Mac it's going to open up the font book and it's going to allow me to install it. On the PC you would just install it the regular way that you install font on the PC by dropping it into your fonts folder most likely and so here we have font awesome installed now. So you have to install the local font first, then let's go back in Muse and I'll go up to the file menu and I'm going to choose Add or Remove web fonts. And when I do this it's going to say, all right you want to add a self-hosted web font. Cool, you can locate the folder or you can drag and drop the .WOFF, the .EOT and the .SVG files right here.
If you're not sure what those are or where to find them, just click browse. You can go out to your desktop and find the fonts folder and hit Choose and it's going to automatically find those for you. And you're going to say, by clicking continue, I affirm I have properly licensed the above fonts for website use and Font Awesome is of course open source, you can use it wherever you want. So you just hit, continue and now Font Awesome is installed. You can see, right here, when you click this little gear icon. It's going to show here that everything is good to go. It actually says, at the top of this font is ready to be used, hit okay.
So that means I now have the ability to use Font Awesome inside of Muse, natively, which is great. So let's hit, okay. And then, what I'm going to do, right here you don't need to show this again if you don't want to, or you can just hit okay. I'm going to scroll here to the bottom, and I'm going to keep my eye right here but let's go out to the plan view for a second and go into the master page. Were going to add the social media icons which you'll see me add later on in the course with images. I'm going to show you how to do that now with a web font which makes it so much cooler, cause you don't have to worry about assets, you don't have to worry about load times, very awesome.
So I'm going to grab a text box here just grab text tool, and lets just draw a text box out something like this, and then what I'm going to do is come up here and I'm going to select font awesome as my font. Now when I first do this, you might be thinking okay what's, what's the big deal here? Maybe I can press F, for like a Facebook icon. Oh no, just the letter F. Okay, maybe G for Google Plus. No. Okay, so how do I get the actual icons from the icon font in here? Well, it's actually tied in to the next new feature we're going to talk about.
It's the glyphs panel, which is now available inside of Muse CC, most of the time, people are going to use this to insert things like copyright and trademark symbols, and that kind of stuff but since we've loaded in this third party web font. What I'm going to do is go, Window > Glyphs and that's going to bring up the glyphs for this entire font that I'm using and so I now have access to all of these. So let's create ourselves some social media icons down here. Let's go ahead and find. Oh, let's do a Facebook icon, really quick.
So there's Facebook. And, so, I created more than I wanted, let's go back and select that, and look at this, I can just resize this any way that I want to, so let's do Facebook down there, okay, and let's make it about 78 pixels, make it real big so everybody can see it and then we'll change the color of this, let's just do it kind of a white, there we go. And then we'll hit space, let's do a Twitter, space, LinkedIn, space, oh, let's see what else can we add down in there? Let's do a Google Plus and maybe a Pintrest and then we'll finish it off.
Oh, lets see what else could we do YouTube? That works out, add space between there, there you go. So now I've got that all ready and raring to go down there at the bottom and we can start turning these into hyperlinks as well. So lets close that up and lets grab these and lets start making these hyperlinks. So we'll do this, Open in a new window, text link style don't have any there. So I'm just going to make this open add a link here lets do Facebook.com slash cefb and there we go.
Now this makes this turn into link obviously so I need to manage my link styles but really and truly it's pretty easy to do that. And if you watch later on in the course, you'll see exactly what I mean but you get the idea now. I have the ability to actually work with icons, inside of Adobe Muse with this new self hosted web font feature. And then using that new Glyphs panel as well, to insert things like copyright, trade mark, registered trade mark, that kind of thing. And also fonts like this.
So there you go these are all of the features for web designers that have been put into Adobe Muse. I think it's a pretty cool update. And it's going to give you a lot more tools to work with that really make working in Muse more efficient, more fun and it's going to help you create even more dynamic web content
- Becoming familiar with the Muse interface
- Creating a sitemap
- Setting up master pages
- Working with headers and footers
- Importing and embedding graphics
- Scaling, rotating, and aligning page objects
- Wrapping text around images
- Working with web-safe and Typekit fonts
- Creating links
- Adding menus for navigation
- Inserting an interactive map
- Adding a Facebook Like button
- Building a Business Catalyst form
- Exporting the site to HTML
Skill Level Beginner
Q: This course was updated on 8/14/2014. What changed?
A: Adobe updated some of Muse's typography and form features, which Justin addresses in new movies in the "Working with Text" and "Working with Widgets" chapters. For a more detailed overview of the changes, check out the "What's new in the August 2014 update" movie.
Q: This course was updated on 10/06/2014. What changed?
A: We added a new movie covering the October 2014 changes to Muse, and updated the movie on uploading your Muse website via FTP.
Q: This course was updated on 6/16/2015. What changed?
A: Muse was updated, along with many other applications in Adobe Creative Cloud, in June 2015. We added one movie describing the update and two more concentrating on the enhanced typography features in Muse CC 2015.
Q: The author recommends another course, Designing a Mobile Website with Muse, but I can't find it in the library. Where is this course?
A: Designing a Mobile Website with Muse was retired. Check out chapter 14 of Muse Essential Training, "Creating Mobile and Tablet Sites," for more information about mobile development in Muse.