Creating Complex Visual Styles | Skinning Windows XP

Creating more complex visual styles requires the ability to make more intensive changes to the various interface bitmaps. To manipulate these bitmaps, you need a good image editor. We discussed image editors and other software you might need for creating skins and visual styles in Chapter 7.

Because StyleBuilder is the core program for creating a new visual style, you should be able to jump from StyleBuilder directly to your image editor and have the interface item you want to edit open automatically. This enables you to edit a particular item, save the changes, and then return to StyleBuilder to continue the process of creating a unique visual style.

You can set up StyleBuilder so that your favorite image editor is opened when you select to edit a particular visual style element. Select the Tools menu and then select Options. The Options dialog box opens (see Figure 8.9)

Figure 8.9. Add your image editing software to the Options dialog box.

To add image editing software to the Options dialog box, click the New button. Type a name for the image editing softwareuse the name of your software such as Photoshop.

To locate the executable file that starts the software, click the Browse button to the right of the Program text box. The Browse window opens. Use the Browse window to locate the executable file that starts your image editing software; look in the Program Files folder for a specific folder for your software. After you select the executable file for the software, click the Open button.

Tip

You can also right-click an item in the Preview or Part window and then select Edit from the shortcut menu. This opens the image editor that is first on the list you created in the Options dialog box.

After you have a name and the executable file specified for your software, you can close the Options dialog box (or add other image editing software to the list). Click OK.

Now you are ready to edit the individual elements that are part of the visual style. This means editing bitmap pictures of each element you want to change.

Select an element, such as the taskbar, in the Preview window. You can then click Edit in the Part window and select your image editor.

The image editing software opens, and the bitmap of the object you selected opens (see Figure 8.10). For example, say you want to edit the taskbar and are using Photoshop. You would select it, click Edit in the Part window, and select Photoshop.

Figure 8.10. You can edit each visual style bitmap.

After you have the item's bitmap open in your image editing software, you can change the color of the image, change the size and shape of the image, and even replace the bitmap with a new file entirely (using the same name).

In Photoshop, you can add any number of effects to the bitmap, including color changes and filters. You can also resize some elements, but you must make sure that you test them in StyleBuilder to see whether the revised size will work correctly (more about testing in a moment).

Caution

Be sure you save your edited bitmaps as RGB files so that they work in Windows.

Some visual style elements have areas that appear dark pink in Photoshop (or your image editing software). These areas, which are primarily borders and edges, are dark pink because that is the color used by StyleBuilder as the transparent color (the dark pink color settings are Red 255, Green 0, and Blue 255).

You can use this color to your advantage to do an inverse color selection in Photoshop. Click Select, Color Range; select the transparent color; and then click OK. To reverse the selection (meaning select everything but the transparent color), select the Select menu and then click Inverse. Having everything but the transparent color selected allows you to modify the opaque areas of the bitmap.

Tip

After you create your visual style, you can use your skinning software or the Windows Display Properties dialog box to save the visual style and other theme elements, such as backgrounds and icons, you have created as part of a theme.

Obviously, the degree of changes you make to the visual style items will depend on the abilities of your image editing software. You need to work through each item in the Parts tree (or only the items you want to edit for your visual style) and modify each element to fit in with the overall look you want to create with your visual style.

After you have made changes to the various bitmap files, it is important to test the items, particularly if you have modified bitmaps for interactive items such as buttons. Apply the style by clicking Apply, and then click the Test button on the StyleBuilder toolbar. A message appears reminding you that the test is only for the active visual style (remember to apply the style before testing it); click OK and the Test Active Style dialog box opens (see Figure 8.11).

Figure 8.11. Test the visual style you have applied to Windows.

Use the list on the left of the Test Active Style dialog box to check each interactive element of the new visual style, such as buttons, check boxes, radio controls, and so on. This dialog box allows you to look at each of the listed elements and see whether it is functioning normally. If a particular item is too large or doesn't seem to operate correctly, you need to edit that particular element of the visual style.

So, let's say you have worked through all the various elements in terms of editing and completing your visual style. How do you make it readily available when you would like to switch to it? This is where Style XP comes in, and using your visual style is discussed in the next section.