Editing an Existing Skin SkinStudio makes modifying existing skins simple. In fact, you've probably done that already. The best way to learn is to see how other skins work from the inside. *** WARNING *** Skin authors hate it when you take a skin they worked so hard to create, make a few modifications, and then post it as your own. This isn't a good idea! You can modify any skin for your own use. But keep it to yourself. If you think your modification really improves the skin, then tell the author. He/she must decide to make the upgrade and post the new version (and most will give you credit for the new feature or suggestion). Just don't walk on other's work. You wouldn't want someone stealing your work. Would you? (end of rant) There are many ways to open an exising skin. You can use the menu bar and select "File -> Open", the open button, or the hot-key Ctrl+O. From here you need to select the skin's directory and then open the UIS file. Another way to open a skin (my favorite) is to use the Skin Navigator either by the button, from the menu "Tools -> Skin Navigator" or the hot-key Ctrl+B. This method profides you with a special two-paneled "explorer" style window where you can select the skin you want on the left and a preview is displayed on the right. When you find the skin you want to open, just click Edit. I'm assuming that you have already examined the SkinStudio IDE. Just as a refresher I profided the graphic below. Notice that SkinStudio has different panels that display information. Remember that you can move these panels around and even pull panels off to be floating windows. I will always refer to SkinStudio as it is shown below, but you can modify the environment to suit your needs and preferences. In the explorer view panel, the highest level defines the skin name, author, and other notes. SkinStudio holds these values in the "Properties -> Author" options. Click on the hammer and screwdriver icon, or choose "Tools -> Properties" from the drop down menus to see that dialog. If you have just installed SkinStudio and haven't loaded a skin, then Adam's name and information will be here. Change these values to be your own personal info. You can blank out any field you wish, except for the Author field. To save your information for future skins, click the "Set as default" button, and then "OK". Now take some time to click around the sections and attributes. Notice how different parts of the preview image get a selection box around them as you click on the different graphic elements. Also play with the Image Details Viewer on the bottom middle. See what changes happen when you select different sections and graphic files. I want you to be comfortable with the IDE before we continue with creating a brand new skin.

 

Creating a New Skin Eventualy you will want to create your own skin. SkinStudio gives you many ways to do this: When you select File -> New Skin you will see the dialog that is displayed above. There are two sample skins (basic - UIS1+ and advanced - UIS2), two skin templates (again basic and advanced), and two skin wizards. The New Skin Wizard is an exceptional way to create a skin based on the default skin (Win2K by Mercury) with just the features you want to use. The graphic above is from the wizard. The wizard prompts you for the options you want and then adds those sections and graphics for you. It's really slick. The New Skin From Template wizard (formerly known as the Slice-n-Dice Wizard) is a good way for advanced skinners to create their own skin based on a scratch graphic that they have already created. Using your favorite graphics program, you create a rectangle and design the window edges around that rectangle. You can also add buttons and other elements. Save that image and then use this Wizard to have SkinStudio cut the image into the respective edges and elements. It can even help you create the inactive edge versions of the images. Very powerful. It is my favorite skining tool, and once you feel comfortable with skinning basics, you should give it a try. However we're jumping ahead of this tutorial. For this tutorial we are going to use the New Advanced Skin Template method. (the one I highlighted several dialogs above). It will create a UIS2 skin from the ground up. We will get to control every element of the skin. Why not Basic? Well, I honestly haven't tried making a UIS1+ skin yet. That will be another tutorial some day.

 

Start With A Blank Template To get this tutorial going, let's start with a blank canvas to work from. You need to select the advanced skin template "File -> New Skin -> New Advanced Skin Template". A dialog will prompt you to name your skin. There are two names associated with the skin: the Filename which is used for both the UIS file and the directory (they are always the same), and the Actual Skin Name that will be displayed inside of WindowBlinds. They can be the same thing, but often the filename will be short and not have spaces, while the skin name will be more descriptive. For this exercise, use "tutorial" for the filename and "Tutorial Skin" for the skin name respectively. Click OK. You can see that the attributes in the skin have now changed. This is now YOUR skin. If you want to remove an attribute (say the email field), simple right click on that attribute and a pop-up list is displayed (graphic at right). Near the bottom is "Remove Attribute". Click that, and poof! The "Author's Email" is gone. Be careful with the remove, because SkinStudio does not have an UNDO feature. However, you can always go back to the Properties dialog and re-enter the value.

 

