Five feature tips for Adobe Muse CC that Joseph Angelo Todaro couldn’t NOT share.
Designer Joseph Angelo Todaro began using Muse CC about two years ago. Not long after, he started helping other designers get up to speed with the application, first with tutorial videos on YouTube and later with Muse Resources, a library of, well, resources to use in Muse… tutorials, graphics, templates, widgets and Tips & Tricks.
We asked Joseph, also a software instructor with more than 5,000 hours of teaching under his belt, what tips he’d pass along to other designers who were using Adobe Muse for the first time. He had more ideas than we had space, but finally narrowed down his selection; what follows is his Adobe Muse feature insight and advice.
So, open Muse CC, (grab a free 30-day trial), follow along, and see how easy it is to create websites with little or no development experience.
Getting the most out of Master Pages
Websites share elements between pages—navigation, background, and branding typically remain consistent, sitewide. With Adobe Muse, these elements don’t need to be created on each page individually; in fact they don’t even need to be copied and pasted to each page individually (which would make even the smallest changes tedious). For this purpose Adobe Muse has Master Pages.
When looking at your site map in Adobe Muse, Master Pages is at the bottom. Double click on the default “A-Master” to begin editing and adding global elements. You can create multiple different Master Pages and drag them onto any pages of your sitemap to which you want to apply that Master design.
What’s cool about this feature
One master page can be dragged onto another to combine globally repeating elements with sectionally repeating elements.
As an example, let’s look at navigation (which needs to be on every single page): Let’s name the Master containing the navigation, “A-Master” and the Master we’ll use on the other fifteen pages of the site, that will have a banner at the top, “Banner.” At this point, most users would be inclined to duplicate A-Master, rename it Banner, then edit it. Instead, A-Master can be dragged onto Banner to apply its elements. Now when you need to change navigation, background, or branding you only need to do it in one place.
Leveraging Layers
The design canvas in Adobe Muse provides a lot of freedom and the ability to interact directly with objects (selecting, moving, and scaling couldn’t be any easier), but when it comes to organizing objects, Adobe Muse has a crucial tool: Layers.
By default, a new Muse project starts off with a single layer. Using the Layers Panel, which can be turned on and off from the Window menu, you can create or delete layers using the respective buttons at the bottom of the panel. Any new object on the canvas becomes part of the selected layer and both objects and layers can be dragged and dropped to rearrange. (Note: The Layers Panel can also be used to switch between images or slides in a slideshow or composition.)
What’s cool about this feature
When designing Master pages, you may find that elements from other pages, such as navigation, inadvertently end up on top of Master elements. To avoid getting caught in an impossible juggle of objects, I create three layers right off the bat and use the top layer for objects that should always float above the design; the bottom layer for background elements; and the middle layer for all other page design work.
Saving and managing color
Good design is deliberate. With that comes a certain consistency. Colors, for example, should be consistent throughout the design of your site. That doesn’t mean you can’t use many different colors… it simply means you shouldn’t have 30 varying shades of blue by accident. Fortunately, Muse allows us to save colors to the Swatches Panel/Color Picker, so we can reuse the exact same color for graphics and text throughout our sites.
What’s cool about this feature
Have you noticed what happens when you double click on a color swatch? A Swatch Options box appears and enables you to name your color swatch; more importantly, though, it also lets you CHANGE the color, and every single instance of it, on the entire website. That’s huge!
Let’s say, for example, you’re designing a site for a company with an orange logo. You create a swatch of the company’s exact orange, using the eyedropper. You use this swatch all over the site for text, shape fills, and strokes. Then you get an email from the client with the subject line, “Updated Logo,” stating that they’ve changed the shade of orange. Since you’ve used the same color swatch for every orange object, you can simply double click on your swatch and use the eyedropper to pick up the new orange. When you click OK, every element connected to that swatch updates to the new color.
It’s as simple as this:
Syncing text between layouts and pages
Adobe Muse allows us to create desktop, tablet, and phone versions of our websites to be sure that our sites look great on every device. The difficult part is that it could mean designing and maintaining three different versions of the site. In a recent update to Muse, we gained the ability to synchronize the content of text boxes across pages and layouts by using the Content Panel.
The Content Panel allows you to create “Collections” (organizational groups that hold “Tags”). Tags hold individual text box content that can then be applied to other text boxes throughout your site(s). When changing the content of a text box linked to a Tag, it updates the content of every single text box connected to that Tag.
What’s cool about this feature
By adding web fonts that contain graphics as characters, graphics can be synced across your pages and layouts. My Icon Megapack Webfont is a great example; it contains 458 icons in the form of text characters.
To create a Tag, select an existing text box and click the + in the content panel beneath the Collection you’d like to add it to (you may create additional collections at the bottom of the Content Panel to help you stay organized). To apply that content to another text box, select the destination text box and simply click the name of the Tag. Boom! The content will appear in your text box and remain synced moving forward. You can also copy and paste a text box with tagged content and, since both will be connected to the same Tag, they will automatically be synced.
See how it’s done:
Recycle resources
As a professional web designer, you are most likely in the business of creating original designs for each and every client. While the overall design may need to be original, not every element of it needs to be bespoke. For example, a nice simple contact form, can be saved and reused in the future. For this, Adobe Muse has a Library Panel.
What’s cool about this feature
The Library Panel allows you to import and export your saved items right from the bottom of the Panel. Now you can begin sharing and downloading items for your Library on the Adobe Muse Exchange (or grab free content from Muse Resources).
To save something that you plan to reuse to the Library Panel, select that object on your design canvas, click the New button at the bottom of the Library Panel and give it a name. Be careful not to confuse the Library Panel with the “Widgets Library Panel” (where you’ll find the widgets that come preloaded with Muse CC). The Library Panel is persistent and the same content displays as you move between projects and the items in it can be dragged-and-dropped onto the design canvas of any site you build in the future.
How it works: