Use Graphic Styles in Adobe Muse

Learn how to create and use graphic styles in Adobe Muse.


Adobe Muse is no longer adding new features and will discontinue support on March 26, 2020. For detailed information and assistance, see Adobe Muse end-of-service FAQ.

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

What are Graphic 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.
Enter the Graphic Style name
Enter the Graphic Style name

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.

  1. Open the page from where you want to copy a graphic style. Right-click and click Copy Attributes.

  2. Select the target element to which you want to paste the style. This element can be within the same page or a different page in Adobe Muse. 

    You can also copy and paste graphic styles across projects.

  3. Right-click on the target element, and select one of the following options:

    Paste Attributes: To paste all the attributes from the source element to the target element.

    Paste Selective Attributes: To paste selected graphic style attributes from the source to the target element. In this case, only the selected style attributes are pasted to the target element. For example, you can choose to copy and paste only Fill and Effects, while leaving out the Stroke attributes.

    Paste selective graphic styles to the target element
    Paste selective graphic styles to the target element

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.

Unlinking a graphic style simply dissociates the object from the said Graphic Style, but does not remove any styling attributes such as fill, stroke, or effects.

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.
Adobe logo

Sign in to your account