Skinning Windows - Stardock



Skinning Windows

The Basics

If you want to change the look and feel of the Windows GUI, the way to do that is through “Skinning”. This is the process in which you apply a “skin” (a collection of graphics) to the Windows UI.

So you can go from the standard boring Windows look to something like this:

[pic]

But what if you want to make your own skin? With a little time and effort, you can make your own skins. Here’s how:

First of all, you will need to get WindowBlinds since it’s the program that turns Windows 98, ME, 2000, and XP into skinnable operating systems. You can get that at . Once you do that, then you have some choices in how you want to skin. WindowBlinds supports two skinning languages known as UIS1 and UIS2.

UIS1 is “easy” but not very powerful. UIS2 is much more complex but is much more powerful. For beginners, UIS1 is the better way to go. And in fact, if the user interface you want to create can be done with UIS1, that’s the way to go too.

Your first skin

There are programs that will help you create skins more easily. The most popular one is called SkinStudio (). But for this example, we’re just going to use Microsoft Paint and Notepad.exe that come with Windows.

The full reference to WindowBlinds skins can be found at:



Our first skin will be really simple. As you get the hang of things, you can make it more complicated. For fun, let’s make Windows look like Windows 3.1? Remember Windows 3.1? It looked like this:

[pic]

Look carefully at this picture. Think about how the user interface can be broken into pieces. You have the title bar and the borders of the window. Then you have the title bar buttons. Then you have the push buttons.

WindowBlinds works this way. A skin is a collection of bitmaps (.bmp files) and a skin file (.uis). The .uis file tells WindowBlinds where and how to use those bitmaps.

Step 1: Create a directory called Windows31

Now that you’ve installed WindowBlinds go to your \program files\object desktop\windowblinds directory. Create a directory called Windows31. This is where our skin is going to be stored.

Step 2: The Frame of your Window

If you’re making a skin where the interface already exists (such as Windows 3.1) then just find some screenshots of it and load it into your favorite paint program. If you have an original design, then you can make a mockup. Let’s start with the Horizontal border of the window:

[pic]

WindowBlinds reads the bitmaps in a very specific way. In the case of UIS1 on the horizontal borders, it reads Active and InActive bottom border (hence the two skinny borders at the top of the image) and then the Active and Inactive title bars.

Let’s map that out:

[pic]

So now we have a bitmap that contains the top and bottom parts of a typical window. Save this bitmap as horizontal.bmp

Now we need to make the vertical ones. This is a bit easier. Save this one as vertical.bmp.

[pic]

Here it’s Active left border, InActive left border, Active Right Border, InActive right border. They’re all the same in this example.

Note that borders of windows need to be 4 pixels in width. By default, the title bar needs to be 23 pixels in width (they can be any size you want but to keep our example simple, we’ll stick with the default). If you look at the sample you’ll find that the ho

Step 3: Putting buttons on your title bar

Without title bar buttons, your UI won’t be able to do much. You need a minimize button, a maximize button, and a close button.

[pic]

Minimize. Up state, down state, and disabled state.

[pic]

Maximize. Up state, down state, and disabled state.

[pic]

Close . Up date, down state, disabled state.

But we’re forgetting one other button – the restore button. That’s what shows up when you maximize a window.

[pic]

That’s the up state, down state, and disabled state.

Now we have all the graphics we need to create a very simple skin. So let’s now create the .uis file. We’ll call it Windows31.uis and put it in that directory we created along with the bitmaps we created.

A WindowBlinds UIS1 skin in its most basic form is made up of 4 main sections. These sections have []’s around them.

These sections are:

[TitleBarSkin]

This is where you name your skin and give yourself credit along with including a preview for users.

[Borders]

That’s the part we just created

[Caption]

This is the part where we explain how the title bar is configured.

[ButtonX]

This is where we define the title bar buttons where X is which title bar button.

Here’s our skin:

; Example WindowBlinds skin

; Use semi-colons to comment.

[TitlebarSkin]

SkinName = Windows31

SkinAuthor = You

ActiveTitle=Windows31\horizontal.bmp

[Borders]

vertFrame = Windows31\vertical.bmp

HorzFrame = Windows31\horizontal.bmp

;This part below is where we tell WindowBlinds to tile from

;a certain spot. Usually the left and right edges of

;a title bar image have stuff in them that the skin

;author doesn’t want to be drawn for most of

;the skin.

TopTopHeight = 24 ;start tiling 24 pixels from top.

TopBotHeight = 24 ;from bottom;

LeftTopHeight = 24 ;from top left (downwards)

LeftBotHeight = 24 ;from bottom left (upwards);

RightTopHeight = 24 ;from top right

RightBotHeight = 24 ;from bottom right;

BottomTopHeight = 24;from the bottom in on right

BottomBotHeight = 24; from the bottom in on the left (yea, these could be named better)

;We want our title bar text to be moved over from the left

;by 30 pixels and there are 4 title bar buttons.

[Caption]

TextLeftShift = 30

ButtonCount = 4

;our close button

[Button0]

XCoord = 0

YCoord = 3

Align = 0 ;align from left

Action = 0 ; close the window

ButtonImage = Windows31\sys.bmp

Visibility = 0 ;always show it.

[Button1]

XCoord = 19

YCoord = 4

Align = 1 ;align from right

Action = 1 ;maximize the window

ButtonImage = Windows31\max.bmp

Visibility = 20 ; show only if there is a maximize button.

[Button2]

XCoord = 38

YCoord = 4

Align = 1

Action = 2 ;minimize the window

ButtonImage = Windows31\min.bmp

Visibility = 22 ;show only if there is a minimize button

[Button3]

XCoord = 19

YCoord = 4

Align = 1

Action = 1 ;restore the window

ButtonImage = Windows31\restore.bmp

Visibility = 3 ;show only if there is a restore button.

All done!

That’s it. We have our skin. Now go to your Display Properties dialog and choose the Skins tab (if you have Windows XP go to your appearance tab) and you should find a Windows 3.1 skin listed. Apply it. It’ll look something like this:

[pic]

A complete example of it can be found at:



Where to go from here

Of course, this is a very simple example. When you step back and think about it, Windows has a lot of different controls. Radio buttons, check boxes, scrollbars, progress bars, combo boxes, Start bars, etc. An WindowBlinds can let you do all sorts of interesting things with them such as animate them or provide sound effects for different actions.

Using SkinStudio will make much of this work easier. The tedium is usually in putting those bitmaps together in the first place. That’s why WindowBlinds was designed so that you could build up your skin little by little. In the example on the website, the radio buttons and check boxes have been added. When you feel ready to make a UIS2 skin, here’s a good example to download and learn from:



This skin will, by the way, make Windows 98, ME or 2000 look like Windows XP. If you already have Windows XP, this skin is a good way to find ways of making Windows XP suit your needs (this sample comes with a blue Start button).

Good luck! Here is somewhere you can get help:

The message boards are full of skin authors who are very helpful. The site also has thousands of WindowBlinds skins for you to choose from.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download