Author Topic: How to make mask files for your skin with freeware?  (Read 10048 times)

Muxson

  • Posts: 39
Controlling the color palette of a mask file can be a challenge.
In some picture editing programs you cannot easily control the palette, or not at all.
But if you do it right from the start, it is much easier.

Let me share some of my experience with freeware.
Your input about other programs are welcome.

IrfanView: You can see the palette and edit entries but not rearrange the colormap (i.e. changing a color in the palette will also change the corresponding pixels in your file but you cannot reassign pixela to a new palette index). Not very useful for skinning. It is possible to create an indexed .bmp file with a controlled palette though. See below for details.

Paint.net: Nice and easy to use program. Very intuitive. Has layers, transparency and many plugins available. But forget about controlling the indexed palette (not to be confused with the drawing colors palette). There is even no tool to view the indexed palette. You always draw in full RGB colors (24 bit). However, I do all my skinning with it, including designing the masks. But while exporting to an indexed .bmp (8 bit) the colors are indexed automatically, populating the first index positions with the colors present in your picture and the rest with black, up to the 256 color indexes. No options.

Gimp: Pretty advanced for a freeware but not very intuitive. Maybe if you are familiar with Photoshop, I don't know. Good documentation available though. I'm using it only because it is the only freeware I found where you can modify the color palette order. You can also export and import palettes but I let you workout how... See more details below.

MS Paint: As DelayS said in his/her post, it keeps the indexed palette as-is, sometimes. But I was not able to reproduce that condition. So this doesn't work for me... Any other experience out there?
Standart MS Paint contains everything needed to create a mask, the best program for this I have not found, the more it is the only program that keeps the BMP in the proper format. It is only necessary to use a ready example file masks and rebuild it under their size.

So, as you see it is a bit of a fight to generate these masks correctly using Freeware.

Here is my suggested procedure:
Go forth and draw your skin with you favorite editing software.
Make sure you draw your mask using colors you find in an example file from the skinning kit (or any other existing mask) or use my attached palette_mask_muxson.bmp (look in the zip file attached).
As you can see in the also attached palette_colormap_muxson.png, the color samples are organized in the same order as in the indexed palette. That should help you select the right color for every button.
Once you are ready with your mask, you need to save it with the correct palette order. If you cannot do that with your editing software, do one of the following:

With IrfanView:
 - open the mask example you used as reference for your own masks
 - save the palette (Image>Palette>Export Palette...)
 - open your new mask
 - load the palette you just exported (or use palette_mask_irfanview_muxson.pal which is the one for palette_mask_muxson.bmp attached here for your convenience)
 - save your mask and voilą!
Note: if you open a reference mask and then past your new mask onto it, the palette will change to the one of the new mask! So you must then import the correct palette again.

With Gimp:
 - open the mask example you used as reference for your own mask
 - drop-in your mask from you own program via the clip board (ctrl+C, ctrl+V) [Unlike with IrfanView, the palette is not modified by this operation]
 - if you want to can view and edit the colormap at this point (Colors>Map>Rearrange Colormap...)
 - export your mask making sure you tic the "Do not write color space information" option in the Export Image>Compatibility Options window.

Alternatively, you can also play with palettes in Gimp.
You can even convert a 24 bit .bmp into an 8 bit but that is where you need to learn about Palettes and Colormaps
The palette corresponding to my example is also attached (palette_mask_muxson.gpl).

So, here you go...
I hope this is helpful.

I'm curious to learn how you guise made your skins... Did you also have to fight?

Regards,
Muxson
« Last Edit: 3 Jan '14 - 14:14 by Muxson »

raina

  • Posts: 1163
Re: How to make mask files for your skin with freeware?
« Reply #1 on: 9 Oct '13 - 12:03 »
I'll have to remember to try Grafx2 the next time I'm skinning.

Muxson

  • Posts: 39
Re: How to make mask files for your skin with freeware?
« Reply #2 on: 9 Oct '13 - 17:10 »
Here is another (tweaked) version of my palette.

See palette_mask_muxson2.zip attached.

 ;)

xaos

  • Posts: 172
Re: How to make mask files for your skin with freeware?
« Reply #3 on: 3 Jan '14 - 05:50 »
... just because ... how I make my masks ... and skins in general ..

Palette Suite ... strictly for manipulating palettes.

Irfanview .. importing the palette, and saving the image.

A preferred image editor that is capable of working in layers .. the ones already mentioned work well.

I build each panel in layers .. background - frame - buttons - gradients - mask pieces ...

I use the xmp-skin.txt from the skinning kit as reference .. with either a pre-made/exported palette file open in Palette Suite .. or a previously saved mask file with it's palette open in the 'Edit Palette' view in Irfanview; both will show the index number and RGB value of the color to which each number in the .txt file refers to.

