Adobe Muse is a great addition to Adobe's Creative Suite. Adobe Muse is part of the Creative Cloud and can be obtained as part of the Creative Suite Cloud subscription, or you can subscribe to Adobe Muse independently. Alternatively, if you'd like to follow along to this tutorial and you don't have a copy of Adobe Muse, you can download a trial from Adobe's website.
If you're a print designer or new to design altogether, then this tool is a great way to get you building websites quickly and with little fuss. It shares a lot of the features from other Adobe packages and it's closest to Adobe InDesign. So if you've used InDesign in the past you're half way there with knowing the software. The advantage of using Muse over other web authoring software is that there is no code to learn or write. The software takes care of it for you and implements and designs the site using a graphical user interface. Also a lot of the interactivity is taken care of by something called widgets which we'll look at in greater detail later on.
In this tutorial, I'l show you how to plan, design, preview then publish your site to the web. We'll look at creating a simpler version of the macProVideo site.
When you launch the software for the first time after installation, you will be introduced with a welcome screen. The welcome screen allows you to Create A New Site and open recently opened sites. What we're going to do is Create a new site.
You'll be shown a dialog box with a few settings.
The new update that Adobe Muse had received allows you to create three design layouts: desktop, tablet and mobile. This allows the designer to create one website that responds to the device that is viewing it. This is referred to as 'Responsive Web Design' or RWD. In our tutorial we'll be looking at creating a Desktop version
Please explore the settings that are there, and we'll only change one and that's the Min Height to 600 but keep all others the same and click OK.
In this section, we plan the number of pages that we have and how they relate to each other. We'll be designing 8 pages and the tutorial page will have 2 sub-pages, article 1 and article 2. You add pages by clicking on the [+] on the right of the Home page. If you'd like to add sub-pages then these are added on the [+] at the bottom of the page. Go ahead and add the following pages to the right of Home Page: How It Works, Pricing & Plans, Tutorials, Forums, Support and add the sub pages to Tutorials. To name the pages just double-click the names underneath each page.
You'll also notice that Muse has added an additional page at the bottom called Master. We'll be using the Master page to control the default layout for all the pages from here.
Double-click the Master Page in Plan View and this takes you into Design View. Here, we'll add the Header and Footer of the page. Also the menu will go here.
First, we'll add a black background to the header. Use the Rectangle Tool (m) at the top and click and drag to draw a rectangle the size of the top of the header from edge to edge. Then choose a Fill of Black and Change the stroke to 0.
Next we place an image, go to File->Place... to pick an image which will be the logo of MacProVideo. The file would need to be a web format JPG, PNG or GIF. Resize it using one of the corner handles until it is the desired size on the page and place it top left corner. Next, we'll make it a link to link to the home page. Select the image and from the application bar choose the drop-down list for Links and choose Home. After that we need to add a menu. On the bottom right, there will be a panel called Widgets Library. Under the category Menu, choose Horizontal and drag and drop it on top of our rectangle. Muse will automatically create a menu depending on the construct of our site from our plan.
We don't need the Home in the menu and we'd need to change the colors, position and options of the menu. First, lets remove the Home from the menu. Go back to Plan at the top and right click the Home Page and choose Page Properties...
Keep all options the same and change Menu Options to Exclude page from menus. Then go back to the A-Master Tab or double-click Master again to take you back to design. On the far left, adjust the Header guide to match the bottom of the black rectangle
Create a text box with the text tool and type (or copy and paste) the text into the box. We then need to format it. To format it, you'll see a Text option on the top bar or you'll see an option to change the font, size and color. They'll also see some paragraph styling options. We're going to set the text to Helvetica, size 12 and set the Leading to 160%. Select the first line and change it to bold by clicking on the Bold T in the application bar
Press escape and select the text box using the select tool (shortcut V) and in the application bar at the top, make the text box a footer object. Also adjust the footer guide above the text box.
Resize the menu to fit the width of the page.
Next, select one of the boxes in the menu and in the color panel change the color to Orange to match the logo. You can use the color picker on the panel to pick the color from the logo.
Select the Label within the menu and change the font at the application bar at the top. Choose Helvetica Size 16.
To the right of the menu, you'll see a blue circle with a white triangle. When you see that it allows you to change the options of the menu. Change the Menu to show All Pages from Menu Type and leave all other options
Go back to plan and double-click the home page. First we'll place a banner that fits the width of the page. File->Place and insert the image and resize. Next we'll add 4 summaries to articles with an image and a short description for each. We'll create one and duplicate. Same as before File->Place an image and resize. Next we'll add a text box that is roughly the same size as the image and change the size of the first two lines and make them bold.
Select both the image and the text box and group them using Command-G or Object-G.
We'll copy and paste so that we have another copy and place it to the left of it. Next, select the original group and the copy, and copy both of them. This should give you 4 Picture/Description pairs and place the last 2 beneath them to create a grid.
Next we'll preview, on the top click on the Preview and this renders the website that we've designed so far into a simulated browser. Whilst designing, not only at this stage and on a regular basis, visit the Preview pane to test and preview how your site will look like. To properly test the site, choose File->Test Site in Browser to test the application in your default browser and this is what other users would see.
There are a couple of ways that you can upload your site when it's finished. The first is to use Adobe Business Catalyst that is included with the Creative Cloud package or host it using your own hosting provider via FTP. The first option, Business Catalyst takes care of all the technical settings and hosting and provides a simple method of uploading and maintaining your existing site. To use Business Catalyst, just click on the publish button and fill in the details that you had registered your Business Catalyst site and the rest is done for you.
The other option is FTP which is the popular method as you choose and provide your own hosting. There are thousands of hosting providers and you sign up with a third-party hosting provider and they'll provide you with the details. Once you have the details you click File->Upload to FTP host...
Fill in the details from your third-party provider and Click OK and the Adobe Muse will upload it to the FTP host.
You can see that we managed to create the bulk of the site and we didn't write a word of code. Adobe Muse takes care of all the technicalities and allows you to concentrate on just the design. We only added content to the home page but once you've created the pages in the Plan stage and seen how to design one page (Home Page) then adding the rest of the content is the same. We know that all pages link to each other as we'd tested it in Preview and in the browser. So from Planning to designing to Previewing and publishing our site, we can see that the process is as simple as one-two-three.