# Making Transparent Labels



## Big Bob (Jan 22, 2009)

*Introduction* 

You may have run into a situation, when adding a custom skin (performance view) for an instrument, where you would like to add some text labels whose background is transparent. Normally, all UI controls sit ‘on top’ of your skin and thus ‘cover up’ the view of your skin in that area. However, it is possible to make the background rectangle of labels ‘transparent’ so only the text itself will cover up your skin. The process to be described only works for one-unit-high labels (but they can be of any width).

I don’t know if anyone else used transparent labels previously but the first time I saw them being used was when Nils’ did the control panel for Scarbee’s Black Bass. That instrument has a custom skin (containing a picture of the bass’s fret board) and uses transparent labels so that text characters can indicate note positions dynamically (without the label’s background covering up the pix). Recently, I notice that the Prominy Guitar also uses transparent labels for a similar purpose. Perhaps you have seen one or more of these instruments and have been wondering how you could do the same thing?

It would be easy to make transparent labels if the KSP had a function call that allowed us to set the background color of labels (and conveniently included ‘transparent’ as one of the color choices). If such a *set_color(*) function exists, NI hasn’t disclosed it (at least not to me :( ). But take heart, even though it’s more difficult than calling a function, you can still make your labels transparent if you have a capable photo editing program and are willing to expend the necessary effort. Thus, perhaps the title of this post should be ‘Transparent Labels the Hard Way’ :lol: . And, since this post is a bit lengthy, I’m going to divide it into two parts. The first part is this introduction plus a little discussion of the attached demo files. The second post will contain the theory and a procedure you can use.

*The Demo Instrument*
To illustrate the kind of thing you can do with transparent labels, I’ve attached an empty, ‘default’ K2 instrument. For its performance view, I took one of my full-panel SIPS skins and added a fret board pix (very similar to that of the Black Bass). To see and examine this instrument, simply unzip the attached file and put the .nki and the .tga files together in some convenient folder. Then, simply load the .nki into either K2 or K3.

For the 1st and 6th rows, I used 6 separate, 1x1 labels and filled them with text so you can easily see (in performance view) where text can and can’t be placed. For the 4 middle rows I used a mixture of wider labels to illustrate the kind of configurations that are possible. You can easily see all the labels and how they are laid out by clicking on the Wrench and exposing the KSP’s control panel.

There are pros and cons to using a number of labels side by side versus using wider labels. For example, using 6 labels in a row produces ‘dead’ zones between the labels where you cannot display any text. Using a single 1x6 label avoids these dead zones but it is more difficult to control text alignment with your graphics over such a wide space (approximately 90 characters with a variable width font to contend with).

My next post to this thread will discuss the mechanism we can exploit to produce transparent labels as well as a step by step procedure you can use to accomplish it. 

To be continued …

Bob


----------



## Big Bob (Jan 22, 2009)

*Transparent Labels (Part 2)

Theory* 
Labels that are taller than one unit, always display with a near-black (63,63,63) background and a fixed text color (Near Cyan for K2 and White for K3). However, you may have noticed that one-unit-high labels have a background color that depends on the colors in your performance view skin. Specifically, I have determined that the pixels in the label’s background rectangle are replaced by a specific function of the corresponding pixels in your performance view skin. The RGB channel values are related as follows.


```
Red(Label)    = Red(Skin) / 2 – 1     (clamped to zero)
Green(Label) = Green(Skin) / 2 –1   (clamped to zero)
Blue(Label)   = Blue(Skin) / 2 – 1     (clamped to zero)
```

In other words, the label area is ‘darkened’ by reducing the RGB values by just a bit more than a factor of two. For example, if your skin is a solid color where RGB = 231, 180, 90), the label’s background rectangle will be a solid color with RGB = (114, 89, 44). Of course it is not necessary that the rectangular area be a solid color. Rather, it can be any sort of bitmap pix because the above formulae are applied on a pixel by pixel basis. We will exploit this behavior to develop a technique for rendering labels transparent on our performance view skins.

*Overview of the Process*
The basic procedure consists of making a mask for the desired label configuration so that we can use our photo editing software to pre-darken all areas of our performance view skin *except for the label areas themselves*. Thus our skin will be much brighter in each area to be occupied by a label but, when K2/3 predictably darkens the skin in the label areas (per the above formulae), the labels will then blend right in with the rest of the skin.

*Procedure*
The specific details of how to do all this will of course depend to some extent on your photo editing software. However, I will describe the process using PhotoShop and hopefully you can translate as needed to accommodate your software.

1. Make a temporary control panel containing only the labels to be made transparent. Be sure to position the labels where they are to be in your final version of the script and temporarily set their text to null (ie “”). Then, take a screenshot of this performance view and save it to a file.

2. Now open the PhotoShop file that contains the components of your desired skin and 'import' the screen shot (you just took) as a new layer. This new layer must be precisely aligned so it might help if you use some kind of registration keying marks.

3. With only the screen-shot layer active, ‘select' all the labels’. This can be done most easily by simply shift-clicking in the center of each label’s area with the Magic Wand tool (be sure to turn off anti aliasing to avoid feathered edges). Now, fill the selected label rectangles with solid White and then invert the selection and fill the surrounding areas with solid Black. This layer will now become the Label Mask with White where we want no change and Black where we want to darken our skin.

