New Post has been published on Muse Freebies
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.
Also, if you want to know more about Adobe Muse, stay tuned on tutsplus.com and check the Adobe Muse category to get fresh, new tutorials and videos to learn how to create amazing websites.
