Understanding styles and symbols

Use styles to quickly apply changes you make in one object to other objects. Use symbols to add reusable, editable components in your designs.

• View full-size on Adobe TV
• View more videos like this

Requirements

To complete the tasks demonstrated in this tutorial, you need the following software and files:

Adobe Fireworks CS4

• Try
• Buy

Sample file

lrvid4033_fw.zip (ZIP, 1.5MB)

Prerequisite knowledge

Intermediate knowledge of symbols and styles in Fireworks

Understanding styles and symbols

Symbols and styles share a common characteristic in that they help speed up your workflow. In this tutorial, you will review the updates to the style panel and the Property inspector in Adobe® Fireworks® CS4. You will also learn how to link styles to a wide range of objects, how to create a symbol, how to work with nested symbols, and how to navigate nested designs using the breadcrumbs trail.

The Styles panel

Fireworks CS4 has introduced a new library of styles. The new Styles menu allows you to choose from a number of style libraries. To access the Styles panel:

1. Go to the panel group on the right side of the default Fireworks workspace.
2. Expand the Styles panel. The Styles panel is usually located at the bottom of the panels group with the Color Palette and Swatches panels.

   

   Figure 1: The Styles panel
3. Go to the Styles menu located at the top of the Styles panel. By default, Current Document is selected. This feature is new to Fireworks CS4.
4. If you click Current Document, you will see the styles available to the open document. To access the complete library of styles available in Fireworks CS4, click the Styles menu.

   

   Figure 2: The complete library of styles

The Property inspector

The Property inspector allows you to modify the properties of your styles.

Figure 3: The Property inspector

To access the Property inspector:

1. Minimize the panel view by clicking the Collapse To Icons button at the top of the panels group.
2. Using the Selection tool, click different elements on the page. Note how the style name of a selected element appears in the Style menu on the far right of the Property inspector.
3. Change the fill color of a page element by selecting the element and then clicking the Fill color box in the Property inspector. Choose a new color for the element from the color bar or by selecting it from the color wheel. Notice that the current style is automatically updated with the color change, indicated by the plus icon that appears next to the style name.

   

   Figure 4: Changing the fill color
4. Once you have made your color change, click away from the Fill panel to close it.
5. Click the Redefine Style button, the second icon from the left as shown in Figure 5. The changes you have made to the style (the fill color change) is applied to every other element on the page that has been assigned that style. Notice that the plus sign is also removed from the style name in the Property inspector.
6. Undo the style change by pressing Ctrl/Cmd+Z. The style is now applied only to the element designated before the Redefine Style change.

   

   Figure 5: Limiting the Redefine style change
7. To make a change to all the elements on the page except the background, click the background to make it active.
8. Go to the Property inspector and select the Break Link To Style icon, the second to last icon in the Properties panel. By clicking this icon, you will break the link between the foreground elements and the background. If you change a style, it will not affect the background.

   

   Figure 6: Breaking the link between foreground and background

Introduction to symbols

Styles allow you to apply visual attributes to multiple objects at the same time. Symbols, on the other hand, can contain multiple styles and objects. This attribute allows you to reuse objects such as buttons for a navigation bar. To create a symbol:

1. Select an object on the page. Press the F8 key to open the Convert To Symbol dialog box. Using this dialog box, you can convert the object to a graphic, animation, or button symbol.

   

   Figure 7: The Convert To Symbol dialog box

   Tip: The Enable 9-Slice Scaling Guides option allows you to scale objects without distorting them.

2. Close the Convert To Symbol dialog box.
3. Click the background element of the artwork. Look for a plus sign or cross-hairs indicating the presence of a symbol. The plus sign represents the symbol’s registration point.
4. Double-click the selected symbol. The Design view changes from the original view to reveal only the elements of the symbol.

   Note: In Fireworks CS4, symbols are displayed on a bar with breadcrumbs instead of in a new document window. The breadcrumb trail expands as you nest symbols, allowing for easy navigation between project states as your project progresses.

   

   Figure 8: The breadcrumb trail
5. If you have 9-slice scaling applied to your symbol, you will see two vertical and two horizontal slice guides. You can drag these guides around to affect how different areas of your symbol scales.

   

   Figure 9: Nine-Slice Scaling guides
6. A plus sign inside a symbol indicates another nested symbol. Double-click the symbol to enter symbol editing mode for the nested symbol. The Property inspector displays the properties and styles associated only with that nested symbol. This feature allows you to edit symbols in place- as long as you don’t have 9-slice scaling applied to them.

   Note: The name of the nested symbol appears as well in the breadcrumb trail at the top of the Stage. Click any of the previous items to return to that level in the artwork.

7. You can also return to the main symbol by double-clicking the canvas.
8. To return to the original design, double-click the canvas a second time.

New symbols in Fireworks CS4

Fireworks CS4 has a number of new preformatted graphic symbols. To access these symbols:

1. Click to activate the Common Library panel located just below the Styles panel. The Common Library houses the new graphics symbols, as well as other Fireworks assets such as Flex components and prebuilt animations.
2. Click to expand the Web And Applications folder. Use the arrow keys to cycle through the various symbols in this folder.

   

   Figure 10: The Web And Applications folder
3. Click the New symbol.
4. To nest the New symbol inside a preexisting symbol, double-click the main design to enter the symbol timeline.
5. Drag the New symbol from the Common Library onto the canvas. You have successfully nested a symbol within a symbol.
6. To scale the symbol, choose the Scale tool from the Fireworks CS4 toolbox.

   

   Figure 11: The Scale tool
7. To edit the symbol, double-click it. Your documents enters symbol editing mode and everything except that symbol is gray and uneditable.

Where to go from here

• Fireworks CS4 Help and Support
• Learn Fireworks CS4
• Introducing Fireworks CS4, by Jim Babbage
• Creating interactive prototypes for reviews, by Jim Babbage
• Scale objects with 9-slice scaling, by Jim Babbage
• Lynda.com

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

About the authors