The start button is done, and now we have had our first taste of actually working with SkinStudio and creating our new skin.  Moving on we are now going to tackle the images for the rest of the start bar.  Still working in the horizontal taskbar section in SkinStudio, I'm going to prepare the taskbar background next.

The taskbar background has two image parts, bottom and top.  The bottom being where you would normally see the taskbar, and the top if a user moves the taskbar to the top of the screen.  In the screenshot below I have created a taskbar with a height of 30 pixels.  I created a new image and put both the taskbar top and bottom images in one as shown, and saved that image as a .PNG. 

In the same manner we imported our graphics for the start button, we will do the same for the taskbar background and subsequent images.  Once imported the preview window should update and gives you a chance to review how the image looks.  If you need to make any adjustments to the taskbar image then we can now look at the various options in the tabs in the SkinStudio interface.  One option to take note of is the "Extra settings" tab.  This will give you the option to turn on and adjust semi-transparency and blur effects. 

Next in line is the Resizing Bar (XP), which appears on the taskbar when unlocked, giving the user a visual guide to resize the taskbar.  You will notice that this is a Windows XP element by the XP "flag" icon next to the text.  I created a graphic for this, imported it into SKS and moved on to the next stage, which happens to be the "Flashing button".  For this image I took one of my taskbar buttons and re-colored it  with a brighter overlay. 

We are still working in the Horizontal Taskbar subsection, and the last two elements are the "quick launch icon button" and the "Rebar gripper". The quick launch button has 6 states, and if you ever need to check to see how many states an element has, then just look at the "help" tab and it will give you the number of frames and the order they should be in. 

System Tray

Finishing up the Rebar Gripper and quick launch icon button images, we are done with the Horizontal Taskbar section, so it's time we move on to the Tray section just below.  First we have the tray section, which will be the background image for the system tray.  I have seen many skins just use the background image for the whole taskbar, including the system tray.  The easiest way to do this is to just use a transparent image, and by default that is what is used in SkinStudio. I wanted the system tray to stand out a bit so I made a graphic for this purpose.

The "system tray arrow expander" is the image you click to expand or contract the system tray area. A quick check of the help tab I see this element has 6 sub-images for the normal, mouseover, and pressed states.  Once this image is complete , import it into SkinStudio as we have been doing for the other images. 

The next element is the "Clock text", which is a part where we don't have to create an image for, but can be adjusted if you so wish.  Selecting one of the two controls will allow to change either the font used for the clock, or the color. 

In the Edit Fonts window you not only have the option to change or add a new font, but you also have the option to include a font with your WindowBlinds skin which will be installed when you apply the skin.  This is very handy if you have an obscure font that users might not have.  You can find this feature by pressing the "included font files" in the Edit Fonts screen.

Windows Vista introduced some new fonts for various parts of the UI.  You can view and change these fonts by selecting the "Modify Vista parts fonts" button in the font window.

Taskbar Group Menu

These components are the last part in the Horizontal Taskbar section that we need to work on.  We have already taken care of the Start button, taskbar elements, and the system tray.  The Taskbar group menu appears when you click on a taskbar button of a group of similar windows.  This section has a background, and menu items to skin.  The background has one image, and the menu items have 4 states for sub-images.

Once these two images have been imported, that is the end of the Horizontal taskbar section.  Now would be a great time to apply the skin and test out the skinned elements that we have created so far.  In the editor window, click "Apply" to apply your skin (you will need to have WindowBlinds installed).  Make sure to check the image states by clicking the elements we skinning, hovering over elements with your mouse, and see if anything needs to be adjusted.  You can always go back at a later time, but this will give you a good look of how the new skin is shaping up.

Vertical Taskbar

We have been working in the horizontal taskbar section, now it's time to take on the vertical section.  SkinStudio has already placed elements like the Start button, so this section doesn't have as many elements to skin as the horizontal area.  The vertical taskbar section will focus on two areas, the vertical taskbar and the system tray.

For the vertical taskbar image I had to slightly adjust the original taskbar image, and since this has two image states (left and right) I made sure to include both sub-images in the final vertical taskbar image. Once imported I noticed my image wasn't fitting the way I intended it to.  In the screenshot below you will see the taskbar is tiled in the middle, so we want to correct that.

Open the Painting Margins tab which will allow us to adjust the margins in the taskbar.  In the drop-down menu I need to change "tile middle section" to "stretch middle section", and that will give our vertical taskbar a smoother look.  The margins tab also has a preview area, and there are a variety of settings to adjust margins in  your skin elements. 

The remaining elements in the Vertical Taskbar section are:

1. Resizing bar (XP)
2. Buttons
3. Quicklaunch icon button  
4. Rebar gripper
5. Tray section
6. System tray arrow expander

If you choose to do so, replace these skin elements with your images as we have outlined in the beginning of this tutorial.  With the vertical taskbar skinned, we have accomplished quite a lot with the start bar, but now we need to work on the Start menu.