common skin development techniques

Creating a Q skin can be daunting at first and there will inevitably be a point where you want to give up. To avoid this death trap, you need to be prepared. To create a proper skin, it's not something you just do in a day no matter how simple the techniques are. Below is a check-list you might wish to go through based on my experience with creating Q skins. After that we'll discuss the basic techniques of how to create a skin.

Checklist

  1. Have an idea/theme of the skin you want to create
  2. Get proper paint software that allows you to use (transparent) layers
  3. Be familiar with your paint software. Often this only comes through experimentation but don't expect to be able to botch up a fancy skin when you barely know the functionality of your paint software
  4. Decide what functionality your skin will have, be it a playlist, encoder (or media library see new_qmp_skinning_features).

Where to start?

So now you have an idea of what your Q skin should roughly look like and what features it will contain. What to do next? Let me first point out that there is good skinning documentation for reference in the devzone on the Quinnware site. But let me just give you the links for your benefit:

The easiest approach to Q skinning is to open your paint software, create a layer (be it raster or vector) and start drawing the graphical user interface of the skin. Experimentation is the key! But always remember that if you want to undo something later on, make sure that you use separate layers for each and every element or group of elements (like the playback buttons) or you are in for a real headache. Look and learn from other peoples skins. Download the simplest skin you can find, change its extension to zip and extract it to see the various bitmaps and control elements.

For the body of the skin and every extension that you create (like a playlist or encoder) you need a corresponding colour map bitmap. The map colour control legend will tell you what colour each extension has to be (0,0,0 for the main body skin). It will also tell you the corresponding colour for every control. All the skinned controls are later added to their designated control bitmaps. A control is anything that resembles a button or skinned visual. Again, make use of transparent layers to easily match the map colour control exactly where that control is located. You only need to start creating the maps when you are done with skinning the gui. I will not go through every bitmap that gives functionality to the skin, for that read the skinning documentation, however to get you something basic to work with at least create the following bitmaps:

  • Map.bmp/Body.bmp > this is the backbone of the skin
  • Map#.bmp/Body#.bmp > these are the skin extensions where # is the number of the extension from 0 to 9
  • Trackset.bmp > This gives the controls and looks of the playlist
  • Buttonset.bmp > This is where the skinned playback buttons go (if you used layers, you can easily port them here)
  • Eqset.bmp > This bitmap has the controls for the equaliser
  • Sliderset.bmp > This one has all the sliders in your skin, be it a playlist slider or a playback slider
  • Windowset.bmp > This can be very simple with close and minimise controls
  • Skinkid.ini > For the description and title of your skin plus some extra functionality. For example you can create custom named extensions but you will have to link to them via body#.bmp / map#.bmp.
 
common_skin_development_techniques.txt · Last modified: 2008/11/17 20:23 (external edit)