Different states??

Hey, I've been using WB for years, but this is the first time I've tried attempting a skin. Frankly I'm pretty confused! If someone could maybe walk me through how to make a simple close button, that would be great. I have all the graphics ready, and i put in a close button, but I dont know how to do all the different 'states' of the close button in skin studio. Help? Thank you!!
1,383 views 2 replies
Reply #1 Top
It's a little tough to explain without pictures, but here goes. If you are making a UIS2 skin, the close button (all the freeform buttons for that matter) can have 6 states, 3 for the active window & 3 for the inactive window*: normal, pressed & mouseover for each. You would need an image with 6 'tiles', one for each of the 6 states, arrayed from left to right, each tile being exactly the same size. Say the button itself as displayed is 16px by 16px, then the overall image would need to be 96px wide by 16px tall.

The easiest way to gain an understanding of how this works is to load up a skin or two in SkinStudio & select various GUI elements to examine the various attribute settings. You'll also see a Help section in the lower left pane of SkinStudio that, while often cryptic, will give the image requirements for the individual GUI elements. How the images are tiled appears arbitrary to me - some are tiled horizontally, some vertically, and SkinStudio, unfortunately, doesn't tell you which orientation you need to use for individual GUI elements, so loading a skin & examining the graphics is the only way to tell (open the images in MSPaint or other image editor).

There are also several skinning tutorials that are linked on WC's home page.

*The pressed & mouseover tiles for the inactive window don't actually display - I think the program's authors expected them to be usable at some point and built SkinStudio to support their use, but as far as I know that has not been implemented (unless it now works on Vista).
Reply #2 Top
Thanks!! I got it now. I've just uploaded my very first WB skin. It's 'starbucks' themed haha