"Computers are useless, they can only give you answers." Pablo Piccaso
This tutorial will cover all the buttons, backgrounds and other extra tidbits of the start panel not covered in part one. Part 1 can be found here A Complete Guide to the Start Panel: Pt 1 and goes over the basic start panel’s images. This tutorial is going to be long as it is intended for those who both know and don’t know. Also, there are not going to be many images as most of it is just explaining each section and images are not truly needed.

We ended the last tutorial with having our ‘overall’ look and feel of our start panel but with no buttons, mouse overs and all that. I’ll go down the list of things under the ‘Start Panel’ on the left side in the ‘Explorer’ tab. Each heading will list the section under that tab on the left.

1.) Start Panel > User Pane > User Picture
The User Pane section is covered in Pt 1 and comprises the top part of our start panel. The User picture however is a sub section under that and is the little avatar like image in the start panel. Now many newer blinds have this section disabled and I do as well. To disable this section is under (Explorer tab) ‘Start Panel > User Pane’ then on the right (Section tab) Hide User Picture: Enabled, this disables the User Picture section. If you are going to use this make a TGA (alpha channeled) image using the given image as a guide. If you do this there should be no reason to change any settings in this section. No matter which way you make your skin be sure to check the content margins in the Start Panel > User Pane to get things lined up. You might have to do some trial and error to get it just right.

2.) Start Panel > Programs List > Separator
As before the Programs List is the background image of the start panel and is covered in Pt 1. The Separator is the line which divides up your set programs and the ‘recently opened’ ones. It’s just a line… plain and simple. Generally the image is very small ranging from 1-200 pixels wide to 1-4 pixels high. It just depends on what your design is. Mine for this skin is 172x2 and a TGA image which is supported here. Remember to set your sizing margins for the image and if it is translucent or not in the (Section tab) ‘Painting Options’.

--Note-- Also, it will be good to once again stress the importance of deleting ALL unused images from the skin. This will make the skin much cleaner, smaller and help with the sometimes occurring problem of WindowBlinds wanting to read the old image (or some of its ‘traits’) instead of your desired one. For example if the old image was a bitmap and you bring in a TGA alpha image it might not ‘read’ the transparency and appear solid. This doesn’t always happen and is more prominent in some sections more than others, just one of the ‘quarks’ and an overall good practice to just delete any old or replaced images.

3.) Start Panel > Places List > Separator
This section is identical to the above programs list.

4.) Start Panel > Item
This is the ‘mouse over’ image for all the listings in the Programs and Places Lists. It is a 2 stage button like image with the first being the normal state and the second the mouse over state. You can find a list for all ‘states’ in an image under the ‘Help’ tab in the bottom left section in SkinStudio. Generally the first state is blank, transparent or translucent and just the mouse over state is used. The size can be anything you wish but typically around 95-100 pixels high by 40-60 pixels wide is used. The reason for such the large height is so that when the image gets stretched upward (for either large fonts or the sometimes double line of a programs name) the image remains clear and clean. Again, this is one of those things that depends on your design. Mine for this skin is a 98x44 TGA image, a typical size and type. Again, remember to set you sizing margins and painting options.

--Note--
A quick tutorial on ‘How to create button images for skins.

5.) Start Panel > More Programs Panel > Arrow
Now we begin to have some real fun. There are 2 ways this section can be done.

a.) One, you can create a full image to go here including the ‘All Programs’ words (or whatever you desire). But, if you do there are some things to consider… ‘the Pros’ you will have a nice looking fully skinned area here… ‘the Cons’ you will be making people who use WindowBlinds in different languages have a strange looking thing going on where the image is borked. This is why this is typically not done.

If however you do use the first method, the main thing to remember here is your sizing margins so it looks right. You are going to want it to fit into your Start Panel > More Programs Panel > Background image (covered in Pt 1). Also, you will need to change the ‘Content Margins’ of that section (Start Panel > More Programs Panel > Background, under the ‘Section’ tab) so that the left margin is in the negatives… generally 90 pixels or more for English versions (-90). I have no clue about the margins for other languages.

b.) The other way is to just make the arrow ‘button’ image and have windows write out the ‘All Programs’ as it doesn’t make the other language windows look any different. But, this is also why you get the solid colored ‘box’ on the mouse over. It’s a quark and just one we all have to pretty much deal with for now.

I choose the typical way (the second choice). In either choice the image is a 3 state ‘button’ (see the ‘Help’ tab for the order) that supports alpha blending, TGA (I recommend using alpha blending whenever possible as its much cleaner and nicer). My image is the same size as the basic image, 48x24 pixels; I suggest trying to stay within that range as the size works well. Again, it depends on your design. Next you need to set your ‘box’ color or the color that will appear around the arrow and ‘All Programs’ words on mouse over. You need to go to (Explorer tab) Miscellaneous > Colors then (Section tab) Menus > Menu – Highlight backgrounds (XP only) and change that color. Generally it is made so that it blends into the background color. Finally go to the (Explorer tab) Start Panel > More Programs Panel > Background and make sure all your content margins are set right, it may take some testing, trial and error to get just right.

6.) Start Panel > More Programs Menus > Background
This is a single image of the background for the ‘All Programs’ menu that comes up. This section does NOT support alpha blending, TGA; yet… maybe in a future version. Size and margins depend on your design. A typical size for this image is around 100x100 pixels. Now some like to make a ‘border’ or section for the icons. For a section like this use about 22 pixels on the left side of the image, like in the below image.



7.) Start Panel > More Programs Menu > Item
This is a 3 state image where typically the first and last states are unused (state one being normal and the last is completely unused). Alpha blending, TGA; images are supported and a typical good size is 150-400 pixels wide by 15-20 pixels high. Changing the content margins for this section does nothing, if you do wish to have so sort of difference in the ‘content margins’ then they need to be placed into the image itself just remember it will do the same for all the mouse overs.

8.) Start Panel > Bottom Bar > Log off Buttons
The Start Panel > Bottom Bar section is covered in Pt1. The logoff buttons are a set of 3 buttons in 3 states totaling 9 images (again see the ‘Help’ tab for image order). These images do support alpha blending, TGA; and a typical size is 200-250 pixels wide and around 25 high pixels.

Now, the mouse over and pressed states only change when there is NOT a background image. In which case there will be a ‘box’ of color much like the more programs arrow (see #5b as it is the same color). So, if you have a ‘background’ keep this in mind, yet another ‘quark’ with WindowBlinds.

9.) Start Panel > Bottom Bar > Logoff Buttons Background
This is a 3 stage image that supports alpha blending, TGA images. Size and all depend on your design. A few variations on this section…

a.) One is to have the background just cover the section in #8 in which case your sizing margins would be blank to the right of your ‘button’ images for stretching the transparent portion. Your background will have to be the exact size you want to appear behind the images you made for #8. --Images here are of just one state as an example--



b.) Another variation would be to have it the exact opposite where the just works have the background. In this design you need to have the image blank / clear in the exact size on the left of your button states.



c.) A normal button image will cover the section in #8 and the words as a whole.




Comments
on Jan 14, 2007
Thanks for this lesson along with your others. I am trying to assemble a selection of good articles on skinning and these help a lot. Hopefully some day this site will have a distinct section for guides.
on Jan 15, 2007
Keep a look out, this might be in the works for a better 'organization' of things like the tutorials. For now a good extensive list of links to tutorials are at Skinning.net: http://www.skinning.net which I have already spent some time compiling.
on Mar 15, 2007