KnobMan/SkinMan Examples

[osiris]

That looks great, matt - much better than previous versions. A question: (and I don't know if I've asked this before), Is there any way to make the background transparent in Knobman? I've made knobs that don't exactly match the GUI I've got, so there's tiny black, outlined squares underneath them. I've tried tweaking the color of th GUI background. Still no good. If this can't be done I'd like to make it a feature request for future versions.

[Limeflavour]

When exporting image choose .png (with alpha) as your fileformat,
the background color automatically becomes transparent.

[WOK]

When exporting image choose .png (with alpha) as your fileformat,
the background color automatically becomes transparent.

And set the background colour in knobman matching to that one you will use for the GUI background.

[Kriminal]

When exporting image choose .png (with alpha) as your fileformat,
the background color automatically becomes transparent.

doesnt the background have to be white tho to be transparent?

[Limeflavour]

When exporting image choose .png (with alpha) as your fileformat,
the background color automatically becomes transparent.

doesnt the background have to be white tho to be transparent?

Nope, works with any color.
As the background isn't part of any layer I guess it's being ignored when choosing a fileformat with alpha channel.

[osiris]

Thanks for the answers. I'll try this. I know there was this option in Skinman, but I saved the knobs in Knobman as .bmp.

[valhallasound]

I'm just learning this stuff myself, but I've been looking at the images of an open source plugin (TAL-Reverb), and the background image has black circles where the knobs will be placed. I finally figured this out, as this will get rid of any aliasing artifacts around the edge of your knob.

In general, you can place a circle on the background image that has the same color as the edge of the knob, but maybe a few pixels wider. Then, you can use your blurring techniques of choice to make the "knob" (which is really the knob sitting on top of the circle) look smoother.

I'm going to dive into Knobman/Skinman design this weekend. A big thanks to the developer of these programs!!!

Sean Costello

[mystran]

I'm just learning this stuff myself, but I've been looking at the images of an open source plugin (TAL-Reverb), and the background image has black circles where the knobs will be placed. I finally figured this out, as this will get rid of any aliasing artifacts around the edge of your knob.

