SKoriginals

Join Date 03/2005

+68

A Complete Guide to the Start Panel: Pt 1

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

Locked Post

Advanced Search

Watch this post

Do not email me updates for this post Email me updates for this post

Successfully updated karma reason!

vStyler

Join Date 11/2004

+919

Nice in depth tutorial SK, i wonder tho, why not just use opacity to create trans, save as a png and let SkS make the .tga?

Ive never used an alpha channel in any WB image. Also, nice Panel

Successfully updated karma reason!

Great Tutorial! I like how you explain every option! Nicely Done!

Now for this Skin...I must have this WB when you are finished...I love Battlestar Galactica! Are you even planning on releasing it? Will it be a premium skin?

Successfully updated karma reason!

vStyler

Join Date 11/2004

+919

oh... i didnt realize its battlestar galactica, cool! Im doin a Stargate SG-1 theme.. race ya?

Successfully updated karma reason!

Sign Up or Login and this ad disappears!
There are many great features available to you once you register. Sign Up for a free account and browse the forums without ads.

Island Dog

Join Date 06/2003

+1048

Greak work. Thanks for sharing!

Successfully updated karma reason!

Im doin a Stargate SG-1 theme.. race ya?

vStyler...WHAT!!!!!

That's my Fav....then BTSG...*points to Avatar*

I love you both now.

Successfully updated karma reason!

ama02

Join Date 05/2002

+11

Excellent tutorial! Thanks for sharing it...looking forward to the next installment!

Successfully updated karma reason!

Skinhit

Join Date 11/2004

+516

SK Originals...this blind looks incredible! cant wait to see the finished product

Successfully updated karma reason!

Great job SK damn I could probably learn this myself.

Blind is your usual excellent work!

Successfully updated karma reason!

very nice job indeed

Successfully updated karma reason!

SKoriginals

Join Date 03/2005

+68

Thanks folks I'm glad you think its a good tutorial and the blind will be an eventual release...

vStyler, you might end up beating me to the punch on getting the theme out as I am also writing these tutorials during the creation in whatever time I have available to do so.

Successfully updated karma reason!

vStyler

Join Date 11/2004

+919

I doubt it SK, workin on three at once here ! Love the Menu on this one.. You pen tooled the design up top ? If so, impressive my

friend... and nice materials

Successfully updated karma reason!

SKoriginals

Join Date 03/2005

+68

ofcourse its pen tooled & some brushing

thanks... 3 at once? good luck

If anyone is interested I have tutorials on the pen tool as well

Pen tool Pt.1: WWW Link
Pen tool Pt.2: WWW Link
Pen tool Pt.3: WWW Link

Successfully updated karma reason!

messiah1

Join Date 10/2005

+434

Holy Crap...this is just what I've been looking for. I'm playing with Skin Studio and needed a tut. Thanks man!

Successfully updated karma reason!

SKoriginals

Join Date 03/2005

+68

I newly placed the pen tool tutorials here on WC and JoeUser you can find part one here http://skoriginals.joeuser.com/articlecomments.asp?AID=139899&s=1 which has links to the others. take care all and hopefully I'll get Pt.2 and 3 of this tutorial finished soon.

Successfully updated karma reason!

yay.. found a hole in the electric fence....I can get to the pen tools through skinning.net

I just can't see some of the pictures

(not your fault SK

)

damn the electric fence
damn the electric fence

Successfully updated karma reason!

How far around the corner is part two tutorial

Successfully updated karma reason!

SKoriginals

Join Date 03/2005

+68

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

Successfully updated karma reason!

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?

Successfully updated karma reason!