Page 1 of 1

Making Bezels, Instruments, Switches etc. Using Skinman

Posted: Thu Jun 29, 2017 12:03 am
by solo86
There seems to be very few YouTube videos regarding how to use Skinman.
I've watched Ralph's "The joy of creating instruments with Skinman" and found it very useful.
There is also a Bezel in the first post of this thread that I thought was very good viewtopic.php?f=16&t=113. However I don't know how 'Bill' created it?
Could someone do a demo (or simple instructions with some examples) of what settings and tools are used in skinman to create the different graphics effects that we would use when creating instruments and Guages etc.
ALso things like how to put transparency and different types of fills etc. to use to achive good effects.
There just doesn't seem to be anything giving these sort of details for SkinMan.
It seems so very powerful when someone who knows what they are doing is using it. Unfortunately that is not me (yet!)

Re: Making Bezels, Instruments, Switches etc. Using Skinman

Posted: Thu Jun 29, 2017 2:18 am
by JackZ
Well Peter, in fact Skinman is not that complicated, apart from the Bolean system.

First, what one has to know, is that it is a vector based drawing software.
So every object is indépendant from each other, and its properties can be changed anytime.

Second, the tree view is very important, as it displays the order into which each object will be displayed, the topmost one being the "farthest", i.e. the object being drawn first, then overlayed by any subsequent object. So, if you want to create a simple gauge with a needle, your needle object has to be positioned after the bezel itself in the tree view to be visible.

You can add as many levels as you like, and more importantly, you can modify the objects display order in the tree view by clicking and dragging the object's name in the tree view.

After a while you'll end up with dozens of objects in the tree view. To get things sorted, you can use two or three tricks:
1- Give to some of the objects/groups a meaningful name in the tree view (select the object then press F2). For example, instead of a generic "line", a name such as "Yellow_needle" is more meaningful when you have dozens of objects.
2- group your objects by logic: say your gauge's needle is comprised of three objects: a line, a shape and a center axis. Select the three objects in the tree view with your mouse (shift+click), then choose Group in the Edit/Primitive menu. The three objects will be grouped in the tree view and a small + sign will be added, so you can collapse/expand the group in the tree view by clicking on this +/- symbol. Here again give at least to the first object of the group a meaningful name.
You can then move the whole group at once by clicking on it in the tree view, then moving the group with the keyboard arrow keys
3- there are three clickable dots in front of each object''s name in the tree view: though I don't know what's the use of the second one, the first one (the small eye icon) is for the visibility of the object OR the group if you've created one.
The third dot (a padlock icon) "locks" the object/group on the screen, so it can't be inadvertently moved if you ever click on the object area in the drawing window.

As for the properties tab, the best advice I could give is to start experimenting. Create a single object such as a rectangle, then play with the drop shadows, one parameter after another, and see what it does. A hint: the "Alpha" setting sets the transparency of the object, from 100%(fully opaque) to 0%(transparent). The Master Alpha parameter is related to the whole object, while the other Alpha parameters relate to some parts of the objects, namely the outline or the fill colors.

There are dozens of parameters available, so it's almost impossible to talk about each of these, but if you are more specific, we can try to help you on this very point.

As for the drop shadows, it adds some sense of depth to your objects. To be realistic NEVER change the standard angle direction (-45) of the drop shadow. This is because the brain is used to recognise shadows coming from a "sun" located from the northwest position(-45 degrees). If you ever change the direction, your brain will interpret incorrectly the depth of the object, and your object will seem to be "weird".

To add a drop shadow to an object, simply add some density to the 1st shadow dialog parameter (forget about the second shadow, unless in special cases such as simulating night lighting), I found a density of 60% suitable in most cases. The sense of depth is given by the offset parameter, the greater the offset, the farther the object seems to be from the background. Be warned that it is a 2D trick only to simulate thickness, so don't go over an offset of 10 to 20 to get appropriate results.

Here's a "quick and dirty" sample instrument, so you can have a look to get the points I exposed. Simply unzip the attached file and open it using Skinman
I advise you to browse also the AM forum, as there is already some interesting posts on Skinman.

Hope this helps.


When I'll have the time, I'll set up a step by step tutorial for creating a simple engine gauge for example.

Re: Making Bezels, Instruments, Switches etc. Using Skinman

Posted: Thu Jun 29, 2017 5:18 pm
by solo86

Thanks for that. It's a good start and has explained some things to me that I was not aware of.
I have been playing around with the various values in SkinMan and here are some of the results I created.


