Psycle Wiki

Go back to Main Page > Documentation

A tutorial by Fingersoup

Tutorial Introduction[]

As you are well aware, Skinning is a very artistic task. This document is written with the assumption that you have an artistic nature, but you need to know the technical skills required to make a skin, as well as learn the graphic limitations of the skin. It is not supposed to dictate the exact layout. The example skin used is built to show examples, not demonstrate how Psycle skins look. It may not be pretty, like yours will be. In fact I will almost guarantee it will not. Whenever possible, look at a second skin if you think you're limited by something.

Skinning Requirements[]

When Skinning Psycle, there are 3 different things you need to edit. These are:

• Graphic Files (a .BMP for the Pattern header, and another for the Machines)

• Skin Definition files (.PSM/.PSH for defining Co-Ordinates of Machines and headers respectively)

• Visual Configuration Dialog (For changing Psycle's color scheme, and loading your skins)

Therefore you will need 3 tools:

• A graphic editor that displays co-ordinates (Windows Paint will work)

• A Text Editor (To edit the .PSM/.PSH files)

• Psycle (This is what you're customizing, right?)

Making Graphics[]

The first file we will modify is the machine graphic file. All components you wish to display are drawn in this file. Parts may be placed wherever you wish. In the interest of file size (for distribution, etc), you will want to keep your file as small as possible. There is no need for a BMP with the dimensions of 1024x768. However, if you prefer a larger work area, or wish to use draw a large graphic then scale down, go ahead. You know how you like to work. Just remember that the final file will have a 1:1 size ratio, as Psycle will NOT scale your graphic.

When drawing your machines, ensure that all elements are in their "Off" position. This means that your basic effect machine graphic will have Mute off, and Bypass Off. VU meters will be dark.

Once your base machines are drawn, you need to draw your controls. You Can reuse these. For instance, if you want to re-use your "Mute On" control for both your Effects and Generators, you only need to draw one "Mute On" control. Keep in mind the Click area of your control will ALWAYS be rectangular. You can't do any "wraparound" designs for your controls. The controls that you can draw for machines are:

• Mute

• VU Meter

• VU Peak

• Panning Slider

• Solo (Generator Only)

• Bypass (Effect Only)

The pan sliders are the ONLY controls that do NOT have an alternate control to set a default value (aside from assigning/tweaking values in pattern view). Keep this in mind when designing your skin. Otherwise, if you want to skip a control, just don't draw it. We'll worry about how to tell Psycle not to draw one later. Panning Sliders, and VU meters can only move on a horizontal plane (from side-to-side, NEVER Top-to-bottom, and NEVER in arcs.)

Finally, when you're done, it's time to re-arrange your controls and machines to take up as little space as possible. This is mainly to keep file size down. When you're done, you might have something that looks almost, but not completely unlike this:

tutorialmachine graphic here

Note - Machines do not have to be the same size. I have made the Master a different size to demonstrate this. In theory, you can have two machines with completely different control designs.

If you want a transparent part of your skin, fill that area with a single colour that you aren't using anywhere else. Any bright unused colour usually a good choice. Later on, I will show you how this colour will become the new clear.

The Header BMP works the same way. The controls you need to add outside the main header graphic are as follows:

• Record

• Mute

• Solo

• 0 thru 9 (For displaying track Number)

Numbers must all be the same width/height, and in order. You should have something that looks ALMOST completely different from this:

tutorialheader graphic here.

Defining And Placing Controls[]

This is the incredibly boring part of skinning - putting the parts together. Psycle uses ASCII text files in order to modify the layout. Basically you have a bunch of predefined objects, and all you do is mark the coordinates next to the name. .PSM and .PSH files MUST have the same filename as the .BMP, and place them in the "Skins" directory. Otherwise Psycle will not be able to load your skin. Here is a sample file, annotated with comments (those marked with a // at the beginning) that can be ignored by Psycle's skin interpreter (Feel free to cut and paste, minus the file markers):

[Begin .PSM File]

// First we cover the items with 4 variables: X, Y,width,height
// X and Y are the Coordinates of the upper left hand corner of.
// the object you wish to define in the BMP. If you wish to
// omit an object, set the width and height to 0.



// Note the 0 in generator_vu0_source - This indicates that this
// Object is a "repeater". Basically it means you define the
// first piece(in the case of this VU meter it is 7 pixels wide)
// and it will continue assigning VU meter units to the end
// Until the destination width is reached. Hence LED style
// Skins will only display full LEDs. Destination width is
// defined later in this file.


// Now Come the rest of the destination/placement variables.
// They consist of 2 or 3 variables. They are X,Y,Width.
// As height is already defined. Placement is in relation
// to the MACHINE, not the BMP. Therefore you must do some
// simple math to figure out where an item goes. For example
// If the X,Y co-ordinate of your Effect machine is (300,150)
// Find the point in the BMP you wish to attach your object
// to and then subtract (300,150) from that X and y point
// respectively


// Note that objects are placed at their leftmost point in
// the range. Therefore, if you want to place your panning
// slider, place it at the leftmost point in its "Track", as
// Psycle will automatically center the slide based off the
// Given width.


[End .PSM File]

Likewise the rules still follow for a header file. Here is the object list for that (again, feel free to copy an paste as for the PSM file):

[Begin .PSH File]

// Instructions and coordinates are the same as .PSM files.
// Refer to the PSM file for more info

// Note the 0 in the number source? That's why your numbers all
// have to be lined up, in order. Numbers are repeaters, and
// therefore their source is only defined once. As well, the
// destination co-ordinates are in relation to the background,
// thus if your Background_source's coordinates are (0,30) then
// You must adjust your placement as you did for machines.


// Regarding the digit_0x_dest objects - The X represents the
// digit location you are defining.

[End .PSH File]

About Transparencies - You can define a transparent colour in your .PSM/.PSH files. You will need to know the RGB values in hex. Once you have this info, you can add the following line to your file:


Replace the R/G/B with the hexadecimal value of that colour. Leave the two zeroes at the beginning.

Loading Your Skin And "Accessorizing"[]

So You now have machine skins - It's time to test them with Psycle. First, load Psycle. Once there, go to the Configuration menu, and open the "Settings" dialog. When this opens, it defaults to the "Visual" tab. This is where we load our files.

In the Pattern and Machine frames, there are dropdown lists. If you've named and placed your files properly, your skins should be listed in here. Select your skin from the list. Now's the time to tweak. First, set up your fonts. In machine view, you need to define what size the font will be. You've already defined the location in your .PSM file... When you've done this, you can also set the color, as well as anything else you might need to make your machines fit in. Colour co-ordinate. Add a Background image. Do whatever. You're in charge.

With your Pattern view, you need to match your font to the width of your header. You will need to set the X and Y values for one cell of the pattern view. Once this is done, choose a font and size that fit your new layout. Keep in mind, the screen space required for your columns will never be smaller than your header. If Your header is wider than the column you've defined, the column will be padded with blank space. Pattern view also has Pairs of colours you can choose. This is for gradients. Thus, if you wish the left side to be darker than the right, choose a darker colour on the left column, and the brigter colour on the right.

When you're done with your skin settings, you can save these settings in a "theme", so that you'll be able to recall your values if you accidentally mess them up, or if you want to distribute the theme. Themes are saved in .PSV files.

Hopefully, you now have a new skin which you can call your own, or at least an understanding of the steps it takes to build a skin.