The ButtonBuilder's toolbox contains the following buttons:

		Action	Description
		New file	Creates an empty skin file. The builder automatically shares the skin area in multiple pieces that identifies the client area of the skin and the corners.
		Open a file	Opens a file. The file should be saved previously using the Save button. By default, the builder loads *.ebn files.
		Save a file	Saves the skin to a file. The builder saves everything that's required for the skin. Save As , if you are pressing the SHIFT  key while clicking the 'Save' button you can choose a new file where to save the skin. By default, the builder compresses the files, so you can press CTRL key to save files uncompressed ( the message ' Save (uncompressed) as 'should appear on the save file dialog ).
		Properties	A check button that indicates whether the 'Properties' panel is visible or hidden. The 'Properties' panel holds information about background of the selected object. Also, the the 'Properties' panel contains the list of pictures used by the skin. Details here.
		Zoom	A check button that specifies whether the 'Zoom' panel is visible or hidden. You can use the 'Zoom' panel to magnify different portions of screen. In order to visualize a specified portion of the screen you can press "CTRL" key while moving the mouse, or you can click into the 'Zoom' window and drag the focused rectangle to the area being magnified. You can magnify the are by keeping the (SHIFT + )CTRL key and clicking the Zoom Window.
		Test	Shows the current EBN object to a separate window. Opens a new window where you can see running the exButton using the State exNormal as defined by the skin. Keep the CTRL key to assign a new skin for the exPushed state.
		Draw grid lines	A check button that indicates whether the ButtonBuilder draws the grid lines around the objects in the skin. The grid lines are not painted in the Test window.
		Alignment	A set of six radio buttons that indicates the object's alignment relative to its parent. The list of radio buttons in their listed order is:  None, Left, Right, Client, Top and Bottom. For instance, if an object has the Left Alignment, it means that the object shares the left area of the parent with itself. The object's coordinates are defined in the edit controls labeled: X, Y, CX and CY. The edit controls that handle coordinates are enabled based on the object's alignment. For instance, if the object's alignment is left, only the CX coordinate will be enabled, or if the object's alignment is None, then all coordinates are enabled. The coordinates are relative to the parent object, and they may contain arithmetic expressions, and % sign  ( percent indicates that the object is % from the size of its parent ) as well.
		Colorable Object	The object is colorable, which means that the EBN color is applied to this part when the color is applied to the entire EBN object. For instance, at runtime the identifier 0x1FF0000 applies blue color to all parts that compose the EBN object, including the selected object.
		Not-Colorable Object	The object is not-colorable, which means that the EBN color is not applied to this part when the color is applied to the entire EBN object. For instance, at runtime the identifier 0x1FF0000 applies blue color to all parts that compose the EBN object, excluding the selected object.
		Insert Object	Creates a new child object. The newly created object is child of the selected object. By default, the newly created object has no picture or color associated to it. You have to define the object's background using the 'Properties' panel. You can also, insert a new child object while ButtonBuilder is focused by pressing the 'Insert'  key.
		Remove Object	Removes the selected object. Also, you can remove the selected object by pressing the 'Delete' key. Note, that the client area of the skin ( the area that displays the 'Caption' string ) is not allowed to be removed.
		Load BASE64	Loads from the clipboard a BASE64 string that encodes an EBN object.
		Save BASE64	Generates the BASE64 string that encodes the current EBN object, and copies it in the clipboard as text.
		Undo	Restores the last operation.
		Redo	Reverse of the Undo operation.

Notes:

• the selected object is always marked using markers. 
• any change in the 'Properties' panel will be reflected in the selected object.
• use 'Up' key to select the parent of the selected object, while the ButtonBuilder is focused. 
• use the 'Down' key to select the first child of the selected object, while the ButtonBuilder is focused.
• use the 'Left' or 'Right' key to move through the objects that have the same parent as selected object.
• you can change the order of the objects ( that have the same parent ) using combination of CTRL + PgUp or CTRL + PgDn key.

The 'Properties' panel is a resizable window that's visible only if the button is pressed. The caption of its window is 'Background'. The 'Properties' panel is always updated when the selected object is changed. The 'Properties' panel defines the list of pictures used by the skin. The 'Properties' panel looks like follows:

