An Introduction to making skins

The term "skin" refers to the concept of changing the surface look of something. There are skins to change the outside of cell phones. Their are skins to change what your computer case looks like. There are skins to change the look and feel of particular applications like media players. And there are skins that can change the overall look of your computer operating system. The skins designed to change the look of the Windows operating system are typically referred to as "visual styles". But for our purposes, we'll use the more generic term "skin".

Our kinds of skins are made up of dozens of little images called bitmaps. When you look at your Start bar or title bar, you can see that these things are ultimately a bunch of images.  If these images are replaced with new ones, you can dramatically alter the look and feel of your computer desktop.

When someone creates a skin, they have to create images to replace the parts of their computer interface that they want to change. They also typically have to tell the program that is applying the skin how those images should be used.

WindowBlinds is an application that takes specially made skins and applies them to change the entire Windows GUI (graphical user interface). 

WindowBlinds has been around since 1999. Back then, it would apply skins to Windows 95, 98, and Windows NT 4.0.  At first, WindowBlinds just changed the title bars and borders of windows. Over time, it added push buttons, scrollbars, radio buttons and other common controls on Windows.

When Windows XP came out, the Start bar was enhanced and explorer windows gained "task panels".  WindowBlinds was updated to support skins that had those elements in them as well.

Over time, WindowBlinds came to be able to change just about every part of Windows.  Each subsequent version of Windows -- from Windows 2000 to Windows Vista, added additional new elements.

As you can imagine, creating a skin that makes full use of what WindowBlinds can do became increasingly complex.  To address that, Stardock created SkinStudio.

SkinStudio is an application that allows users to create and edit skins for use by WindowBlinds.  It makes it much easier to create a skin that contains all the images and data needed to enhance and extend the entire Windows GUI.  The finished skins are then applied by WindowBlinds.

This tutorial documents and explains how you can use SkinStudio to create WindowBlinds skins. It covers SkinStudio version 6 (and beyond).  SkinStudio 6 was a complete rewrite over the previous versions.  Previous generations of SkinStudio had grown in complexity along with WindowBlinds. Eventually, it became so complicated to use that only the truly committed could create skins with it.  SkinStudio 6 is designed to allow casual users to make skins again.

When you look at your computer and how you control it, what are the primary pieces? What are the specific parts you use to control what you do? 

1. The Start Menu.  The Windows Start menu provides access to your programs and data.
2. The Task Bar. The task bar contains the Start button as well as displays your running tasks, your quick launch menu, and your system tray.
3. Title Bars & Windows Frames. When you interact with your windows, they are surrounded by a frame. Typically, the top of  a window has a title bar (though WindowBlinds skins are capable of placing the title bar on any edge of a window). On the title bar you have the title and controls to minimize, maximize, and close the window.
4. Window controls. You also have controls such as push-buttons, radio buttons, check boxes, scrollbars, menus, toolbars, and lots of other little controls that let you interact with your programs and data.

The most basic skin for WindowBlinds would include replacements for those elements of the Windows GUI.  SkinStudio, however, will let users change as little or as much of the Windows GUI as they'd like. What the user doesn't change, SkinStudio will fill in with the native elements of the Windows GUI.

When SkinStudio is first opened, you have the option to create a new skin or to open an existing one. If you choose a new skin you will be presented with the default Windows GUI.

SkinStudio welcome screen

Choosing what kind of skin you want to make

When you choose a new skin, SkinStudio will ask you what kind of skin you would like to make.

Choosing the kind of skin you wish to create

The two basic choices are:

1. WindowBlinds Basic Skin. These are technically called UIS 1 skins. They are best used when you're making a skin that is basically the same as the Windows GUI but with different graphics. They are easier to make and faster. But they lack many of the more advanced features as they can only do what the OS can do.

2. WindowBlinds Advanced Skin. These are much more powerful in that you can have title bars and borders of any size, use alpha blending and shadows in your windows. They don't run quite as fast (still faster than Windows is by default) but they are much more flexible.

The SkinStudio Categories

Once you have chosen what kind of skin you want to make, you are presented with a preview of your current skin along with a panel of actions you can use to make changes to it.

The categories of SkinStudio

The categories of actions are:

• Full Preview. This shows you what your skin currently looks like.

• Edit Controls. This displays the various controls of Windows such as push buttons, tab controls, progress bars, scrollbars, etc.

• Edit Start Menu and Taskbar. This lets you alter the look of the taskbar and menu.

• Edit Explorer / IE Shell Parts. This option lets you change the special controls that are unique to Internet Explorer, Explorer (the main shell of Windows). This includes (on Vista) Internet Explorer tabs, the back and forth buttons and more. 

• Edit XP File Animations. When users copy or download files on Windows XP, an animation plays. WindowBlinds can change that animation.  This is where you can assign new animations.

• Edit Titlebars and Window Frames. The most basic part of the Windows GUI -- title bars and borders.  The frames of your window also include the close button, minimize button, maximize button, title bar text (technically called "the caption") and the system menu icon.  There are different types of frames to choose from depending on your design choice including per-pixel frames (these are frames with an alpha channel, use these if you want to have a shadow and have your windows be partially see-through) or UIS2 frames which are very powerful but don't have per-pixel options.

• Change Skin Colors. Windows is full of places that display text. You can control what color text is displayed as.

• Change Skin Fonts. Similarly, you can change what font face is used for different parts of the Windows GUI.

• XP Specific Sections. Windows XP has many unique GUI elements not present in other versions of Windows (including Windows Vista).  These include the logoff dialog, control panel styles, task panels (often referred to as shell styles), and toolbar icons. 

• Backgrounds. WindowBlinds can change the backgrounds of the desktop (the wallpaper) as well as add a background to explorer windows.

• Theme Part Details. This category displays the most common parts of a skin that people tend to care about. It provides short-cuts to get to different parts of the editor.

Now that you have an overview of SkinStudio, we'll start creating a skin piece by piece in the next chapter.