The mask layer of a panel contains only the referenced colors, shaped and placed as necessary, for the buttons and other active elements of that panel, with the remainder of the layer transparent.

When I'm ready to save a version of the mask portion of the panel ..
I combine it with a solid color background layer, (usually palette entry 0, although any of the others that don't correspond to a number in the xmp-skin.txt file would work too) ..
I copy that from my editing program and paste it into Irfanview ..
I then import my pre-made palette .. "Image -> Palette -> Import Palette" and save it.
(always remembering to undo the combining of layers before saving the work version of the file in the editor.)

The same approach is used when I'm ready to save a version of the panel I'm working on with the exception of importing the palette (not needed) ... I combine the layers needed to make it one piece, copy it from my editing program, paste it into Irfanview and save it.

All of this avoids the need to worry about the format in which the work file is saved, as the palette for import always stays the same, and the colors on the mask layer are referenced from it ... any previously made mask from which a palette was exported can be used as the base for another skin by using the exported palette as reference and at import.

All of the skins I've made use the same palette for the masks of the panels, and each mask/skin has been built from the one before it.

.. sorry for any repetition .. that's very the basics of how I do it.
« Last Edit: 3 Jan '14 - 08:05 by xaos »

Muxson

  • Posts: 39
Re: How to make mask files for your skin with freeware?
« Reply #4 on: 3 Jan '14 - 14:45 »
Thanks xaos, that is interesting.

I had a look at Palette Suite.
The latest version is from 2009! :(
Even though it does not mention IrfanView in the list of supported SW, it does open IV created .pal . I didn't try to save into that format though.
It offers to modify a palette entry but not to rearrange the palette. IrfanView does the job as well.

The only freeware I found so fare that offers to rearrange the palette is Gimp.
But if you use a known palette (like the one I published), you don't need to bother.

Cheers!

« Last Edit: 3 Jan '14 - 17:04 by Muxson »

xaos

  • Posts: 172
Re: How to make mask files for your skin with freeware?
« Reply #5 on: 3 Jan '14 - 22:58 »
Palette Suite, as I first used it, was purely for creating a custom palette, after that I've only ever used it for opening the palette file for reference. The file type I saved as was JASC Palette (*.pal) (importable by Irfanview)

When using the index numbers referenced in the xmp-skin.txt alongside an open palette file, one can use the color from each of those places in the palette to draw the element in the editor.

For example .. in the xmp-skin.txt it says the stop button is index 7 on the palette ... with the palette file open in Palette Suite, selecting index 7 will give the RGB value for that color .. those values can then be used to create that color in the editor and used for the stop button .. all of the masks for each skin I've made share the same palette, and the color in that position is RGB(128,0,255) .. it doesn't matter where I put the stop button, it's always that index, and that index is always that color.

Copying from the editor and pasting into Irfanview preserves the colors, and importing the palette ensures that their indexes line up with the xmp-skin.txt reference.

The method should work with any palette, and likely with any program capable of importing a palette, and the workfile in the editor can be saved in any format without regard to the palette. Trying to re-arrange a palette after the fact or during the fact only makes things more confusing.

(yes, lots of repetition, hopefully more clear)
« Last Edit: 4 Jan '14 - 00:25 by xaos »

HellMan666

  • Posts: 61
Re: How to make mask files for your skin with freeware?
« Reply #6 on: 25 Apr '14 - 02:51 »
bit confused folks, need clarity :-)

ok, correct if i'm wrong

1. either create my own colour palette or use one already within a theme (i want to create my own based on blacks, dark greys, reds, oranges, ect) what's the best app to do this, i have downloaded all the recommended apps in this topic,

2. i then can design my skin starting with main_panel.bmp, so i either create my own here and save as main_panel.bmp or use a ready made one?

3. i'm going to fix the play-list to the main panel, just for quickness, will keep an eye on sizes, once this is done, do i use the colour palette to give it a dark theme, or is the palette more for buttons, basically if i want to create a dark gloss main_panel with rounded edges, maybe a bevel as well do i need to strictly adhere to a colour palette for this effect or is the palette more for continuity?

4. am i right that the mask is were you create buttons, sliders, confused a bit here, if i create a main_panel.bmp, glossy black effect, am i adding buttons here or adding thin lines to define separate sections, so if i attach a play-list to main, i could make a thin dark red ridged line to define main from playlist

hope that makes some kind of sense, just trying to figure out a logical order to do things, so i first thought of making a dark effect palette, then make main_panel.bmp, but unsure when buttons are added to the theme or skin effects like gloss, bevels, emboss, text, ect

:-)

xaos

  • Posts: 172
Re: How to make mask files for your skin with freeware?
« Reply #7 on: 25 Apr '14 - 04:16 »
If you're just going to change the colors of a skin and it's buttons/other pieces, you can edit any of the image files other than the mask files without having to worry about a palette. They're just regular bmps.

