Previous Page.   Windows XP Specific Elements  10 Next Page.

 

While much of the work we have done already will be compatible with both Windows Vista and XP, there are certain elements of each operating system that will require specific parts.  You have noticed the XP and Vista icons in the many skin categories we have already covered that would show elements unique to one system or another. 

Windows XP has a few other elements that needs to be skinned, but SkinStudio makes this process easy as it has specific categories designated for XP.  The recommended way to ensure your skin works on both XP and Vista, is to make separate sub-styles for each.  We will discuss this more in depth later in the tutorial.  For now lets cover the XP specific sections in SkinStudio 6.

The XP shell sections:

  • Logoff and Shutdown screens.  This is the screen that comes up when you are ready to logoff/shutdown XP.

  • Explorer/IE 6 toolbar icons.  You can edit the toolbar icons found in Explorer and Internet Explorer 6. 

  • Control panel shell style.  Here you can change the category view in the XP control panel.

  • Shell style icons/pictures.  This section will allow you to change the icons and pictures found in certain folders.

  • Shell style bars/arrow.  The bars and arrows found on the left side of Explorer windows can be edited here.



This section will allow you to edit the logoff and shutdown screens.  In this section the first area to edit is the Shutdown dialog box.

The Shutdown dialog contains four elements to be skinned. 

  • Per pixel background.  This is the background box that will contain the buttons and other associated images for the dialog.

  • Background.  Same as above except this is not per pixel.

  • Buttons.  There are three buttons needed here which are Stand By, Turn Off and Restart.  There are also various image states to these buttons.

  • "Flag" logo.  In the default XP visual style, the flag logo appears in the upper right corner as shown in the image above.  Most skinners will just replace the image with a small image that matches the background.

The next item we need to check out is the screen background that is used for the per pixel dialog box.  This is the background that appears when  you select the shutdown or logoff buttons.  This is just a single image, and I left the default picture for my skin as I think it's a good image.

Last in this category we have the "Please wait" image.  Whenever you apply a skin with WindowBlinds  you probably noticed a graphic in the middle of the screen, and this is that image. 


The toolbar icons are the ones you see in Explorer and IE6.  Examples would be the forward/back buttons, home button, etc.  In this category you have four different sections to work in.

  • Internet Explorer 6 icons. 
  • Go icons
  • Windows Explorer icons
  • Misc. icons.

Most of these will consist of large and small icons, with large and small mouseover icons as well.  If you decide to create new toolbar icons, be sure to pay special attention to the help tab which lists the number and order of the sub-images they require. 


This section will allow you to change the Control Panel category view.   This section is just a bit different than what we have been working with, as you are going to add an image and configure the background element colors in the same tab.

The first item to tackle will be the Control Panel background.  Here we have some flexibility on how to configure the background.  You can simply use an image for the background, or just use a solid color as the background, or a combination of both.  Many skins will have an icon type graphic in the lower right hand corner of the window that typically represents what that window is.  You can see an example of that in the screenshot below.

I like the image in the corner, so I'm going to replace that with one of my own, and adjust the background color to match the background of the image I am going to make.  You will notice a drop down menu label "colours", and this is where you can change the background color, body text color, body text color (mouseover), and the title text color.  To change the color of any of these elements, just select it from the menu and hit the "Change" button.  There you will be presented with a color palette where you can pick the color of your choice to use. 

The next two items in this section are the Header and Vertical Separator.  All you need to do for these items is change the background color, which consists of a background color and background color 2.  If you want a completely solid color than choose the same color for both, or if you would like a gradient effect, then choose two different colors. 

The last two items for this section are the "Icon", and "Do not modify image".  These are simple image replacements and just replace these items as we commonly do.


When you open certain folders in Windows XP, such as the "My Pictures" folders, you will notice an icon in the lower right hand corner that represent that folder.  This section is where we can change those logos to our own. 

As you see in the screenshot above we have four areas to change.  The movies, music, picture, and search logos are all ones we can replace.  Each of these sections will need a large, small, and icon image.  For the best results, make sure the image you create for your logo matches the folder background.


This is the last area to go over in the XP shell category, and this is an important section to skin.  When you open explorer windows in XP, the task area on the left hand side is what are going to modify.  First up is the panel background area.  You can use your own custom image, or in the same manner as the previous section,  we can select two background colors for the panel.  I like to keep this area simple looking, so I'm just going to find some matching colors to use as the background here.

Now we move into the Normal section, and Special section where we have several elements we can change. 

Elements in the Normal and Special sections include:

  • Pane.  The Pane is another area in which you can either specify an image, or the background color.  You can also specify the text colors and other color options from here as well. 
  • Bar.  Along with replacing the bar images in your skin, you can also set the text color from this section.
  • Down Arrow.  The arrow at the right of the bar image.
  • Mouseover Down Arrow.  Same as the down arrow but with mouseover added.
  • Up Arrow.  The arrow at the right of the bar image.
  • Mouseover Up Arrow.  Same as the up arrow but with mouseover.


When you move, copy, or even download files, Windows XP shows animations for these actions.  SkinStudio 6 allows you to add your own animations for the various actions.  The animations used here need to be .avi files, RLE encoded, and at a maximum size of 272x60.

Changing the animations here are optional.  You can always select "Use OS default" to use the default animation.  The following animations can be changed:

  • Change attributes animation

  • Copy files animation

  • Delete file bypassing the recycle bin animation

  • Delete files animation

  • Empty bin animation

  • Download file animation

  • Move files animation

As always, be sure to take the time to check your skin for any errors or inconsistencies.  Being that we covered XP elements you should obviously test the skin on an XP system.  Next in the tutorial we will cover the specific elements of Windows Vista.

Table of Contents
Previous Page. Next Page.