Window Frame Now click on the "Personality" folder in the left pane. The most important element of a skin is the frame or border around the window. This is accomplished with four bitmaps (a top, a bottom, a left, & a right). Notice the graphic at the right. The left and right bitmaps own the corners (this is important). I have created some sample graphics to use. Open the tutorial.zip file. You should find a bunch of BMP files, including Top.bmp, Left.bmp, Right.bmp, and Bottom.bmp. Copy all these graphic files into the "..\WindowBlinds\tutorial" directory that SkinStudio just created for you. The next step is to assign these graphic to the skin elements. Now go back to SkinStudio and scroll down the right pane until you see the attribute for the Frame Image - Top. Click this and notice that a dropdown list has been displayed above the two panes. SkinStudio uses a combo-box (shown above) to not only list the file name, but it shows a preview of the graphic as well. Use the combo-box to select "tutorial\Top.bmp" for the Frame Image - Top. Do the same thing for the Left, Right, and Bottom frame image graphics. Now hit "F5" or the Reload Preview button. The preview should look like this: Well, it's starting to take shape, but there are some more attributes that we need to set. Scroll down the right pane of SkinStudio until you see the attribute called "Left Frame - Top Margin". Click on it, and set the value in the input box above the two panes to 12. Modify the following attributes as specified: Top Frame - Left Margin = 2 Top Frame - Right Margin = 2 Left Frame - Top Margin = 12 Left Frame - Bottom Margin = 12 Right Frame - Top Margin = 12 Right Frame - Bottom Margin = 12 Bottom Frame - Left Margin = 2 Bottom Frame - Right Margin = 2 Now hit Reload. What we are doing is telling WindowBlinds how many pixels from each of the various ends that we DON'T want to stretch/title the images. Which leads us to the next attributes: Draw Method - Top Frame = Title the image Draw Method - Left Frame = Title the image Draw Method - Right Frame = Title the image Draw Method - Bottom Frame = Title the image Change these attributes by selecting the attribute and choosing the desired setting from the drop-down list. IMPORTANT! WindowBlinds is much faster tiling images than stretching them. Brad Wardell at Stardock says that you will have a noticable delay when you stretch images. That's not to say that you should never stretch your image graphics. You should experiment. Also notice how each edge is doubled. There is an active image (top or left) and and inactive image (bottom or right) inside each BMP. This way you can make your inactive windows look completely different from your active window. This also allows for animated skins (I will discuss this a little later). The number of images in each file is controlled by the following attributes: Image States - Top Frame = 2 Image States - Left Frame = 2 Image States - Right Frame = 2 Image States - Bottom Frame = 2 You need to make sure that each edge graphic file has the same number of images. Even though you may only have a different top graphic for active/inactive, you still need to create active/inactive images for the left, right, and bottom graphic files. Eventually WindowBlinds will be able to support having a different number of images in each file, but for now each graphic file for top, bottom, left, and right need to have the same number of images. Now Reload again. The Preview looks better now. There is a reason for that. Go to your favorite image editor and open the edge graphics. The left and bottom are bigger than the top and right. Many skinners have questions about file sizes. This example goes to show that size doesn't matter, if you get the margin attributes correct. In fact you as a skinner can reduce the size of your skin by making the graphics smaller and setting the margin attributes correctly. (Your milage may vary - see dealer for details) You should also notice the amount of MAGENTA or lack thereof in the graphics. MAGENTA (red=255, green=0, blue=255) is the "Transparent" color for WindowBlinds. I really didn't need to use any transparency for this skin, but I wanted to show you what it does. In fact a little later, you will be removing the MAGENTA and improving the performance of WindowBlinds (but not now).

 

Titlebar Text: Now let's look at the attributes that control the look of the titlebar text. Go to SkinStudio and change each to match what is listed here: Titlebar Text - Alignment = Centered Titlebar Text - Horizontal Offext = 0 Titlebar Text - Vertical Offset = 3 TItlebar Text - Right Clip = 0 Active Titlebar Text - Red Level = 255 Active Titlebar Text - Green Level = 255 Active Titlebar Text - Blue Level = 255 Inactive Titlebar Text - Red Level = 0 Inactive Titlebar Text - Green Level = 0 Inactive Titlebar Text - Blue Level = 0 You may have noticed that SkinStudio changes the 3 attributes for the ACTIVE titlebar text color and the 3 attributes for the INACTIVE titlebar text color at the same time. Also, SkinStudio has three ways to select color attributes: a color picker, the standard windows color dialog, and a fine tune color dialog that uses sliders instead of just entering numbers. All are designed to make setting colors easier. Now let's add a new section. Let's make the white text on the ACTIVE titlebar a little easier to read. From the menubar select "Insert->Section" to see the dialog box displayed on the right. All the different sections that you can add are listed. Scroll right and select Titlebar Text FX. All the attributes for this section are displayed in the middle box. Make sure that all attributes are checked, then click "OK". When the new section is loaded into SkinStudio, you should set these attributes to the following: NoShadowInactiveText = Disable effect ShadowOffset = 1 ShadowTextB = 64 ShadowTextG = 64 ShadowTextR = 0 Text Effect = Outlined Text Hopefully by now you are getting used to the BuildBlinds interface. The dropdown list will change depending on which attribute you have selected. SkinStudio makes it a lot easier than having to remember all the UIS ID numbers for each of the attributes and what each means. Now hit Reload again and see how the preview has changed.

 

