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 :)

I receive tons of emails asking me 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, its 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, Task bar, 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 hierarchal view of different parts to give you 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.