X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close
Review: 5 Things to Love About Adobe Muse (Codename)

With the release of InDesign CS5 Adobe made a sizable shift towards allowing designers to make interactive documents without, and this is the really important bit, without having to first learn any code what so ever. Take the Object States panel as an example. Suddenly a world of interactive SWF design opened its doors to even the most hardcore print designers. And so the revolution, if that's what it is continues with the Beta software codenamed Muse. 

Muse is an HTML5 editing package that utilizes the web design benefits of CSS3 but that requires none of the coding. In fact the software is so non-code thats its basic workflow, layout and terminology is more associated with InDesign than Dreamweaver. And it's that InDesign emulation that really opens Muse (working title) up to Designers. 

There are lots of really nice features in Muse that make it a really quite simple application for anyone with a basic InDesign knowledge to get to grips with. I've picked out 5 of my favourite features for you.


Feature 1 - Plan View

The plan view is in a lot of ways an equivalent to the Pages Panel in inDesign, only with the added feature of it being a web-site that's being put together as a site map rather than a document.

Plan View

Plan View.


Let's start by looking at the Structure and Layout first. Beside the first page (this will be your index page) you will see small "+" buttons. Clicking on the button to the right of the first page adds a second page to the site. 

An Added page.

An Added page.


The pages are joined by a little connecting line. This line will be used to generate navigation, as you will see later. Keep clicking on the + button to add new pages either before or after the old pages. So simple.

The bottom + button

The bottom + button


The + button at the base of each page has a different role. Clicking on this button adds Sibling Pages. Sibling pages are pages that can only be linked to from within the page your adding them to.

The Sibling page

A Sibling page.


Using the + Buttons to form a site structure means it doesn't take very long until you have created this kind of thing.

Site Map

Site Map.


It doesn't take much effort either. Just as in InDesign selected pages can be deleted using the trash can button also. 


Feature 2 - Master Pages

As a designer you know just how important consistency in your design is for the user experience to be a good one, regardless of medium. Using Master Pages in Muse is a great way to facilitate just that. If you are familiar with Master Pages in InDesign then you will already understand this concept. If you're new to Master Pages the best likeness I can think of for you is Templates.   

A Master Page.

A Master page.


Double Click on the Master Page to open it. Notice there are two pairs of guides? These are preset as Header for the top pair and Footer for the bottom pair. 

Header guide

Header guide.


Adjust them as you would any guide to get them into position.

Place content that needs to be consistent on more than one page by pressing Command-D to open the place options or by selecting one of the tools to generate for instance a text box or a shape.

Content placed on master page plus tools

Content placed on master page plus tools.


Try making a few variations by either adding more master pages or duplicating (right-click and choose 'Duplicate') the current one and making modifications.

The A Master page is automatically applied to all pages. To apply a different master page to your pages, drag a master page from the master page group over to a page in the Plan view and release it when the page highlights.

Page with master applied and extra content

Page with master applied and extra content.


The page can still be edited where there is no master page content, so in reality a page might be made up of 80% content added on that page and 20% content from the Master Page for instance. 

TIP: Master Pages can still be edited in the Master Pages group, just remember that any changes made to the Master Pages are Global and so will be reflected in the pages that have that particular Master Page applied.  


Feature 3 - Object Pinning

Using the Position formatting options in CSS to pin an object to a position in the browser window can be quite complicated if you are unsure of what you are doing. Muse however has found a simple yet highly effective way of doing just that.

The Pin option

The Pin option.


Select an object or group on the page that should not move from its current position, perhaps a navigation bar for example. 

Navigation selected and pinned

Navigation selected and pinned.


In the control panel click on one of the Pin options, I've chosen Top Left.

Click on the Preview button to see your HTML page, now try scrolling the page (you might need to add more content to enable scrolling). 

Pinned object stays put

Pinned object stays put.


The pinned object stays pinned to the top left of the browser window rather than the page. 


Feature 4 - Customize Navigation

In the Plan view I have a site structure, and all the pages and Sibling pages are named.

Plan view busy

A busy Plan view.


Now I use this site structure to automatically create site navigation. Open the Widgets panel and choose Menus > Bar/Horizontal/Vertical.

Widgets

The Widgets panel.


Drag the Menu onto the first page on the site and place it in position. 

Tip: The Master Pages are an ideal location for this type of thing.

Menu on the page

Menu on the page.


This widget is a smart widget that automatically names each link and creates a Hyperlink to the page. Click on the options button next to the menu to open its options.

The Options area

The Options HUD.


Here you can chose what type of menu you desire such as what level of navigation you want, Pages only or include Sibling pages for instance. 

The Control Panel

The Control Panel.


To style the menu to match your site use the color options and font options available in the Control Panel like many other Adobe applications.


Feature 5 - Importing Buttons from Photoshop CS5

This has to be my favorite feature of all, as it allows for the design of buttons using Photoshop layers for button states.

Photoshop layers

Photoshop layers.


Here I have a Photoshop image that I've made, a button with a different layer design for each state. 

Back in Muse, place the photoshop file as a Photoshop button by choosing File > Place Photoshop Button. 

Button Options

Button Options.


In the options box that pops up match each layer to each Button state, Up, Over etc. Then place the button on the page. 

Switch to the Preview mode and test the button. Each photoshop layer is revealed when its corresponding state is activated by the cursor. 

The States panel

The States panel.


The States Panel allows each Photoshop button state to be monitored and modified after placement. 


Conclusion

So has Adobe struck the right course with Muse, or indeed whatever it might be called at the time of launch? Well I'd have to say... Yes! Muse is a great tool for designers to transfer their knowledge from Print to Web without involving code. Not that I'm saying anything is wrong with coding, but for many designers HTML and CSS are not part of their toolset. 

If you want to try out the Beta version of Muse then visit the Adobe website and download it for free here.


David Smith

David Smith | Articles by this author

David Smith is Scotland's most qualified Apple and Adobe certified trainer. Having completed his education at Edinburgh College of Art's BAFTA winning Film School, David moved straight into TV production, first as a Vision Mixer then quickly becoming, at the age of just 24, a director of live TV studio productions. In 2001 he moved into Higher Education where he became a lecturer in TV Production, specializing in post-production and live studio production. During this time, and working with the support of the BBC, Channel 4 and independent production companies, David was instrumental in the design, development and implementation of industry-approved vocational courses across Scotland's Colleges. In 2006, after working closely with Apple Computers to create a unique multimedia studio for education at the Music and Media Centre in Perth, David became Scotland's first Apple-Certified Trainer for Pro Apps. This led on to David forming the first Apple Authorized Training Centre for Education, north of Manchester. In 2008 David made the move to full time training and joined the ranks at Academy Class, Ltd. where he continues to train industry professionals as a certified trainer across the Adobe Creative Suite and Apple Pro Apps range.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link