Previous Page.   Making Title Bar Buttons  8 Next Page.

 

The title bar is in place, so now we need to move on to making the buttons for title bar.  The buttons are obviously important as users use them to close, minimize, maximize, etc. their windows.  In the Button section you will see the elements for several of the buttons which include:

  1. Close button
  2. Close button (single)
  3. Maximize button
  4. Minimize button
  5. Restore button
  6. System icon

Most of these elements have 8 image states, 4 for the active windows, and 4 for the inactivate window.  The 4 images states for each are:

  1. Normal
  2. Mouse over
  3. Pressed
  4. Disabled

The image below is an example of the default buttons that you will find in SkinStudio.  As we have covered in previous chapters, each sub-image is for a particular state such as when a button is pressed, that will be the image as shown. 

For my example skin I have created a button that is around 20 pixels in size.  Import the graphics as you normally would do for each of the different buttons.  Now that your image is ready, we need to position the button to the desired placement area.  Select the Position tab to bring up the options to position the buttons.  In this section you have the option to select the button placement at either the left or right of the title bar. 

Now we can position the button to the desired area by adjusting the number of pixels the button is from the edges.  The position can be adjusted for both the normal and maximized window states, and be sure to check both as they can be different.

Under each button setting there is a section to add a glow effect to your buttons.  This is a great way to add a really cool looking effect for your buttons.  When creating your button in your graphics editor, the simplest way of making this effect is to add an outer glow to the button, and then save the glow as a separate image.  You can then import this image into SkinStudio to use as the glow effect.  The glow option is available for most of the buttons, and is optional if you do not want to use this feature.

The glow area has the same basic options as the buttons do.  You can adjust the margins and the positioning of the glow effect just the way you want it. 

This covers making a per-pixel title bar and buttons.  All we need to do now is to repeat these steps for the rest of the button images, and this part of the skin is done for now.


Earlier in this chapter we discussed the differences between per-pixel, UIS1, and UIS2 frames.  The skin elements we created earlier in this section were the per-pixel variety, as they are more popular.  However, I still want users to be familiar with the interface and options for creating these types of frames.

The UIS section, which will be utilized for "basic" skins is quite straightforward and is a great way to start especially if you are new to making skins.  Under this section the first two options will be the Borders and Captions categories.  Here is where you will need to import the frame and shape images for your skin.  The "Frame images " tab is where your graphics for the basic window frames will go, both horizontal and vertical.  The "Shape images" tab lets you add a shape image to add shaped and rounded corners to the windows frame.

Sizing margins is the next tab where you have the option to adjust and/or stretch the frames to match your design.  To adjust the margins to the desired position, just adjust the numerical value to the final position of your frames.  "Frame indexes" is where you will need to define which frame is used for each of the various window states.  The next tab is Extra settings where you will find the option to adjust the OS caption height, and add shadows to the skin (Vista).

UIS2 skins are a more advanced skin language, and is much more flexible than a UIS1 skin.  The UIS2 category will also start out with the Borders and Caption options.  The tabs in this section will allow you to define the images for the top, bottom, right and left sides of the window.  The margin adjustments are now found in these tabs, and as you can see already, there is already more options for the elements of your skin.

Even though I created the title bar and frames with per-pixel graphics, I still need to create them as UIS2 as well.  This skin type will be an option to people who either have systems that can't support per-pixel skins, or have older versions of WindowBlinds.

The "Extra settings" tab gives you a wide range of advanced options for a UIS2 skin.  In addition to the UIS1 options you now have the ability to:

  • Enable/disable "magic pink" areas. "Magic pink" refers to the color (RGB 255, 0, 255) which that specific color will be transparent when applied correctly.
  • Disabled state. This adds a 3rd sub image which will be used for a disabled state.
  • Random frames.  This setting says it all.  Enabling this will allow WindowBlinds to randomly select which frames are displayed.
  • Explorer & IE Frames.  This setting lets you select a different set of frames for Internet Explorer and Windows Explorer windows.
  • Dynamic frame mode. Allows the frame shape to change between states.  Normally they share the same shape.

There are some other options available, but these are a few I wanted to highlight as they might come in useful when building your skin.  The next step is the Caption section where you can fine tune the caption text on the title bar.  Here you can set the text margins, adjust the text colors, and even add shadows or outlines to the text.  You have a lot of options here to tailor this section to your needs. 

Next we have the Titlebar Buttons category.  You will notice this section has many tabs with plenty of options to go along with it.  Here is a brief overview of the tab sections:

  • Buttons tab.  This is where you can add, delete, and arrange the various buttons used. 
  • Image tab.  The tab here is where you will import your graphics, and adjust the animation rate if your buttons are animated.
  • Actions tab.  Here you can choose each specific button, and modify its actions.  Among the options here you can set the button to perform a variety of actions beyond just closing a window.  You can also link one button to another in this section.
  • Position.  As the tab says, this is the place to position your specific buttons.
  • Visibility.  You're going to see a lot of options here, but just take your time and look through them because you never know what ability you might miss.  You can set your desired button to be visible in a wide variety of options.
  • Mouseover glow:  You should already understand the button glow effect, but here is where you get down to the details.  Set the glow image, position it, and even set fade and animation in this section.
  • Colouring masks:  As we have seen before, you can place coloring mask on your buttons, and this is the place to get that done.

The Buttons category we just covered was for UIS2, but the UIS1 section is similar but you are more limited as far as options goes. 

Two other sections in the title bar area of SkinStudio are the minimized windows, and toolwindow categories.  The minimized windows are windows that are usually minimized inside another window.  For this section you are for all purposes just creating a smaller version of the regular title bar and buttons. 

The toolwindow is a small window that you will occasionally run into when an application will popup a small information window, or other similar function.  In this section you have the option to create the toolwindow, and a per-pixel toolwindow if desired. 

This is probably the easiest part of the whole title bar/frames category, but paying attention to details here can really make a difference in your skin. 

 

The borders are the images that reside on the edge of the windows.  We have already touched on this a bit in the UIS1 and UIS2 sections, but I wanted to continue with the per-pixel frames here.  The tricky part about creating frames is getting them together with the rest of the borders.  If you are new to creating skins and are creating a per-pixel skin, I would first suggest opening the default images in your graphics editor and take a good look at how it is put together.  This will greatly help understanding how some of these images come together.

Going back into the Edit per-pixel frames section where we first created our title bar, we can now continue with creating our borders. 

I have used slicing to cut my border frames out, taking great care to preserve the shadows which will add a distinct look to the windows.  Just as the title bar, the borders have two sub images which are the active and inactive windows.  The tabbed options here are basically the same as the caption section we covered earlier.  As usual, you have the margins you can adjust, coloring masks, and the extra settings which in this case, will allow you to pad your borders with UIS1 frames.

The borders should consist of the left, right, bottom, maximized caption, and the caption text background.  There is also the capability to add "Glass" to the borders as well, as described in the title bar section.

Once all the border images are in place, test your skin and make sure everything looks the way it is intended to.  At this point in our skin, we have skinned most of the "major" parts of the user interface.  Now is another good time to "play" with your skin to make sure everything displays correctly.  Many times after using your skin for a while you will notice things, sometimes very subtle things, that you might want to change. 

I'm going to take the time now to go through the skin, as I have already noticed a few small graphical issues I need to correct.  Taking the time now and paying attention to details like this, are a good tip for creating a great skin.

In the next chapter we will cover skinning the Windows buttons and other controls.

Table of Contents
Previous Page. Next Page.