Creating Advanced Skins | Skinning Windows XP

SkinStudio provides two approaches to creating advanced skins. You can cut items from a predrawn template (you draw the template in your drawing software), or you can edit the default bitmap files using your image editor. First, we'll examine cutting items from a predrawn template.

You need to design a window frame, taskbar, Start button, and any other visual style elements you want to include in your skin. For example, you can use a graphics package such as Macromedia FreeHand and draw the various parts of a window (see Figure 9.8).

Figure 9.8. Create a template for your skin.

When you create your templates, you should make the canvas on which you are drawing transparent so you can easily work with the elements on the canvas or page. You do this by using magenta (in RGB colors it is Red: 255, Green: 0, Blue: 255). So, in this case I made the entire page fill color magenta. Then I began the process of creating the various parts of a typical window. You can also use magenta to cut out or mask parts of a drawing (because the color is read by WindowBlinds as transparent).

Tip

A good way to explore changes that have been made to the standard Windows visual style is to open an existing WindowBlinds skin and preview the various elements in SkinStudio. Select File, Open. In the Skin Navigator window, expand the WindowBlinds Skins node, select an existing skin, and click Edit. The skin is opened in SkinStudio. Remember that you can edit existing skins but should not claim the final product as your own because you started with another skin author's material.

You need to create different versions of your drawings for interface elements that exist in different states. For example, a window frame exists in an active and an inactive state. So, you must create both versions. Also, make sure you save your files as JPEGs (.jpg).

You don't need to create the template files so the various visual style elements are the exact size they will be in the actual skin. Just use your creative talents and your drawing software to create the parts. SkinStudio handles the sizing for you when you cut a particular image and paste it into your visual style.

After you create your template files, you are ready to create your visual style. Start a new style in SkinStudio by clicking the New button on the SkinStudio toolbar. Select one of the visual style element sets, such as Windows, in the Preview panel.

Now you can load the template image that will be the source for replacement images you use for the visual style. Click the Template tab in the Preview panel. Next, click the Open File button on the Template tab. Use the Open dialog box to locate your template image, and then click Open to open the file. The image is loaded into the Template tab.

Click the Preview tab to return to the current preview. Select the visual style element you want to replace in the Preview panel (for example, the window frame top). Return to the Template tab and use the mouse to select the part of the template image that will serve as the replacement for the currently selected visual style element (the element appears in the Editing Panel, shown in Figure 9.9). If you created the image to include the multiple states of the element, you can use Select All to select the entire drawing.

Figure 9.9. Select your replacement from the image template.

Click Cut Image to open the Import Image dialog box. You are provided with three choices in the Import Image dialog box:

All Frames Already in It-Ready to Use in the Skin Use this choice if you have drawn the image and want to include the entire element and its various states.
Single Frame-Create the Proper Image by Multiplying It Use this choice if you are cutting a portion of a drawing and you want it to be rendered as the complete object you are replacing (refer to Figure 9.9 for an example of a situation in which you want to multiply the image).
Single Frame-Import It to Frame Use this choice if you have selected the entire replacement image in your template but have not included multiple states for the object. A drop-down box next to this choice enables you to select the state (such as active or inactive) you are importing.

Make your selection in the Import Image dialog box and click OK. Repeat this process to replace other elements in the visual style. As you work, you might want to test the visual style (select Tools, WindowBlinds, Test This Skin). You also might want to apply the skin to see how it looks; select Tools, WindowBlinds, Apply This Skin.

You can also globally change the color mix for your skin if you want to use some of the default visual style elements, such as buttons and controls. Select any item in the Preview panel and then select the Coloring tab in the Parameters panel (see Figure 9.10).

Figure 9.10. You can modify the skin color scheme using the Coloring tab.

Use the slider bars to select a new color for the skin; then click Apply. This color scheme is applied in different shade values of the selected color to the various visual style elements, depending on their original color.

Caution

Applying a color change globally to the skin affects any replacement elements you have cut and pasted into the skin. So, if you want to preserve the colors of the elements you paste into the skin, make any global color changes before you cut and paste specific skin elements.

After you have made some changes to your skin, apply it to Windows. You might want to change icons or other theme elements, such as the background, as you build a complete makeover for Windows. Figure 9.11 shows a skin in progress that will result in a Windows theme called froggy.

Figure 9.11. Apply your visual style and change theme elements to build a complete skin.

The alternative to cutting elements from a template is to edit individual elements using your favorite image editor. Editing visual style elements in an image editor such as Photoshop enables you to change and fine-tune visual style elements as needed.

The first thing you should do is specify the image editor you will use to edit the visual style elements. Select the Tools menu and then select Preferences. The Program Preferences dialog box opens. In the Program Preferences dialog box list, click the image editors you want to use (see Figure 9.12).

Figure 9.12. Add your image editors to the SkinStudio properties.

Click the Add button in the Program Preferences dialog box. The Open dialog box appears. Browse for the executable file that starts your image editing softwaretypically, it's in a subfolder of the Program Files folder. Select the executable file and then click Open. The image editor is added to the list. Repeat these steps to add other image editors.

After selecting an editor in the list, you can use the Move Up and Move Down buttons to arrange the image editors in the order you want. When you have finished adding and arranging the image editors, click OK to close the dialog box.

Now you are ready to use your image editor to edit individual elements of the visual style. Select a visual style item in the Preview panel. The bitmap for that item appears in the Editing panel.

Click the Edit button in the Editing panel and the bitmap for the currently selected item is opened in the image editor that was at the top of the image editor list you created in the Program Preferences dialog box.

In this case, the Start button has been loaded into Photoshop (my default editor). Note that the loaded image includes all the states of the Start button (see Figure 9.13).

Figure 9.13. Edit visual style elements in your image editor.

After you have a particular item in your image editing software, you can edit it. Make sure you save the changes that you make to the item. When you close your image editor, you are returned to the SkinStudio window and the changes you've made appear in the Editing and Preview panels.

Tip

If you want to select an image editor from the list you created, in the Editing panel click the drop-down arrow next to the Edit button.

You can also make changes to visual style elements in the Editing panel itself. Click the Margins button to view the sizing margins for the current item (see Figure 9.14).

Figure 9.14. The sizing margins for the currently selected element.

You can adjust the sizing margins to change the size and shape of certain visual style elements. Be sure you test and apply these changes to see how they look when applied to the Windows interface.

You can also paste images from the Clipboard to replace the current item by clicking the Import drop-down arrow and then selecting From Clipboard. This drop-down command list also enables you to quickly load a new image template using the Open Image to Cut from command.

Creating a complex visual style in SkinStudio requires the use of image templates you create in your drawing software. You can then fine-tune individual elements using your favorite image editor.

After you have created a new skin and saved that skin in SkinStudio, it is added to the WindowBlinds list of visual styles. You can use WindowBlinds as the launch pad to load and change your skins as necessary. For more about WindowBlinds, see Chapter 6, "A Closer Look at Skinning Software."