Updated: 13.02.2018
Rus Follow on twitter

The skin editor

With ASkinEditor.exe you can easy visually create and edit a skin configuration file "Options.dat".

The button "Creation wizard" runs a skin creation wizard, which can help to make s skin easily. At first you need add name for your skin, at second, need to setup a general gamma of color for it. The MasterBitmap file "Master.bmp" will be generated automatically and contains a minimal collection of images for work of skin. After adding of new images in any graphic editor (like PhotoShop, GIMP etc.) and saving MasterBitmap, you need to select it in the skin editor on the corresponding page.

For a preview of edited skin may be used a special demo application "ASkinDemo.exe" (it's always included in the ASkinEditor package and may be found on this page also). If skins editor can't find the ASkinDEmo.exe then you will be asked to search it using special dialog. For enabling of automatic preview after an each change you need to set the "Changes preview..." checkbox. If it checked then editor will automatically reload your skin on it, and you will be see your changes in skin on the fly ;)

On the "General skin options/General info" tab you may define a name of the skin author, a version of compatible AlphaSkins package and other general info.

Skin sections

The "Sections" tab contains a list of all sections in the skin (see image 5). Each section is associated with type of control(like "EDIT" for TEdit, TCustomEdit and child based on it) or their elements (like "COMBOBTN", “DIVIDER”, “EXTRALINE”, “SCROLLBAR1H”).

Most properties of sections is identical ("TRANSPARENCY", "COLOR" etc.). Used SkinSection may be changed in the "SkinData.SkinSection" property of AlphaSkins components. Depending on value of this property may be forced a drawing of Panel (default is "PANEL" skinsection for it) as Buton ("BUTTON" section) or as Form("FORM" section).

Also, unlimited amount of sections maybe added by a skin developer for creating of controls with a unique drawing style. But some properties exists, which are specified only for special skin sections (like "GLYPHMASK" in "COMBOBOX" or in "SCROLLSLIDERH"). General properties of section may be found on the "Borders" tab and "Normal state" tab. Additional tabs, such as "Active", "Corner images", "Animation", "Trackbar data" will be visible only when a special section is selected. In "Options" window, may be configure what properties and in what sections will be shown ("Sections list" tab).

The "Borders" tab

The “Control borders” field on the "Borders" tab determines coordinates of borders image in the MasterBitmap and some parameters required for a control drawing. This field may be not defined. If this field is not defined then control will be drawn without borders.

