Adobe has added feature new features to Muse, such as Muse Starter Files, which allow you to quickly create your website using one of the five templates on the files. Also, you now have the ability to add Typekit web fonts or Standard Fonts with Fallbacks to your design, as well as add checkboxes to your contact form. This tutorial will walk you through what's new in the June 2015 update of Muse.
- The 2015 update of Muse CC is jam packed full of cool things. It's got some blockbuster new features, and it's also got several different performance improvements. And in this movie, I'm going to talk about a few of the big new features that I think you need to pay attention to. First and foremost is something called The Muse Starter Files which enable you to get a jump-start on your project based on what type of project that is. This is something that when I first released Muse Essential Training a few years back, that they came to me and they said something like, "I don't know where to start." "I don't know where to get my project going." Well, this particular feature answers that question.
So, there are five templates in total. So this one is called My Name. As you can see it's got the nice left-behind little logo over here on the left. This is fully customizable inside of Muse. These are all just web-based previews, by the way. So, I'll show you how to do this in Muse in just a second. It's got a Portfolio. It's also got a section for a Bio, and of course, it has a Contact form already styled and built-in. Exposure is more of a photography based template which is sort of simplistic but very well done.
And as you can see, it's got nice rollover effects on the images. When you click the image, it launches into a light box which is nice. You can click away from the light box to close it. It also is a one-page template, so when you click on something, it scrolls down automatically. Same for the "About" section which is at the top just like that. Kahve is a new template that is based around sort-of restaurants or coffee houses. And so you can see here, it's got this Menu where you can customize all of the different menu items that you serve. It's got a Location section.
It's also got Reservations built in here which is basically phone numbers in an online form right there which is pretty cool. So, if you're, you know, starting up a restaurant business or you have the need to build a restaurant-based website for your client, this might be a good place to start. You've also got Influence, and Influence is sort-of an event-based website. So, if you're running a conference and whatnot. So, if I click on Speakers, it scrolls down to show you some of the speakers. In this case, they're all cats. Time and Place, Why Attend, Register. It's a nice one page design for conferences.
And that's called Influence. And finally, this last one is called Looloo's. And so Looloo's is just sort of an everyday template I think. And you've got Stories, Process and of course an Order form there, so this is sort of like a product page that you have. So, this is a pretty cool website as well. All of them are fully editable, and you get to them inside of Muse 2015 by going to the Welcome screen. You can go to Help: Welcome if that's not up on your screen already when you launch Muse.
And you can go to the Create tab, and here's all the starter files down here at the bottom. To create a website based on these starter files, all you have to do is click on the starter file. So, for instance if I wanted to use Exposure, I click on Exposure and that's going to create a brand new website for me based on that template, and inside of that new site, I get two pages. I get the Exposure page which I can take a look at here. And you can go into the Preview mode, and take a look at how this actually functions, so this is the Gallery, About and the Context sections.
There's also an Extras page in here, and so the Extras page contains a lot of pre-made social icons that are very easy for you to throw in there. It's also got some tabbed panels that are already created, slide shows, etc that you can just go in and customize, and insert into your document as you see fit. So, again, if you're having trouble getting started with a project or you just need something to help get your creative juices flowing, these are five new templates that are included in here that really make that possible.
Now, in addition to these five templates, you also have a new feature inside Muse 2015 that allows you to insert Typekit web fonts into your designs. Now, not just the Edge web fonts which was served up by Typekit, these are actual Typekit fonts. For instance, let's go to the file menu here, and let's go to Add or Remove Web Fonts. When I go to Add or Remove Web Fonts, you can see now that I have three categories for web fonts whereas before I only had two. So I have Typekit Web Fonts, Edge Web Fonts and Self-Hosted Web Fonts.
This is just something to let you know what those are, etc, so you go ahead and hit Don't Show This Again if you want and then hit Get Started. Inside of this Add Web Fonts dialogue box, you will see the Typekit Fonts are on the left, Edge Web Fonts in the middle, and then Self-Hosted on the right. The Typekit Fonts are pretty much all the Typekit Fonts you would expect. There are literally hundreds and hundreds of fonts available to you. You do have the ability to sort them over here by Featured, Newest, Name or Number of Variations.
You can also filter over here. This is something that you should be familiar with if you've ever used Typekit before. So, for instance, if I wanted something that was decorative and I needed something that was recommended for headlines, it would show me the fonts based on my criteria that I've entered over here. I can then grab one of those fonts. So, let's grab this French Clarendon Ornament font here. And when I get that, all I have to do is select it and hit OK.
That is then going to add the web font. I'll hit Don't Show Again. I don't need to see that every time it adds a font. And then if I wanted to change something like right here where it says Exposure for instance, I could select this bit of text, go up here. You can see that a lot of these fonts that are inside of this document, already came from Typekit. They should automatically sync up whenever you have this new starter template come open. So, here is the font that we added right here. I can change it to that just that easy with one simple click.
And the best thing is about Typekit Fonts of course, they're all served up via the web so they do work across the board for that. Now, in addition to that, inside of the Text menu, you will also see this new section which before was just labeled Web Safe Fonts, now it's called Standard Fonts with Fallbacks, and so basically what this allows you to do, if you do want to use just the regular fonts that we've always used on the web, this gives you an idea of what those fonts are and also the fallbacks that it has. So, if someone doesn't have Arial installed on their computer for instance, it's going to show you here in parenthesis, that it will automatically default back to Helvetica New if they don't have Arial.
If they don't have Helvetica New yet, they will then move on to Helvetica or just the default Sans Serif font after that. This is a great addition to this panel, if you ask me. As a web designer myself, I like to see all of these different fallbacks because when I'm writing CSS myself, I use a lot of these fallbacks. And so, not only does this help me understand what those fallbacks are going to be, but I can experiment with that in my design mockups in PhotoShop or Illustrator, and I can see what those different fonts are going to look like, so that I have an idea of what my design is going to look like across all different platforms.
So again, the Typekit Web Fonts are a huge deal, but also that little bit of a UI tweak inside of the Web Safe Font dialogue box is also a very big deal, I think. Now, the final new feature that I want to talk to you about inside of Muse CC 2015 revolves around the Forms panel. So, let's go ahead and just close both of these, and I'll hit Don't Save here. I'll create a brand new site, does not matter how big or how small the site is. Just go ahead and hit OK. Once you do that, go ahead and click on Home, and then once you've double clicked on home, what we're going to do is go over into the Widgets library.
And in the Widgets library, we are going to go down to Forms, and I'm just going to grab out a simple contact form, drag it out on the screen, and what we're going to do is we're going to go down here and check out the Custom Fields tab of this form. And inside the Custom Fields tab, you're going to see right here, this new option for Checkbox Group and Radio Button Group. So if I add in a Checkbox Group, you can see here you have multiple check boxes that you are able to change inside of this. In the options fly-out menu, you can add Checkboxes to this very easily by clicking the plus sign.
You can also go in and Require it, Unrequire it, Label it, you can choose Message Text, etc. You can do all of that from within this little dialogue box. You can also select the entire form again in the fly-out menu. You can go down and do Radio Button Groups, so I can add in Radio Buttons much the same way as a Check box. Once you have those Radio Button Groups inside of there, you have the ability to add Radio Buttons and then you can make them required, turn the label on and off, etc. These are still individual objects so I can still move all of the different objects around inside of these groups.
It just helps keep everything together, aggregate responses and allow you to do either multiple check boxes or have options so if you wanted to do like a quiz or something like that, that's something that could be done now. So, these are all enhancements to the forms Widgets inside of Adobe Muse CC 2015. You've also got those really unique and cool starter templates that I showed you, and of course the Web Fonts panel is now completely powered by Typekit. All in all, it's a pretty solid update. I recommend that you check it out and see what you can come up with with these new features that they've added.
- 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