Previous Page.   Making a new Start Menu  5 Next Page.


There are several elements to the start menu itself, and there are a couple of ways to approach skinning the Start menu.  One method is to create the entire start menu in your graphics software, and slice the images to their appropriate sections and then assemble them into SkinStudio using the margins to fine tune the image placement as needed.  The other method is to simply create each image individually, and piece them together in SKS.

As you see in the screenshot above I have created my full start menu in Photoshop.  The lines you see are the slices which "cut" the single image into several pieces which then can be saved separately.  After the images are imported into the appropriate sections, we need to select the Extra settings tab and enter the sizes of the graphics so they 'fit" properly together (see screenshot below). 

This is also another area where the Painting margins tab will come in handy.  If you need extra control over how your graphics are utilized in SkinStudio, this is where you want to be.  We covered this a bit earlier, but these functions control the margins of the skin elements and allows you to adjust them to your needs. 


The skin elements for the Start menu that can be skinned are:

  1. Top part
  2. User icon background (XP)
  3. Bottom bar
  4. Item mouseover
  5. Programs list (left)
  6. Left hand separator
  7. More programs background
  8. More programs arrow
  9. Places list (right)
  10. Right hand separator

Most of these will be part of your "sliced" start menu image, and once all are imported and adjusted (if needed) then your start menu should be nearly complete.  SkinStudio 6 also has options for animating start menu elements as well, and you can find these controls in the Animation tab.  The animation controls will allow you to adjust the animation rate/delay, control the start and finish frames, and even preview your animation.  SkinStudio also has a Start Menu Animation Builder, which we will cover in later chapters.

After your images are in place, now is another great time to apply your skin and check for any problems before moving on.

The Start menu logoff image section is where we can skin the logoff and shutdown buttons found near the bottom of the start menu.  There are two sections in SkinStudio for this, one for XP and the other for Vista, so take note of that when creating your graphics.  Many of these elements have several different states, so be sure to check and make sure you have all the correct states before importing your image.

The elements for this section are:

Start Menu buttons (XP)

  1. Button mouseover
  2. Button icon

Start Menu buttons (Vista)

  1. More options arrow
  2. Normal buttons
  3. Pressed buttons
  4. Mouseover buttons

This is an area where you can choose "no image defined", and SkinStudio will use the default button images in Windows if you choose.  I made a set of images for each state and imported them into SkinStudio.

Start Menu Popup Windows

The is the final section in the Start Menu and Taskbar category, but by no means is our skin complete.  The start menu popup is the All Programs menu in Windows XP, and the background for popup menus in the Vista start menu.

There are three elements in this section:

  1. Background.  This is the background of the popup menu.
  2. Menu item.  The menu item is what appears when you mouseover or select an item from the menu list.  This element has 3 states (normal, pressed, and mouseover).
  3. New application item.  This image is displayed over a menu item when a new application is installed.  It also has 3 states.

Once you have created and imported these images we are done with this section of SkinStudio, at least for now.  With the taskbar and start menu done, we have come quite a ways in creating our new skin, but there is still more work to do to make a complete skin. 

Table of Contents
Previous Page. Next Page.