When you click on the button corresponding to this field, you will see the "Image selection for property" form (see image 6). The most part of this form is occupied by zoomed MasterBitmap(the value of MasterBitmap zoom can be changed), there may be selected coordinates of image for a current skin section (selected borders for "TOOLBAR" skin section are shown on example). On this form :

  • "Use mask" should be checked if masks are used in current borders (in the current example it's isn't).
  • The "States count" field determines a count of states for a control which are defined in the image. I.e. for defining of three states for button(default normal state, selected state, pushed state) you need to draw images of all states together in the MasterBitmap, select this group of images and set "StatesCount" to 3.
  • "Stretch" indicates that borders will be drawn by image which will be stretched on throughout side of control, otherwise borders will be drawn by repeating of the image.
  • "Active only" indicates that borders of control will be drawn only if element control is focused or selected or activated by mouse.
  • "Center filling" indicates that center part of control must be filled by source image. Otherwise borders will be drawn only, center will not be filled by this image.
  • Values of "BorderWidth" defines a width of each side - left, rigth, top and bottom.

  • Let's back to the "Control borders" page. The "Effects region" field used for defining of visibility area of visual effects which uses in a control. Currently this property is avaliable in "PROGRESSH" and "PROGRESSV" sections. This region used there for defining of a visibility area for a lighting animation effect.

    The "Glow effect" field used to defining of Png image, which will be used for creation of the "Glowing" effect. This property is avaliable in sections which will be used in buttons and edit controls.

    "Normal state" and "Active" tabs*

    In this tabs are specified properties of background of current section. This background may be semitransparent, the "Transparency" option defines a value of background transparency.

    The "Color" property defines a color of background which used only if gradient filling and texture filling are not defined.

    The AlphaSkins engine has several unique solutions and one of them is the ability which allows combine together texture filling and gradient filling. For defining gradient or texture visibility (in percents) relevant trackbars should be used.

    For a texture choosing the "Image selection for property" window must be called. But only one option will be available in this case (except coordinates) : "Filling type", which defines a type of texture filling.

    "Text color" defines a color of text in a control.

    In the "Text contour" option may be specified a color of contour at the left, top, right and bottom sides of text. This property is supported in most controls.

    The "Text glowing" property allows specify a color and size for a text glowing effect. This property is supported in such control as buttons, checkboxies etc.

    One of interesting abilities in AlphaSkins is a support of many colors and transitions between them in gradients (like gradients in Photoshop, see image 8). For example, the "MacMetal" skin contains many controls where texture is drawn in parallel with gradient.

    *The "Active" tab does not exist in some sections("PANEL", "TOOLBAR" etc.). It is depended from count of states, which can be associated with control.

    Appointment of other tabs:

  • "Corners images" allows to define an additional image in corners of window. You can see a samplen in the WLM skin (see a top right window corner)
  • On the "Animation" tab may be specified such options of animation as active and count of iterations.
  • Current section may be edited manually at the "Manual edit" tab. A section settings are represented as simple text there, but some experience is required for changing it. Sometimes it helps to edit the skin more faster by using copy/paste and other operations.
  • The "Trackbar data" tab contains settings of the "TrackBar" drawing.
  • The "General skin options" page:
    General info

    There you can set a name of the skin author, version of compatible AlphaSkins package, the file name of MasterBitmap and additional info.

    Main colors

    Containts settings of main skin colors (see image 9).

  • "Main color" - the main color of skin
  • "Edit controls" - color of edit controls
  • "Borders" - color of controls borders (usually used in drop-down lists and when edit controls are drawn in standard dialogs)
  • "Labels" - color of text
  • "FX Labels" - color of text with shadow
  • "WEB Label normal" - color of link-label in normal (inactive) state (default color is black).
  • "WEB Label active" - color of link-label when label is hovered (default color is red).
  • Title bar

    This page contains settings for drawing of form title and its elements. Title system buttons have two sizes in some skins : big icons for normal forms and small icons for dialogs and MDI-Child forms.

    Main icons

    Besides buttons for selection of title icon some other options are available also on this page :

  • Space between buttons
  • Buttons are aligned to top
  • Images with glowing effects. This icons must be drawn in Png image format (32 bit with alpha-channel). This image used when title icon should have a "Glowing" effect, also it may be used in other cases, when need to draw a part of icon outside a form.
  • Title options

    Settings for a title content output.

  • "HUE is unchanged for" allows to define a mode of HUE changing for system icons in form title.
  • "None" - colors of all system icons changed together with a HUE of skin
  • "All title icons" - colors of all system icons not changed when skin color is changed
  • "Close" button only" - colors of all system icons (except close button) changed together with a skin color.
  • "Title content offset" - offset of titlebar content in relation to titlebar borders.

  • On the "Small icons" tab you can specify small icons for titlebar, if default icons doesn't fit for painting it in titlebar of the forms or MDIChild forms. It is possible to specify icons in reduced size if basic icons are not suitable for drawing them in dialogs or MDIChild forms.

    Controls glyphs

    Images of some controls or their parts.

  • "Checkbox" - primary image for the "CheckBox" component, three collections of images for three component states are provided: checked, unchecked and undefined.
  • "Small checkbox" - small image for "CheckListBox" component and other components where small checkbox are needed.
  • "RadioButton" - image for the "RadioButton" component
  • "Checked menu" - image of selected menu item. If it is not defined then "CheckBox" icon will be used for drawing.
  • "Grip" - image used in "StatusBar" component and on the form if SkinProvider.ShowGrip property is enabled.
  • "Grip horz", "Grip vert" - used in the "TsSplitter" component if "ShowGrip" property is enabled.
  • Extended borders

    On this tab may be configured settings for drawing of additional borders for forms and dialogs. Two modes of additional borders creating are provided :

    1. "Add to existing" - extended borders will be added to existing borders. This mode is used for adding of own shadow of form. It also may be used for drawing of additional borders when picture of native borders must be saved. Example - the "Alluminium" skin.
    2. "Replace existing borders" - mode is used in the case, when standard borders needs to be completely replaced. Samples in Web2, Sapphire, etc.

  • "Border width" - border width, distance between a client area of form and shadow of form.
  • "Shadow size" - distance between sides of image and border of form on this image. This is a value that must denote the border, where the figure ends with the shadow and starts the border image.
  • "Title height" - height of form titlebar.
  • "Maximized title height" - height of titlebar with maximized state of form. Its used in special cases, when "Title height" value is too big for maximized window state and this size should be smaller. In other cases this property can be 0 (default value).
  • "Title center offset" - offset of titlebar content along vertical ax (icon, text, buttons).
  • "Form align offset" - offset for form align relatively edges of screen which used with "TsSkinProvider.ScreenSnap" property.
  • Shadows of labels

    Settings for painting of text shadow in the "LabelFX" component: Color, Offset and Blur.