If you want move buttons, change the size of a panel, or the location of some part of the display, or create your own skin from scratch, then you'll need to worry about a palette and the mask files.

The minimum required files for the skin to load are ..

'panel_main.bmp & mask_main.bmp' : 'panel_list.bmp & mask_list.bmp' : 'panel_output.bmp & mask_output.bmp' : 'info_head.bmp & mask_info.bmp' : 'info_head_list.bmp & mask_info_list.bmp' ... and the 'skinconfig.txt'

Also, each panel and it's mask file should be the same dimensions.

(can/will/may/took too long to decide what to post/expand on this as needed)
« Last Edit: 25 Apr '14 - 04:46 by xaos »

HellMan666

  • Posts: 61
Re: How to make mask files for your skin with freeware?
« Reply #8 on: 25 Apr '14 - 04:29 »
that will do for starters xaos, cheers, i'll stick to colouring for now, then up the ante  ;D

xaos

  • Posts: 172
Re: How to make mask files for your skin with freeware?
« Reply #9 on: 25 Apr '14 - 04:48 »
.. oops .. was editing while you responded .. there might be a bit more there .. otherwise, hope that helps and will try to be helpful with the rest when you get to it

Muxson

  • Posts: 39
Re: How to make mask files for your skin with freeware?
« Reply #10 on: 25 Apr '14 - 08:08 »
.
« Last Edit: 25 Apr '14 - 08:23 by Muxson »

Muxson

  • Posts: 39
Re: How to make mask files for your skin with freeware?
« Reply #11 on: 25 Apr '14 - 08:22 »
Hi guys,

I think some clarification would be helpful here.

The word "palette" is used for two different things:

   - The drawing color palette (50 shades of gray and what ever you like...) to draw the VISIBLE part of your skin, the panel.

   - The indexed color palette or colormap used within an 8-bit BMP file. This is not visible (to the user), it is for the mask.

This post is addressing the challenge of managing the color index in mask files.
With that in mind, start reading the first entry and light will be shed on your work!  ;)

If you still don't know what I'm talking about, it is because you didn't try to make/modify a mask yet.
Do it and you will feel the pain then...

Hope that was somewhat helpful.

Cheers!

HellMan666

  • Posts: 61
Re: How to make mask files for your skin with freeware?
« Reply #12 on: 25 Apr '14 - 10:32 »
cheers for the responses lads, appreciated as always, i had a wee tinker with the neutron skin, just made it black, dark red etc, i can now appreciate the work you skinners do a lot more, when i read up on masks and palettes or colour maps my head was already in a tangle

http://i1132.photobucket.com/albums/m580/bassmaniac1903/e9dae0f5-850a-4c11-8542-da44eb3c6cb3_zps13b24634.png

made a few errors, deleted too much of the grey that gives it a more 3d look, but will fix it, the size is a small player, is there a config files i can alter to change text colour/font, if i want a medium size player, do i have to resize all the images, so i need it twice as big, i need to scale everything up by 50%

had another play-about, looks a bit better now than the one above, i will keep going, till the day comes, when dark skins are no more the minority ;-)

http://i1132.photobucket.com/albums/m580/bassmaniac1903/neutrondark_zps6a6874bb.png
« Last Edit: 25 Apr '14 - 16:27 by hellman666 »

xaos

  • Posts: 172
Re: How to make mask files for your skin with freeware?
« Reply #13 on: 25 Apr '14 - 11:42 »
The "skinconfig.txt" would be the file where the font sizes, types and a whole bunch of other settings can be found and changed. Most should have a bit of a description included beside them in the file.

If you open the "mask_list.bmp" and measure the height of one of the longest bars of color .. say the top green one, that's the largest that the font can be and still display properly on the playlist panel, and the extend playlist window and library.

Yes, you would have to resize/scale all the files up. Unfortunately, doing that with the mask files can cause a bit of a headache if you're not familiar with how they work.

(the lack of full description for how the mask files work and why they have to be the way they are is due to it being hard to explain but extremely simple once understood ... at least that's how it went when i first started)

.. some of the red in the screen shot seems a bit bright, but otherwise looks pretty good.
« Last Edit: 25 Apr '14 - 11:49 by xaos »

HellMan666

  • Posts: 61
Re: How to make mask files for your skin with freeware?
« Reply #14 on: 26 Apr '14 - 01:57 »
so its slowly improving me thinks - http://i1132.photobucket.com/albums/m580/bassmaniac1903/dark1_zps5c253378.png

yeah the reds went super-bright because i used photo-buckets enhance tool, but it was a bit bright even before i did that :-)

xaos

  • Posts: 172
