User:Altglass/Skin-Designer Tutorial

Designing Process

First of all you have to design your skin in a graphics program like Photoshop or GIMP.

In the designing process you should think of the following components:

A main window containing:

a play/pause button

a next and a previous button

a faster and a slower button

a stop button

a time slider

a volume slider

a mute button

text information about the current playback

other buttons with specific functions like shuffle,repeat or making other windows and dialogs visible

A playlist window. Either integrate this into the main window or create a separate window for it. The playlist window should contain:

a button to add and a button to remove items from the playlist

a button to export and to import playlist files

a button to sort the playlist alphabetically

An equalizer window. This might also be included into the main window or elsewhere. This window should contain:

A slider to control the preamplification

10 sliders to control the different bands (60Hz, 170Hz, 310Hz, 600Hz, 1kHz, 3kHz, 6kHz, 12kHz, 14kHz, 16kHz)

A button to turn the equalizer on/off

When you create your skin also consider that each control/button has three states: normal, mouseover and clicked.

For example you could create a big image for each window, where the window with it's controls is shown three times. One for each status. Then it is recommended that you split up this image with slices. (Slices refer to a tool in Photoshop, I don't know how or whether at all this is possible in GIMP or other programs). Then save each slice, or subimage, as a PNG file.

TODO: Add an example PSD file, maybe of the Airflow skin and describe how to design a window if it should be resizable

In the Skin Editor program

Choose to create a new skin and save it in it's own folder. Into this folder you should copy all your PNG images. Then you have to make the available in the skin by clicking on the "Add Bitmap" button at the bottom of the "Resources" window. Select the PNG files in the file chooser. They will be added automatically and identified by their file names without the extension.

Then create a new window by clicking on the "Add Window" button at the bottom of the "Windows" window. Choose an id for the window, e.g. "Main" if it is the main window. The X and Y attributes determine where the window appears the first time the skin is opened. If you set drag-drop to true, files can be dropped into this window and will be added to the playlist. If play on drop is true the dropped files will be played immediately after they have been dropped into the window, otherwise the will be just added to the end of the playlist.

Now you'll have to add a layout to the window. Layouts determine different appearances of a window. For simple skins there are only needed on layout per window. Note that if you use several layouts, the last in the list will be shown the first time the skin is opened. You can modify the position of a layout in the hierarchy by selecting it an using the up and down buttons at the bottom of the "Windows" window. You'll have to choose an id for the layout, you should always select ids that represent what is displayed. Under initial width and height you have to enter the dimensions of the window when this layout is displayed. If your window is not resizable you can ignore the other attributes and leave them at -1.

After you have added the layout it should be selected in the "Windows" window and a preview window of your layout should have opened to the right. It should be filled with a gray/white tile pattern. This pattern symbolizes transparency, so the parts of your layout where you see this pattern will not be visible in VLC.

Now move on to the "Items" Window. First of all you have to add a "Group" item. Currently VLC requires that you add the layout's items to a group instead of directly adding them to the layout.

After you have selected your new layout