#muse tutorial

New Post has been published on http://www.musefreebies.com/2015/11/16/quickly-create-a-website-with-adobe-muse-cc-2015/

Quickly Create a Website With Adobe Muse CC 2015

In this tutorial I will quickly show you how you can build a website using Adobe Muse CC. Amongst other things, we’ll:

Create and manage a site structure

Work with Master Pages

Demonstrate smart guides

Take a look at Typekit fonts

Use dynamic navigation

Implement a slideshow widget

  Read the Tutorial

Hi, there! My name is Michael Chaize. I am a Creative Cloud evangelist for Adobe, and in this tutorial I will show you how you can quickly create a website with Adobe Muse CC.

Starting Out

The first time you launch Adobe Muse we get this splash screen and you can say I want to create a new site.

And then you define the dimensions of your pages. If you want, as an initial layout, to target your desktop users, tablet users, or phone users, and set the margins of the page. So I will click on OK, and I will discover the plan workspace with all my pages.

For the moment I just have a homepage, but here I can say that I will also need a products page and maybe an about page. And in the products I will get product A, and at the same level product B. So this is how you can very quickly create the structure of your website.

Master Pages

You also have master pages. So, every time you add a design element in the header, or the footer of the master page it will be on all your pages. For my header, I will just create a rectangle in the background. Maybe fill it with a dark color.

And I want to add a logo. So this is an image, you can directly drag and drop images from your disk. Okay, so let me drag and drop a PNG file and place it. You see that you get Smart Guides to automatically snap your elements to the other elements on the stage.

Now if I go back to the overall plan of my website, I see that the header appears on all pages, because it’s part of the master page. Okay, now I may want to add a navigation menu to navigate through the pages.

Navigation Widget

So this is where you will use the widgets library. This is a library of interactive widgets. You get buttons, components such as the light box display, forms, menus, panels, light shows in this case we will use a horizontal menu and maybe place it inside the header.

It automatically gets the structure defined in the plan. So I already have three pages in the navigation menu. Home, Products, and About. Actually, this is a dynamic widget, so if I add another page that I will name Contact and if I go back to my master page, I’ve already got the contact button.

If you click on the blue icon you will get the settings for the widgets. Maybe you want to also display the sub-level pages. So I would say, all pages and then you can style.

To select a web set font you will have the classic ones here, but you can also decide to add web fonts coming from type kits. It will automatically browse the catalog of free fonts available on typekit. And you can say for instance that you want to use theactor font, you click on OK, and it will be added to the list of fonts.

And you can directly select it here. So this is how you create your menu, and then if you want to add a paragraph of text. It shouldn’t be on the master page but let’s say on the home page. You just have to define a block and say welcome to my website.

Again, I will just select the actor font, maybe increase the size of the text, and here we go.

Slideshow Widget

Then on the right, I will add another interactive widget. Maybe a slideshow. So you have different kind of slideshow, the basic one, blend to full screen one, the light box.

Let’s play with basic slideshow which will display a default picture here. But every time you add a widget, you will have this blue icon, and this is where you have the settings and you can say I want to add my own images.

It will automatically resize the pictures. And then you can set the legend, you can navigate to check all the pictures and you also have different transitions. So by default it will fade in and fade out, but you can also choose to have the horizontal slides.

About Page

So this is my homepage, maybe we can add something on the About page, of course, you can copy paste elements from one page to another one. So if I choose to display all my pages with the tile arrangement then I can copy paste some elements.

Animation

And you can also add animation, so let me add a picture. And you have this scroll motion. So this a very powerful panel where you can say that you want to add the parallax crawling effect. So if I check Motion here, I have here the key position which means that when you scroll down the page and reach this key position before that I want to get a specific behavior.

So maybe something coming from the right at this speed. And after that I’ll, let’s say that I don’t want it to move, so I want it to move at the same speed of the page. So, just one. You can also play with the opacity to add some key positions, if you want your object to appear and then disappear.

I will add another text block. Add the button. Just to increase the dimension of my page to show the effects. So if I want to preview this page in the browser I can either choose to Save File, Preview Page in Browser or directly click on the new Previewbutton that we launched directly within Adobe Muse and as I am scrolling down, I see my building.

It appears from the right. It stops, and then it disappears. So, this is exactly the effect I wanted to define within my design thanks to the Scroll Effects panel.

Publish

Now if I want to share this website with my customer to get feedback, you have thePublish button.

You just have to say Publish, then you type a name. I click on OK, and it will use Adobe Business Catalyst, which is a hosting platform available for all the Creative Cloud Members, and publish your website on this URL so that you can share it with your customer.

Here it is. I have my first page. Product A, product B. If I click on the About page, and if I scroll down, I have the effect directly in my browser. And I can copy paste this URL, and share it with my customers or my coworkers.

Adobe Muse CC

Adobe Muse CC targets designers who want to design web pages without coding.

Anyone can use it and get very creative. You can visit muse.adobe.com to download and try Adobe Muse. I also encourage you to visit the Site of the Day section to check beautiful websites published with Adobe Muse. For your information, last year in 2013, more than 500,000 websites were created and published with Adobe Muse.