Sunday, September 21, 2008 by Frogboy | Discussion: Customization Software
SkinStudio is a program that lets users create their own user interface for Microsoft Windows.
It walks users step by step the Windows GUI to help them change virtually any aspect of the user interface including title bars, the start menu, scroll bars, push buttons, and everything else.
Version 6.3 is coming out this week and it's a pretty big step up. Let's take a look.
What's new in 6.3
Main window features
The first change is the addition of mini previews of your five most recently edited skins when you open SkinStudio. You can double click on any of these to open up that skin for editing.
When you first upgrade the previews will be replaced by boxes with the skin names until the previews are created.
Once you open a skin you may notice a small X at the top right. This allows you to quickly close a skin. If the skin has been edited then you will be asked if you wish to save your changes.
Based on user requests the name of the skin you are editing is now at the start of the caption text. This is especially useful if you have multiple copies of SkinStudio open as the skin name will now be visible in the taskbar.
You may notice a new option in the list on the left hand side called “How do I?”. This feature lets you quickly change settings in a skin which may be more difficult to find or are the kind of feature someone who is editing a skin for their own use may want to change.
Examples of the options you can change from here are enabling or disabling OS shadows, hiding shadows on menus, enabling or disabling sound support in a skin etc.
Based on user feedback we have improved the editing window and we now offer two different editing modes which can be selected from the preferences window. On the very first run of SkinStudio 6.3 you will be shown the preferences dialog so you can select which mode you would prefer to use.
The two modes are section based editing and tree view mode editing.
Section based editing is the default mode and works like it did in SkinStudio 6.2. You can switch sections by using the Previous and Next buttons at the bottom.
Tree mode is a replacement for the basic tree mode that you could enable in SkinStudio 6.2. The tree has been reordered and reduced in complexity to make it easier to use.
Additionally there is a search field under the tree. Typing in here will replace the tree with a list of suggested sections. Clicking on one of the suggestions will take you to that part or if none are to your liking you can press escape to close the search.
The Edit Window
Another enhancement based on user requests is the ability to maximize the edit window. As well as making the tree show more if you are in tree mode, maximizing the window also changes how some of the tabs show information.
Advantages of maximized mode :
- The image tab will show you a full preview of the image you have selected
- The painting margins tab is larger so you are able to resize image to test margins and also set margins on much taller images.
- The text tab will place the preview under the vertical alignment selection box.
- The extras tab shows you more items
- The layers tab shows you more layers
Under the preview there is also now a layers >> option. This allows you to quickly switch between layers without going back to the layers tab.
As well as the usual white, desktop, dialog, background, and black options you can now use a grid background.
This is perfect for seeing the effect of semi transparency such as the taskbar in the example to the right.
This grid option is also provided in the painting margin tab and the frame builder window.
One of the biggest new features in SkinStudio 6.3 requires WindowBlinds 6.3. While SkinStudio 6.2 and WindowBlinds 6.2 introduced the concept of layers in a skin, the layers are only blended using straight alpha blending.
Layers allow skinners to take an existing image and blend it with another image without having to alter the original image.
WindowBlinds 6.3 introduces the concept of layer blend modes which allows a layer to be blended using a number of different blend modes. Some of the blend modes are auto masking which really helps with applying textures to lower layers.
You can control the layer blend mode from the layers tab. Just select the layer you want to edit and then set the layer blend mode in the box above. There are currently 29 different blend modes which consist of a mixture of auto masking modes, modes which only apply to coloured pixels, and modes which only apply to greyscale pixels.
Should you have a need for a different blend mode and can define it mathematically then please contact firstname.lastname@example.org and provide all the details along with an explanation of why this mode would be especially useful and we will consider it for future updates of WindowBlinds/SkinStudio.
There is no limit to the number of layers you can have, but naturally the more layers you have, especially with complex blend modes, will be slower than a single layer. So having 50 layers on say a button is probably not a good idea.
The multiply blend mode with automasking is often ideal when you apply a texture to an existing part.
Using layers example
This is a quick demonstration of using layers to enhance a skin. The skin here is the DarkAvatar skin and we will be adding a texture to the top of the startmenu.
We will be adding a rust texture to the grey parts of the frame but avoiding the red part.
So firstly we add a new layer to the top of the startmenu by going to the layers tab and clicking the add layer button. Then we should set the layer blend mode to “Multiply Blend onto greyscale destination only with automask”
Then we need to go back to the image tab and select our rust texture and then go to the painting margins tab and make sure we have selected tile mode.
Once you have done that the end result will be something like this :
Now lets see what it looks like when it is made wider.
This really shows the power of layers with blend modes. The rust texture has tiled on top of the base layer and due to the auto masking it automatically fits in with the resized frame. Doing this without layers would be impossible as you would always have a point where the margins meet the middle.
Layers with different textures:
So lets try a different texture. Instead of the rust texture I have used a darkish wood texture and set the blend mode to “Overlay Blend onto greyscale destination with automask”. This produces a plastic wood effect as below
I prefer the rust look so I have set that back and then added identical layers to the bottom bar, left side, right side and more programs background sections. If you have SKS Pro then this can be done using Ctrl-C on the code in the code tab in the first section and then Ctrl-V in the code tab for the other sections.
Ideally you should use a texture with an alpha channel (I.e. TGA/PNG) for the layer rather than a bmp. Using a BMP will work but the performance on Windows XP will be lower. On Windows Vista it makes no difference.
If a section resizes in use (most of them) then a layer can enhance it. If it is fixed size then you can simply use the layers in your image editing application and you will get the same result assuming you mask appropriately.
Other changes to SkinStudio 6.3 are the addition of text descriptions to the various Vista fonts and colours which are under the Vista Fonts and Vista Colours buttons on the Edit Fonts and Edit Colours windows.
Control over the system fonts has now been added to the edit fonts window. Simply select Show me the skin defined system fonts option from the drop down at the top of the window and you can then control the system fonts.
Finally a quick tip
Double clicking on the preview in the Painting Margins tab will resize the preview to the image size.