The most practical photoshop tutorials and walkthroughs, and skinning tutorials and guides exclusively from Graphic Canvas. Tutorials and tips will be added and updated frequently, so bookmark this page so as not to miss out on something really cool 🙂

How to make a visual style, Part 1
By Mohsin Naqi
Published: February 16, 2006
Print    Email

I receive tonnes of emails asking me to elaborate on how to make a visual style, which of course I can’t, therefore I have decided to write a little tutorial explaining the process which will get you started. This tutorial is in no way an exhaustive official sort of guide, that is, I am not going to explain the functions of each and every tool involved in the creation of a visual style, I will only show you how you go about doing it.The guide/tutorial is divided into several parts, the first part deals with the interface of StyleBuilder.The only tool, StyleBuilder

Sorry to those who still use resource hackers to build visual styles but it’s a pain to replace images this way and set their properties by typing the values, what a useless hassle! it mars the fun and you find yourself exhausted and worn out in the end ( if you ever reach it) no wonder if you vow not to make a visual style again.

So, the first thing you got to do is download Stylebuilder.

After you have downloaded and installed StyleBuilder, open it up and you will see a not -so user friendly interface, it’s quite daunting I must admit, but let us demystify it step by step.

Different Panes

On the top there are usual menus and a basic toolbar which needs not be explained.

Navigation or Shortcut Pane


On the left we have a ‘navigation pane’ click on the little thumbs and you’ll know what it’s all about, it lets you navigate easily through different parts of a visual style such as Windows and toolbar, Taskbar, fonts and colors, explore it as you please. it also lets you switch between the ‘sub-styles’, in our example they are ‘Homestead’ and ‘Metallic’.

Preview Pane

Next, just beside the navigation pane, there is a preview pane, it’s pretty self-explanatory. It shows you how your visual style is going to look like after you replace the images and change the values. Move your pointer over some parts so they get highlighted, press the caption buttons to reveal the pressed state. You can also toggle between active, inactive and disabled states by choosing the appropriate buttons just above this pane.

Note: This pane is also pretty misguiding at times so apply the visual style often to make sure that it is looking the way you wanted.

Part Window

Just beside the preview section, we have this ‘part window’, click on any graphic in the preview pane and the part window will show the enlarged and original version of the graphic as well as any glyph images related to it. You can also drag the image from corners to see how it will look like when stretched.

Properties Area

Below is properties area, that’s where most of the modifications are made. Here you can control the sizing margins, content margins, image file and so on. Select an image from the preview pane, choose the property to be modified and just on the right you are given options to change the value.





Parts Tree

There is another section, which is usually hidden, it’s called Parts Tree. Click on the little folder below the toolbar to reveal it. This one is most important, here you can access more advanced properties for every image, plus it gives you a hierarchal view of different parts to give you a better understanding of where everything belongs to.

That’s it for the first part, the next part will deal with more complex issues and some insight into the creation of images.

If you like the tutorial, do comment here or I won’t write the other parts, also feel free to ask if you have any questions or suggestions, I’ll consider them.

View Comments (6)



The most practical photoshop tutorials and walkthroughs, and skinning tutorials and guides exclusively from Graphic Canvas. Tutorials and tips will be added and updated frequently, so bookmark this page so as not to miss out on something really cool 🙂

How to make a visual style, Part 2
Published: February 22, 2006
EmailThis is the second part of ‘how to make a visual style’ tutorial, click here to read the first part.In this part, we are going to find out how to use different features of StyleBuilder and how to replace images and set their properties.Replacing ImagesI almost always use the default luna style as a base to construct my own style because it lets me customise everything to maximum and most importantly I can leave out some parts from skinning when I am feeling lazy.I assume you have already created a new style, if not choose file>new. The luna style is set up as default. First thing, let us start from the Frame Caption (Title Bar) click on the caption image in the preview area, the properties pane is now displaying all the properties associated with it. Everything is pretty self-explanatory, the most important ones are ‘content margins’, ‘image file’ and ‘sizing margins’, we ‘ll explore them later.

Now we’ll create an image to replace the default luna caption. Open up Photoshop (what else?) create a new document with 29 pixels height (default caption height) and width whatever you like (for example 160) and transparent background. Here use your own creativity and create an image (if you don’t have any graphical skills then first learn how to use photoshop) Double the canvas size downwards, duplicate the image, nudge it down to align both images perfectly (two images for two states, active and inactive) fill up the background with magic pink (RGB 255,0,255) parts containing magic pink are interpreted by StyleBuilder as transparent areas. Now save it as a 24 bit BMP image.

Here is my sample Image.

Switch to StyleBuilder, choose the ‘image file’ property for the caption image and click on ‘choose’ button. navigate to where you saved the image and select it. Click on reset button in both preview panes so that it shows the new image. and yes we have completed the first step.


Content Margins lets you define how the content of the specified image will be displayed.

Sizing Margins: Lets you define what part of the image should be tiled, stretched and which parts would be left alone.

Content Alignment: How the content will be aligned, left, right or centre.

Image Count: How many images different states are there in the image.

Image Layout: How are the images for different states aligned, vertically or horizontally.

Sizing Type: How is StyleBuilder going to size the image, stretch it, tile it or leave it as it is (true size).

Transparent: True or false