4. Be sure the Label Mask layer is above all the layers you want to effect by it and then set its *Opacity to 51% *and its mode to *Multiply*. This will cause all the black-mask areas to be darkened comparably to what the label areas will subsequently be darkened by in performance view. The reason for using 51% (instead of 50%) is to account for the extra minus one that K2/3 uses in its darkening formulae.

5. If you did all this right, the areas occupied by the labels, will remain at their original brightness while the rest of your skin will be darkened. Now, choose ‘save a copy’ to save the skin as a .tga file.

Not quite as easy as calling *set_color(*) would be but it’s not too bad once you get the hang of. :wink: 

Maranatha

Bob


----------



## gregjazz (Jan 22, 2009)

Thanks so much, Bob! Perfect timing!


----------



## kotori (Jan 22, 2009)

Hello Bob,

I guess the technique is out in the open now then. :D 
I've seen some questions here and there on how to do this but I have not really felt it possible to answer without being a bit disloyal to Scarbee. Otherwise I always try to share information any time I can. 

Anyway, I hope people will use this information to create interesting effects in their scripts. With truly transparent fields one could have a brigther and less dull background, so there are some limitations in the current versions of Kontakt.

Cheers,
Nils


----------



## polypx (Jan 22, 2009)

Very cool! Thanks Bob.


----------



## gregjazz (Jan 22, 2009)

kotori @ Thu Jan 22 said:


> I guess the technique is out in the open now then. :D
> I've seen some questions here and there on how to do this but I have not really felt it possible to answer without being a bit disloyal to Scarbee. Otherwise I always try to share information any time I can.



Yeah, until now it was a pretty exclusive technique, used only by your Black Bass and then later Prominy's guitar. So it's understandable why the technique wasn't publicized--it's a cool trick!

I've been trying to figure out the formula for quite some time, but never got the 51% opacity part.

Hopefully now that the technique is out in the open, people will be using it for new, creative ways of expanding Kontakt.


----------



## Big Bob (Jan 22, 2009)

> I guess the technique is out in the open now then.
> I've seen some questions here and there on how to do this but I have not really felt it possible to answer without being a bit disloyal to Scarbee. Otherwise I always try to share information any time I can.



Hi Nils, Yes I sort of figured the only reason you didn't respond to the occasional query about this is that your hands might be tied by ethics (if not a confidentiality agreement :| ) so, I don't blame you at all for not 'spilling the beans earlier'. But, we'll still give you the credit for this idea, I merely re-invented your wheel. :lol: 



> With truly transparent fields one could have a brigther and less dull background, so there are some limitations in the current versions of Kontakt.



That is one of the drawbacks to doing it this way. However, I should mention that only the area around the labels need be on the 'dark side' :lol: . If we use a skin design with a 2-tone theme, the outer stuff (logos, etc) can be as bright as we want as long as we include those areas in the White part of the multiply mask.

Hi Greg,


> I've been trying to figure out the formula for quite some time, but never got the 51% opacity part.


The formula itself was quite easy to deduce but finding a wòÂV   ’¯wÂV   ’¯xÂV   ’¯yÂV   ’¯zÂV   ’¯{ÂV   ’¯|ÂV   ’¯}ÂV   ’¯~ÂV   ’¯ÂV   ’¯€ÂV   ’¯ÂV   ’¯‚ÂV   ’¯ƒÂV   ’¯„ÂV   ’¯…ÂV   ’¯†ÂV   ’¯‡ÂV   ’¯ˆÂV   ’¯‰ÂV   ’¯ŠÂV   ’¯‹ÂV   ’¯ŒÂV   ’¯ÂV   ’¯ŽÂV   ’¯ÂV   ’¯ÂV   ’¯‘ÂV   ’¯’ÂV   ’¯“ÂV   ’¯”ÂV   ’¯•ÂV   ’¯–ÂV   ’¯—ÂV   ’¯˜ÂV   ’¯™ÂV   ’¯šÂV   ’¯›ÂV   ’¯œÂV   ’¯ÂV   ’¯žÂV   ’¯ŸÂV   ’¯ ÂV   ’¯¡ÂV   ’¯¢ÂV   ’¯£ÂV   ’¯¤ÂV   ’¯¥ÂV   ’¯¦ÂV   ’¯§ÂV   ’¯¨ÂW   ’¯©ÂW   ’¯ªÂX   ’¯«ÂX   ’¯¬ÂX   ’¯­ÂX   ’¯®ÂX   ’¯¯ÂX   ’¯°ÂX   ’¯±ÂX   ’¯²ÂX   ’¯³ÂX   ’¯´ÂX   ’¯µÂX   ’¯¶ÂX   ’¯·ÂX   ’¯¸ÂX   ’¯¹ÂX   ’¯ºÂX   ’¯»ÂX   ’¯¼ÂX   ’¯½ÂX   ’¯¾ÂX   ’¯¿ÂX   ’¯ÀÂX   ’¯ÁÂX   ’¯ÂÂX   ’¯ÃÂX   ’¯ÄÂY   ’¯ÅÂY   ’¯ÆÂY   ’¯ÇÂY   ’¯


----------

