Use Graphic Styles in Adobe Muse

Adobe Muse provides an intuitive mechanism to save and reuse styles applied to objects on a web page. Creating and reusing styles is an easy way to achieve consistency in design and appearance across all pages of your web site. Styles also allow you to quickly update your website without having to redo coloring, fonts, text formatting, and so on.

Using the styles within Muse allows you to achieve the following things:

• Consistency in appearance across all pages on your website
• Increased productivity by leveraging existing styles or creating styles and reusing them across web pages

Styles include Fill color, Stroke color, Effects, and so on. Styles can be applied to all types of objects within Muse, such as Images, Graphics, Shapes, Text, Characters, and so on. Styles then, within Muse, are further classified in to:

• Graphic Styles
• Paragraph Styles
• Character Styles

A graphic style is a set of reusable appearance attributes. Graphic styles allow you to quickly change the look of an object; for example, you can change its fill and stroke color, alter its transparency, and apply effects in one step.

Styling graphics can include adding fill color to shapes, adding effects such as shadow and bevel to images, adding colors to shape outlines, and so on. Such styling can be preserved using the Graphic Styles panel within Adobe Muse. Once created, a graphic style can be reused throughout the website styling graphics and eventually the whole website at the click of a button.

You can apply graphic styles to objects, groups, and layers. When you apply a graphic style to a group or layer, every object in the group or layer takes on the attributes of the graphic style. For example, assume you have a graphic style that consists of 50% opacity. If you apply the graphic style to a layer, all objects in or added to that layer will appear 50% opaque. However, if you move an object out of the layer, the object’s appearance reverts to its previous opacity.

Creating a Graphic Style

1. Select the object you have styled on the web page.
2. Open Window > Graphics Styles panel.
3. Click the button to create a Graphic Style, named as Style by default. You could also right-click (Command + Click on MAC) in the Graphics panel and select New Graphic Style from the context-menu.
4. Double-click the newly created Graphic Style to bring up Graphic Style Options dialog.
5. Enter a meaningful name in the Style Name field. Review the Style Setting field to ensure that the graphic style settings you have applied are correct.

Applying a Graphic Style

To apply a Graphic Style you created, do the following:

1. Select an object or group (or target a layer in the Layers panel).
2. To apply a single style to an object, do either of the following:
   • Select a style from the Graphic Styles panel.
   • Drag the graphic style onto an object in the document window. (The object does not have to be selected first.) OR select the graphic style in the Graphic Style panel.
3. To merge a style with an object’s existing style attributes, or apply multiple styles to an object, do either of the following:
   • Alt-drag (Windows) or Option-drag (Mac OS) the style from the Graphic Styles panel to the object.
   • Select the object, and then Alt-click (Windows) or Option-click (Mac OS) the style in the Graphic Styles panel.

Copying a Graphic Style

You can copy Graphic Styles to apply these reusable attributes from one element to another. With a single click, you can copy the style attributes from a source element and paste the attributes across several target elements. Further, it is also possible to selectively paste only certain attributes that you need.

Unlinking a Graphic Style

To unlink or dissociate a Graphic object from a Graphic Style, do the following:

1. Select the object you want unlink Graphic Style from.
2. Select Window > Graphic Styles.
   
3. In the Graphic Styles panel, click the button.
   

Redefining a Style

You can redefine a Graphic Style to instantly update its Style Settings. It is common design practice to change styling attributes, thereby creating Style Overrides. Adobe Muse indicates such overrides with a + sign.

Adobe Muse allows you to preserve or clear style overrides. You can preserve overrides by redefining a style.

Do the following:

1. Select Window > Graphic Styles.
2. Select the Graphic Style you want to redefine, and click the button.

Clearing Style Overrides

It is common design practice to change styling attributes, thereby creating Style Overrides, indicated by + sign. Adobe Muse allows you to undo unintended changes to a Graphic Style by clearing style overrides.

To clear style overrides, do the following:

1. Select Window > Graphic Styles.
   
2. Select the Graphic Style you want to clear Style Overrides from.
3. Click the button.

Clear All Styling

The Clear All Styling option allows you to remove all styling attributes applied to a graphic object, and reset to no fill, stroke, and effects.

To remove all styling, do the following:

1. Select the graphic object you want to clear styling from.
2. Right-click > select Clear All Styling from the context-menu.

Go To Style Use

You can now track and manage usage of styles across your site. The new Go to Style Use option lets you displays full list of pages in your website where a Graphic Style is used.

1. Select Window > Graphic Styles.
   
2. Right-click on a style and select Go to Style Use.