A Complete Guide to the Start Panel: Pt 1

Published on November 22, 2006 By SKoriginals In WindowBlinds Tutorials

This tutorial will cover everything you need to know to skin the Start Panel in WindowBlinds 5.49 (WB) using Photoshop (PS) and SkinStudio 5.0.1 (SkS).

I’m writing this tutorial as a step by step from start to finish. Some of this might be known by you already but I’m trying to make this tutorial for everyone, even the noobs.

1. Creating the Start Panel Image.
First off, you need to create your start panel image. I do all my work in PS so here we go. The image you create can be of any true size but your final start panel size should be about 360 pixels wide and about 270 pixels tall for a non-compact menu. I try to keep this in mind when creating my image and the fact that the menu will stretch upward but not outward for the people who download it. My image for this tutorial is going to be just 260p x 350p, seemed like a nice round number to start with leaving some area for good stretching. Here is my final image…

You’ll notice there is a lot of space around the image. This because without the space to the left the panel will be nearly, if not almost, right on the edge of the screen (in the default position) and the same goes for the bottom (in default position it will rest just overlapping the taskbar). I didn’t want either of these to happen, hence the space. Plus as an extra bonus I can create my own shadow for the Start Panel. Now, there is transparency in this image so what I need to do now is create my alpha layer.

2. Creating the Alpha layer for your Start Panel Image.
All transparency images in WB use a Targa (or TGA) image… which is basically a bitmap with an extra alpha channel. Alpha channels are actually pretty easy to understand… it’s a black and white layer added to the image in that the lighter the area the less transparent the image… so true white is solid and true black is clear.
A) To create mine in PS I merge all my visible layers with no background as seen in the first image below.
Next I hold down the Ctrl key and click on my image layer (named ‘bottom copy’ in mine); this selects all the pixels in the layer. Then I select the tab labeled channels and click the ‘Save selection as channel’ button on the bottom of the pallet (it looks like a square with a circle in it).
C) There we go, I have my alpha channel but that’s not all, I have to go back and create a background, in this case a solid black one. When saving an image as a TGA there is no transparency background, it will create a default white one. This is not good as any ‘grey’ areas of semi transparency will end up with a grey like glow… I want my shadows black not grey. You can see the final saved image in Part C.

3. Getting the Start Panel image prepared.
Now we got to splice the image up into 5 parts to place into SkS. Well have the top, the right side and bottom, and the left side which is 2 parts the equaling the size of the right side. I pull up my saved full size TGA image and add some guide lines so all my image will be cut up just right. To pull out some guide lines in PS you go to View > Rulers and use your Move tool and drag out a line. My final image will look like this…

After that it’s just selecting, cropping and saving the various parts under different names.

4. Placing the images in SkinStudio
After opening your newly created blind you need to go to the Start Panel section. I like using the preview area in the center to move around but you can get there any way you like. First thing we need to do is place our images. I usually start at the top and work my way down. Under the ‘Preview’ tab in the center on the left side of the window you’ll see ‘XP Taskbar’, click that and you’ll see the taskbar and start panel. Clicking on the various part of the preview image will bring up that particular section.
A) The User Pane: First to import the image, right click on either the image in the preview or on the right hand side under the ‘Section’ tab at the top where it has the image (in this case ‘user Pane Image’). Select ‘Import > Browse for file’ and get your image. There may be other simpler ways to do this but I prefer this method. Once your image is in place there are going to be some settings to change.
a) Hide User Picture – I’m not using this so I enable it (default is disabled and will bring up whatever picture the user has).
Size of User Pane – as I said earlier a good size is around 360 pixels wide for a non-compact start panel, but I have a few extra pixels to the sides so I made mine at 370 pixels. The height I like to keep the same as my original image cause that’s the way I intended so it’s at 31 pixels.
c) Start Panel Effects – My images are TGA with alpha blends so I set mine to ‘normal per pixel alpha’. If you are not using alpha blends the default ‘disabled’ is fine.
d) Sizing Margins – This is important in that whatever is to the right and left of these margins are not going to be effected. I moved mine close to the center as I didn’t want to affect the detailed ends. Also, I’m not worried about the top and bottoms as there will be no size changing there. Place yours wherever you need. You can click back to ‘Image’ at the top and test the look of the resizing at any time in the lower section of SkS.
e) Content Margins – I have come to discover that these rarely ever need changing for the top section so I normally leave them alone. However, there might be some changes you need to make to yours.
f) Glyph Images – the top section has NO glyph images so ignore this section.
g) Margins – Ok, so if you have sections outside of your margins that are resizing oddly this is where you would go to correct it, other than that you may not have bother with this section either.
h) Painting Options – Here the only thing I want to change is the ‘Transparency and Translucency’ to transparent and the ‘Translucency – Switch’ to transparency IS being used. Your might vary if you are not using transparency’s but mine is so. The rest is pretty straight forward. The ‘Drawn Method’ might be one of the big factors to change. I’m leaving mine at the default ‘Stretch the image’ which is fine but if your image can tile that is the better one for performance and speed.
i) Text Settings – This will be very important, even if you are or are not using the user image. The first setting is ‘Text Position Shift’ which will modify and move where the person’s user name will appear on the Start Panel. It might take you some trial and error (it usually does me) to get it in just the right spot. Also, I never mess with the Horizontal or Vertical alignments. The font and text colors should be pretty self explanatory just remember to keep the font size in the negatives (i.e. if you want a size 16 font then it is -16).
j) Animation – I’m going to get into this in a later tutorial (probably part 3) but for now lets just stick to the basics and keep the panel static.

Ok now we are finished with the User Pane. If you look at the tree on the left of SkS you will notice there is an option under User Pane called User Picture. I disabled mine so I don’t need to go in and change anything in there, but if you do have a user picture all the same things in the settings that apply to the above apply there also.
All the rest of the Start Panel images are going to be done in the same way as the above. Now the sizes may very and sizing margins. The content margins which play a much bigger role in the Program list and Places list are very important to pay attention to. They also play a part in the placement of the ‘more programs arrow’ and ‘logoff buttons’

In part 2 of this tutorial I will go over all the extras such as the mouse-over for the program and places list, more program arrow, logoff buttons and the menu backgrounds. For now… I hope this tutorial was useful.

A Complete Guide to the Start Panel: Pt2 Link

Some other useful Start Panel tutorials:
Compact Start Menus by Skin Studio: Link
Make a translucent start pane like a pro by Adam Najmanowicz: Link
Text alignment in Start Panel: Link

Comments (Page 2)

scorpNZ

on Jan 05, 2007

How far around the corner is part two tutorial

SKoriginals

on Jan 05, 2007

hehe I know I'm running very late on getting part 2 and 3 out... very soon... I've been busy, sorry

ortizlgnd

on Apr 21, 2009

I've tried over and over, following your intructions on piecing together a start panel but no matter how many times i do, the damn pieces dont fit evenly. Whats the deal?

Welcome Guest! Please take the time to register with us.
There are many great features available to you once you register, including:

Richer content, access to many features that are disabled for guests like commenting on the forums.
Access to a great community, with a massive database of many, many areas of interest.
Access to contests & subscription offers like exclusive emails.
It's simple, and FREE!