Re: How to make mask files for your skin with freeware?
« Reply #15 on: 29 Apr '14 - 23:22 »
it takes work? .. practice? .. looks decent.  .. any luck figuring out the masks?

HellMan666

  • Posts: 61
Re: How to make mask files for your skin with freeware?
« Reply #16 on: 3 May '14 - 01:47 »
not tried yet, but i know i'll need to face it soon, colouring in gets boring ;-) but it does confuse me a bit....

xaos

  • Posts: 172
Re: How to make mask files for your skin with freeware?
« Reply #17 on: 6 May '14 - 07:18 »
Masks
---------------------
XMPlay has each button and text area assigned to a number... ie. the Play/Pause button is always #6

An indexed palette has 256 numbered slots, 0 - 255 , that can each contain a color. ...When XMPlay reads #6 from the palette, it then knows what color is associated with it.

The mask image is the map that lays out where those colors go. ... Where-ever that color is found, XMPlay then knows that that's where the Play/pause button is supposed to be.

(that's also why the mask images look so simple, they only define where the buttons are and what shape a clickable area or text display area is )
--------------------
Importing or using a pre-made palette means you need to use the color it has in that slot for that button.

Creating a custom palette just means that you decide what color each slot contains, then use those.

The reason for needing to save a file as an " Indexed RGB " or 8-bit bitmap is to make sure that the index is saved with it, otherwise XMPlay wouldn't be able to tell what color #6 is.

... whatever color is in the #6 slot, XMPlay will recognize as the Play/Pause button.

-----------------
hope that makes sense.

HellMan666

  • Posts: 61
Re: How to make mask files for your skin with freeware?
« Reply #18 on: 24 May '14 - 17:36 »
xaos, nice explanation, now i get it, so in my case, as i like dark shiny skins, i should design my own colour palette with that in mind and maintain the #6 etc assigned numbers as they are, only altering the colours?

basically my pallet will be dark reds, black, greys, orange, yellows, white, gold  ;D

xaos

  • Posts: 172
Re: How to make mask files for your skin with freeware?
« Reply #19 on: 24 May '14 - 21:10 »
The palette applies 'only' to the mask_* files.

definition -> key -> map (visual representation of size, shape & location)

XMPlay button # -> palette slot # + palette slot color -> mask_* image

Play/Pause = #6 -> palette slot #6 = pink -> pink = Play/Pause button here

You layout the map with the colors from the key.
----------------------------------------------
You can design all the other graphics for your skin without worrying about a/the palette. They are the detail overlays for the map.
« Last Edit: 24 May '14 - 21:58 by xaos »

HellMan666

  • Posts: 61
Re: How to make mask files for your skin with freeware?
« Reply #20 on: 10 Jun '14 - 18:03 »
ok, just when i thought i had it lol

Its starting to make much more sense now, if i use GIMP as my image editor, would you suggest a more basic app that can create the skins/shapes required?

Summary - what list of apps would you recommend i use for ease of use and getting the basics in place? GIMP can be a bit challenging and has a steep learning curve, so keen to have something easier to crack on with. I would appreciate your suggestions on what software would be best for the job... big thanks in advance \m/

xaos

  • Posts: 172
Re: How to make mask files for your skin with freeware?
« Reply #21 on: 12 Jun '14 - 05:31 »
can't really recommend anything, but these links may help find something a little easier to use ...

http://www.techsupportalert.com/best-free-paint-program.htm
http://www.techsupportalert.com/best-free-digital-image-editor.htm

.. most of the benefits of the 'fancier' programs are the tools and/or layer capabilities. otherwise any basic image editor that can save as bmp or png is as capable as you are of using the tools it has to create an image.
« Last Edit: 18 Jun '14 - 20:33 by xaos »

saga

  • Posts: 2179
Re: How to make mask files for your skin with freeware?
« Reply #22 on: 12 Jun '14 - 06:49 »
I haven't used it specifically for XMPlay skins, but in general, PhotoFiltre is a nice little free tool. Version 7 got layers but is still simple to use, but you may also stick with version 6, which was the last version without layers.

karbock

  • Posts: 10
Re: How to make mask files for your skin with freeware?
« Reply #23 on: 18 Jun '14 - 13:43 »
If you want to edit images with indexed palettes, try mtPaint (http://mtpaint.sourceforge.net/download.html).
So far, I've used it several times to adapt existing skins, without a hitch.

Previous attempts to do the same with Gimp or PhotoFiltre didn't work.

As you can guess by the hosting site, mtPaint is freeware. It's available for both Windows and Linux.

HellMan666

  • Posts: 61
Re: How to make mask files for your skin with freeware?
« Reply #24 on: 26 Jun '14 - 07:51 »
cheers folks, have downloaded a few of the suggestions including the last two, will be a while yet before i start getting right into this as my new job takes up a lot of time, but it will give me something to do on my days off \m/