I am getting close but 'no cigar'. I was trying to create the "Test Guage - Bill.jpg" image in Test Guages 1,2 and 3.
But I just could not get it close enough. Some of the values that I played around with did not seem to make much difference to the image (or I couldn't see where!).
Bill's guage seems to have the bezel just right but I couldn't seem to replicate it with the settings I used.

The Trim Guage I made seemed ok.

I also used an image of a screw head but I don't know how to make the white background transparent so the white rectangle background of the screw head shows on the screw head on Test Guage 3 in the top left corner.
How do I make the white background transparent?

So a good start and I would love to see some more of other users tricks & tips using SkinMan and creating Instruments and Guages.
Especially some YouTube videos showing the creation process they used.

I look forward to it.


P.S. - I don't know about the SkinMan 'Boolean' system at all...!

Re: Making Bezels, Instruments, Switches etc. Using Skinman

Posted: Thu Jun 29, 2017 5:42 pm
by JackZ
To have an image with a transparent background, in Skinman you have to use the export function of the file menu and choose the PNG 32bits format with ALPHA Channel.

ALPHA Channel is used for storing a transparency information for each pixel of the image file, including colored or semi transparent (Master Alpha set to 50% for example).

That way the white background of the workspace in Skinman is registered as a 100% transparent color in the PNG format. If you ever create hollow objects such as a bezel ring, only the ring will appear, without the white background. The same applies to you screw image.

A colored pixel with an alpha value of 50% will mix its own color with the background color underneath when displayed in AM, that is the trick I used with my semi-transparent screws I posted about somewhere in the forum.

PNG With ALPHA is the recommended format to use in AirManager, the JPEG and BMP format do not feature this extraneous transparency information.

As for your bezel, if you absolutely want to recreate Jim's bezel, why don't you reuse its original image file, create a hole in it using the illustrated method I described here viewtopic.php?f=16&t=474 , save it in the format we discussed and add (via the img_add() function) this hollow bezel in your code AFTER your background? The bezel will look exactly like you want.

But to be a bit picky, remember what I said about shadow direction? This applies to lighting as well! Since the "virtual sun" is conventionally located from above and the northwest position relative to the lighted object, the Northwest part of the bezel should be lighted, while the southeast part should be casting shadow (forgive me I'm an architect :P ).

You can try visually this with a simple desktop lamp and whatever plastic ring you may find: Place the ring on a white surface, then experiment with the lamp position, you'll quickly figure out the lighted parts of the ring and the parts which are casting shadow or are not lighted at all.

In Bill's Bezel the lighted part of the Bezel is the top, so I suspect he played with the angle parameter, probably set to 0 instead of -45 as it should be.

My ten cents!

(Nice work by the way)

Re: Making Bezels, Instruments, Switches etc. Using Skinman

Posted: Thu Jun 29, 2017 7:54 pm
by solo86
Thanks Jacques.
I'll give that a try.

Re: Making Bezels, Instruments, Switches etc. Using Skinman

Posted: Thu Jun 29, 2017 8:30 pm
by solo86
The screw head image is a .png.
How do I remove the white background and make it transparent?
Can I do that in SkinMan or do I need to use a different package such as Paint, Gimp or Photoshop?
I've attached the file but I don't know how to make it downloadable like Jacques attached file?
Untitled.png (2.2 KiB) Viewed 2544 times

Re: Making Bezels, Instruments, Switches etc. Using Skinman

Posted: Thu Jun 29, 2017 9:07 pm
by JackZ
Skinman can be the perfect tool for this if used properly.
Simply use the method described in detail here:

In Skinman, on an empty background create an "image" object comprised of your jpeg image (the screw) file.
For this use the "image" icon tool (a page), then draw a square, Skinman will prompt you for the name of the image file to be loaded.

Then create and overlay a circle object that covers exactly the diameter of the screw image to be kept. The color of the circle is of no importance, but I advise you to set its transparency (Alpha) to 50% to precisely see what parts of the image the circle covers.

Arrange then in the tree view both objects names (the image and the circle) so that a dependency exists (see the post I mentioned earlier for a pictorial hint on how to do that), the circle being the "child" object of the image object, for the Boolean operation to be performed.

Then select ONLY the circle and set its operation mode from "Normal" to "Shape*"(Star is for multiply). The white background of the screw image will disappear.

Basically what this Boolean operation does is that a pixel of the parent object is kept only if it belongs to both original objects at the same time, the "parent" object being the jpeg /png image in our case.
Hence only the part of the jpeg image covered by the circle is kept as a result, so you end up with the screw image only, without any surrounding background.
Save the result using file/export image and choosing the "png 32 bits with alpha" format and VoilĂ !

Boolean operations are very powerful.
If you want to remove the center of Bill's instrument for example, in order to keep the bezel contour only, the same process applies, except that the Boolean operation to be performed is Shape-(minus for substract).
This time, the whole surface covered by the child object (the circle) will be removed from its parent object, creating a hole as result.

Once you get the grip of it, you can create very complex shapes to be used as child (the real term is "operator", but child is graphically sound since there is a dependency in the tree view). The operator can itself be a result of a previous Boolean operation, the resulting shape being used to affect the final parent shape.


Re: Making Bezels, Instruments, Switches etc. Using Skinman

Posted: Fri Jun 30, 2017 11:22 am
by JackZ
As for your Bezel, if you want to add a sense of depth to it, you can play with the emboss parameter.
Don't touch (as explained before) the -45 angle parameter, and simply play with the Depth(border) and Depth(Fill) parameters.

These parameters can be negative, and are very sensitive, the values should be kept small, so I advise you to select a parameter with a mouse click, then change each parameter one by one using the mouse wheel.
That mouse wheel method allows you to increment/decrement the selected parameter with a step of 1 unit, so you can see visually the effect applied.

If you set a negative depth value for the Depth(border) parameter, you will create some kind of engraving, like an emboss.
Once again, experimentation is the key.