If you alpha-blend an anti-aliased (full alpha channel, say PNG) image on top of a background properly, there's no need to have any black circles in the background. Can be useful if you want to only do color-keying, though you'll need to bake shadows and other semi-transparent stuff to the background for it to work. Or you could do pure additive blending (store the knobs with black background; essentially both components of the blend are pre-multiplied then), and get away without any alpha channels or color keys (again need to bake shadows; not sure if there's much advantage over color-keying though).

edit: well ok, the potential advantage of the pure-additive method is that you can have an area of the knob semi-transparent (you just "semi-black" the background there) but the requirement of such an area to be static (as far as the "alpha" is concerned) limits the usefulness quite a bit

[valhallasound]

If you alpha-blend an anti-aliased (full alpha channel, say PNG) image on top of a background properly, there's no need to have any black circles in the background. Can be useful if you want to only do color-keying, though you'll need to bake shadows and other semi-transparent stuff to the background for it to work. Or you could do pure additive blending (store the knobs with black background; essentially both components of the blend are pre-multiplied then), and get away without any alpha channels or color keys (again need to bake shadows; not sure if there's much advantage over color-keying though).

By the end of the weekend, I hope to understand what you just typed! Right now, I am...what is the right phrase..."graphics stupid."

Sean

[duncanparsons]

sean, the idea of a sentence concerning you containing the word 'stupid' without a negative is rather beyond my ken..

[Leslie Sanford]

If you alpha-blend an anti-aliased (full alpha channel, say PNG) image on top of a background properly, there's no need to have any black circles in the background. Can be useful if you want to only do color-keying, though you'll need to bake shadows and other semi-transparent stuff to the background for it to work. Or you could do pure additive blending (store the knobs with black background; essentially both components of the blend are pre-multiplied then), and get away without any alpha channels or color keys (again need to bake shadows; not sure if there's much advantage over color-keying though).

By the end of the weekend, I hope to understand what you just typed! Right now, I am...what is the right phrase..."graphics stupid."

I think what mystran is talking about with color-keying is choosing a background color for your knobs that is not used by the background image that you'll paint the knob on to.

Then when the knob is painted on to the background, the knob's background color is treated as transparent, i.e. whatever API you use to paint the knob, you tell it which color to treat as transparent.

If you take this approach, you'll have to render ("bake") things like the knob's shadows on to the background image itself rather than as part of the knob image. Also, the color-key approach leads to jagged edges around the knob as it can't be anti-aliased, hence the need for a larger circle (that is anti-aliased) that has the same color as the edge of the knob and is placed behind the knob.

If, however, your knob image has an alpha channel, then there's no need for color-keying. The alpha channel is an additional channel to the RGB channels. It indicates the level of transparency. An alpha channel value of 255 indicating that the pixel is fully opaque and a value of 0 indicating it is fully transparent.

When an ARGB image is rendered, its alpha channel is used to blend it with the background. It's kind of a linear crossfade between the two images:

Code: Select all

c = alpha / 255
v = (1 - c) * background + c * foreground

Images that have an alpha channel can come in a pre-multiplied form in which all the RGB values have already been multiplied by the alpha channel. This can save a lot of multiplications each time the image is rendered.

[mystran]

I would actually suggest you use pre-multiplied blending instead, where the RGB components are already multiplied with the alpha channel and the image (hence called pre-multiplied). The immediate advantage is that you save a multiply at render time (per component, per pixel). The blending simply becomes (with A/R/G/B from 0 to 1, with alpha=1 representing full coverage):

Code: Select all

dest_A = (1-src_A)*dest_A + src_A
dest_R = (1-src_A)*dest_R + src_R
dest_G = (1-src_A)*dest_G + src_G
dest_B = (1-src_A)*dest_B + src_B

This is usually called (pre-multiplied) A over B (or well "src" over "dest") operation. The real advantage of working with per-multiplied values, is that pre-multiplied "over" operator (unlike the regular blending) is associative:

A over (B over C) = (A over B) over C

In other words, if you have 2 transparent layers on top of each other, you can use the exact same blending formula to combine them in advance, before you draw the final result on top of the background (instead of first drawing the middle layer on top of background, and then the top layer on top of background). With the non-pre-multiplied version, the results will be different and you need extra magic to calculate a new (meaningful) alpha channel for the composition before you can blend it again.

Finally there are some other tricks: if alpha is set to 0, but the color channels still have non-zero values, you are essentially doing additive blending. What this means in practice is that your pre-multiplied layer can sort of contain a "linear dodge" component (in Photoshop terms) which can be nice for adding transparent glows if you like that kind of stuff.

Unfortunately PNG got it wrong, and stores the stuff non-pre-multiplied, but it's pretty painless to pre-process images in loader.

Also, some APIs expect pre-multiplied images (because why would they not: it's superior method in pretty much every sense, except for some loss of precision if you need the actual original RGB value for something; usually you don't, but if you do HSL adjustments on the fly or whatever, then you might want them).

Oh, btw, since I'm writing boring technical stuff, I might mention that I recently added bitmap knobs to my plugins (not released yet), and decided to avoid adding PNG loader. I don't need colors for my bitmaps, so I store two grayscale BMPs, load them using standard LoadImage. One is a knob-strip, and one is the alpha channel of a knob-strip. At load time I combine them back into full ARGB (well GDI does the gray->RGB conversion, I just add the alpha channel from the other image). This way they also compress pretty well with the RLE encoding that BMP can do (101 frames of 40x40 images totals of about 150kB data with just the RLE, which is about 25% of the raw ARGB data). With some vector-graphics "spicing up" they look like this (and yeah, the bitmaps are done with knobman; and yeah I know it's pretty dark, that's sort of intentional to maximize contrast; and yeah I'm not an artist):

[mickygemma]

Sorry for this (may be) stupid question, but... how can i upload the knobman file in the forum?

[mystran]

Sorry for this (may be) stupid question, but... how can i upload the knobman file in the forum?

You can't. This forum doesn't do attachments. But what you can do is host it somewhere else, and use the URL-feature to link to that (or for images, use the IMG tag to have them show in the forum itself).

[mickygemma]

Sorry for this (may be) stupid question, but... how can i upload the knobman file in the forum?

You can't. This forum doesn't do attachments. But what you can do is host it somewhere else, and use the URL-feature to link to that (or for images, use the IMG tag to have them show in the forum itself).

Thank you.