3. Skin Editor (ASkinEditor).
4. Usage of masks.
To create a new skin, you should have the latest version of the ASkinEditor.exe and any graphics editor (Adobe Photoshop is recommended).
Most skins contain two files. The first one is an image of certain skin items collected together in the Bitmap format(the sorting of different items does not matter). Further the file will be referred to as MasterBitmap (there may be more image files but we will not consider such cases here). The other file (“Options.dat”) contains skin settings in the Ini- format. The settings reside either as general (“GlobalData” section) or as applicable for each separate type of control. Now it seems reasonable to singleout two main parts – image file creation and skin creation in ASkinEditor.
To conclude, skin making means creation of a MasterBitmap file and further configuration of the Options.dat file in the ASkinEditor program.
Since we aim at understanding the keystones of skin creation, the simplest images will be used to make our first skin. More sophisticated cases will beprovided later along with some helpful hints (such as MasterBitmap optimization, mask usage and so on).
I guess you should realize that your first skin will not be intended for any serious application. However, they will become better as you acquire experience (. Spend some time practicing to enjoy finally the skin created for your own projects all by yourself! ;)
The pattern representsthe content of the Master.bmp file for the WLM skin (this is the skin which will be discussed throughout the article).
MasterBitmap contains a set of all required images of various items of controls. Each image can hold information on how an item looks like in every specific state (0 – regular, 1 – active, 2 – pressed). Hence it appears that the width of each image must be multiple to thenumber of supported states.
The background must be Fuchsia-colored (since this color is transparent in AlphaSkins).
This is an example of a CheckBox drawing (checked) in three states. Three equally sizes drawings are joined together. The first one – for a regular state of control, the next – for a selected state and the last one is displayed at pressing. There
can be either two parts (if animage is not specified at clicking or
if it is the same as in the selected state of the control) or even one (if a control looks the same in all states).
Preparation of such items as forms, buttons, etc is not that challenging either. Use the following scheme to draw a control: draw a background first, then a frame window and the control content. The background can be translucent, haveuniform, gradient or/and texture background (all the setting are specified in the skin editor and will be studied later). Now that the background is ready, corner and leg images from the MasterBitmap are superimposed onto it. Fuchsia colored pixels in the corners will make the control transparent there. Legs can be displayed either by replication or by stretching a source piece (display mode isspecified in the skin editor).
Below are two images of the ToolBar - before and after the frame window is drawn:
While drawing a frame window divide the base image into 9 parts (see
the figure on the right). Parts 1,3,7,9 (corners) are transferred as they
are, the legs of the window are filled by repeated or stretched (optional) parts 2,4,6,8 accordingly. Finally, the centreis filled by part
5 (this is true only for small sized controls such as buttons; part 5 is not applied when, say, a bar is drawn). Coordinates of images, width of legs and all other options are specified in the skin editor.
The background image for a control can be either included into the MasterBitmap file or kept in a different file (Jpeg and Bmp formats are acceptable).