Use the Picture menu to insert, delete a picture object from the skin file. Note that all picture files are saved to the skin file ( ebn file ), no matter if they are used or not. The ButtonBuilder compresses the file, so even if you are using a bitmap file or a gif file, the file of the skin will be compressed ( use the CTRL key to save the file as uncompressed ). The 'Properties''s toolbox contains the following buttons ( in their order ):

		Action	Description
		Tile, Stretch, Horizontal or Vertical Stretch	A set of two radio buttons that defines the way how the picture is displayed on the selected object: tiled, stretch, horizontal stretch or vertical stretch.
		Transparent	A set of three radio buttons that defines the picture's transparency. If the first button is pressed, the picture is opaque, so no transparent colors are used. If the second button is pressed, the picture is transparent. No picture or background is applied to the selected object. If the third button is pressed, the last two buttons ( the black buttons ) define the transparent color from and transparent color to.  In order to select a new transparent color, you have to click on the one of the last two buttons and drag to the desired color. Once that you have selected a  transparency color, you have to presses the button again to apply the transparent color to the selected object.
		Colors	Defines a set of predefined colors. The X button clears the background color of the selected object. The bottom-right button ( bellow to X button ), helps user to add a custom color. How? Click the button and drag to desired color. Once that you have selected a custom color, you can press the button again and the builder will apply the selected color to the selected object.
		Picture coordinates	The X, Y, CX, CY edit controls define the coordinates of the picture on the background of the selected object.

Now, that we are ready to go, we can start building the skin for the button. If you have already a skin file check the How to assign a skin file to my button? Between steps you can save the skin file using the Save button .

1. Choosing the picture files that we are using to build our button. You can have a BMP file, a GIF file or a JPEG file ( or any picture file that your Windows recognize ), though we prefer the BMP file since it holds information about the picture without losing colors by compressing. In our case we choose this one ( you can save it as a BMP file ). Here's the same picture but this time it is zoomed:  
2. Loading the picture file using the Background panel, by choosing the Picture\ Add New item menu. Please notice that the selected object in the skin is the skin's client area ( the area where the 'Caption' string is painted, so the picture will be applied as tile on the skin's client area. In the same time, we can specify the skin's client area by changing  the coordinates of the picture even by clicking the slider buttons on the coordinates panel, or by dragging the selected area in the picture. We have two options to avoid displaying that picture on the skin's client area. One by clicking the None item in the pictures list, and this way we ensure that the skin's client area ha no picture associated, or clicking the Transparent button . In this case, the skin's client area have a picture associated but it is not painted. At this point you can download the skin file here. 
3. Defining the corners and margins for the button. By default, the builder creates few objects that specify the corners and margins of the button. The size for these objects can be changed any time. By default, the size of the corners is 4 ( pixels ). In our case if we take a closer look using the Zoom window, at the picture we have chosen we will see that 4 pixels are quite enough for margins and corners, but we will change the margins as follows: the left, right and top margins set to 2 pixels, and the bottom margin set to 3 pixels. This way we will ensure that our corners and borders are correct defined. At this point you can download the skin file here.
4. Defining the look and feel for each object in the skin. Now that all parts in our skin are well defined, we will take each part that's displayed and we will define how it will look like. For instance, we will define the left-top corner ( the one with a red pixel ), but the same thing can be done for all objects in the skin. So, first we have to select the object by clicking inside the object until builder marks the selected object. If your object is too small press the CTRL key and the area will be zoomed in the Zoom window ( also the cursor will be marked by a cross ), or use the arrow keys until you get the desired object. After you selected the object the Zoom window automatically magnifies the object in the Zoom window for a better view. If you feel that grid lines that's painted to mark the objects in the skin, just press the Draw grid lines button .  Go to Background panel and click the normal.bmp item. This way you assign a picture to the selected object. Chose the way how the picture is displayed: tile, stretch, transparent and adjusts the picture coordinates until you get the desired image in the selected object. If your object require transparent areas you need to press the Transparency button and choose the taransparent color "from" and "two" using the two buttons right to the Transparency button ( click and drag the cursor over the color you want to select, you can drag the cursor directly to the zoom window where the screen is magnified). After you select the transparency colors the builder considers the colors being the range of transparency used. Click once again one of these two buttons, and the transparency will be applied to the selected object. At this point you can download the skin file here. 
5. After all objects were defined click the Save button and your skin is ready to be used.  At this point you can download the skin file here. How to assign a skin file to my button?