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

This 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 Images

I almost always use the default luna style as a base to construct my own style because it lets me customize 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, lets start from the Frame Caption (Title Bar) click on the caption image in preview area, the properties pane is now displaying all the properties associated to 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.

Properties

Content Margins : lets you define how the content on 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 center.

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

Hmm. did I miss something, let me know if I did by commenting here, I don't know why some folks ask their questions by emails, is it so embarrassing to ask it here ?

The next part will be about setting colors and fonts which is very important for a full-blown customized style.