Navigating the SkinStudio Interface

SkinStudio's application window is divided into several panels (see Figure 9.2). Each panel provides ways for navigating the parts that make up the visual style and enable you to easily get help and view the properties of an individual element.

Figure 9.2. SkinStudio's application window.

Each panel has a specific purpose. The SkinStudio interface panels are as follows:

• Control Selection The Explorer tab provides a tree view of all the elements within the current visual style. If you select an item in the tree, it is displayed in the other panels. The Control Selection panel also has a Buttons tab that enables you to see all the window buttons available in the current skin (buttons can also be accessed via the Explorer tab).

• Preview This panel provides thumbnails (on the left) of all the visual style elements, grouped as they are seen in Windows. Select a thumbnail such as XP Taskbar to view the elements of the taskbar in the Preview panel. Use the Preview panel to view the changes you make to the visual style elements.

• Parameters This panel provides a list of the attributes for the currently selected visual style part (such as the Start button). When you select an attribute in the Parameters panel, the settings for that attribute appear in the Editing panel.

• Help This panel provides context-sensitive help on the item attribute currently selected in the Parameters panel; the information will be useful as you edit individual visual style elements.

• Editing This panel is used to make changes to the attributes of the currently selected item.

The Preview panel does much more than just showing you what your editing changes look likeit also provides some additional tabs. The Analyze tab analyzes the code for your visual style to ensure that there are no errors, whereas the Code tab enables you to see the visual style file entries that are being created as you create your visual style. The Template tab enables you to cut elements from a picture file that can then be used to create the various parts of the visual style you are editing and is discussed later in the chapter.

But how do the different panels we have discussed relate? In a nutshell, the Control Selection, Preview, and Parameter panels are used to drill down to a particular attribute for a particular visual style (interface) element. You can then edit the attributes in the Editing panel.

Let's look at some ways you can dive in and create some simple skins. We can then discuss how you can create more advanced visual styles.