Previous Page.   Vista Specific Elements  11 Next Page.


In the previous chapter we covered most of the XP specific skin elements that can be skinned in SkinStudio 6.  Now we will once again focus our attention on Windows Vista, and some of its specific elements.  As mentioned before, creating a Vista sub-style is a great way to appeal to a much broader audience, and we will cover how to do this soon.

In SkinStudio 6 the Vista specific elements will be found in the Edit Explorer/IE shell parts category in the main menu. 

The first area we are going to take on for Vista is the Control Panel.  The Control Panel in Windows Vista has a new look to it, and seems a bit more organized than in XP. 

The two items we can change in this area will be the "Branding" and the "Sidebar".  As  you can see in the screenshot above, both of these elements reside in the sidebar area and can be altered by simple image replacement.  You also have the option to leave the OS default if you so choose.

The "Search icon" is the icon in the search box which can normally be found in the upper right-hand corner of an explorer type window.  This image has two sub-images, "search" and "cancel search" that can be skinned.  The next set of icons are the "Navigation" icons.  These are the icons found in the navigation bar near the top of a window.  The sub-images required here are Left arrow, Cancel, Refresh, and Drop Down. 

Next in this section is the Navigation Arrows.  This area contains four arrows, and a background element that can be changed.  The navigation arrows let you navigate forward and backwards through screens.  Each image needs a forward and backward sub-image, and there are four arrow images needed....normal, mouseover, disabled, and pressed.  Each of the arrow images should be 27x27 pixels in size.  The last part of the navigation arrows will be the background image.  This image also has four frames and each one should be 70x29 pixels in size.  You can always refer to the bottom area of the SKS windows to see dimension requirements, if any.

For quite a while, people have been asking for the ability to skin Internet Explorer 7, in particular the tabs.  SkinStudio 6 makes skinning the IE7 tabs, and several more elements much more easier. 

The first IE7 element we can skin is the Navigational arrows background.  This is pretty much identical to the image we created for the navigation arrows in the previous section, so just stick to those guidelines.  The option to change the IE7 icons is also here.  As you can see in the screenshot below, there are quite a few icons (20) that can be altered.  These icons are for items like the Home, RSS Feeds, and Options buttons in the IE7 window. 

The IE7 icons have two sub-sections here, one for small icons and one for big icons.  The small icon image dimension needs to be 320x16 pixels, and the big icons at 480x24 pixels.  Be sure to double check the image frames to make sure their order corresponds with what is required.

The Expand/Collapse arrow is next, and this is a two frame image of the arrow used to expand and collapse various options.  The Progress Animation is what you see in the tab itself when a page is loading.  This animation has 18 frames with a dimension of 288x16 pixels. 

Now we can get working on the tabs.  The tabs in IE7 have four different parts that we can skin. 

  1. Tabs.  This is the main tab image.
  2. Close button.  This is the close button on the right side of the tab.
  3. Rounded edges.  These are the bottom corner images and the image needs to be 10x10 pixels.
  4. Bottom tab bar.  This is the bottom bar of the tab itself and needs to be 2x10 pixels.

Each of the above items has several sub-images that need to be used.  Once you have the images imported, now would be a good time to stop, apply the skin, and open Internet Explorer to see if everything has been skinned. correctly. 

The Task Dialog Controls are something new in Windows Vista.  If you have used Vista for any time you probably noticed these dialogs pop up from time to time for various system controls.  This is another straightforward section with three elements to skin.

  1. Expand button.  This is a typical expand button with 6 sub-images, and the arrows should be 18x21 pixels in size.
  2. Buttons.  The buttons are the main element of this section, and also needs 6 sub-images.
  3. Button arrows.  These arrows are placed on the buttons, and should be 20x20 pixels in size.

Along with the many new features of Windows Vista, it also brings along some new UI elements in Windows Explorer.  The Explorer in Vista has a much nicer UI than XP, but that means there's going to be more to be skinned.

First up is the Favorite Links Background.  This element is in the upper right-hand side of Explorer and lists various favorites like Documents, Pictures, Music, etc.  This is just a single background image, and you have the normal margin adjustment tabs if needed.

Moving on to the Folders bar.  The Folders bar sits right below the favorite links and expands/collapses the folder hierarchy in Explorer.   This element has 3 frames which are normal, mouseover, and pressed. 

The Command Bar section is next in line.  The Command Bar sits below the navigation area in Explorer and contains the buttons used to switch views, organize, and various other commands.  The skinnable elements here include:

  1. Background.  The background image used for the command bar is a single frame image.
  2. Overlay.  This optional section can be used to put an overlaying image over the background.
  3. Buttons.  The buttons used for the Command Bar have 6 frames that need to be included.  You can always view the frame order in the help tab.

Once that is completed, we can move on to the Explorer Information Pane.  When you select a file or folder in Vista with Explorer, you can see info about that file including the icon image in the bottom window pane.  With SkinStudio, we can replace the background with our own image, and also have the option for an overlay image if you decide to use one.

Moving on we are now at the IE7 & Explorer Glass Toolbar and Search/Address Field Background.  The glass toolbar has 4 sub-images that can be changed. 

The next section is List View.  When viewing files and folders in Explorers list view, you can change the image that appears in the normal, mouseover, and pressed states.  You can also change the "vertical line" in this section as well, which is the dividers in the list view.

Last in this section we have the "Please wait" image.  This is the same image we changed in the XP specific chapter that loads when the "please wait" screen appears.


We have covered many Vista specific parts, but we have just a few more left before we are done with this chapter. 

  • Drag and Drop.  When dragging and dropping something in Vista, you now get icons to show the action you are taking.  The icons have 7 sub-images for each action, and each frame must be 24x24 pixels in size.  When the icons are dragged, a background is drawn which can also be changed.  The last element here is the "Count background" when is drawn when the icon count is displayed.
  • Alt-tab Switcher Button.  When you click Alt-tab you will be presented with a list of open windows which you can then cycle through.  You can alter the button used to mouseover and select in this section.
  • Aero Wizard Arrows.  This section will allow you to change the three arrows used in wizards with Aero.  These three include the down, back, and next arrows.  Each arrow needs 4 frames and should be 27x27 in size. 

At this point in our skin, we have skinned just about all the elements that are possible to change.  In the next chapter we will cover fonts and coloring in SkinStudio 6.  I know I have said this several times during this tutorial, but take the time to apply the skin and use it for a while to find any errors or anything that might be out of place. 

Table of Contents
Previous Page. Next Page.