The start bar, or as some may call it the taskbar, is one of the most important aspects of a skin because it's the part people will see and interact with the most.  The start bar has a variety of elements that are to be skinned, so lets take a few moments to go over them.

1. Taskbar (horizontal/vertical). The taskbar, which you will most likely see at the bottom of your desktop displayed the open applications, and also contains various other skin elements like the start button and system tray.
   
   
2. Start button. When pressed, the start button gives users access to the start menu.  This element can be skinned and with SkinStudio it may also be animated giving users the option to create a stunning effect.
   
   
3. Taskbar buttons. These buttons appear in the taskbar and show the applications that are currently open and running. 
   
   
4. System tray. The system tray, also known as the notification bar, sits in the taskbar and displays status notifications and sometimes minimized windows.  The system tray includes a few skin elements such as the arrow expander and clock text. 
   
   
5. Quick Launch bar. This area in the taskbar contains shortcuts to applications.  The skinning element here is the quick launch icon button.
   
   
6. Resizing bar. The resize bar (XP) appears when you unlock the taskbar.  You can "grab" this bar and resize the taskbar if you so desire.
   
   
7. Rebar gripper. This element also allows you to "grab" and resize the quick launch toolbar. 
    
   
8. Start menu. The start menu is accessed from the start button, and shows the installed apps and shortcuts to areas like the Control Panel.  The start menu contains several skin elements, of which we will go into more detail in the next section.

The start menu displays your installed applications and shortcuts to various programs.  From the skinning point of view, the start menu was something that many people had trouble with in years past, so this was another area that SkinStudio 6 aims to make easier. 

1. Top Part. The "top part" section of the start menu is just that....it is the image at the very top of the start menu above the list of applications.  Users of WindowBlinds 6 should try out the included Molten skin, as a perfect example of the animations that are possible using SkinStudio.
   
   
2. Bottom Bar. This is the bottom image of the start menu.  This area also contains the search box (Vista) and the logoff and shutdown buttons.
   
   
3. Logoff/Shutdown Buttons. These graphics are for the logoff and shutdown buttons.  These buttons are located in the bottom bar of the Windows start menu.
   
   
4. Popup Menus.  This element shows popup menus and the All Programs menu (XP). 
   
   
5. Programs List.  The programs list is on the left side of the start menu, and this is where you will see the installed applications.  The left side also includes the left hand separator, more programs background, and more programs arrow elements.
   
   
6. Places list.  The places list on the right hand side of the start menu and contains the list of shortcuts like Documents, Pictures, etc. 

Making a New Start Button

We have gone over the SkinStudio interface, and covered the elements of the Start bar and Start menu, so now it's time to put this into practice.  Lets start with one of the most noticeable features of the GUI, the start button.

As you see in the image below, the start button has five states.  These states define what sub-image is displayed when one of those actions is taken.  For instance, when you mouse over the start button, that sub-image is what will be displayed.

The order of the sub-images for the start button are as follows:

1. Normal
2. Pressed
3. Disabled
4. Mouse Over
5. Focus & Default

Now it's time to actually create the graphics needed.  You can use any graphics editor of your choice, but for this tutorial I will be using Adobe Photoshop.  Make note that the images I'm creating for this skin are basic, and I'm sticking to sizes that are more common among skins so it's easier for new users to follow along.  Please feel free to be as creative as possible and experiment with different designs.  WindowBlinds requires that images either be TGA or BMP graphics, but you can import PNG graphics into SkinStudio.

I start by creating a new start button, and then making several variations of the same button by increasing and decreasing the inner glow for effect.  Each of these variations will represent a different state as mentioned before.  You might notice the start button in the image below looks cut off, that's because this is a larger start button and the "remaining" image will be added using the glow option. The glow overlay option allows you to create larger start buttons that extend beyond the taskbar.  If you just want to create a simple start button, just make one the same size as the taskbar you plan to make.

The start button has five states, so we need to make sure the image we use for SkinStudio has those images included in the proper order.  You can manually arrange the graphics and have each sub-image equally placed, or you can use the frame builder in SkinStudio 6.  This will build the image frame by frame for use in the skin, and beginners should start with this.  More on the frame builder in just a moment.

Importing the Image Into SkinStudio

Now that we have our graphics made, we need to get them into SkinStudio.  Select "Edit Startmenu and Taskbar" from the left hand menu, and then select "Edit horizontal taskbar" to open that section.  A new window will open, and you will see the area to edit the Start Button at the bottom.  You will notice that it has two sub-sections, Button and Glow, but select Button for now.

Clicking the arrow button (see below) will bring up a menu which will give you a few choices on how you want to get your images into the skin.  If you already the image ready to go, then using the "Quick import file" option will probably be the way to go, especially if you are an experienced skinner.  It will bring up a simple dialog box where you can browse to and select the image. 

Selecting the "Import" option will bring up a more advanced import menu. 

One of the most useful tools in creating your skin will be the Frame Builder.  This can be accessed from the Import menu by selecting "create sub-frames", or opening directly from the drop-down menu.  Creating frames and getting them in the correct order wasn't the easiest thing to accomplish, but the Frame Builder makes the process simple. 

The Frame Builder will basically piece your images together to create the final image complete with the sub-images in the proper order.  You can import individual images into each frame, and then let Frame Builder do the work for you.  If you already have an image with multiple parts you can also import them and the Frame Builder will place them in the correct frames.  The option to stack horizontally or vertically is there, and once complete you also have the option to save the completed file. 

If you have the Pro version of SkinStudio you will also have re-coloring options in the Frame Builder.  This is an awesome feature for anyone as it will let you re-color the entire image, or just individual frames.  It's a great way to correct any color issues, or just make changes without having to open the image in your graphic editors.

Remember, if you prefer just to modify any of the  current images, just click "Edit Image" and the graphic will open in your default image editor.  This goes for any section in SkinStudio, and you can customize which graphics editor opens the image in the SkinStudio preferences.

My start button image is in place, so now I move down to the glow section.  The image I'm using for this section will make our round start button complete, and it will extend over the taskbar by just a couple of pixels.  I imported the image just as I did before, but as you see in the screenshot below it needs some adjustment to fit to the rest of the start button.  Select the "Extra settings" tab and adjust the image values until it is placed correctly.

SkinStudio 6 also has a new Layers feature.  Here you can specify layers that will overlay the base image.  This opens up a wide variety of options such as overlaying a stretched image over a tiled image.

Once you have all your options set for the start button, you can check the different image states by selecting the drop-down menus which will give you a preview of how the skin looks so far.  The other drop-down menu will allow you to preview your skin with different background settings.  It's a great way to see how your skin will work with dark or light backgrounds.