Previous Page.   Skinning Windows Buttons and Other Controls  9 Next Page.

 

"Controls" in a skin refer to several elements in the user interface.  Buttons, scrollbars, sliders, etc. are all very important to a skin as these are the elements that the user commonly interacts with.  This chapter of the SkinStudio tutorial will cover these elements, and this is a big section of SkinStudio.  

At this point in the tutorial, you should know the steps for importing your own graphics into SkinStudio, and doing the basic modifications if needed.  We have a great deal of our example skin done, but we are by no means finished yet. 

Open the controls category by selecting "Edit Controls" from the main SkinStudio window.  You should now see a nice list of controls ready to be skinned! 

Lets start off with the buttons, so open the first section which is labeled Edit button controls.  Windows has quite a few buttons, so lets take a second to familiarize ourselves with some of the sections here.

  • Push buttons.  These are the standard buttons found in Windows, and the most familiar would be the OK/cancel variety.

  • Radio buttons.  These circular buttons are often used to make a selection.  A good example is in the SkinStudio preferences for choosing basic or advanced skins.

  • Checkboxes.  Also used for selecting items is the checkbox (ticks).  It's commonly used for selecting multiple items.

  • Groupboxes.  The groupboxes are an element with a header and border, which usually houses checkboxes or buttons.

The first button we will take on is the push buttons.  This is one of the most common buttons found in Windows, so I want to pay particular attention to this one.  These buttons have 5 sub-images which consist of:

  1. Normal
  2. Press
  3. Disabled
  4. Mouseover
  5. Focus & Default

Once your created image is imported and the margins look good, the next step is to select the Text tab to alter the text properties.  Using the drop down menu, you can adjust the text for each image state to match your design.  In this section you can change the text color, font, and alignment.  You can preview the adjustments to the text as you make them in the small preview area.  This makes it easy to check without having to constantly apply your skin.

One other thing to notice in the Push buttons area, is that there is an animation tab available.  Animating your start button, as with most other elements, is totally optional.  Once the push button is taken care of, we can move on to the other three remaining buttons in this section.  Make note of how many image states are needed for each button as each of them vary. 

Another option to be aware of is the Glow option.  The properties for the glow here are basically the same as in other elements that we have covered in previous chapters.  This will put a "glow" effect around the selected button.

The Combobox is a drop-down menu which contains selectable values.  Skinning the Combobox will consist of changing the border and button of the Combobox.  An additional element (Vista only) is a "read only" combobox.  The combobox has 4 image states which include the Normal, Mouseover, Pressed, and disabled states.

Headerbar controls are what you see on the top of lists in open windows.  An example would be filename, tags, date, etc. 

For this element we need to create a Bar image, which is the image at the top of list which contains the text.  Additional graphics needed are the 'Drop down arrow & ticks" and "Drop down button" (Vista).

When skinning the "Bar image" one of the options available is the text, which is found in the Text tab.  As with other text elements you can modify the color, font, and alignment.  The text here can sometimes be small, so be sure to test the head bars if you do use an alternate font than the OS default.

 

Another very common control is the menus and menu bars.  You will see these in a variety of ways in the user interface, but some examples would be the menu that appears when you right click in an application or the desktop.  There are a few different menu selections to skin here.

  • Popup menus.  The popup menus as seen in when right-clicking have a few elements to skin.  The first thing you want to skin is the menu background which is obviously the main part of this element.  Menu items and menu icons all can be skinned as well here.

  • Favorites menu.  As the name says this is the menu used for Favorites, and this consists of the background and menu item images.

  • Standard menu bars.  These are menus you will find when you click "file" in an application like Notepad, etc.  To skin this part of the skin, you need to apply images for the bar itself, and the bar items.  There is also an entry for MDI menu buttons.

 

The Progress bars are what you see to indicate the progress of a certain task like copying files, downloading, etc.  In this section there are progressbars with both horizontal and vertical positions.  Both of these contain a border, block, and animated flash images which can be skinned.

For Vista users a few more options are included.  These are red, yellow, and blue block images which are used to display the capacity of volumes on your drives.  These images will be created automatically if none are used.

After you have imported your images for this section, be sure to click "test" and select the progressbar tab to see the images in action. 



Everyone should be real familiar with scrollbars, as this is common in many applications and probably most used in web browsers like Internet Explorer.  This section also has a horizontal and vertical section.  The first item here to get to is the scrollbar arrow, and these have 23 sub-images that need to be included.  It is suggested that the arrow itself is done as a glyph to be included with the main image. 

The rest of the section to be skinned is the Background, Drag bar, and Small drag bar.  The drag bars are the item that you can click with your mouse to move the item in the scrollbar.

 

Spin controls are small arrow usually next to an input box where a user can click up and down.  If you have been following along in SkinStudio you probably have already used them in the margins tabs and other areas to adjust certain values.   Both horizontal and vertical controls are needed and both have 8 image states each. 

The Statusbar controls are found at the bottom of a window and are divided into "panes" which displays various information.  This control consists of the background and sub section images.



Tab controls are all the items related to tabs in the user interface.  Once again, a great example of these controls are the tabs inside SkinStudio.  In this section we are able to edit two different types of tabs.

  • Normal Tabs.  These are the common tabs and they consist of the border, tabs, background, and left/right tabs. When editing the the tabs you will have the text options available to adjust the text as we have covered before.

  • Internet Explorer 7 Tabs.  How to skin the tabs in IE7 was a question often asked, so now SkinStudio offers an easy way to accomplish this.  The IE7 tabs consist of the tabs, close button, rounded edges, and the bottom tab bar.



The Toolbar controls are typically options at the top of a window.  There are three different elements here we will be working with.

  • Normal toolbars.  These toolbars consist of several different buttons, and several separate items.  Adjustment are also available for text and the ability to add animation is also included.

  • Places toolbars.  This control is made up of a background and button image.  The button has 6 image states to create, and text adjustment is an option here too.

  • Rebar controls.  The rebar control is the background for some of the toolbars, and the gripper is used to resize the sections using the mouse pointer.



Trackbar controls are also known as sliders.  They consist of a bar and arrow image which can be moved depending on the function.  Here we have sections for both horizontal and vertical sliders.  Each of these will consist of the slider trackbar track, directional arrows, and a horizontal/vertical bar.



Treeviews are the controls which contain values that can be expanded/collapsed with the +/- control.  Examples of this would be in the Registry or Windows Explorer.  Even SkinStudio has a treeview option available.

We covered a lot in this category, and to completely skin the buttons/controls will take some decent time working in your graphics editor.  At the end of these sections I always seem to remind you to apply and test your skin.  The test feature in SkinStudio is another great way to test, but since this section covered many items that the user will interact with routinely, pay some extra attention making sure everything is how it is supposed to be.

Table of Contents
Previous Page. Next Page.