# Skin Builder Tutorial

1. Skin Fundamentals

The first step in learning skin is to understand how it works. Unlike some apps where you create a mostly static skin, Vclskin must work with the dynamic environment of Windows. The various windows and buttons change shape and size with each program, so Skin must adapt your graphics to each item. It is important to keep this in mind when creating your design. With the code, you are able to set how many pixels of the image around the border, are to be left alone. The rest of the image is then stretched or tiled (as you specify) in order to enlarge or compact the image as needed.

2. Image

- Image margins: margin of image that should not be stretched/tiled.
- Stretch and Tile : image is tiled or stretched.
- Transparency : draw the image transparently, Transparent Color is clFuchsia,RGB: 255,000,255, $00FF00FF.
- Frame : Image state number.

3. Windows Border and MainMenu

There are also two other possible image states: inactive and active window. The active window is the window that is currently being used, while the inactive window is any window(s) that is in the background.

4. Title buttons

5.Button

There are five different states for the buttons image, each displayed at a different time.

- Normal: The normal state is what you see when the button is just there, undisturbed.
- Pressed: The pressed state is what you see when the button has been clicked and/or the mouse button is being held down with the cursor over the button.
- Disabled: This state is visible when the function of the button is not available. For example, when you open a new Internet Explorer window, the back button is not available because you have no webpage to go back to at that time. Therefore, the back button will be displayed with the disabled state.
- Focus: The focus state is displayed when the mouse cursor passes over the button.
- Default: The default state is displayed.

6.Menuitem

7.Color

Pick color and capture color