Titlebar Buttons: Now that we have the edges looking good, we need to add the titlebar buttons so that the skin will be functional. Just to keep things simple, we will put the buttons in the same place that Windows uses (top-right). This is not necessary. In fact WindowBlinds allows the skinner to put the buttons anywhere he/she feels like. Some skins look better with the buttons on the side or on the bottom. The most important part is that it looks good and is useable. Enlarged close.bmp Enlarged max.bmp In the tutorial.zip you will find several titlebar buttons. I have enlarged two of them here to make a point. These graphics are really 6 different images in 1. The first 3 are used for the active window and the last 3 for the inactive window. How many buttons you use is controled by the attribute: Titlebar Button - Type There are two options, and they are pretty self-explanitory. For this skin use the Active AND inactive - 6 buttons in image value (as I described above). The other value means that there will only be 3 images in the file and they will be used for both active and inactive windows. You will see that for this skin the inactive buttons will use the transparent color. This means that the only buttons that will be visible will be on the active window. When you make the active and inactive windows very similar, you should do something to make the active window stand out. So what do the images mean? [1] default image [2] pressed image [3] mouseover/disabled image [4] inactive default image [5] inactive pressed image (not used) [6] inactive mouseover/disabled image If you are using the Active state only - 3 buttons value for the Titlebar Button Type attribute, the image functions use the first three. Mouseover/disabled image? Yes, we need to set another Personality attribute to tell WindowBlinds whether we want to use mouseover or display the disabled image. More on this later. For now set: MouseOver effect = Enabled It might not be listed in your personality section. If not, then do you remember how to add an attribute? Just add this one. (hint: right-click in the Attribute window, find the Mouseover attribute, then click OK) Well now that we have these graphics, how do we add them to the skin? "Insert -> Button" will bring up a dialog window like the one shown on the right. In this window you can see all the attributes for each button. Good thing we don't need them all. Make sure there is a checkmark to the left of the following attributes: Horizontal Offset Vertical Offset Button Alignment Action on Click Visibility Setting Titlebar Button Then click the OK button. A number of things happen when a button is added. Back in the Personality section an attribute called Number of buttons is incremented. (from zero to one). You should never have to change this yourself while in SkinStudio. In fact if you change this attribute, it could cause problems. You have been warned! There is also a subsection under Buttons that says Button0. This is where we will set up the attributes for the close button. If this new subsection isn't active, then click it. First, set the Button alignment to "relative to the top right of window". That establishes our reference point. Then set the Horizontal offset to 22, and the Vertical offset to 8. The Action on click should have defaulted to "Close window", which is fine. And lastly, set the Button Image to the "Close.bmp" like you did with the image drop-down lists before. Now hit REFRESH. Now our preview has a small X in the corner, with a blinking dotted line around it. If the border isn't blinking, then click on the X and it will. A blinking border means that button is active. You can drag it to another position on the frame with your mouse, or use the ARROW KEYS to have better control. When you are done playing make sure that it is back to (22,8). Now, lets add the Maximize Button. There is a floating dialog box near the bottom of the screen that looks like the graphic at the right. If you closed that window, HIT F4 to bring the window back (F4 toggles that window for you, because it sometimes gets in the way.) At the top left of that window is an "Add Button" button. Push it now to see the Add Button dialog as before. You know what attributes we need, so make sure they are check-marked and hit OK. These are the values that we need for each of the attributes. Most are understandable. But make sure to scroll down to find the right ACTION value. Horizontal Offset = 32 Vertical Offset = 8 Button Alignment = relative to the top right of window Action on Click = Maximize Button - with MouseOver Titlebar Button = tutorial\max.bmp There are two different values for the maximize action. One supports mouseover, and the other doesn't. If mouseover isn't active, then the third image is the disabled image. To show you what I mean, look at the close buttons on the SkinStudio application window. One is active and the other is disabled. So you have to decide if you want the mouseover or the disabled functionality. (I prefer mouseover). If you want to add more buttons, go ahead. The more you play, the more you learn. I have included titlebar buttons for minimize and restore, but we'll add those later. For now, as far as MINIMIZE and ROLLUP, let's set those a little differently. Go back to the Personality attributes. We want to add Mouse Action - Right Click and Mouse Action - Double click We want the actions to be: Mouse Action - Right click = Rollup/Unroll window Mouse Action - Double click = Minimize window The basic elements are now complete. For the most part, this is a functional skin. However, we still need to modify the menu bar and add some button images to the skin. So save your work and take a break now. But don't go too far away … Continue on to Menus.

Tutorial development and maintenance by Einstein47